npm - @metamask/design-system-react - Versions diffs - 0.36.0 → 0.37.0 - Mend

@metamask/design-system-react 0.36.0 → 0.37.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 (50) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -7,6 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
+## [0.37.0]
+### Added
+- Added `showCloseButton` to `ToastOptions` for the imperative `toast(...)` API (default `true`); when `false`, the close button is hidden while auto-dismiss and `toast.dismiss()` still work ([#1446](https://github.com/MetaMask/metamask-design-system/pull/1446))
+### Changed
+- Updated `BannerBase` to center-align compact content (title-only, description-only, or title with a single-line description or string children) and top-align multi-line stacks, custom React node children, or below-action layouts; inherited by `BannerAlert` and `Toast` ([#1447](https://github.com/MetaMask/metamask-design-system/pull/1447))
+- **BREAKING:** Removed `PureBlackProvider` and `usePureBlack` exports ([#1450](https://github.com/MetaMask/metamask-design-system/pull/1450))
+  - Remove `PureBlackProvider` wrapping and `data-pure-black` on the document root
+  - Use semantic elevated tokens (`BackgroundElevated1`, `BackgroundElevated2`, `BorderAlternative`) for stepped surfaces instead of pure-black branching
+  - See [Migration Guide](./MIGRATION.md#from-version-0360-to-0370)
+### Fixed
+- Fixed `Checkbox` unselected state to use a transparent background instead of `background.default` ([#1451](https://github.com/MetaMask/metamask-design-system/pull/1451))
 ## [0.36.0]
 ### Added
@@ -479,7 +497,8 @@ 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.36.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.37.0...HEAD
+[0.37.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.36.0...@metamask/design-system-react@0.37.0
 [0.36.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.35.2...@metamask/design-system-react@0.36.0
 [0.35.2]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.35.1...@metamask/design-system-react@0.35.2
 [0.35.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.35.0...@metamask/design-system-react@0.35.1

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

@@ -31,27 +31,103 @@ const Box_1 = require("../Box/index.cjs");
 const Button_1 = require("../Button/index.cjs");
 const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
 const Text_1 = require("../Text/index.cjs");
+/** BodyMd line height — title block (`typography.sBodyMD.lineHeight`). */
+const BODY_MD_LINE_HEIGHT = 24;
+/** BodySm line height — description block (`typography.sBodySM.lineHeight`). */
+const BODY_SM_LINE_HEIGHT = 22;
+/** `mt-0.5` between title and description. */
+const TITLE_DESCRIPTION_GAP = 2;
+/** Sub-pixel / font rounding allowance when comparing stack height. */
+const COMPACT_HEIGHT_TOLERANCE = 4;
 const isTextContent = (content) => typeof content === 'string' || typeof content === 'number';
 const hasContent = (content) => content !== null && content !== undefined;
-exports.BannerBase = (0, react_1.forwardRef)(({ title, titleProps, description, descriptionProps, children, childrenWrapperProps, actionButtonLabel, actionButtonOnClick, actionButtonProps, actionButtonLayout = design_system_shared_1.BannerBaseActionButtonLayout.Below, startAccessory, onClose, closeButtonProps, className, ...props }, ref) => {
+const getCompactContentMaxHeight = ({ hasTitle, hasDescription, hasChildren, }) => {
+    let maxHeight = 0;
+    if (hasTitle) {
+        maxHeight += BODY_MD_LINE_HEIGHT;
+    }
+    if (hasDescription) {
+        if (hasTitle) {
+            maxHeight += TITLE_DESCRIPTION_GAP;
+        }
+        maxHeight += BODY_SM_LINE_HEIGHT;
+    }
+    if (hasChildren) {
+        maxHeight += BODY_MD_LINE_HEIGHT;
+    }
+    return maxHeight + COMPACT_HEIGHT_TOLERANCE;
+};
+exports.BannerBase = (0, react_1.forwardRef)(({ title, titleProps, description, descriptionProps, children, childrenWrapperProps, actionButtonLabel, actionButtonOnClick, actionButtonProps, actionButtonLayout = design_system_shared_1.BannerBaseActionButtonLayout.Below, startAccessory, onClose, closeButtonProps, className, backgroundColor = design_system_shared_1.BoxBackgroundColor.BackgroundDefault, ...props }, ref) => {
     const resolvedActionButtonProps = actionButtonProps ?? {};
     const { ariaLabel: closeButtonAriaLabel = 'Close banner', className: closeButtonClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
     const shouldShowCloseButton = Boolean(onClose);
     const shouldShowActionButton = Boolean(actionButtonOnClick);
     const isActionButtonLayoutEnd = actionButtonLayout === design_system_shared_1.BannerBaseActionButtonLayout.End;
     const hasActionButtonBelow = shouldShowActionButton && !isActionButtonLayoutEnd;
+    const hasTitle = hasContent(title);
+    const hasDescription = hasContent(description);
+    const hasChildren = hasContent(children);
+    // Custom nodes can't be measured reliably — keep top-aligned.
+    const hasUnmeasuredContent = (hasTitle && !isTextContent(title)) ||
+        (hasDescription && !isTextContent(description)) ||
+        (hasChildren && !isTextContent(children));
+    const contentRef = (0, react_1.useRef)(null);
+    // Multiple text blocks: default top-aligned until the stack measures as
+    // single-line per block. A single title, description, or children block
+    // always centers (including wraps).
+    const [isCompactContent, setIsCompactContent] = (0, react_1.useState)(false);
+    const isSingleTextBlock = [hasTitle, hasDescription, hasChildren].filter(Boolean).length === 1;
+    const measureContent = (0, react_1.useCallback)(() => {
+        if (hasUnmeasuredContent || hasActionButtonBelow || isSingleTextBlock) {
+            setIsCompactContent(false);
+            return;
+        }
+        const height = contentRef.current?.getBoundingClientRect().height ?? 0;
+        const maxCompactHeight = getCompactContentMaxHeight({
+            hasTitle,
+            hasDescription,
+            hasChildren,
+        });
+        setIsCompactContent(height > 0 && height <= maxCompactHeight);
+    }, [
+        hasActionButtonBelow,
+        hasChildren,
+        hasDescription,
+        hasTitle,
+        hasUnmeasuredContent,
+        isSingleTextBlock,
+    ]);
+    (0, react_1.useLayoutEffect)(() => {
+        measureContent();
+        if (typeof ResizeObserver === 'undefined' || !contentRef.current) {
+            return undefined;
+        }
+        const observer = new ResizeObserver(() => {
+            measureContent();
+        });
+        observer.observe(contentRef.current);
+        return () => {
+            observer.disconnect();
+        };
+    }, [title, description, children, measureContent]);
+    const isCenterAligned = !hasActionButtonBelow &&
+        !hasUnmeasuredContent &&
+        (hasTitle || hasDescription || hasChildren) &&
+        (isSingleTextBlock || isCompactContent);
     const actionButton = shouldShowActionButton ? (react_1.default.createElement(Button_1.Button, { size: design_system_shared_1.ButtonSize.Md, onClick: actionButtonOnClick, ...resolvedActionButtonProps, variant: design_system_shared_1.ButtonVariant.Secondary }, actionButtonLabel)) : null;
-    return (react_1.default.createElement(Box_1.Box, { ref: ref, flexDirection: design_system_shared_1.BoxFlexDirection.Row, alignItems: design_system_shared_1.BoxAlignItems.Start, gap: 4, backgroundColor: design_system_shared_1.BoxBackgroundColor.BackgroundDefault, paddingTop: 3, paddingBottom: hasActionButtonBelow ? 4 : 3, paddingLeft: 4, paddingRight: shouldShowCloseButton ? 2 : 4, className: (0, tw_merge_1.twMerge)('rounded-xl', className), ...props },
+    return (react_1.default.createElement(Box_1.Box, { ...props, ref: ref, flexDirection: design_system_shared_1.BoxFlexDirection.Row, alignItems: isCenterAligned ? design_system_shared_1.BoxAlignItems.Center : design_system_shared_1.BoxAlignItems.Start, gap: 4, backgroundColor: backgroundColor, paddingTop: 3, paddingBottom: hasActionButtonBelow ? 4 : 3, paddingLeft: 4, paddingRight: shouldShowCloseButton ? 2 : 4, className: (0, tw_merge_1.twMerge)('rounded-xl', className) },
         startAccessory,
-        react_1.default.createElement(Box_1.Box, { className: "min-w-0 flex-1" },
-            hasContent(title) &&
+        react_1.default.createElement(Box_1.Box, { className: "min-w-0 flex-1", ref: (node) => {
+                contentRef.current = node;
+            } },
+            hasTitle &&
                 (isTextContent(title) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodyMd, fontWeight: design_system_shared_1.FontWeight.Medium, ...titleProps }, title)) : (title)),
-            hasContent(description) && (react_1.default.createElement(Box_1.Box, { className: hasContent(title) ? 'mt-0.5' : undefined }, isTextContent(description) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodySm, ...descriptionProps }, description)) : (description))),
-            hasContent(children) &&
+            hasDescription && (react_1.default.createElement(Box_1.Box, { className: hasTitle ? 'mt-0.5' : undefined }, isTextContent(description) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodySm, ...descriptionProps }, description)) : (description))),
+            hasChildren &&
                 (isTextContent(children) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodyMd, ...childrenWrapperProps }, children)) : (children)),
             hasActionButtonBelow && react_1.default.createElement(Box_1.Box, { className: "mt-2" }, actionButton)),
-        shouldShowActionButton && isActionButtonLayoutEnd && actionButton,
-        shouldShowCloseButton && (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { className: (0, tw_merge_1.twMerge)('-mt-1', closeButtonClassName), iconName: design_system_shared_1.IconName.Close, size: design_system_shared_1.ButtonIconSize.Md, ariaLabel: closeButtonAriaLabel, onClick: onClose, ...resolvedCloseButtonProps }))));
+        shouldShowActionButton && isActionButtonLayoutEnd && (react_1.default.createElement(Box_1.Box, { className: "self-center" }, actionButton)),
+        shouldShowCloseButton && (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { className: (0, tw_merge_1.twMerge)(!isCenterAligned && '-mt-1', closeButtonClassName), iconName: design_system_shared_1.IconName.Close, size: design_system_shared_1.ButtonIconSize.Md, 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":"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","sourcesContent":["import {\n BannerBaseActionButtonLayout,\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n ButtonIconSize,\n ButtonSize,\n ButtonVariant,\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 actionButtonLayout = BannerBaseActionButtonLayout.Below,\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 const isActionButtonLayoutEnd =\n actionButtonLayout === BannerBaseActionButtonLayout.End;\n const hasActionButtonBelow =\n shouldShowActionButton && !isActionButtonLayoutEnd;\n\n const actionButton = shouldShowActionButton ? (\n <Button\n size={ButtonSize.Md}\n onClick={actionButtonOnClick}\n {...resolvedActionButtonProps}\n variant={ButtonVariant.Secondary}\n >\n {actionButtonLabel}\n </Button>\n ) : null;\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={4}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n paddingTop={3}\n paddingBottom={hasActionButtonBelow ? 4 : 3}\n paddingLeft={4}\n paddingRight={shouldShowCloseButton ? 2 : 4}\n className={twMerge('rounded-xl', className)}\n {...props}\n >\n {startAccessory}\n\n <Box className=\"min-w-0 flex-1\">\n {hasContent(title) &&\n (isTextContent(title) ? (\n <Text\n variant={TextVariant.BodyMd}\n fontWeight={FontWeight.Medium}\n {...titleProps}\n >\n {title}\n </Text>\n ) : (\n title\n ))}\n\n {hasContent(description) && (\n <Box className={hasContent(title) ? 'mt-0.5' : 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 {hasActionButtonBelow && <Box className=\"mt-2\">{actionButton}</Box>}\n </Box>\n\n {shouldShowActionButton && isActionButtonLayoutEnd && actionButton}\n\n {shouldShowCloseButton && (\n <ButtonIcon\n className={twMerge('-mt-1', closeButtonClassName)}\n iconName={IconName.Close}\n size={ButtonIconSize.Md}\n ariaLabel={closeButtonAriaLabel}\n onClick={onClose}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}
1	+ {"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAWwC;AACxC,+CAMe;AAEf,uDAA+C;AAC/C,0CAA6B;AAC7B,gDAAmC;AACnC,wDAA2C;AAC3C,4CAA+B;AAI/B,0EAA0E;AAC1E,MAAM,mBAAmB,GAAG,EAAE,CAAC;AAC/B,gFAAgF;AAChF,MAAM,mBAAmB,GAAG,EAAE,CAAC;AAC/B,8CAA8C;AAC9C,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAChC,uEAAuE;AACvE,MAAM,wBAAwB,GAAG,CAAC,CAAC;AAEnC,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,0BAA0B,GAAG,CAAC,EAClC,QAAQ,EACR,cAAc,EACd,WAAW,GAKZ,EAAE,EAAE;IACH,IAAI,SAAS,GAAG,CAAC,CAAC;IAElB,IAAI,QAAQ,EAAE;QACZ,SAAS,IAAI,mBAAmB,CAAC;KAClC;IACD,IAAI,cAAc,EAAE;QAClB,IAAI,QAAQ,EAAE;YACZ,SAAS,IAAI,qBAAqB,CAAC;SACpC;QACD,SAAS,IAAI,mBAAmB,CAAC;KAClC;IACD,IAAI,WAAW,EAAE;QACf,SAAS,IAAI,mBAAmB,CAAC;KAClC;IAED,OAAO,SAAS,GAAG,wBAAwB,CAAC;AAC9C,CAAC,CAAC;AAEW,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,kBAAkB,GAAG,mDAA4B,CAAC,KAAK,EACvD,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,SAAS,EACT,eAAe,GAAG,yCAAkB,CAAC,iBAAiB,EACtD,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;IAC5D,MAAM,uBAAuB,GAC3B,kBAAkB,KAAK,mDAA4B,CAAC,GAAG,CAAC;IAC1D,MAAM,oBAAoB,GACxB,sBAAsB,IAAI,CAAC,uBAAuB,CAAC;IACrD,MAAM,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;IACnC,MAAM,cAAc,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/C,MAAM,WAAW,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;IACzC,8DAA8D;IAC9D,MAAM,oBAAoB,GACxB,CAAC,QAAQ,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,cAAc,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QAC/C,CAAC,WAAW,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5C,MAAM,UAAU,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IACvD,wEAAwE;IACxE,wEAAwE;IACxE,oCAAoC;IACpC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAChE,MAAM,iBAAiB,GACrB,CAAC,QAAQ,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC;IAEvE,MAAM,cAAc,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACtC,IAAI,oBAAoB,IAAI,oBAAoB,IAAI,iBAAiB,EAAE;YACrE,mBAAmB,CAAC,KAAK,CAAC,CAAC;YAC3B,OAAO;SACR;QAED,MAAM,MAAM,GAAG,UAAU,CAAC,OAAO,EAAE,qBAAqB,EAAE,CAAC,MAAM,IAAI,CAAC,CAAC;QACvE,MAAM,gBAAgB,GAAG,0BAA0B,CAAC;YAClD,QAAQ;YACR,cAAc;YACd,WAAW;SACZ,CAAC,CAAC;QACH,mBAAmB,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,IAAI,gBAAgB,CAAC,CAAC;IAChE,CAAC,EAAE;QACD,oBAAoB;QACpB,WAAW;QACX,cAAc;QACd,QAAQ;QACR,oBAAoB;QACpB,iBAAiB;KAClB,CAAC,CAAC;IAEH,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,cAAc,EAAE,CAAC;QAEjB,IAAI,OAAO,cAAc,KAAK,WAAW,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;YAChE,OAAO,SAAS,CAAC;SAClB;QAED,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YACvC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAErC,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC;IAEnD,MAAM,eAAe,GACnB,CAAC,oBAAoB;QACrB,CAAC,oBAAoB;QACrB,CAAC,QAAQ,IAAI,cAAc,IAAI,WAAW,CAAC;QAC3C,CAAC,iBAAiB,IAAI,gBAAgB,CAAC,CAAC;IAE1C,MAAM,YAAY,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAC5C,8BAAC,eAAM,IACL,IAAI,EAAE,iCAAU,CAAC,EAAE,EACnB,OAAO,EAAE,mBAAmB,KACxB,yBAAyB,EAC7B,OAAO,EAAE,oCAAa,CAAC,SAAS,IAE/B,iBAAiB,CACX,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,OAAO,CACL,8BAAC,SAAG,OACE,KAAK,EACT,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,uCAAgB,CAAC,GAAG,EACnC,UAAU,EACR,eAAe,CAAC,CAAC,CAAC,oCAAa,CAAC,MAAM,CAAC,CAAC,CAAC,oCAAa,CAAC,KAAK,EAE9D,GAAG,EAAE,CAAC,EACN,eAAe,EAAE,eAAe,EAChC,UAAU,EAAE,CAAC,EACb,aAAa,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3C,WAAW,EAAE,CAAC,EACd,YAAY,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3C,SAAS,EAAE,IAAA,kBAAO,EAAC,YAAY,EAAE,SAAS,CAAC;QAE1C,cAAc;QAEf,8BAAC,SAAG,IACF,SAAS,EAAC,gBAAgB,EAC1B,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;gBACZ,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;YAC5B,CAAC;YAEA,QAAQ;gBACP,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,cAAc,IAAI,CACjB,8BAAC,SAAG,IAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAC5C,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,WAAW;gBACV,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,oBAAoB,IAAI,8BAAC,SAAG,IAAC,SAAS,EAAC,MAAM,IAAE,YAAY,CAAO,CAC/D;QAEL,sBAAsB,IAAI,uBAAuB,IAAI,CACpD,8BAAC,SAAG,IAAC,SAAS,EAAC,aAAa,IAAE,YAAY,CAAO,CAClD;QAEA,qBAAqB,IAAI,CACxB,8BAAC,uBAAU,IACT,SAAS,EAAE,IAAA,kBAAO,EAChB,CAAC,eAAe,IAAI,OAAO,EAC3B,oBAAoB,CACrB,EACD,QAAQ,EAAE,+BAAQ,CAAC,KAAK,EACxB,IAAI,EAAE,qCAAc,CAAC,EAAE,EACvB,SAAS,EAAE,oBAAoB,EAC/B,OAAO,EAAE,OAAO,KACZ,wBAAwB,GAC5B,CACH,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n BannerBaseActionButtonLayout,\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n ButtonIconSize,\n ButtonSize,\n ButtonVariant,\n FontWeight,\n IconName,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React, {\n forwardRef,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} 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\n/** BodyMd line height — title block (`typography.sBodyMD.lineHeight`). /\nconst BODY_MD_LINE_HEIGHT = 24;\n/* BodySm line height — description block (`typography.sBodySM.lineHeight`). /\nconst BODY_SM_LINE_HEIGHT = 22;\n/* `mt-0.5` between title and description. /\nconst TITLE_DESCRIPTION_GAP = 2;\n/* Sub-pixel / font rounding allowance when comparing stack height. */\nconst COMPACT_HEIGHT_TOLERANCE = 4;\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\nconst getCompactContentMaxHeight = ({\n hasTitle,\n hasDescription,\n hasChildren,\n}: {\n hasTitle: boolean;\n hasDescription: boolean;\n hasChildren: boolean;\n}) => {\n let maxHeight = 0;\n\n if (hasTitle) {\n maxHeight += BODY_MD_LINE_HEIGHT;\n }\n if (hasDescription) {\n if (hasTitle) {\n maxHeight += TITLE_DESCRIPTION_GAP;\n }\n maxHeight += BODY_SM_LINE_HEIGHT;\n }\n if (hasChildren) {\n maxHeight += BODY_MD_LINE_HEIGHT;\n }\n\n return maxHeight + COMPACT_HEIGHT_TOLERANCE;\n};\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 actionButtonLayout = BannerBaseActionButtonLayout.Below,\n startAccessory,\n onClose,\n closeButtonProps,\n className,\n backgroundColor = BoxBackgroundColor.BackgroundDefault,\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 const isActionButtonLayoutEnd =\n actionButtonLayout === BannerBaseActionButtonLayout.End;\n const hasActionButtonBelow =\n shouldShowActionButton && !isActionButtonLayoutEnd;\n const hasTitle = hasContent(title);\n const hasDescription = hasContent(description);\n const hasChildren = hasContent(children);\n // Custom nodes can't be measured reliably — keep top-aligned.\n const hasUnmeasuredContent =\n (hasTitle && !isTextContent(title)) \|\|\n (hasDescription && !isTextContent(description)) \|\|\n (hasChildren && !isTextContent(children));\n\n const contentRef = useRef<HTMLDivElement \| null>(null);\n // Multiple text blocks: default top-aligned until the stack measures as\n // single-line per block. A single title, description, or children block\n // always centers (including wraps).\n const [isCompactContent, setIsCompactContent] = useState(false);\n const isSingleTextBlock =\n [hasTitle, hasDescription, hasChildren].filter(Boolean).length === 1;\n\n const measureContent = useCallback(() => {\n if (hasUnmeasuredContent \|\| hasActionButtonBelow \|\| isSingleTextBlock) {\n setIsCompactContent(false);\n return;\n }\n\n const height = contentRef.current?.getBoundingClientRect().height ?? 0;\n const maxCompactHeight = getCompactContentMaxHeight({\n hasTitle,\n hasDescription,\n hasChildren,\n });\n setIsCompactContent(height > 0 && height <= maxCompactHeight);\n }, [\n hasActionButtonBelow,\n hasChildren,\n hasDescription,\n hasTitle,\n hasUnmeasuredContent,\n isSingleTextBlock,\n ]);\n\n useLayoutEffect(() => {\n measureContent();\n\n if (typeof ResizeObserver === 'undefined' \|\| !contentRef.current) {\n return undefined;\n }\n\n const observer = new ResizeObserver(() => {\n measureContent();\n });\n observer.observe(contentRef.current);\n\n return () => {\n observer.disconnect();\n };\n }, [title, description, children, measureContent]);\n\n const isCenterAligned =\n !hasActionButtonBelow &&\n !hasUnmeasuredContent &&\n (hasTitle \|\| hasDescription \|\| hasChildren) &&\n (isSingleTextBlock \|\| isCompactContent);\n\n const actionButton = shouldShowActionButton ? (\n <Button\n size={ButtonSize.Md}\n onClick={actionButtonOnClick}\n {...resolvedActionButtonProps}\n variant={ButtonVariant.Secondary}\n >\n {actionButtonLabel}\n </Button>\n ) : null;\n\n return (\n <Box\n {...props}\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={\n isCenterAligned ? BoxAlignItems.Center : BoxAlignItems.Start\n }\n gap={4}\n backgroundColor={backgroundColor}\n paddingTop={3}\n paddingBottom={hasActionButtonBelow ? 4 : 3}\n paddingLeft={4}\n paddingRight={shouldShowCloseButton ? 2 : 4}\n className={twMerge('rounded-xl', className)}\n >\n {startAccessory}\n\n <Box\n className=\"min-w-0 flex-1\"\n ref={(node) => {\n contentRef.current = node;\n }}\n >\n {hasTitle &&\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 {hasDescription && (\n <Box className={hasTitle ? 'mt-0.5' : undefined}>\n {isTextContent(description) ? (\n <Text variant={TextVariant.BodySm} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </Box>\n )}\n\n {hasChildren &&\n (isTextContent(children) ? (\n <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n {children}\n </Text>\n ) : (\n children\n ))}\n\n {hasActionButtonBelow && <Box className=\"mt-2\">{actionButton}</Box>}\n </Box>\n\n {shouldShowActionButton && isActionButtonLayoutEnd && (\n <Box className=\"self-center\">{actionButton}</Box>\n )}\n\n {shouldShowCloseButton && (\n <ButtonIcon\n className={twMerge(\n !isCenterAligned && '-mt-1',\n closeButtonClassName,\n )}\n iconName={IconName.Close}\n size={ButtonIconSize.Md}\n ariaLabel={closeButtonAriaLabel}\n onClick={onClose}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}

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

@@ -1,6 +1,7 @@
 import { IconName } from "@metamask/design-system-shared";
 import React from "react";
 export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@metamask/design-system-shared").BannerBasePropsShared & Omit<import("../Box/index.cjs").BoxProps, "children"> & {
+    /** BodySm line height — description block (`typography.sBodySM.lineHeight`). */
     titleProps?: Partial<import("../Text/index.cjs").TextProps> | undefined;
     descriptionProps?: Partial<import("../Text/index.cjs").TextProps> | undefined;
     childrenWrapperProps?: Partial<import("../Text/index.cjs").TextProps> | undefined;
@@ -320,6 +321,7 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         isInverse?: boolean | undefined;
     } | undefined;
 }, "ref"> | Omit<import("@metamask/design-system-shared").BannerBasePropsShared & Omit<import("../Box/index.cjs").BoxProps, "children"> & {
+    /** BodySm line height — description block (`typography.sBodySM.lineHeight`). */
     titleProps?: Partial<import("../Text/index.cjs").TextProps> | undefined;
     descriptionProps?: Partial<import("../Text/index.cjs").TextProps> | undefined;
     childrenWrapperProps?: Partial<import("../Text/index.cjs").TextProps> | 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,EASL,QAAQ,EAET,uCAAuC;AACxC,OAAO,~~KAAqB~~,cAAc;~~AAgB1C~~,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDAoHtB,CAAC"}
1	+ {"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAET,uCAAuC;AACxC,OAAO,KAMN,cAAc;AAoDf,eAAO,MAAM,UAAU;IAxCvB,gFAAgF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAAhF,gFAAgF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDAsO/E,CAAC"}

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

@@ -1,6 +1,7 @@
 import { IconName } from "@metamask/design-system-shared";
 import React from "react";
 export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@metamask/design-system-shared").BannerBasePropsShared & Omit<import("../Box/index.mjs").BoxProps, "children"> & {
+    /** BodySm line height — description block (`typography.sBodySM.lineHeight`). */
     titleProps?: Partial<import("../Text/index.mjs").TextProps> | undefined;
     descriptionProps?: Partial<import("../Text/index.mjs").TextProps> | undefined;
     childrenWrapperProps?: Partial<import("../Text/index.mjs").TextProps> | undefined;
@@ -320,6 +321,7 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         isInverse?: boolean | undefined;
     } | undefined;
 }, "ref"> | Omit<import("@metamask/design-system-shared").BannerBasePropsShared & Omit<import("../Box/index.mjs").BoxProps, "children"> & {
+    /** BodySm line height — description block (`typography.sBodySM.lineHeight`). */
     titleProps?: Partial<import("../Text/index.mjs").TextProps> | undefined;
     descriptionProps?: Partial<import("../Text/index.mjs").TextProps> | undefined;
     childrenWrapperProps?: Partial<import("../Text/index.mjs").TextProps> | 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,EASL,QAAQ,EAET,uCAAuC;AACxC,OAAO,~~KAAqB~~,cAAc;~~AAgB1C~~,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDAoHtB,CAAC"}
1	+ {"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAET,uCAAuC;AACxC,OAAO,KAMN,cAAc;AAoDf,eAAO,MAAM,UAAU;IAxCvB,gFAAgF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAAhF,gFAAgF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDAsO/E,CAAC"}

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

@@ -5,34 +5,110 @@ function $importDefault(module) {
     return module;
 }
 import { BannerBaseActionButtonLayout, BoxAlignItems, BoxBackgroundColor, BoxFlexDirection, ButtonIconSize, ButtonSize, ButtonVariant, FontWeight, IconName, TextVariant } from "@metamask/design-system-shared";
-import $React, { forwardRef } from "react";
+import $React, { forwardRef, useCallback, useLayoutEffect, useRef, useState } from "react";
 const React = $importDefault($React);
 import { twMerge } from "../../utils/tw-merge.mjs";
 import { Box } from "../Box/index.mjs";
 import { Button } from "../Button/index.mjs";
 import { ButtonIcon } from "../ButtonIcon/index.mjs";
 import { Text } from "../Text/index.mjs";
+/** BodyMd line height — title block (`typography.sBodyMD.lineHeight`). */
+const BODY_MD_LINE_HEIGHT = 24;
+/** BodySm line height — description block (`typography.sBodySM.lineHeight`). */
+const BODY_SM_LINE_HEIGHT = 22;
+/** `mt-0.5` between title and description. */
+const TITLE_DESCRIPTION_GAP = 2;
+/** Sub-pixel / font rounding allowance when comparing stack height. */
+const COMPACT_HEIGHT_TOLERANCE = 4;
 const isTextContent = (content) => typeof content === 'string' || typeof content === 'number';
 const hasContent = (content) => content !== null && content !== undefined;
-export const BannerBase = forwardRef(({ title, titleProps, description, descriptionProps, children, childrenWrapperProps, actionButtonLabel, actionButtonOnClick, actionButtonProps, actionButtonLayout = BannerBaseActionButtonLayout.Below, startAccessory, onClose, closeButtonProps, className, ...props }, ref) => {
+const getCompactContentMaxHeight = ({ hasTitle, hasDescription, hasChildren, }) => {
+    let maxHeight = 0;
+    if (hasTitle) {
+        maxHeight += BODY_MD_LINE_HEIGHT;
+    }
+    if (hasDescription) {
+        if (hasTitle) {
+            maxHeight += TITLE_DESCRIPTION_GAP;
+        }
+        maxHeight += BODY_SM_LINE_HEIGHT;
+    }
+    if (hasChildren) {
+        maxHeight += BODY_MD_LINE_HEIGHT;
+    }
+    return maxHeight + COMPACT_HEIGHT_TOLERANCE;
+};
+export const BannerBase = forwardRef(({ title, titleProps, description, descriptionProps, children, childrenWrapperProps, actionButtonLabel, actionButtonOnClick, actionButtonProps, actionButtonLayout = BannerBaseActionButtonLayout.Below, startAccessory, onClose, closeButtonProps, className, backgroundColor = BoxBackgroundColor.BackgroundDefault, ...props }, ref) => {
     const resolvedActionButtonProps = actionButtonProps ?? {};
     const { ariaLabel: closeButtonAriaLabel = 'Close banner', className: closeButtonClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
     const shouldShowCloseButton = Boolean(onClose);
     const shouldShowActionButton = Boolean(actionButtonOnClick);
     const isActionButtonLayoutEnd = actionButtonLayout === BannerBaseActionButtonLayout.End;
     const hasActionButtonBelow = shouldShowActionButton && !isActionButtonLayoutEnd;
+    const hasTitle = hasContent(title);
+    const hasDescription = hasContent(description);
+    const hasChildren = hasContent(children);
+    // Custom nodes can't be measured reliably — keep top-aligned.
+    const hasUnmeasuredContent = (hasTitle && !isTextContent(title)) ||
+        (hasDescription && !isTextContent(description)) ||
+        (hasChildren && !isTextContent(children));
+    const contentRef = useRef(null);
+    // Multiple text blocks: default top-aligned until the stack measures as
+    // single-line per block. A single title, description, or children block
+    // always centers (including wraps).
+    const [isCompactContent, setIsCompactContent] = useState(false);
+    const isSingleTextBlock = [hasTitle, hasDescription, hasChildren].filter(Boolean).length === 1;
+    const measureContent = useCallback(() => {
+        if (hasUnmeasuredContent || hasActionButtonBelow || isSingleTextBlock) {
+            setIsCompactContent(false);
+            return;
+        }
+        const height = contentRef.current?.getBoundingClientRect().height ?? 0;
+        const maxCompactHeight = getCompactContentMaxHeight({
+            hasTitle,
+            hasDescription,
+            hasChildren,
+        });
+        setIsCompactContent(height > 0 && height <= maxCompactHeight);
+    }, [
+        hasActionButtonBelow,
+        hasChildren,
+        hasDescription,
+        hasTitle,
+        hasUnmeasuredContent,
+        isSingleTextBlock,
+    ]);
+    useLayoutEffect(() => {
+        measureContent();
+        if (typeof ResizeObserver === 'undefined' || !contentRef.current) {
+            return undefined;
+        }
+        const observer = new ResizeObserver(() => {
+            measureContent();
+        });
+        observer.observe(contentRef.current);
+        return () => {
+            observer.disconnect();
+        };
+    }, [title, description, children, measureContent]);
+    const isCenterAligned = !hasActionButtonBelow &&
+        !hasUnmeasuredContent &&
+        (hasTitle || hasDescription || hasChildren) &&
+        (isSingleTextBlock || isCompactContent);
     const actionButton = shouldShowActionButton ? (React.createElement(Button, { size: ButtonSize.Md, onClick: actionButtonOnClick, ...resolvedActionButtonProps, variant: ButtonVariant.Secondary }, actionButtonLabel)) : null;
-    return (React.createElement(Box, { ref: ref, flexDirection: BoxFlexDirection.Row, alignItems: BoxAlignItems.Start, gap: 4, backgroundColor: BoxBackgroundColor.BackgroundDefault, paddingTop: 3, paddingBottom: hasActionButtonBelow ? 4 : 3, paddingLeft: 4, paddingRight: shouldShowCloseButton ? 2 : 4, className: twMerge('rounded-xl', className), ...props },
+    return (React.createElement(Box, { ...props, ref: ref, flexDirection: BoxFlexDirection.Row, alignItems: isCenterAligned ? BoxAlignItems.Center : BoxAlignItems.Start, gap: 4, backgroundColor: backgroundColor, paddingTop: 3, paddingBottom: hasActionButtonBelow ? 4 : 3, paddingLeft: 4, paddingRight: shouldShowCloseButton ? 2 : 4, className: twMerge('rounded-xl', className) },
         startAccessory,
-        React.createElement(Box, { className: "min-w-0 flex-1" },
-            hasContent(title) &&
+        React.createElement(Box, { className: "min-w-0 flex-1", ref: (node) => {
+                contentRef.current = node;
+            } },
+            hasTitle &&
                 (isTextContent(title) ? (React.createElement(Text, { variant: TextVariant.BodyMd, fontWeight: FontWeight.Medium, ...titleProps }, title)) : (title)),
-            hasContent(description) && (React.createElement(Box, { className: hasContent(title) ? 'mt-0.5' : undefined }, isTextContent(description) ? (React.createElement(Text, { variant: TextVariant.BodySm, ...descriptionProps }, description)) : (description))),
-            hasContent(children) &&
+            hasDescription && (React.createElement(Box, { className: hasTitle ? 'mt-0.5' : undefined }, isTextContent(description) ? (React.createElement(Text, { variant: TextVariant.BodySm, ...descriptionProps }, description)) : (description))),
+            hasChildren &&
                 (isTextContent(children) ? (React.createElement(Text, { variant: TextVariant.BodyMd, ...childrenWrapperProps }, children)) : (children)),
             hasActionButtonBelow && React.createElement(Box, { className: "mt-2" }, actionButton)),
-        shouldShowActionButton && isActionButtonLayoutEnd && actionButton,
-        shouldShowCloseButton && (React.createElement(ButtonIcon, { className: twMerge('-mt-1', closeButtonClassName), iconName: IconName.Close, size: ButtonIconSize.Md, ariaLabel: closeButtonAriaLabel, onClick: onClose, ...resolvedCloseButtonProps }))));
+        shouldShowActionButton && isActionButtonLayoutEnd && (React.createElement(Box, { className: "self-center" }, actionButton)),
+        shouldShowCloseButton && (React.createElement(ButtonIcon, { className: twMerge(!isCenterAligned && '-mt-1', closeButtonClassName), iconName: IconName.Close, size: ButtonIconSize.Md, 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":"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","sourcesContent":["import {\n BannerBaseActionButtonLayout,\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n ButtonIconSize,\n ButtonSize,\n ButtonVariant,\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 actionButtonLayout = BannerBaseActionButtonLayout.Below,\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 const isActionButtonLayoutEnd =\n actionButtonLayout === BannerBaseActionButtonLayout.End;\n const hasActionButtonBelow =\n shouldShowActionButton && !isActionButtonLayoutEnd;\n\n const actionButton = shouldShowActionButton ? (\n <Button\n size={ButtonSize.Md}\n onClick={actionButtonOnClick}\n {...resolvedActionButtonProps}\n variant={ButtonVariant.Secondary}\n >\n {actionButtonLabel}\n </Button>\n ) : null;\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={4}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n paddingTop={3}\n paddingBottom={hasActionButtonBelow ? 4 : 3}\n paddingLeft={4}\n paddingRight={shouldShowCloseButton ? 2 : 4}\n className={twMerge('rounded-xl', className)}\n {...props}\n >\n {startAccessory}\n\n <Box className=\"min-w-0 flex-1\">\n {hasContent(title) &&\n (isTextContent(title) ? (\n <Text\n variant={TextVariant.BodyMd}\n fontWeight={FontWeight.Medium}\n {...titleProps}\n >\n {title}\n </Text>\n ) : (\n title\n ))}\n\n {hasContent(description) && (\n <Box className={hasContent(title) ? 'mt-0.5' : 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 {hasActionButtonBelow && <Box className=\"mt-2\">{actionButton}</Box>}\n </Box>\n\n {shouldShowActionButton && isActionButtonLayoutEnd && actionButton}\n\n {shouldShowCloseButton && (\n <ButtonIcon\n className={twMerge('-mt-1', closeButtonClassName)}\n iconName={IconName.Close}\n size={ButtonIconSize.Md}\n ariaLabel={closeButtonAriaLabel}\n onClick={onClose}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}
1	+ {"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n BannerBaseActionButtonLayout,\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n ButtonIconSize,\n ButtonSize,\n ButtonVariant,\n FontWeight,\n IconName,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React, {\n forwardRef,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} 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\n/** BodyMd line height — title block (`typography.sBodyMD.lineHeight`). /\nconst BODY_MD_LINE_HEIGHT = 24;\n/* BodySm line height — description block (`typography.sBodySM.lineHeight`). /\nconst BODY_SM_LINE_HEIGHT = 22;\n/* `mt-0.5` between title and description. /\nconst TITLE_DESCRIPTION_GAP = 2;\n/* Sub-pixel / font rounding allowance when comparing stack height. */\nconst COMPACT_HEIGHT_TOLERANCE = 4;\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\nconst getCompactContentMaxHeight = ({\n hasTitle,\n hasDescription,\n hasChildren,\n}: {\n hasTitle: boolean;\n hasDescription: boolean;\n hasChildren: boolean;\n}) => {\n let maxHeight = 0;\n\n if (hasTitle) {\n maxHeight += BODY_MD_LINE_HEIGHT;\n }\n if (hasDescription) {\n if (hasTitle) {\n maxHeight += TITLE_DESCRIPTION_GAP;\n }\n maxHeight += BODY_SM_LINE_HEIGHT;\n }\n if (hasChildren) {\n maxHeight += BODY_MD_LINE_HEIGHT;\n }\n\n return maxHeight + COMPACT_HEIGHT_TOLERANCE;\n};\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 actionButtonLayout = BannerBaseActionButtonLayout.Below,\n startAccessory,\n onClose,\n closeButtonProps,\n className,\n backgroundColor = BoxBackgroundColor.BackgroundDefault,\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 const isActionButtonLayoutEnd =\n actionButtonLayout === BannerBaseActionButtonLayout.End;\n const hasActionButtonBelow =\n shouldShowActionButton && !isActionButtonLayoutEnd;\n const hasTitle = hasContent(title);\n const hasDescription = hasContent(description);\n const hasChildren = hasContent(children);\n // Custom nodes can't be measured reliably — keep top-aligned.\n const hasUnmeasuredContent =\n (hasTitle && !isTextContent(title)) \|\|\n (hasDescription && !isTextContent(description)) \|\|\n (hasChildren && !isTextContent(children));\n\n const contentRef = useRef<HTMLDivElement \| null>(null);\n // Multiple text blocks: default top-aligned until the stack measures as\n // single-line per block. A single title, description, or children block\n // always centers (including wraps).\n const [isCompactContent, setIsCompactContent] = useState(false);\n const isSingleTextBlock =\n [hasTitle, hasDescription, hasChildren].filter(Boolean).length === 1;\n\n const measureContent = useCallback(() => {\n if (hasUnmeasuredContent \|\| hasActionButtonBelow \|\| isSingleTextBlock) {\n setIsCompactContent(false);\n return;\n }\n\n const height = contentRef.current?.getBoundingClientRect().height ?? 0;\n const maxCompactHeight = getCompactContentMaxHeight({\n hasTitle,\n hasDescription,\n hasChildren,\n });\n setIsCompactContent(height > 0 && height <= maxCompactHeight);\n }, [\n hasActionButtonBelow,\n hasChildren,\n hasDescription,\n hasTitle,\n hasUnmeasuredContent,\n isSingleTextBlock,\n ]);\n\n useLayoutEffect(() => {\n measureContent();\n\n if (typeof ResizeObserver === 'undefined' \|\| !contentRef.current) {\n return undefined;\n }\n\n const observer = new ResizeObserver(() => {\n measureContent();\n });\n observer.observe(contentRef.current);\n\n return () => {\n observer.disconnect();\n };\n }, [title, description, children, measureContent]);\n\n const isCenterAligned =\n !hasActionButtonBelow &&\n !hasUnmeasuredContent &&\n (hasTitle \|\| hasDescription \|\| hasChildren) &&\n (isSingleTextBlock \|\| isCompactContent);\n\n const actionButton = shouldShowActionButton ? (\n <Button\n size={ButtonSize.Md}\n onClick={actionButtonOnClick}\n {...resolvedActionButtonProps}\n variant={ButtonVariant.Secondary}\n >\n {actionButtonLabel}\n </Button>\n ) : null;\n\n return (\n <Box\n {...props}\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={\n isCenterAligned ? BoxAlignItems.Center : BoxAlignItems.Start\n }\n gap={4}\n backgroundColor={backgroundColor}\n paddingTop={3}\n paddingBottom={hasActionButtonBelow ? 4 : 3}\n paddingLeft={4}\n paddingRight={shouldShowCloseButton ? 2 : 4}\n className={twMerge('rounded-xl', className)}\n >\n {startAccessory}\n\n <Box\n className=\"min-w-0 flex-1\"\n ref={(node) => {\n contentRef.current = node;\n }}\n >\n {hasTitle &&\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 {hasDescription && (\n <Box className={hasTitle ? 'mt-0.5' : undefined}>\n {isTextContent(description) ? (\n <Text variant={TextVariant.BodySm} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </Box>\n )}\n\n {hasChildren &&\n (isTextContent(children) ? (\n <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n {children}\n </Text>\n ) : (\n children\n ))}\n\n {hasActionButtonBelow && <Box className=\"mt-2\">{actionButton}</Box>}\n </Box>\n\n {shouldShowActionButton && isActionButtonLayoutEnd && (\n <Box className=\"self-center\">{actionButton}</Box>\n )}\n\n {shouldShowCloseButton && (\n <ButtonIcon\n className={twMerge(\n !isCenterAligned && '-mt-1',\n closeButtonClassName,\n )}\n iconName={IconName.Close}\n size={ButtonIconSize.Md}\n ariaLabel={closeButtonAriaLabel}\n onClick={onClose}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}

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

@@ -54,7 +54,7 @@ exports.Checkbox = (0, react_1.forwardRef)(({ id, isSelected, isDisabled = false
     const outerClassName = (0, tw_merge_1.twMerge)('inline-flex items-center self-start', isDisabled && 'cursor-not-allowed opacity-50', className);
     const baseBg = isSelected
         ? 'bg-icon-default enabled:hover:bg-icon-default-hover enabled:active:bg-icon-default-pressed'
-        : 'bg-default enabled:hover:bg-default-hover enabled:active:bg-default-pressed';
+        : 'bg-transparent enabled:hover:bg-hover enabled:active:bg-pressed';
     let baseBorder = 'border-default';
     if (isSelected) {
         baseBorder = 'border-icon-default';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAA+D;AAE/D,uDAA+C;AAC/C,4CAA8D;AAC9D,4CAA+B;AAIlB,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAChC,CACE,EACE,EAAE,EACF,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,UAAU,EACV,QAAQ,EACR,UAAU,EACV,sBAAsB,EACtB,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,EAAE;QAC5D,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC/D,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,WAAW,EAAE,CAAC;SACf;IACH,CAAC,CAAC;IAEF,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAEzE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,GAAG,UAAU,IAAI,EAAE,CAAC;IAC1E,MAAM,EACJ,SAAS,EAAE,0BAA0B,EACrC,GAAG,0BAA0B,EAC9B,GAAG,sBAAsB,IAAI,EAAE,CAAC;IACjC,MAAM,EAAE,SAAS,EAAE,oBAAoB,EAAE,GAAG,oBAAoB,EAAE,GAChE,gBAAgB,IAAI,EAAE,CAAC;IAEzB,MAAM,cAAc,GAAG,IAAA,kBAAO,EAC5B,qCAAqC,EACrC,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,MAAM,MAAM,GAAG,UAAU;QACvB,CAAC,CAAC,4FAA4F;QAC9F,CAAC,CAAC,~~6EAA6E~~,CAAC;~~IAClF~~,IAAI,UAAU,GAAG,gBAAgB,CAAC;IAClC,IAAI,UAAU,EAAE;QACd,UAAU,GAAG,qBAAqB,CAAC;KACpC;SAAM,IAAI,SAAS,EAAE;QACpB,UAAU,GAAG,sBAAsB,CAAC;KACrC;IAED,iFAAiF;IACjF,MAAM,YAAY,GAAG,IAAA,kBAAO,EAC1B,uHAAuH,EACvH,oHAAoH,EACpH,6BAA6B,EAC7B,MAAM,EACN,UAAU,EACV,cAAc,CACf,CAAC;IAEF,MAAM,cAAc,GAAG,IAAA,kBAAO,EAC5B,yDAAyD,EACzD,0BAA0B,CAC3B,CAAC;IAEF,MAAM,WAAW,GAAG,IAAA,kBAAO,EACzB,8HAA8H,EAC9H,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,EACxC,oBAAoB,CACrB,CAAC;IAEF,OAAO,CACL,yCAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QACpE,uCAAK,SAAS,EAAE,cAAc,KAAM,0BAA0B;YAC5D,yCACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,UAAU,kBACN,SAAS,EACvB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,aAAa,EACxB,SAAS,EAAE,YAAY,KACnB,cAAc,GAClB;YACF,8BAAC,WAAI,IACH,IAAI,EAAE,eAAQ,CAAC,KAAK,EACpB,KAAK,EAAE,gBAAS,CAAC,WAAW,EAC5B,IAAI,EAAE,eAAQ,CAAC,EAAE,KACb,oBAAoB,EACxB,SAAS,EAAE,WAAW,GACtB,CACE;QACL,KAAK,CAAC,CAAC,CAAC,CACP,8BAAC,WAAI,IACH,OAAO,WACH,UAAU,EACd,SAAS,EAAE,IAAA,kBAAO,EAAC,MAAM,EAAE,UAAU,EAAE,SAAS,CAAC;YAEjD,4CAAO,KAAK,CAAQ,CACf,CACR,CAAC,CAAC,CAAC,IAAI,CACF,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import type { ChangeEvent, KeyboardEvent } from 'react';\nimport React, { forwardRef, useImperativeHandle } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { Text } from '../Text';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n (\n {\n id,\n isSelected,\n isDisabled = false,\n isInvalid = false,\n label,\n labelProps,\n onChange,\n inputProps,\n checkboxContainerProps,\n checkedIconProps,\n className,\n style,\n ...props\n },\n ref,\n ) => {\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled) {\n return;\n }\n onChange?.(event.target.checked);\n };\n\n const handleClick = () => {\n if (isDisabled) {\n return;\n }\n onChange?.(!isSelected);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n handleClick();\n }\n };\n\n useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);\n\n const { className: inputClassName, ...restInputProps } = inputProps ?? {};\n const {\n className: checkboxContainerClassName,\n ...restCheckboxContainerProps\n } = checkboxContainerProps ?? {};\n const { className: checkedIconClassName, ...restCheckedIconProps } =\n checkedIconProps ?? {};\n\n const outerClassName = twMerge(\n 'inline-flex items-center self-start',\n isDisabled && 'cursor-not-allowed opacity-50',\n className,\n );\n\n const baseBg = isSelected\n ? 'bg-icon-default enabled:hover:bg-icon-default-hover enabled:active:bg-icon-default-pressed'\n : 'bg-~~default~~ enabled:hover:bg-~~default-~~hover enabled:active:bg-~~default-~~pressed';\n let baseBorder = 'border-default';\n if (isSelected) {\n baseBorder = 'border-icon-default';\n } else if (isInvalid) {\n baseBorder = 'border-error-default';\n }\n\n // Native input is the visible control (no opacity-0) for Selenium isDisplayed().\n const inputClasses = twMerge(\n 'peer size-6 shrink-0 cursor-pointer appearance-none rounded border-2 p-0 transition-transform enabled:active:scale-95',\n 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n 'disabled:cursor-not-allowed',\n baseBg,\n baseBorder,\n inputClassName,\n );\n\n const wrapperClasses = twMerge(\n 'relative inline-flex size-6 items-center justify-center',\n checkboxContainerClassName,\n );\n\n const iconClasses = twMerge(\n 'pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition peer-enabled:peer-active:scale-95',\n isSelected ? 'opacity-100' : 'opacity-0',\n checkedIconClassName,\n );\n\n return (\n <label htmlFor={id} className={outerClassName} style={style} {...props}>\n <div className={wrapperClasses} {...restCheckboxContainerProps}>\n <input\n type=\"checkbox\"\n id={id}\n checked={isSelected}\n disabled={isDisabled}\n aria-invalid={isInvalid}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n className={inputClasses}\n {...restInputProps}\n />\n <Icon\n name={IconName.Check}\n color={IconColor.IconInverse}\n size={IconSize.Sm}\n {...restCheckedIconProps}\n className={iconClasses}\n />\n </div>\n {label ? (\n <Text\n asChild\n {...labelProps}\n className={twMerge('ml-3', labelProps?.className)}\n >\n <span>{label}</span>\n </Text>\n ) : null}\n </label>\n );\n },\n);\n\nCheckbox.displayName = 'Checkbox';\n"]}
1	+ {"version":3,"file":"Checkbox.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ChangeEvent, KeyboardEvent } from 'react';\nimport React, { forwardRef, useImperativeHandle } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { Text } from '../Text';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n (\n {\n id,\n isSelected,\n isDisabled = false,\n isInvalid = false,\n label,\n labelProps,\n onChange,\n inputProps,\n checkboxContainerProps,\n checkedIconProps,\n className,\n style,\n ...props\n },\n ref,\n ) => {\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled) {\n return;\n }\n onChange?.(event.target.checked);\n };\n\n const handleClick = () => {\n if (isDisabled) {\n return;\n }\n onChange?.(!isSelected);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n handleClick();\n }\n };\n\n useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);\n\n const { className: inputClassName, ...restInputProps } = inputProps ?? {};\n const {\n className: checkboxContainerClassName,\n ...restCheckboxContainerProps\n } = checkboxContainerProps ?? {};\n const { className: checkedIconClassName, ...restCheckedIconProps } =\n checkedIconProps ?? {};\n\n const outerClassName = twMerge(\n 'inline-flex items-center self-start',\n isDisabled && 'cursor-not-allowed opacity-50',\n className,\n );\n\n const baseBg = isSelected\n ? 'bg-icon-default enabled:hover:bg-icon-default-hover enabled:active:bg-icon-default-pressed'\n : 'bg-transparent enabled:hover:bg-hover enabled:active:bg-pressed';\n let baseBorder = 'border-default';\n if (isSelected) {\n baseBorder = 'border-icon-default';\n } else if (isInvalid) {\n baseBorder = 'border-error-default';\n }\n\n // Native input is the visible control (no opacity-0) for Selenium isDisplayed().\n const inputClasses = twMerge(\n 'peer size-6 shrink-0 cursor-pointer appearance-none rounded border-2 p-0 transition-transform enabled:active:scale-95',\n 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n 'disabled:cursor-not-allowed',\n baseBg,\n baseBorder,\n inputClassName,\n );\n\n const wrapperClasses = twMerge(\n 'relative inline-flex size-6 items-center justify-center',\n checkboxContainerClassName,\n );\n\n const iconClasses = twMerge(\n 'pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition peer-enabled:peer-active:scale-95',\n isSelected ? 'opacity-100' : 'opacity-0',\n checkedIconClassName,\n );\n\n return (\n <label htmlFor={id} className={outerClassName} style={style} {...props}>\n <div className={wrapperClasses} {...restCheckboxContainerProps}>\n <input\n type=\"checkbox\"\n id={id}\n checked={isSelected}\n disabled={isDisabled}\n aria-invalid={isInvalid}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n className={inputClasses}\n {...restInputProps}\n />\n <Icon\n name={IconName.Check}\n color={IconColor.IconInverse}\n size={IconSize.Sm}\n {...restCheckedIconProps}\n className={iconClasses}\n />\n </div>\n {label ? (\n <Text\n asChild\n {...labelProps}\n className={twMerge('ml-3', labelProps?.className)}\n >\n <span>{label}</span>\n </Text>\n ) : null}\n </label>\n );\n },\n);\n\nCheckbox.displayName = 'Checkbox';\n"]}

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

@@ -35,7 +35,7 @@ export const Checkbox = forwardRef(({ id, isSelected, isDisabled = false, isInva
     const outerClassName = twMerge('inline-flex items-center self-start', isDisabled && 'cursor-not-allowed opacity-50', className);
     const baseBg = isSelected
         ? 'bg-icon-default enabled:hover:bg-icon-default-hover enabled:active:bg-icon-default-pressed'
-        : 'bg-default enabled:hover:bg-default-hover enabled:active:bg-default-pressed';
+        : 'bg-transparent enabled:hover:bg-hover enabled:active:bg-pressed';
     let baseBorder = 'border-default';
     if (isSelected) {
         baseBorder = 'border-icon-default';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;AACA,OAAO,QAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,cAAc;;AAE/D,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AAC9D,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAI/B,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,EAAE,EACF,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,UAAU,EACV,QAAQ,EACR,UAAU,EACV,sBAAsB,EACtB,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,EAAE;QAC5D,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC/D,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,WAAW,EAAE,CAAC;SACf;IACH,CAAC,CAAC;IAEF,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAEzE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,GAAG,UAAU,IAAI,EAAE,CAAC;IAC1E,MAAM,EACJ,SAAS,EAAE,0BAA0B,EACrC,GAAG,0BAA0B,EAC9B,GAAG,sBAAsB,IAAI,EAAE,CAAC;IACjC,MAAM,EAAE,SAAS,EAAE,oBAAoB,EAAE,GAAG,oBAAoB,EAAE,GAChE,gBAAgB,IAAI,EAAE,CAAC;IAEzB,MAAM,cAAc,GAAG,OAAO,CAC5B,qCAAqC,EACrC,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,MAAM,MAAM,GAAG,UAAU;QACvB,CAAC,CAAC,4FAA4F;QAC9F,CAAC,CAAC,~~6EAA6E~~,CAAC;~~IAClF~~,IAAI,UAAU,GAAG,gBAAgB,CAAC;IAClC,IAAI,UAAU,EAAE;QACd,UAAU,GAAG,qBAAqB,CAAC;KACpC;SAAM,IAAI,SAAS,EAAE;QACpB,UAAU,GAAG,sBAAsB,CAAC;KACrC;IAED,iFAAiF;IACjF,MAAM,YAAY,GAAG,OAAO,CAC1B,uHAAuH,EACvH,oHAAoH,EACpH,6BAA6B,EAC7B,MAAM,EACN,UAAU,EACV,cAAc,CACf,CAAC;IAEF,MAAM,cAAc,GAAG,OAAO,CAC5B,yDAAyD,EACzD,0BAA0B,CAC3B,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CACzB,8HAA8H,EAC9H,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,EACxC,oBAAoB,CACrB,CAAC;IAEF,OAAO,CACL,+BAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QACpE,6BAAK,SAAS,EAAE,cAAc,KAAM,0BAA0B;YAC5D,+BACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,UAAU,kBACN,SAAS,EACvB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,aAAa,EACxB,SAAS,EAAE,YAAY,KACnB,cAAc,GAClB;YACF,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,CAAC,KAAK,EACpB,KAAK,EAAE,SAAS,CAAC,WAAW,EAC5B,IAAI,EAAE,QAAQ,CAAC,EAAE,KACb,oBAAoB,EACxB,SAAS,EAAE,WAAW,GACtB,CACE;QACL,KAAK,CAAC,CAAC,CAAC,CACP,oBAAC,IAAI,IACH,OAAO,WACH,UAAU,EACd,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,UAAU,EAAE,SAAS,CAAC;YAEjD,kCAAO,KAAK,CAAQ,CACf,CACR,CAAC,CAAC,CAAC,IAAI,CACF,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import type { ChangeEvent, KeyboardEvent } from 'react';\nimport React, { forwardRef, useImperativeHandle } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { Text } from '../Text';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n (\n {\n id,\n isSelected,\n isDisabled = false,\n isInvalid = false,\n label,\n labelProps,\n onChange,\n inputProps,\n checkboxContainerProps,\n checkedIconProps,\n className,\n style,\n ...props\n },\n ref,\n ) => {\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled) {\n return;\n }\n onChange?.(event.target.checked);\n };\n\n const handleClick = () => {\n if (isDisabled) {\n return;\n }\n onChange?.(!isSelected);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n handleClick();\n }\n };\n\n useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);\n\n const { className: inputClassName, ...restInputProps } = inputProps ?? {};\n const {\n className: checkboxContainerClassName,\n ...restCheckboxContainerProps\n } = checkboxContainerProps ?? {};\n const { className: checkedIconClassName, ...restCheckedIconProps } =\n checkedIconProps ?? {};\n\n const outerClassName = twMerge(\n 'inline-flex items-center self-start',\n isDisabled && 'cursor-not-allowed opacity-50',\n className,\n );\n\n const baseBg = isSelected\n ? 'bg-icon-default enabled:hover:bg-icon-default-hover enabled:active:bg-icon-default-pressed'\n : 'bg-~~default~~ enabled:hover:bg-~~default-~~hover enabled:active:bg-~~default-~~pressed';\n let baseBorder = 'border-default';\n if (isSelected) {\n baseBorder = 'border-icon-default';\n } else if (isInvalid) {\n baseBorder = 'border-error-default';\n }\n\n // Native input is the visible control (no opacity-0) for Selenium isDisplayed().\n const inputClasses = twMerge(\n 'peer size-6 shrink-0 cursor-pointer appearance-none rounded border-2 p-0 transition-transform enabled:active:scale-95',\n 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n 'disabled:cursor-not-allowed',\n baseBg,\n baseBorder,\n inputClassName,\n );\n\n const wrapperClasses = twMerge(\n 'relative inline-flex size-6 items-center justify-center',\n checkboxContainerClassName,\n );\n\n const iconClasses = twMerge(\n 'pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition peer-enabled:peer-active:scale-95',\n isSelected ? 'opacity-100' : 'opacity-0',\n checkedIconClassName,\n );\n\n return (\n <label htmlFor={id} className={outerClassName} style={style} {...props}>\n <div className={wrapperClasses} {...restCheckboxContainerProps}>\n <input\n type=\"checkbox\"\n id={id}\n checked={isSelected}\n disabled={isDisabled}\n aria-invalid={isInvalid}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n className={inputClasses}\n {...restInputProps}\n />\n <Icon\n name={IconName.Check}\n color={IconColor.IconInverse}\n size={IconSize.Sm}\n {...restCheckedIconProps}\n className={iconClasses}\n />\n </div>\n {label ? (\n <Text\n asChild\n {...labelProps}\n className={twMerge('ml-3', labelProps?.className)}\n >\n <span>{label}</span>\n </Text>\n ) : null}\n </label>\n );\n },\n);\n\nCheckbox.displayName = 'Checkbox';\n"]}
1	+ {"version":3,"file":"Checkbox.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ChangeEvent, KeyboardEvent } from 'react';\nimport React, { forwardRef, useImperativeHandle } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { Text } from '../Text';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n (\n {\n id,\n isSelected,\n isDisabled = false,\n isInvalid = false,\n label,\n labelProps,\n onChange,\n inputProps,\n checkboxContainerProps,\n checkedIconProps,\n className,\n style,\n ...props\n },\n ref,\n ) => {\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled) {\n return;\n }\n onChange?.(event.target.checked);\n };\n\n const handleClick = () => {\n if (isDisabled) {\n return;\n }\n onChange?.(!isSelected);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n handleClick();\n }\n };\n\n useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);\n\n const { className: inputClassName, ...restInputProps } = inputProps ?? {};\n const {\n className: checkboxContainerClassName,\n ...restCheckboxContainerProps\n } = checkboxContainerProps ?? {};\n const { className: checkedIconClassName, ...restCheckedIconProps } =\n checkedIconProps ?? {};\n\n const outerClassName = twMerge(\n 'inline-flex items-center self-start',\n isDisabled && 'cursor-not-allowed opacity-50',\n className,\n );\n\n const baseBg = isSelected\n ? 'bg-icon-default enabled:hover:bg-icon-default-hover enabled:active:bg-icon-default-pressed'\n : 'bg-transparent enabled:hover:bg-hover enabled:active:bg-pressed';\n let baseBorder = 'border-default';\n if (isSelected) {\n baseBorder = 'border-icon-default';\n } else if (isInvalid) {\n baseBorder = 'border-error-default';\n }\n\n // Native input is the visible control (no opacity-0) for Selenium isDisplayed().\n const inputClasses = twMerge(\n 'peer size-6 shrink-0 cursor-pointer appearance-none rounded border-2 p-0 transition-transform enabled:active:scale-95',\n 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n 'disabled:cursor-not-allowed',\n baseBg,\n baseBorder,\n inputClassName,\n );\n\n const wrapperClasses = twMerge(\n 'relative inline-flex size-6 items-center justify-center',\n checkboxContainerClassName,\n );\n\n const iconClasses = twMerge(\n 'pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition peer-enabled:peer-active:scale-95',\n isSelected ? 'opacity-100' : 'opacity-0',\n checkedIconClassName,\n );\n\n return (\n <label htmlFor={id} className={outerClassName} style={style} {...props}>\n <div className={wrapperClasses} {...restCheckboxContainerProps}>\n <input\n type=\"checkbox\"\n id={id}\n checked={isSelected}\n disabled={isDisabled}\n aria-invalid={isInvalid}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n className={inputClasses}\n {...restInputProps}\n />\n <Icon\n name={IconName.Check}\n color={IconColor.IconInverse}\n size={IconSize.Sm}\n {...restCheckedIconProps}\n className={iconClasses}\n />\n </div>\n {label ? (\n <Text\n asChild\n {...labelProps}\n className={twMerge('ml-3', labelProps?.className)}\n >\n <span>{label}</span>\n </Text>\n ) : null}\n </label>\n );\n },\n);\n\nCheckbox.displayName = 'Checkbox';\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.types.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ToastPropsShared } from '@metamask/design-system-shared';\n\nimport type { BannerBaseProps } from '../BannerBase';\nimport type { IconProps } from '../Icon';\n\ntype ToastCloseButtonProps = Omit<\n NonNullable<BannerBaseProps['closeButtonProps']>,\n 'onClick'\n>;\n\n/*\n Props for the Toast visual component.\n * Extends the platform BannerBase props with severity and an icon override.\n * `onClose` is simplified to `() => void` (no MouseEvent) to align with the\n * React Native API and the imperative `toast()` pattern.\n /\nexport type ToastProps = Omit<BannerBaseProps, 'closeButtonProps' \| 'onClose'> &\n ToastPropsShared & {\n /\n Optional handler called when the close button is pressed.\n * When provided, a close button is shown.\n /\n onClose?: () => void;\n /\n Optional props passed to the severity `Icon`.\n * Only used when `severity` is not `Default` and `startAccessory` is not provided.\n /\n iconProps?: Omit<IconProps, 'name' \| 'color'>;\n /\n Optional props for the close `ButtonIcon`.\n * `ariaLabel` defaults to `'Close toast'`.\n /\n closeButtonProps?: ToastCloseButtonProps;\n /\n Optional test identifier forwarded to the root Toast element.\n /\n 'data-testid'?: string;\n };\n\n/\n Options passed to the imperative `toast(...)` API.\n /\nexport type ToastOptions = ToastProps & {\n /\n When true the toast stays visible until explicitly dismissed.\n * Defaults to false.\n /\n hasNoTimeout?: boolean;\n};\n\n/\n Imperative handle exposed by `<Toaster ref={...} />`.\n /\nexport type ToasterRef = {\n showToast: (options: ToastOptions) => void;\n closeToast: () => void;\n};\n\n/\n Props for the `<Toaster />` container component.\n /\nexport type ToasterProps = {\n /\n Optional extra CSS classes applied to the fixed outer container.\n */\n className?: string;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>;\n"]}
1	+ {"version":3,"file":"Toast.types.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ToastPropsShared } from '@metamask/design-system-shared';\n\nimport type { BannerBaseProps } from '../BannerBase';\nimport type { IconProps } from '../Icon';\n\ntype ToastCloseButtonProps = Omit<\n NonNullable<BannerBaseProps['closeButtonProps']>,\n 'onClick'\n>;\n\n/*\n Props for the Toast visual component.\n * Extends the platform BannerBase props with severity and an icon override.\n * `onClose` is simplified to `() => void` (no MouseEvent) to align with the\n * React Native API and the imperative `toast()` pattern.\n /\nexport type ToastProps = Omit<BannerBaseProps, 'closeButtonProps' \| 'onClose'> &\n ToastPropsShared & {\n /\n Optional handler called when the close button is pressed.\n * When provided, a close button is shown.\n /\n onClose?: () => void;\n /\n Optional props passed to the severity `Icon`.\n * Only used when `severity` is not `Default` and `startAccessory` is not provided.\n /\n iconProps?: Omit<IconProps, 'name' \| 'color'>;\n /\n Optional props for the close `ButtonIcon`.\n * `ariaLabel` defaults to `'Close toast'`.\n /\n closeButtonProps?: ToastCloseButtonProps;\n /\n Optional test identifier forwarded to the root Toast element.\n /\n 'data-testid'?: string;\n };\n\n/\n Options passed to the imperative `toast(...)` API.\n /\nexport type ToastOptions = ToastProps & {\n /\n When true the toast stays visible until explicitly dismissed.\n * Defaults to false.\n /\n hasNoTimeout?: boolean;\n /\n When `false`, hides the close button on the imperative toast.\n * Auto-dismiss and `toast.dismiss()` still work.\n * Defaults to `true`.\n /\n showCloseButton?: boolean;\n};\n\n/\n Imperative handle exposed by `<Toaster ref={...} />`.\n /\nexport type ToasterRef = {\n showToast: (options: ToastOptions) => void;\n closeToast: () => void;\n};\n\n/\n Props for the `<Toaster />` container component.\n /\nexport type ToasterProps = {\n /\n Optional extra CSS classes applied to the fixed outer container.\n */\n className?: string;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>;\n"]}

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

@@ -39,6 +39,12 @@ export type ToastOptions = ToastProps & {
      * Defaults to false.
      */
     hasNoTimeout?: boolean;
+    /**
+     * When `false`, hides the close button on the imperative toast.
+     * Auto-dismiss and `toast.dismiss()` still work.
+     * Defaults to `true`.
+     */
+    showCloseButton?: boolean;
 };
 /**
  * Imperative handle exposed by `<Toaster ref={...} />`.

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.types.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,uCAAuC;AAEvE,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,KAAK,qBAAqB,GAAG,IAAI,CAC/B,WAAW,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC,EAChD,SAAS,CACV,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,kBAAkB,GAAG,SAAS,CAAC,GAC5E,gBAAgB,GAAG;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;IAC9C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEJ;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG;IACtC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;~~CACxB~~,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC"}
1	+ {"version":3,"file":"Toast.types.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,uCAAuC;AAEvE,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,KAAK,qBAAqB,GAAG,IAAI,CAC/B,WAAW,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC,EAChD,SAAS,CACV,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,kBAAkB,GAAG,SAAS,CAAC,GAC5E,gBAAgB,GAAG;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;IAC9C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEJ;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG;IACtC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC"}

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

@@ -39,6 +39,12 @@ export type ToastOptions = ToastProps & {
      * Defaults to false.
      */
     hasNoTimeout?: boolean;
+    /**
+     * When `false`, hides the close button on the imperative toast.
+     * Auto-dismiss and `toast.dismiss()` still work.
+     * Defaults to `true`.
+     */
+    showCloseButton?: boolean;
 };
 /**
  * Imperative handle exposed by `<Toaster ref={...} />`.

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.types.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,uCAAuC;AAEvE,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,KAAK,qBAAqB,GAAG,IAAI,CAC/B,WAAW,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC,EAChD,SAAS,CACV,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,kBAAkB,GAAG,SAAS,CAAC,GAC5E,gBAAgB,GAAG;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;IAC9C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEJ;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG;IACtC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;~~CACxB~~,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC"}
1	+ {"version":3,"file":"Toast.types.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,uCAAuC;AAEvE,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,KAAK,qBAAqB,GAAG,IAAI,CAC/B,WAAW,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC,EAChD,SAAS,CACV,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,kBAAkB,GAAG,SAAS,CAAC,GAC5E,gBAAgB,GAAG;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;IAC9C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEJ;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG;IACtC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.types.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ToastPropsShared } from '@metamask/design-system-shared';\n\nimport type { BannerBaseProps } from '../BannerBase';\nimport type { IconProps } from '../Icon';\n\ntype ToastCloseButtonProps = Omit<\n NonNullable<BannerBaseProps['closeButtonProps']>,\n 'onClick'\n>;\n\n/*\n Props for the Toast visual component.\n * Extends the platform BannerBase props with severity and an icon override.\n * `onClose` is simplified to `() => void` (no MouseEvent) to align with the\n * React Native API and the imperative `toast()` pattern.\n /\nexport type ToastProps = Omit<BannerBaseProps, 'closeButtonProps' \| 'onClose'> &\n ToastPropsShared & {\n /\n Optional handler called when the close button is pressed.\n * When provided, a close button is shown.\n /\n onClose?: () => void;\n /\n Optional props passed to the severity `Icon`.\n * Only used when `severity` is not `Default` and `startAccessory` is not provided.\n /\n iconProps?: Omit<IconProps, 'name' \| 'color'>;\n /\n Optional props for the close `ButtonIcon`.\n * `ariaLabel` defaults to `'Close toast'`.\n /\n closeButtonProps?: ToastCloseButtonProps;\n /\n Optional test identifier forwarded to the root Toast element.\n /\n 'data-testid'?: string;\n };\n\n/\n Options passed to the imperative `toast(...)` API.\n /\nexport type ToastOptions = ToastProps & {\n /\n When true the toast stays visible until explicitly dismissed.\n * Defaults to false.\n /\n hasNoTimeout?: boolean;\n};\n\n/\n Imperative handle exposed by `<Toaster ref={...} />`.\n /\nexport type ToasterRef = {\n showToast: (options: ToastOptions) => void;\n closeToast: () => void;\n};\n\n/\n Props for the `<Toaster />` container component.\n /\nexport type ToasterProps = {\n /\n Optional extra CSS classes applied to the fixed outer container.\n */\n className?: string;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>;\n"]}
1	+ {"version":3,"file":"Toast.types.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ToastPropsShared } from '@metamask/design-system-shared';\n\nimport type { BannerBaseProps } from '../BannerBase';\nimport type { IconProps } from '../Icon';\n\ntype ToastCloseButtonProps = Omit<\n NonNullable<BannerBaseProps['closeButtonProps']>,\n 'onClick'\n>;\n\n/*\n Props for the Toast visual component.\n * Extends the platform BannerBase props with severity and an icon override.\n * `onClose` is simplified to `() => void` (no MouseEvent) to align with the\n * React Native API and the imperative `toast()` pattern.\n /\nexport type ToastProps = Omit<BannerBaseProps, 'closeButtonProps' \| 'onClose'> &\n ToastPropsShared & {\n /\n Optional handler called when the close button is pressed.\n * When provided, a close button is shown.\n /\n onClose?: () => void;\n /\n Optional props passed to the severity `Icon`.\n * Only used when `severity` is not `Default` and `startAccessory` is not provided.\n /\n iconProps?: Omit<IconProps, 'name' \| 'color'>;\n /\n Optional props for the close `ButtonIcon`.\n * `ariaLabel` defaults to `'Close toast'`.\n /\n closeButtonProps?: ToastCloseButtonProps;\n /\n Optional test identifier forwarded to the root Toast element.\n /\n 'data-testid'?: string;\n };\n\n/\n Options passed to the imperative `toast(...)` API.\n /\nexport type ToastOptions = ToastProps & {\n /\n When true the toast stays visible until explicitly dismissed.\n * Defaults to false.\n /\n hasNoTimeout?: boolean;\n /\n When `false`, hides the close button on the imperative toast.\n * Auto-dismiss and `toast.dismiss()` still work.\n * Defaults to `true`.\n /\n showCloseButton?: boolean;\n};\n\n/\n Imperative handle exposed by `<Toaster ref={...} />`.\n /\nexport type ToasterRef = {\n showToast: (options: ToastOptions) => void;\n closeToast: () => void;\n};\n\n/\n Props for the `<Toaster />` container component.\n /\nexport type ToasterProps = {\n /\n Optional extra CSS classes applied to the fixed outer container.\n */\n className?: string;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>;\n"]}