npm - @metamask/design-system-react - Versions diffs - 0.21.0 → 0.23.0 - Mend

@metamask/design-system-react 0.21.0 → 0.23.0

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 (342) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -7,6 +7,32 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
+## [0.23.0]
+### Added
+- Added `PopoverHeader` for popover title rows and trailing actions, aligned with MetaMask extension screen patterns ([#1158](https://github.com/MetaMask/metamask-design-system/pull/1158))
+- Added `ModalHeader` for modal title rows and accessory slots, aligned with MetaMask extension screen patterns ([#1144](https://github.com/MetaMask/metamask-design-system/pull/1144))
+- Added `Label` for accessible captions paired with form controls ([#1152](https://github.com/MetaMask/metamask-design-system/pull/1152))
+- Added `SensitiveText` for masking and revealing sensitive strings (addresses, secrets, recovery phrases) with configurable visible length ([#1164](https://github.com/MetaMask/metamask-design-system/pull/1164))
+- Added `HelpText` for helper, success, warning, and error copy beneath inputs and other controls ([#1169](https://github.com/MetaMask/metamask-design-system/pull/1169))
+### Changed
+- `ButtonBase` now derives label typography, start and end icon sizes, and internal spacing from the `size` prop for every supported `ButtonBaseSize`, keeping defaults aligned without manual per-size tuning ([#1150](https://github.com/MetaMask/metamask-design-system/pull/1150))
+  - If you wrap **`ButtonBase`** and override label, icon, or spacing, see [Migration guide](./MIGRATION.md#buttonbase-size-defaults).
+- `BannerBase` close control behavior is simplified and aligned with the shared dismiss contract ([#1166](https://github.com/MetaMask/metamask-design-system/pull/1166))
+## [0.22.0]
+### Added
+- Added `Modal` and `useModalContext` for composing modal dialogs with focus management and the same layout patterns used in the MetaMask extension migration ([#1136](https://github.com/MetaMask/metamask-design-system/pull/1136))
+- Added `ModalContent` (with `ModalContentSize` and `MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR`) for sized modal bodies, entrance motion, and outside-click handling aligned with that migration ([#1139](https://github.com/MetaMask/metamask-design-system/pull/1139))
+- Added `Skeleton` for loading placeholders ([#1146](https://github.com/MetaMask/metamask-design-system/pull/1146))
+- Added `HeaderBase` for flexible header layouts when migrating extension screens into the design system ([#1142](https://github.com/MetaMask/metamask-design-system/pull/1142))
+- Added `ListArrow`, `Musd`, and `MusdFilled` icons; refreshed `Candlestick`; and added `Group`, `PieChart`, and `Predictions` icons ([#1157](https://github.com/MetaMask/metamask-design-system/pull/1157), [#1161](https://github.com/MetaMask/metamask-design-system/pull/1161), [#1162](https://github.com/MetaMask/metamask-design-system/pull/1162), [#1163](https://github.com/MetaMask/metamask-design-system/pull/1163))
 ## [0.21.0]
 ### Added
@@ -294,7 +320,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Full TypeScript support with type definitions and enums
 - Tailwind CSS integration with design token support
-[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.21.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.23.0...HEAD
+[0.23.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.22.0...@metamask/design-system-react@0.23.0
+[0.22.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.21.0...@metamask/design-system-react@0.22.0
 [0.21.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.20.0...@metamask/design-system-react@0.21.0
 [0.20.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.19.0...@metamask/design-system-react@0.20.0
 [0.19.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.18.0...@metamask/design-system-react@0.19.0

package/dist/components/BannerAlert/BannerAlert.d.cts CHANGED Viewed

@@ -9,7 +9,6 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
     onClose?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     closeButtonProps?: (Omit<Partial<import("../index.cjs").ButtonIconProps>, "onClick" | "iconName"> & {
         'data-testid'?: string | undefined;
-        onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     }) | undefined;
 } & {
     actionButtonOnClick: React.MouseEventHandler<HTMLButtonElement>;
@@ -291,11 +290,11 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../index.cjs").TextProps> | undefined;
         isLoading?: boolean | undefined;
         loadingText?: string | undefined;
-        isDisabled?: boolean | undefined;
         isFullWidth?: boolean | undefined;
         loadingTextProps?: Partial<import("../index.cjs").TextProps> | undefined;
         startIconName?: import("@metamask/design-system-shared").IconName | undefined;
@@ -319,7 +318,6 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
     onClose?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     closeButtonProps?: (Omit<Partial<import("../index.cjs").ButtonIconProps>, "onClick" | "iconName"> & {
         'data-testid'?: string | undefined;
-        onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     }) | undefined;
 } & {
     actionButtonOnClick?: undefined;
@@ -601,11 +599,11 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../index.cjs").TextProps> | undefined;
         isLoading?: boolean | undefined;
         loadingText?: string | undefined;
-        isDisabled?: boolean | undefined;
         isFullWidth?: boolean | undefined;
         loadingTextProps?: Partial<import("../index.cjs").TextProps> | undefined;
         startIconName?: import("@metamask/design-system-shared").IconName | undefined;

package/dist/components/BannerAlert/BannerAlert.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerAlert.d.cts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,uCAAuC;AACrE,OAAO,KAAqB,cAAc;AAe1C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA8BvB,CAAC"}
1	+ {"version":3,"file":"BannerAlert.d.cts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,uCAAuC;AACrE,OAAO,KAAqB,cAAc;AAe1C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA8BvB,CAAC"}

package/dist/components/BannerAlert/BannerAlert.d.mts CHANGED Viewed

@@ -9,7 +9,6 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
     onClose?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     closeButtonProps?: (Omit<Partial<import("../index.mjs").ButtonIconProps>, "onClick" | "iconName"> & {
         'data-testid'?: string | undefined;
-        onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     }) | undefined;
 } & {
     actionButtonOnClick: React.MouseEventHandler<HTMLButtonElement>;
@@ -291,11 +290,11 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../index.mjs").TextProps> | undefined;
         isLoading?: boolean | undefined;
         loadingText?: string | undefined;
-        isDisabled?: boolean | undefined;
         isFullWidth?: boolean | undefined;
         loadingTextProps?: Partial<import("../index.mjs").TextProps> | undefined;
         startIconName?: import("@metamask/design-system-shared").IconName | undefined;
@@ -319,7 +318,6 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
     onClose?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     closeButtonProps?: (Omit<Partial<import("../index.mjs").ButtonIconProps>, "onClick" | "iconName"> & {
         'data-testid'?: string | undefined;
-        onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     }) | undefined;
 } & {
     actionButtonOnClick?: undefined;
@@ -601,11 +599,11 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../index.mjs").TextProps> | undefined;
         isLoading?: boolean | undefined;
         loadingText?: string | undefined;
-        isDisabled?: boolean | undefined;
         isFullWidth?: boolean | undefined;
         loadingTextProps?: Partial<import("../index.mjs").TextProps> | undefined;
         startIconName?: import("@metamask/design-system-shared").IconName | undefined;

package/dist/components/BannerAlert/BannerAlert.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerAlert.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,uCAAuC;AACrE,OAAO,KAAqB,cAAc;AAe1C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA8BvB,CAAC"}
1	+ {"version":3,"file":"BannerAlert.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,uCAAuC;AACrE,OAAO,KAAqB,cAAc;AAe1C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA8BvB,CAAC"}

package/dist/components/BannerBase/BannerBase.cjs CHANGED Viewed

@@ -35,8 +35,8 @@ const isTextContent = (content) => typeof content === 'string' || typeof content
 const hasContent = (content) => content !== null && content !== undefined;
 exports.BannerBase = (0, react_1.forwardRef)(({ title, titleProps, description, descriptionProps, children, childrenWrapperProps, actionButtonLabel, actionButtonOnClick, actionButtonProps, startAccessory, onClose, closeButtonProps, className, ...props }, ref) => {
     const resolvedActionButtonProps = actionButtonProps ?? {};
-    const { ariaLabel: closeButtonAriaLabel = 'Close banner', onClick: closeButtonPropsOnClick, className: closeButtonClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
-    const shouldShowCloseButton = Boolean(onClose || closeButtonProps);
+    const { ariaLabel: closeButtonAriaLabel = 'Close banner', className: closeButtonClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
+    const shouldShowCloseButton = Boolean(onClose);
     const shouldShowActionButton = Boolean(actionButtonOnClick);
     return (react_1.default.createElement(Box_1.Box, { ref: ref, flexDirection: design_system_shared_1.BoxFlexDirection.Row, alignItems: design_system_shared_1.BoxAlignItems.Start, gap: 2, backgroundColor: design_system_shared_1.BoxBackgroundColor.BackgroundDefault, padding: 3, className: (0, tw_merge_1.twMerge)('rounded-sm', className), ...props },
         startAccessory,
@@ -48,7 +48,7 @@ exports.BannerBase = (0, react_1.forwardRef)(({ title, titleProps, description,
                 (isTextContent(children) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodyMd, ...childrenWrapperProps }, children)) : (children)),
             shouldShowActionButton && (react_1.default.createElement(Box_1.Box, { className: "mt-4" },
                 react_1.default.createElement(Button_1.Button, { size: design_system_shared_1.ButtonSize.Md, onClick: actionButtonOnClick, ...resolvedActionButtonProps }, actionButtonLabel)))),
-        shouldShowCloseButton && (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { className: (0, tw_merge_1.twMerge)('ml-3 self-start', closeButtonClassName), iconName: design_system_shared_1.IconName.Close, size: design_system_shared_1.ButtonIconSize.Sm, ariaLabel: closeButtonAriaLabel, onClick: onClose ?? closeButtonPropsOnClick, ...resolvedCloseButtonProps }))));
+        shouldShowCloseButton && (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { className: (0, tw_merge_1.twMerge)('ml-3 self-start', closeButtonClassName), iconName: design_system_shared_1.IconName.Close, size: design_system_shared_1.ButtonIconSize.Sm, ariaLabel: closeButtonAriaLabel, onClick: onClose, ...resolvedCloseButtonProps }))));
 });
 exports.BannerBase.displayName = 'BannerBase';
 //# sourceMappingURL=BannerBase.cjs.map

package/dist/components/BannerBase/BannerBase.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEASwC;AACxC,+CAA0C;AAE1C,uDAA+C;AAC/C,0CAA6B;AAC7B,gDAAmC;AACnC,wDAA2C;AAC3C,4CAA+B;AAI/B,MAAM,aAAa,GAAG,CAAC,OAAwB,EAA8B,EAAE,CAC7E,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,OAAO,KAAK,QAAQ,CAAC;AAE7D,MAAM,UAAU,GAAG,CAAC,OAAwB,EAAE,EAAE,CAC9C,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,CAAC;AAE/B,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,KAAK,EACL,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,yBAAyB,GAAG,iBAAiB,IAAI,EAAE,CAAC;IAE1D,MAAM,EACJ,SAAS,EAAE,oBAAoB,GAAG,cAAc,EAChD,~~OAAO,EAAE,uBAAuB,EAChC,~~SAAS,EAAE,oBAAoB,EAC/B,GAAG,wBAAwB,EAC5B,GAAG,gBAAgB,IAAI,EAAE,CAAC;IAE3B,MAAM,qBAAqB,GAAG,OAAO,CAAC,OAAO,~~IAAI,gBAAgB,~~CAAC,CAAC;~~IACnE~~,MAAM,sBAAsB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAE5D,OAAO,CACL,8BAAC,SAAG,IACF,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,uCAAgB,CAAC,GAAG,EACnC,UAAU,EAAE,oCAAa,CAAC,KAAK,EAC/B,GAAG,EAAE,CAAC,EACN,eAAe,EAAE,yCAAkB,CAAC,iBAAiB,EACrD,OAAO,EAAE,CAAC,EACV,SAAS,EAAE,IAAA,kBAAO,EAAC,YAAY,EAAE,SAAS,CAAC,KACvC,KAAK;QAER,cAAc;QAEf,8BAAC,SAAG,IAAC,SAAS,EAAC,gBAAgB;YAC5B,UAAU,CAAC,KAAK,CAAC;gBAChB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,8BAAC,WAAI,IACH,OAAO,EAAE,kCAAW,CAAC,MAAM,EAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM,KACzB,UAAU,IAEb,KAAK,CACD,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,CAAC;YAEH,UAAU,CAAC,WAAW,CAAC,IAAI,CAC1B,8BAAC,SAAG,IAAC,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IACnD,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAC5B,8BAAC,WAAI,IAAC,OAAO,EAAE,kCAAW,CAAC,MAAM,KAAM,gBAAgB,IACpD,WAAW,CACP,CACR,CAAC,CAAC,CAAC,CACF,WAAW,CACZ,CACG,CACP;YAEA,UAAU,CAAC,QAAQ,CAAC;gBACnB,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CACzB,8BAAC,WAAI,IAAC,OAAO,EAAE,kCAAW,CAAC,MAAM,KAAM,oBAAoB,IACxD,QAAQ,CACJ,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;YAEH,sBAAsB,IAAI,CACzB,8BAAC,SAAG,IAAC,SAAS,EAAC,MAAM;gBACnB,8BAAC,eAAM,IACL,IAAI,EAAE,iCAAU,CAAC,EAAE,EACnB,OAAO,EAAE,mBAAmB,KACxB,yBAAyB,IAE5B,iBAAiB,CACX,CACL,CACP,CACG;QAEL,qBAAqB,IAAI,CACxB,8BAAC,uBAAU,IACT,SAAS,EAAE,IAAA,kBAAO,EAAC,iBAAiB,EAAE,oBAAoB,CAAC,EAC3D,QAAQ,EAAE,+BAAQ,CAAC,KAAK,EACxB,IAAI,EAAE,qCAAc,CAAC,EAAE,EACvB,SAAS,EAAE,oBAAoB,EAC/B,OAAO,EAAE,OAAO,~~IAAI~~,~~uBAAuB,KACvC,~~wBAAwB,GAC5B,CACH,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n ButtonIconSize,\n ButtonSize,\n FontWeight,\n IconName,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string \| number =>\n typeof content === 'string' \|\| typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n (\n {\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n startAccessory,\n onClose,\n closeButtonProps,\n className,\n ...props\n },\n ref,\n ) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n ariaLabel: closeButtonAriaLabel = 'Close banner',\n ~~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	+ {"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 TextVariant,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string \| number =>\n typeof content === 'string' \|\| typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n (\n {\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n startAccessory,\n onClose,\n closeButtonProps,\n className,\n ...props\n },\n ref,\n ) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n ariaLabel: closeButtonAriaLabel = 'Close banner',\n className: closeButtonClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose);\n const shouldShowActionButton = Boolean(actionButtonOnClick);\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={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}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}

package/dist/components/BannerBase/BannerBase.d.cts CHANGED Viewed

@@ -7,7 +7,6 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
     onClose?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     closeButtonProps?: (Omit<Partial<import("../ButtonIcon/index.cjs").ButtonIconProps>, "onClick" | "iconName"> & {
         'data-testid'?: string | undefined;
-        onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     }) | undefined;
 } & {
     actionButtonOnClick: React.MouseEventHandler<HTMLButtonElement>;
@@ -289,11 +288,11 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../Text/index.cjs").TextProps> | undefined;
         isLoading?: boolean | undefined;
         loadingText?: string | undefined;
-        isDisabled?: boolean | undefined;
         isFullWidth?: boolean | undefined;
         loadingTextProps?: Partial<import("../Text/index.cjs").TextProps> | undefined;
         startIconName?: IconName | undefined;
@@ -313,7 +312,6 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
     onClose?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     closeButtonProps?: (Omit<Partial<import("../ButtonIcon/index.cjs").ButtonIconProps>, "onClick" | "iconName"> & {
         'data-testid'?: string | undefined;
-        onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     }) | undefined;
 } & {
     actionButtonOnClick?: undefined;
@@ -595,11 +593,11 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../Text/index.cjs").TextProps> | undefined;
         isLoading?: boolean | undefined;
         loadingText?: string | undefined;
-        isDisabled?: boolean | undefined;
         isFullWidth?: boolean | undefined;
         loadingTextProps?: Partial<import("../Text/index.cjs").TextProps> | undefined;
         startIconName?: IconName | undefined;

package/dist/components/BannerBase/BannerBase.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,QAAQ,EAET,uCAAuC;AACxC,OAAO,KAAqB,cAAc;AAgB1C,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA0GtB,CAAC"}
1	+ {"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,QAAQ,EAET,uCAAuC;AACxC,OAAO,KAAqB,cAAc;AAgB1C,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDAyGtB,CAAC"}

package/dist/components/BannerBase/BannerBase.d.mts CHANGED Viewed

@@ -7,7 +7,6 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
     onClose?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     closeButtonProps?: (Omit<Partial<import("../ButtonIcon/index.mjs").ButtonIconProps>, "onClick" | "iconName"> & {
         'data-testid'?: string | undefined;
-        onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     }) | undefined;
 } & {
     actionButtonOnClick: React.MouseEventHandler<HTMLButtonElement>;
@@ -289,11 +288,11 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../Text/index.mjs").TextProps> | undefined;
         isLoading?: boolean | undefined;
         loadingText?: string | undefined;
-        isDisabled?: boolean | undefined;
         isFullWidth?: boolean | undefined;
         loadingTextProps?: Partial<import("../Text/index.mjs").TextProps> | undefined;
         startIconName?: IconName | undefined;
@@ -313,7 +312,6 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
     onClose?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     closeButtonProps?: (Omit<Partial<import("../ButtonIcon/index.mjs").ButtonIconProps>, "onClick" | "iconName"> & {
         'data-testid'?: string | undefined;
-        onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     }) | undefined;
 } & {
     actionButtonOnClick?: undefined;
@@ -595,11 +593,11 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../Text/index.mjs").TextProps> | undefined;
         isLoading?: boolean | undefined;
         loadingText?: string | undefined;
-        isDisabled?: boolean | undefined;
         isFullWidth?: boolean | undefined;
         loadingTextProps?: Partial<import("../Text/index.mjs").TextProps> | undefined;
         startIconName?: IconName | undefined;

package/dist/components/BannerBase/BannerBase.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,QAAQ,EAET,uCAAuC;AACxC,OAAO,KAAqB,cAAc;AAgB1C,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA0GtB,CAAC"}
1	+ {"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,QAAQ,EAET,uCAAuC;AACxC,OAAO,KAAqB,cAAc;AAgB1C,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDAyGtB,CAAC"}

package/dist/components/BannerBase/BannerBase.mjs CHANGED Viewed

@@ -16,8 +16,8 @@ const isTextContent = (content) => typeof content === 'string' || typeof content
 const hasContent = (content) => content !== null && content !== undefined;
 export const BannerBase = forwardRef(({ title, titleProps, description, descriptionProps, children, childrenWrapperProps, actionButtonLabel, actionButtonOnClick, actionButtonProps, startAccessory, onClose, closeButtonProps, className, ...props }, ref) => {
     const resolvedActionButtonProps = actionButtonProps ?? {};
-    const { ariaLabel: closeButtonAriaLabel = 'Close banner', onClick: closeButtonPropsOnClick, className: closeButtonClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
-    const shouldShowCloseButton = Boolean(onClose || closeButtonProps);
+    const { ariaLabel: closeButtonAriaLabel = 'Close banner', className: closeButtonClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
+    const shouldShowCloseButton = Boolean(onClose);
     const shouldShowActionButton = Boolean(actionButtonOnClick);
     return (React.createElement(Box, { ref: ref, flexDirection: BoxFlexDirection.Row, alignItems: BoxAlignItems.Start, gap: 2, backgroundColor: BoxBackgroundColor.BackgroundDefault, padding: 3, className: twMerge('rounded-sm', className), ...props },
         startAccessory,
@@ -29,7 +29,7 @@ export const BannerBase = forwardRef(({ title, titleProps, description, descript
                 (isTextContent(children) ? (React.createElement(Text, { variant: TextVariant.BodyMd, ...childrenWrapperProps }, children)) : (children)),
             shouldShowActionButton && (React.createElement(Box, { className: "mt-4" },
                 React.createElement(Button, { size: ButtonSize.Md, onClick: actionButtonOnClick, ...resolvedActionButtonProps }, actionButtonLabel)))),
-        shouldShowCloseButton && (React.createElement(ButtonIcon, { className: twMerge('ml-3 self-start', closeButtonClassName), iconName: IconName.Close, size: ButtonIconSize.Sm, ariaLabel: closeButtonAriaLabel, onClick: onClose ?? closeButtonPropsOnClick, ...resolvedCloseButtonProps }))));
+        shouldShowCloseButton && (React.createElement(ButtonIcon, { className: twMerge('ml-3 self-start', closeButtonClassName), iconName: IconName.Close, size: ButtonIconSize.Sm, ariaLabel: closeButtonAriaLabel, onClick: onClose, ...resolvedCloseButtonProps }))));
 });
 BannerBase.displayName = 'BannerBase';
 //# sourceMappingURL=BannerBase.mjs.map

package/dist/components/BannerBase/BannerBase.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,UAAU,EACV,QAAQ,EACR,WAAW,EACZ,uCAAuC;AACxC,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAI/B,MAAM,aAAa,GAAG,CAAC,OAAwB,EAA8B,EAAE,CAC7E,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,OAAO,KAAK,QAAQ,CAAC;AAE7D,MAAM,UAAU,GAAG,CAAC,OAAwB,EAAE,EAAE,CAC9C,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,CAAC;AAE5C,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,KAAK,EACL,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,yBAAyB,GAAG,iBAAiB,IAAI,EAAE,CAAC;IAE1D,MAAM,EACJ,SAAS,EAAE,oBAAoB,GAAG,cAAc,EAChD,~~OAAO,EAAE,uBAAuB,EAChC,~~SAAS,EAAE,oBAAoB,EAC/B,GAAG,wBAAwB,EAC5B,GAAG,gBAAgB,IAAI,EAAE,CAAC;IAE3B,MAAM,qBAAqB,GAAG,OAAO,CAAC,OAAO,~~IAAI,gBAAgB,~~CAAC,CAAC;~~IACnE~~,MAAM,sBAAsB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAE5D,OAAO,CACL,oBAAC,GAAG,IACF,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,gBAAgB,CAAC,GAAG,EACnC,UAAU,EAAE,aAAa,CAAC,KAAK,EAC/B,GAAG,EAAE,CAAC,EACN,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,EACrD,OAAO,EAAE,CAAC,EACV,SAAS,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,KACvC,KAAK;QAER,cAAc;QAEf,oBAAC,GAAG,IAAC,SAAS,EAAC,gBAAgB;YAC5B,UAAU,CAAC,KAAK,CAAC;gBAChB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,oBAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,MAAM,EAC3B,UAAU,EAAE,UAAU,CAAC,MAAM,KACzB,UAAU,IAEb,KAAK,CACD,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,CAAC;YAEH,UAAU,CAAC,WAAW,CAAC,IAAI,CAC1B,oBAAC,GAAG,IAAC,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IACnD,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAC5B,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,MAAM,KAAM,gBAAgB,IACpD,WAAW,CACP,CACR,CAAC,CAAC,CAAC,CACF,WAAW,CACZ,CACG,CACP;YAEA,UAAU,CAAC,QAAQ,CAAC;gBACnB,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CACzB,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,MAAM,KAAM,oBAAoB,IACxD,QAAQ,CACJ,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;YAEH,sBAAsB,IAAI,CACzB,oBAAC,GAAG,IAAC,SAAS,EAAC,MAAM;gBACnB,oBAAC,MAAM,IACL,IAAI,EAAE,UAAU,CAAC,EAAE,EACnB,OAAO,EAAE,mBAAmB,KACxB,yBAAyB,IAE5B,iBAAiB,CACX,CACL,CACP,CACG;QAEL,qBAAqB,IAAI,CACxB,oBAAC,UAAU,IACT,SAAS,EAAE,OAAO,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,EAC3D,QAAQ,EAAE,QAAQ,CAAC,KAAK,EACxB,IAAI,EAAE,cAAc,CAAC,EAAE,EACvB,SAAS,EAAE,oBAAoB,EAC/B,OAAO,EAAE,OAAO,~~IAAI~~,~~uBAAuB,KACvC,~~wBAAwB,GAC5B,CACH,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n ButtonIconSize,\n ButtonSize,\n FontWeight,\n IconName,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string \| number =>\n typeof content === 'string' \|\| typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n (\n {\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n startAccessory,\n onClose,\n closeButtonProps,\n className,\n ...props\n },\n ref,\n ) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n ariaLabel: closeButtonAriaLabel = 'Close banner',\n ~~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	+ {"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,UAAU,EACV,QAAQ,EACR,WAAW,EACZ,uCAAuC;AACxC,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAI/B,MAAM,aAAa,GAAG,CAAC,OAAwB,EAA8B,EAAE,CAC7E,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,OAAO,KAAK,QAAQ,CAAC;AAE7D,MAAM,UAAU,GAAG,CAAC,OAAwB,EAAE,EAAE,CAC9C,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,CAAC;AAE5C,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,KAAK,EACL,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,yBAAyB,GAAG,iBAAiB,IAAI,EAAE,CAAC;IAE1D,MAAM,EACJ,SAAS,EAAE,oBAAoB,GAAG,cAAc,EAChD,SAAS,EAAE,oBAAoB,EAC/B,GAAG,wBAAwB,EAC5B,GAAG,gBAAgB,IAAI,EAAE,CAAC;IAE3B,MAAM,qBAAqB,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/C,MAAM,sBAAsB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAE5D,OAAO,CACL,oBAAC,GAAG,IACF,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,gBAAgB,CAAC,GAAG,EACnC,UAAU,EAAE,aAAa,CAAC,KAAK,EAC/B,GAAG,EAAE,CAAC,EACN,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,EACrD,OAAO,EAAE,CAAC,EACV,SAAS,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,KACvC,KAAK;QAER,cAAc;QAEf,oBAAC,GAAG,IAAC,SAAS,EAAC,gBAAgB;YAC5B,UAAU,CAAC,KAAK,CAAC;gBAChB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,oBAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,MAAM,EAC3B,UAAU,EAAE,UAAU,CAAC,MAAM,KACzB,UAAU,IAEb,KAAK,CACD,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,CAAC;YAEH,UAAU,CAAC,WAAW,CAAC,IAAI,CAC1B,oBAAC,GAAG,IAAC,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IACnD,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAC5B,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,MAAM,KAAM,gBAAgB,IACpD,WAAW,CACP,CACR,CAAC,CAAC,CAAC,CACF,WAAW,CACZ,CACG,CACP;YAEA,UAAU,CAAC,QAAQ,CAAC;gBACnB,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CACzB,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,MAAM,KAAM,oBAAoB,IACxD,QAAQ,CACJ,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;YAEH,sBAAsB,IAAI,CACzB,oBAAC,GAAG,IAAC,SAAS,EAAC,MAAM;gBACnB,oBAAC,MAAM,IACL,IAAI,EAAE,UAAU,CAAC,EAAE,EACnB,OAAO,EAAE,mBAAmB,KACxB,yBAAyB,IAE5B,iBAAiB,CACX,CACL,CACP,CACG;QAEL,qBAAqB,IAAI,CACxB,oBAAC,UAAU,IACT,SAAS,EAAE,OAAO,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,EAC3D,QAAQ,EAAE,QAAQ,CAAC,KAAK,EACxB,IAAI,EAAE,cAAc,CAAC,EAAE,EACvB,SAAS,EAAE,oBAAoB,EAC/B,OAAO,EAAE,OAAO,KACZ,wBAAwB,GAC5B,CACH,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n ButtonIconSize,\n ButtonSize,\n FontWeight,\n IconName,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string \| number =>\n typeof content === 'string' \|\| typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n (\n {\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n startAccessory,\n onClose,\n closeButtonProps,\n className,\n ...props\n },\n ref,\n ) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n ariaLabel: closeButtonAriaLabel = 'Close banner',\n className: closeButtonClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose);\n const shouldShowActionButton = Boolean(actionButtonOnClick);\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={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}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}

package/dist/components/BannerBase/BannerBase.types.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerBase.types.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BannerBasePropsShared } from '@metamask/design-system-shared';\nimport type { MouseEventHandler } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport type { ButtonProps } from '../Button';\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport type { TextProps } from '../Text';\n\ntype BannerBaseActionButtonProps = Omit<\n Partial<ButtonProps>,\n 'children' \| 'onClick' \| 'variant'\n>;\n\ntype BannerBaseCloseButtonProps = Omit<\n Partial<ButtonIconProps>,\n 'iconName' \| 'onClick'\n> & {\n /*\n Optional test id for the close button element.\n /\n 'data-testid'?: string;\n ~~/\n Optional click handler for the close button.\n /\n onClick?: MouseEventHandler<HTMLButtonElement>;\n~~};\n\ntype BannerBasePropsBase = BannerBasePropsShared &\n Omit<BoxProps, 'children'> & {\n /\n Optional props for the title `Text` when the title is a string.\n /\n titleProps?: Partial<TextProps>;\n /\n Optional props for the description `Text` when description is a string.\n /\n descriptionProps?: Partial<TextProps>;\n /\n Optional props for the children wrapper `Text` when children is a string.\n /\n childrenWrapperProps?: Partial<TextProps>;\n /\n Optional click handler for the close button.\n * If provided, a close button is shown.\n /\n onClose?: MouseEventHandler<HTMLButtonElement>;\n /\n Optional props for the close `ButtonIcon`.\n * ~~Providing~~ ~~this~~ ~~also~~ ~~shows~~ a ~~close button~~.\n */\n closeButtonProps?: BannerBaseCloseButtonProps;\n };\n\ntype BannerBaseActionPropsWithHandler = {\n actionButtonOnClick: MouseEventHandler<HTMLButtonElement>;\n actionButtonLabel: string;\n actionButtonProps?: BannerBaseActionButtonProps;\n};\n\ntype BannerBaseActionPropsWithoutHandler = {\n actionButtonOnClick?: undefined;\n actionButtonLabel?: string;\n actionButtonProps?: BannerBaseActionButtonProps;\n};\n\nexport type BannerBaseProps = BannerBasePropsBase &\n (BannerBaseActionPropsWithHandler \| BannerBaseActionPropsWithoutHandler);\n"]}
1	+ {"version":3,"file":"BannerBase.types.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BannerBasePropsShared } from '@metamask/design-system-shared';\nimport type { MouseEventHandler } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport type { ButtonProps } from '../Button';\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport type { TextProps } from '../Text';\n\ntype BannerBaseActionButtonProps = Omit<\n Partial<ButtonProps>,\n 'children' \| 'onClick' \| 'variant'\n>;\n\ntype BannerBaseCloseButtonProps = Omit<\n Partial<ButtonIconProps>,\n 'iconName' \| 'onClick'\n> & {\n /*\n Optional test id for the close button element.\n /\n 'data-testid'?: string;\n};\n\ntype BannerBasePropsBase = BannerBasePropsShared &\n Omit<BoxProps, 'children'> & {\n /\n Optional props for the title `Text` when the title is a string.\n /\n titleProps?: Partial<TextProps>;\n /\n Optional props for the description `Text` when description is a string.\n /\n descriptionProps?: Partial<TextProps>;\n /\n Optional props for the children wrapper `Text` when children is a string.\n /\n childrenWrapperProps?: Partial<TextProps>;\n /\n Optional click handler for the close button.\n * If provided, a close button is shown.\n /\n onClose?: MouseEventHandler<HTMLButtonElement>;\n /\n Optional props for the close `ButtonIcon`.\n * Only used when `onClose` is provided.\n */\n closeButtonProps?: BannerBaseCloseButtonProps;\n };\n\ntype BannerBaseActionPropsWithHandler = {\n actionButtonOnClick: MouseEventHandler<HTMLButtonElement>;\n actionButtonLabel: string;\n actionButtonProps?: BannerBaseActionButtonProps;\n};\n\ntype BannerBaseActionPropsWithoutHandler = {\n actionButtonOnClick?: undefined;\n actionButtonLabel?: string;\n actionButtonProps?: BannerBaseActionButtonProps;\n};\n\nexport type BannerBaseProps = BannerBasePropsBase &\n (BannerBaseActionPropsWithHandler \| BannerBaseActionPropsWithoutHandler);\n"]}

package/dist/components/BannerBase/BannerBase.types.d.cts CHANGED Viewed

@@ -10,10 +10,6 @@ type BannerBaseCloseButtonProps = Omit<Partial<ButtonIconProps>, 'iconName' | 'o
      * Optional test id for the close button element.
      */
     'data-testid'?: string;
-    /**
-     * Optional click handler for the close button.
-     */
-    onClick?: MouseEventHandler<HTMLButtonElement>;
 };
 type BannerBasePropsBase = BannerBasePropsShared & Omit<BoxProps, 'children'> & {
     /**
@@ -35,7 +31,7 @@ type BannerBasePropsBase = BannerBasePropsShared & Omit<BoxProps, 'children'> &
     onClose?: MouseEventHandler<HTMLButtonElement>;
     /**
      * Optional props for the close `ButtonIcon`.
-     * Providing this also shows a close button.
+     * Only used when `onClose` is provided.
      */
     closeButtonProps?: BannerBaseCloseButtonProps;
 };

package/dist/components/BannerBase/BannerBase.types.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,uCAAuC;AAC5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc;AAE/C,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAe;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,4BAAkB;AAC7C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,KAAK,2BAA2B,GAAG,IAAI,CACrC,OAAO,CAAC,WAAW,CAAC,EACpB,UAAU,GAAG,SAAS,GAAG,SAAS,CACnC,CAAC;AAEF,KAAK,0BAA0B,GAAG,IAAI,CACpC,OAAO,CAAC,eAAe,CAAC,EACxB,UAAU,GAAG,SAAS,CACvB,GAAG;IACF;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;~~IACvB;;OAEG;IACH~~,~~OAAO,~~CAAC~~,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC~~;~~CAChD,CAAC;~~AAEF,KAAK,mBAAmB,GAAG,qBAAqB,GAC9C,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAChC;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,0BAA0B,CAAC;CAC/C,CAAC;AAEJ,KAAK,gCAAgC,GAAG;IACtC,mBAAmB,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,2BAA2B,CAAC;CACjD,CAAC;AAEF,KAAK,mCAAmC,GAAG;IACzC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,2BAA2B,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAC/C,CAAC,gCAAgC,GAAG,mCAAmC,CAAC,CAAC"}
1	+ {"version":3,"file":"BannerBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,uCAAuC;AAC5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc;AAE/C,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAe;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,4BAAkB;AAC7C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,KAAK,2BAA2B,GAAG,IAAI,CACrC,OAAO,CAAC,WAAW,CAAC,EACpB,UAAU,GAAG,SAAS,GAAG,SAAS,CACnC,CAAC;AAEF,KAAK,0BAA0B,GAAG,IAAI,CACpC,OAAO,CAAC,eAAe,CAAC,EACxB,UAAU,GAAG,SAAS,CACvB,GAAG;IACF;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,mBAAmB,GAAG,qBAAqB,GAC9C,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAChC;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,0BAA0B,CAAC;CAC/C,CAAC;AAEJ,KAAK,gCAAgC,GAAG;IACtC,mBAAmB,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,2BAA2B,CAAC;CACjD,CAAC;AAEF,KAAK,mCAAmC,GAAG;IACzC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,2BAA2B,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAC/C,CAAC,gCAAgC,GAAG,mCAAmC,CAAC,CAAC"}

package/dist/components/BannerBase/BannerBase.types.d.mts CHANGED Viewed

@@ -10,10 +10,6 @@ type BannerBaseCloseButtonProps = Omit<Partial<ButtonIconProps>, 'iconName' | 'o
      * Optional test id for the close button element.
      */
     'data-testid'?: string;
-    /**
-     * Optional click handler for the close button.
-     */
-    onClick?: MouseEventHandler<HTMLButtonElement>;
 };
 type BannerBasePropsBase = BannerBasePropsShared & Omit<BoxProps, 'children'> & {
     /**
@@ -35,7 +31,7 @@ type BannerBasePropsBase = BannerBasePropsShared & Omit<BoxProps, 'children'> &
     onClose?: MouseEventHandler<HTMLButtonElement>;
     /**
      * Optional props for the close `ButtonIcon`.
-     * Providing this also shows a close button.
+     * Only used when `onClose` is provided.
      */
     closeButtonProps?: BannerBaseCloseButtonProps;
 };

package/dist/components/BannerBase/BannerBase.types.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,uCAAuC;AAC5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc;AAE/C,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAe;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,4BAAkB;AAC7C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,KAAK,2BAA2B,GAAG,IAAI,CACrC,OAAO,CAAC,WAAW,CAAC,EACpB,UAAU,GAAG,SAAS,GAAG,SAAS,CACnC,CAAC;AAEF,KAAK,0BAA0B,GAAG,IAAI,CACpC,OAAO,CAAC,eAAe,CAAC,EACxB,UAAU,GAAG,SAAS,CACvB,GAAG;IACF;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;~~IACvB;;OAEG;IACH~~,~~OAAO,~~CAAC~~,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC~~;~~CAChD,CAAC;~~AAEF,KAAK,mBAAmB,GAAG,qBAAqB,GAC9C,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAChC;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,0BAA0B,CAAC;CAC/C,CAAC;AAEJ,KAAK,gCAAgC,GAAG;IACtC,mBAAmB,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,2BAA2B,CAAC;CACjD,CAAC;AAEF,KAAK,mCAAmC,GAAG;IACzC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,2BAA2B,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAC/C,CAAC,gCAAgC,GAAG,mCAAmC,CAAC,CAAC"}
1	+ {"version":3,"file":"BannerBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,uCAAuC;AAC5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc;AAE/C,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAe;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,4BAAkB;AAC7C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,KAAK,2BAA2B,GAAG,IAAI,CACrC,OAAO,CAAC,WAAW,CAAC,EACpB,UAAU,GAAG,SAAS,GAAG,SAAS,CACnC,CAAC;AAEF,KAAK,0BAA0B,GAAG,IAAI,CACpC,OAAO,CAAC,eAAe,CAAC,EACxB,UAAU,GAAG,SAAS,CACvB,GAAG;IACF;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,mBAAmB,GAAG,qBAAqB,GAC9C,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAChC;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,0BAA0B,CAAC;CAC/C,CAAC;AAEJ,KAAK,gCAAgC,GAAG;IACtC,mBAAmB,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,2BAA2B,CAAC;CACjD,CAAC;AAEF,KAAK,mCAAmC,GAAG;IACzC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,2BAA2B,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAC/C,CAAC,gCAAgC,GAAG,mCAAmC,CAAC,CAAC"}

package/dist/components/BannerBase/BannerBase.types.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerBase.types.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BannerBasePropsShared } from '@metamask/design-system-shared';\nimport type { MouseEventHandler } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport type { ButtonProps } from '../Button';\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport type { TextProps } from '../Text';\n\ntype BannerBaseActionButtonProps = Omit<\n Partial<ButtonProps>,\n 'children' \| 'onClick' \| 'variant'\n>;\n\ntype BannerBaseCloseButtonProps = Omit<\n Partial<ButtonIconProps>,\n 'iconName' \| 'onClick'\n> & {\n /*\n Optional test id for the close button element.\n /\n 'data-testid'?: string;\n ~~/\n Optional click handler for the close button.\n /\n onClick?: MouseEventHandler<HTMLButtonElement>;\n~~};\n\ntype BannerBasePropsBase = BannerBasePropsShared &\n Omit<BoxProps, 'children'> & {\n /\n Optional props for the title `Text` when the title is a string.\n /\n titleProps?: Partial<TextProps>;\n /\n Optional props for the description `Text` when description is a string.\n /\n descriptionProps?: Partial<TextProps>;\n /\n Optional props for the children wrapper `Text` when children is a string.\n /\n childrenWrapperProps?: Partial<TextProps>;\n /\n Optional click handler for the close button.\n * If provided, a close button is shown.\n /\n onClose?: MouseEventHandler<HTMLButtonElement>;\n /\n Optional props for the close `ButtonIcon`.\n * ~~Providing~~ ~~this~~ ~~also~~ ~~shows~~ a ~~close button~~.\n */\n closeButtonProps?: BannerBaseCloseButtonProps;\n };\n\ntype BannerBaseActionPropsWithHandler = {\n actionButtonOnClick: MouseEventHandler<HTMLButtonElement>;\n actionButtonLabel: string;\n actionButtonProps?: BannerBaseActionButtonProps;\n};\n\ntype BannerBaseActionPropsWithoutHandler = {\n actionButtonOnClick?: undefined;\n actionButtonLabel?: string;\n actionButtonProps?: BannerBaseActionButtonProps;\n};\n\nexport type BannerBaseProps = BannerBasePropsBase &\n (BannerBaseActionPropsWithHandler \| BannerBaseActionPropsWithoutHandler);\n"]}
1	+ {"version":3,"file":"BannerBase.types.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BannerBasePropsShared } from '@metamask/design-system-shared';\nimport type { MouseEventHandler } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport type { ButtonProps } from '../Button';\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport type { TextProps } from '../Text';\n\ntype BannerBaseActionButtonProps = Omit<\n Partial<ButtonProps>,\n 'children' \| 'onClick' \| 'variant'\n>;\n\ntype BannerBaseCloseButtonProps = Omit<\n Partial<ButtonIconProps>,\n 'iconName' \| 'onClick'\n> & {\n /*\n Optional test id for the close button element.\n /\n 'data-testid'?: string;\n};\n\ntype BannerBasePropsBase = BannerBasePropsShared &\n Omit<BoxProps, 'children'> & {\n /\n Optional props for the title `Text` when the title is a string.\n /\n titleProps?: Partial<TextProps>;\n /\n Optional props for the description `Text` when description is a string.\n /\n descriptionProps?: Partial<TextProps>;\n /\n Optional props for the children wrapper `Text` when children is a string.\n /\n childrenWrapperProps?: Partial<TextProps>;\n /\n Optional click handler for the close button.\n * If provided, a close button is shown.\n /\n onClose?: MouseEventHandler<HTMLButtonElement>;\n /\n Optional props for the close `ButtonIcon`.\n * Only used when `onClose` is provided.\n */\n closeButtonProps?: BannerBaseCloseButtonProps;\n };\n\ntype BannerBaseActionPropsWithHandler = {\n actionButtonOnClick: MouseEventHandler<HTMLButtonElement>;\n actionButtonLabel: string;\n actionButtonProps?: BannerBaseActionButtonProps;\n};\n\ntype BannerBaseActionPropsWithoutHandler = {\n actionButtonOnClick?: undefined;\n actionButtonLabel?: string;\n actionButtonProps?: BannerBaseActionButtonProps;\n};\n\nexport type BannerBaseProps = BannerBasePropsBase &\n (BannerBaseActionPropsWithHandler \| BannerBaseActionPropsWithoutHandler);\n"]}

package/dist/components/ButtonBase/ButtonBase.cjs CHANGED Viewed

@@ -34,6 +34,13 @@ const ButtonBase_constants_1 = require("./ButtonBase.constants.cjs");
 exports.ButtonBase = (0, react_1.forwardRef)(({ children, className, size = design_system_shared_1.ButtonBaseSize.Lg, isFullWidth, asChild, isDisabled, isLoading, loadingText, loadingIconProps, loadingTextProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, textProps, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-pressed': ariaPressed, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, 'aria-haspopup': ariaHaspopup, ...props }, ref) => {
     const Component = asChild ? react_slot_1.Slot : 'button';
     const isInteractive = !(isDisabled ?? isLoading);
+    const finalStartIconName = startIconName ?? startIconProps?.name;
+    const finalEndIconName = endIconName ?? endIconProps?.name;
+    const hasStart = Boolean(finalStartIconName || startAccessory);
+    const hasEnd = Boolean(finalEndIconName || endAccessory);
+    const hasAccessories = hasStart || hasEnd;
+    const iconSize = ButtonBase_constants_1.MAP_BUTTONBASE_SIZE_ICONSIZE[size];
+    const labelTextVariant = ButtonBase_constants_1.MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];
     // Calculate tabIndex based on asChild and disabled state
     const getTabIndex = () => {
         if (asChild) {
@@ -41,41 +48,42 @@ exports.ButtonBase = (0, react_1.forwardRef)(({ children, className, size = desi
         }
         return isDisabled ? -1 : undefined;
     };
+    const renderLabel = () => {
+        if (children && typeof children === 'string') {
+            return (react_1.default.createElement(Text_1.Text, { variant: labelTextVariant, fontWeight: Text_1.FontWeight.Medium, color: Text_1.TextColor.Inherit, asChild: true, ...textProps },
+                react_1.default.createElement("span", null, children)));
+        }
+        return children;
+    };
     const renderLoadingState = () => (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("span", { className: "absolute inline-flex items-center", "aria-hidden": "true" },
-            react_1.default.createElement(Icon_1.Icon, { name: design_system_shared_1.IconName.Loading, size: Icon_1.IconSize.Sm, className: (0, tw_merge_1.twMerge)('mr-2 animate-spin text-inherit', loadingIconProps?.className), ...loadingIconProps }),
-            react_1.default.createElement(Text_1.Text, { fontWeight: Text_1.FontWeight.Medium, color: Text_1.TextColor.Inherit, asChild: true, ...loadingTextProps },
+        react_1.default.createElement("span", { className: "absolute inline-flex items-center gap-x-1", "aria-hidden": "true" },
+            react_1.default.createElement(Icon_1.Icon, { name: design_system_shared_1.IconName.Loading, size: iconSize, className: (0, tw_merge_1.twMerge)('animate-spin text-inherit', loadingIconProps?.className), ...loadingIconProps }),
+            react_1.default.createElement(Text_1.Text, { variant: labelTextVariant, fontWeight: Text_1.FontWeight.Medium, color: Text_1.TextColor.Inherit, asChild: true, ...loadingTextProps },
                 react_1.default.createElement("span", null, loadingText))),
-        react_1.default.createElement("span", { className: "invisible inline-flex items-center" }, children),
+        react_1.default.createElement("span", { className: "invisible inline-flex items-center", "aria-hidden": "true" }, renderLabel()),
         react_1.default.createElement("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, loadingText || 'Loading')));
     const renderStartContent = () => {
-        if (startIconName) {
-            return (react_1.default.createElement(Icon_1.Icon, { name: startIconName, size: Icon_1.IconSize.Sm, className: (0, tw_merge_1.twMerge)('mr-2 shrink-0 text-inherit', startIconProps?.className), "aria-hidden": "true", ...startIconProps }));
+        if (finalStartIconName) {
+            return (react_1.default.createElement(Icon_1.Icon, { name: finalStartIconName, size: iconSize, className: (0, tw_merge_1.twMerge)('shrink-0 text-inherit', startIconProps?.className), "aria-hidden": "true", ...startIconProps }));
         }
         if (startAccessory) {
-            return (react_1.default.createElement("span", { className: "mr-2", "aria-hidden": "true" }, startAccessory));
+            return react_1.default.createElement("span", { "aria-hidden": "true" }, startAccessory);
         }
         return null;
     };
     const renderEndContent = () => {
-        if (endIconName) {
-            return (react_1.default.createElement(Icon_1.Icon, { name: endIconName, size: Icon_1.IconSize.Sm, className: (0, tw_merge_1.twMerge)('ml-2 shrink-0 text-inherit', endIconProps?.className), "aria-hidden": "true", ...endIconProps }));
+        if (finalEndIconName) {
+            return (react_1.default.createElement(Icon_1.Icon, { name: finalEndIconName, size: iconSize, className: (0, tw_merge_1.twMerge)('shrink-0 text-inherit', endIconProps?.className), "aria-hidden": "true", ...endIconProps }));
         }
         if (endAccessory) {
-            return (react_1.default.createElement("span", { className: "ml-2", "aria-hidden": "true" }, endAccessory));
+            return react_1.default.createElement("span", { "aria-hidden": "true" }, endAccessory);
         }
         return null;
     };
-    const renderContent = () => {
-        if (children && typeof children === 'string') {
-            return (react_1.default.createElement(Text_1.Text, { fontWeight: Text_1.FontWeight.Medium, color: Text_1.TextColor.Inherit, asChild: true, ...textProps },
-                react_1.default.createElement("span", null, children)));
-        }
-        return children;
-    };
+    const renderContent = () => renderLabel();
     const mergedClassName = (0, tw_merge_1.twMerge)(
     // Base styles
-    'inline-flex items-center justify-center', 'rounded-xl px-4', 'font-medium text-default', 'bg-muted', 'min-w-20 overflow-hidden',
+    'inline-flex items-center justify-center', (0, ButtonBase_constants_1.getButtonBaseBorderRadiusTwClass)(size), (0, ButtonBase_constants_1.getButtonBaseHorizontalPaddingTwClasses)(size, hasStart, hasEnd), hasAccessories && 'gap-x-1', 'font-medium text-default', 'bg-muted', 'overflow-hidden',
     // Add relative positioning for loading state
     'relative',
     // Size

package/dist/components/ButtonBase/ButtonBase.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonBase.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ButtonBaseSize, IconName } from '@metamask/design-system-shared';\nimport { Slot, Slottable } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconSize } from '../Icon';\nimport { Text, FontWeight, TextColor } from '../Text';\n\nimport { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(\n (\n {\n children,\n className,\n size = ButtonBaseSize.Lg,\n isFullWidth,\n asChild,\n isDisabled,\n isLoading,\n loadingText,\n loadingIconProps,\n loadingTextProps,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n textProps,\n style,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-pressed': ariaPressed,\n 'aria-expanded': ariaExpanded,\n 'aria-controls': ariaControls,\n 'aria-haspopup': ariaHaspopup,\n ...props\n },\n ref,\n ) => {\n const Component = asChild ? Slot : 'button';\n const isInteractive = !(isDisabled ?? isLoading);\n\n // Calculate tabIndex based on asChild and disabled state\n const getTabIndex = () => {\n if (asChild) {\n return undefined;\n }\n return isDisabled ? -1 : undefined;\n };\n\n const renderLoadingState = () => (\n <>\n <span className=\"absolute inline-flex items-center\" aria-hidden=\"true\">\n <Icon\n name={IconName.Loading}\n size={IconSize.Sm}\n className={twMerge(\n 'mr-2 animate-spin text-inherit',\n loadingIconProps?.className,\n )}\n {...loadingIconProps}\n />\n <Text\n fontWeight={FontWeight.Medium}\n color={TextColor.Inherit}\n asChild\n {...loadingTextProps}\n >\n <span>{loadingText}</span>\n </Text>\n </span>\n <span className=\"invisible inline-flex items-center\">{children}</span>\n {/* Screen reader announcement for loading */}\n <span className=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {loadingText \|\| 'Loading'}\n </span>\n </>\n );\n\n const renderStartContent = () => {\n if (startIconName) {\n return (\n <Icon\n name={startIconName}\n size={IconSize.Sm}\n className={twMerge(\n 'mr-2 shrink-0 text-inherit',\n startIconProps?.className,\n )}\n aria-hidden=\"true\"\n {...startIconProps}\n />\n );\n }\n if (startAccessory) {\n return (\n <span className=\"mr-2\" aria-hidden=\"true\">\n {startAccessory}\n </span>\n );\n }\n return null;\n };\n\n const renderEndContent = () => {\n if (endIconName) {\n return (\n <Icon\n name={endIconName}\n size={IconSize.Sm}\n className={twMerge(\n 'ml-2 shrink-0 text-inherit',\n endIconProps?.className,\n )}\n aria-hidden=\"true\"\n {...endIconProps}\n />\n );\n }\n if (endAccessory) {\n return (\n <span className=\"ml-2\" aria-hidden=\"true\">\n {endAccessory}\n </span>\n );\n }\n return null;\n };\n\n const renderContent = () => {\n if (children && typeof children === 'string') {\n return (\n <Text\n fontWeight={FontWeight.Medium}\n color={TextColor.Inherit}\n asChild\n {...textProps}\n >\n <span>{children}</span>\n </Text>\n );\n }\n return children;\n };\n\n const mergedClassName = twMerge(\n // Base styles\n 'inline-flex items-center justify-center',\n 'rounded-xl px-4',\n 'font-medium text-default',\n 'bg-muted',\n 'min-w-20 overflow-hidden',\n // Add relative positioning for loading state\n 'relative',\n // Size\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n // Full width\n isFullWidth && 'w-full',\n // Animation classes - only applied when interactive\n isInteractive && [\n 'transition-all',\n 'duration-100',\n 'ease-linear',\n 'active:scale-[0.97]',\n 'active:ease-[cubic-bezier(0.3,0.8,0.3,1)]',\n ],\n // Disabled state - apply to both isDisabled and isLoading\n (isDisabled \|\| isLoading) && 'cursor-not-allowed',\n isDisabled && 'opacity-50',\n // Custom classes\n className,\n );\n\n return (\n <Component\n ref={ref}\n className={mergedClassName}\n disabled={asChild ? undefined : (isDisabled ?? isLoading)}\n aria-disabled={isDisabled ? 'true' : undefined}\n aria-busy={isLoading ? 'true' : undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n aria-pressed={ariaPressed}\n aria-expanded={ariaExpanded}\n aria-controls={ariaControls}\n aria-haspopup={ariaHaspopup}\n role={asChild ? undefined : 'button'}\n tabIndex={getTabIndex()}\n style={style}\n {...props}\n >\n {renderStartContent()}\n <Slottable>\n {isLoading ? renderLoadingState() : renderContent()}\n </Slottable>\n {renderEndContent()}\n </Component>\n );\n },\n);\n\nButtonBase.displayName = 'ButtonBase';\n"]}
1	+ {"version":3,"file":"ButtonBase.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ButtonBaseSize, IconName } from '@metamask/design-system-shared';\nimport { Slot, Slottable } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon } from '../Icon';\nimport { Text, FontWeight, TextColor } from '../Text';\n\nimport {\n MAP_BUTTONBASE_SIZE_ICONSIZE,\n MAP_BUTTONBASE_SIZE_TEXT_VARIANT,\n getButtonBaseBorderRadiusTwClass,\n getButtonBaseHorizontalPaddingTwClasses,\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION,\n} from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(\n (\n {\n children,\n className,\n size = ButtonBaseSize.Lg,\n isFullWidth,\n asChild,\n isDisabled,\n isLoading,\n loadingText,\n loadingIconProps,\n loadingTextProps,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n textProps,\n style,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-pressed': ariaPressed,\n 'aria-expanded': ariaExpanded,\n 'aria-controls': ariaControls,\n 'aria-haspopup': ariaHaspopup,\n ...props\n },\n ref,\n ) => {\n const Component = asChild ? Slot : 'button';\n const isInteractive = !(isDisabled ?? isLoading);\n\n const finalStartIconName = startIconName ?? startIconProps?.name;\n const finalEndIconName = endIconName ?? endIconProps?.name;\n const hasStart = Boolean(finalStartIconName \|\| startAccessory);\n const hasEnd = Boolean(finalEndIconName \|\| endAccessory);\n const hasAccessories = hasStart \|\| hasEnd;\n const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];\n const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];\n\n // Calculate tabIndex based on asChild and disabled state\n const getTabIndex = () => {\n if (asChild) {\n return undefined;\n }\n return isDisabled ? -1 : undefined;\n };\n\n const renderLabel = () => {\n if (children && typeof children === 'string') {\n return (\n <Text\n variant={labelTextVariant}\n fontWeight={FontWeight.Medium}\n color={TextColor.Inherit}\n asChild\n {...textProps}\n >\n <span>{children}</span>\n </Text>\n );\n }\n return children;\n };\n\n const renderLoadingState = () => (\n <>\n <span\n className=\"absolute inline-flex items-center gap-x-1\"\n aria-hidden=\"true\"\n >\n <Icon\n name={IconName.Loading}\n size={iconSize}\n className={twMerge(\n 'animate-spin text-inherit',\n loadingIconProps?.className,\n )}\n {...loadingIconProps}\n />\n <Text\n variant={labelTextVariant}\n fontWeight={FontWeight.Medium}\n color={TextColor.Inherit}\n asChild\n {...loadingTextProps}\n >\n <span>{loadingText}</span>\n </Text>\n </span>\n <span className=\"invisible inline-flex items-center\" aria-hidden=\"true\">\n {renderLabel()}\n </span>\n {/* Screen reader announcement for loading */}\n <span className=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {loadingText \|\| 'Loading'}\n </span>\n </>\n );\n\n const renderStartContent = () => {\n if (finalStartIconName) {\n return (\n <Icon\n name={finalStartIconName}\n size={iconSize}\n className={twMerge(\n 'shrink-0 text-inherit',\n startIconProps?.className,\n )}\n aria-hidden=\"true\"\n {...startIconProps}\n />\n );\n }\n if (startAccessory) {\n return <span aria-hidden=\"true\">{startAccessory}</span>;\n }\n return null;\n };\n\n const renderEndContent = () => {\n if (finalEndIconName) {\n return (\n <Icon\n name={finalEndIconName}\n size={iconSize}\n className={twMerge(\n 'shrink-0 text-inherit',\n endIconProps?.className,\n )}\n aria-hidden=\"true\"\n {...endIconProps}\n />\n );\n }\n if (endAccessory) {\n return <span aria-hidden=\"true\">{endAccessory}</span>;\n }\n return null;\n };\n\n const renderContent = () => renderLabel();\n\n const mergedClassName = twMerge(\n // Base styles\n 'inline-flex items-center justify-center',\n getButtonBaseBorderRadiusTwClass(size),\n getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd),\n hasAccessories && 'gap-x-1',\n 'font-medium text-default',\n 'bg-muted',\n 'overflow-hidden',\n // Add relative positioning for loading state\n 'relative',\n // Size\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n // Full width\n isFullWidth && 'w-full',\n // Animation classes - only applied when interactive\n isInteractive && [\n 'transition-all',\n 'duration-100',\n 'ease-linear',\n 'active:scale-[0.97]',\n 'active:ease-[cubic-bezier(0.3,0.8,0.3,1)]',\n ],\n // Disabled state - apply to both isDisabled and isLoading\n (isDisabled \|\| isLoading) && 'cursor-not-allowed',\n isDisabled && 'opacity-50',\n // Custom classes\n className,\n );\n\n return (\n <Component\n ref={ref}\n className={mergedClassName}\n disabled={asChild ? undefined : (isDisabled ?? isLoading)}\n aria-disabled={isDisabled ? 'true' : undefined}\n aria-busy={isLoading ? 'true' : undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n aria-pressed={ariaPressed}\n aria-expanded={ariaExpanded}\n aria-controls={ariaControls}\n aria-haspopup={ariaHaspopup}\n role={asChild ? undefined : 'button'}\n tabIndex={getTabIndex()}\n style={style}\n {...props}\n >\n {renderStartContent()}\n <Slottable>\n {isLoading ? renderLoadingState() : renderContent()}\n </Slottable>\n {renderEndContent()}\n </Component>\n );\n },\n);\n\nButtonBase.displayName = 'ButtonBase';\n"]}