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

@metamask/design-system-react 0.35.2 → 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 (60) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -7,6 +7,42 @@ 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
+- Added `BoxBackgroundColor.BackgroundElevated1`, `BoxBackgroundColor.BackgroundElevated2`, and `BoxBorderColor.BorderAlternative` via `@metamask/design-system-shared` ([#1445](https://github.com/MetaMask/metamask-design-system/pull/1445))
+### Changed
+- Updated peer dependency to `@metamask/design-tokens@^9.0.0` ([#1444](https://github.com/MetaMask/metamask-design-system/pull/1444))
+  - Required coordination bump; visual impact comes from the design-tokens 9.0.0 dark theme change for apps not already on OLED pure-black
+  - See [design-tokens Migration Guide](../design-tokens/MIGRATION.md#from-version-8x-to-900)
+- Updated `ModalContent` to use `BackgroundElevated1` and `BorderAlternative` instead of branching on pure-black mode ([#1445](https://github.com/MetaMask/metamask-design-system/pull/1445))
+  - `elevated1` and `border.alternative` resolve to the same values as the previous pure-black path (`background.alternative`, `border.muted`); appearance is unchanged for OLED pure-black consumers
+- Updated `Toast` to use `BackgroundElevated2` instead of `BackgroundSection` ([#1445](https://github.com/MetaMask/metamask-design-system/pull/1445))
+  - Dark theme unchanged (`elevated2` matches `background.section`); light theme changes from `background.section` (`#F3F5F9`) to `background.elevated2` / `background.default` (`#FFFFFF`)
+- Design-system components no longer branch on `usePureBlack()` for surface styling; consumers should remove `PureBlackProvider` / `data-pure-black` wiring and use elevated tokens (`bg-elevated1`, `bg-elevated2`, `border-alternative`) instead ([#1444](https://github.com/MetaMask/metamask-design-system/pull/1444), [#1445](https://github.com/MetaMask/metamask-design-system/pull/1445))
+  - See [design-tokens Migration Guide](../design-tokens/MIGRATION.md#from-version-8x-to-900)
 ## [0.35.2]
 ### Fixed
@@ -461,7 +497,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.35.2...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
 [0.35.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.34.0...@metamask/design-system-react@0.35.0

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":"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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/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/ModalContent/ModalContent.cjs CHANGED Viewed

@@ -29,12 +29,10 @@ const tw_merge_1 = require("../../utils/tw-merge.cjs");
 const Box_1 = require("../Box/index.cjs");
 const Modal_1 = require("../Modal/index.cjs");
 const ModalFocus_1 = require("../ModalFocus/index.cjs");
-const PureBlackProvider_1 = require("../PureBlackProvider/index.cjs");
 const ModalContent_constants_1 = require("./ModalContent.constants.cjs");
 const ModalContent_types_1 = require("./ModalContent.types.cjs");
 exports.ModalContent = (0, react_1.forwardRef)(({ className, children, size = ModalContent_types_1.ModalContentSize.Sm, modalDialogProps, ...props }, ref) => {
     const { onClose, isClosedOnEscapeKey, isClosedOnOutsideClick, initialFocusRef, finalFocusRef, restoreFocus, autoFocus, } = (0, Modal_1.useModalContext)();
-    const isPureBlack = (0, PureBlackProvider_1.usePureBlack)();
     const modalDialogRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const handleEscKey = (event) => {
@@ -68,9 +66,7 @@ exports.ModalContent = (0, react_1.forwardRef)(({ className, children, size = Mo
     }, [isClosedOnEscapeKey, isClosedOnOutsideClick, onClose]);
     return (react_1.default.createElement(ModalFocus_1.ModalFocus, { initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, restoreFocus: restoreFocus, autoFocus: autoFocus },
         react_1.default.createElement("div", { ref: ref, className: (0, tw_merge_1.twMerge)('fixed inset-0 z-[1050] flex items-start justify-center p-4 sm:py-8 md:py-12', '[@media(max-height:475px)]:p-2', className), ...props },
-            react_1.default.createElement(Box_1.Box, { ref: modalDialogRef, asChild: true, backgroundColor: isPureBlack
-                    ? Box_1.BoxBackgroundColor.BackgroundAlternative
-                    : Box_1.BoxBackgroundColor.BackgroundDefault, justifyContent: Box_1.BoxJustifyContent.Start, alignItems: Box_1.BoxAlignItems.Stretch, flexDirection: Box_1.BoxFlexDirection.Column, paddingTop: 4, paddingBottom: 4, ...modalDialogProps, className: (0, tw_merge_1.twMerge)('flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up', ModalContent_constants_1.TWCLASSMAP_MODAL_CONTENT_SIZE[size], isPureBlack && 'border border-muted', modalDialogProps?.className) },
+            react_1.default.createElement(Box_1.Box, { ref: modalDialogRef, asChild: true, backgroundColor: Box_1.BoxBackgroundColor.BackgroundElevated1, borderColor: Box_1.BoxBorderColor.BorderAlternative, borderWidth: 1, justifyContent: Box_1.BoxJustifyContent.Start, alignItems: Box_1.BoxAlignItems.Stretch, flexDirection: Box_1.BoxFlexDirection.Column, paddingTop: 4, paddingBottom: 4, ...modalDialogProps, className: (0, tw_merge_1.twMerge)('flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up', ModalContent_constants_1.TWCLASSMAP_MODAL_CONTENT_SIZE[size], modalDialogProps?.className) },
                 react_1.default.createElement("section", { role: "dialog", "aria-modal": "true" }, children)))));
 });
 exports.ModalContent.displayName = 'ModalContent';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalContent.cjs","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6D;AAE7D,uDAA+C;AAC/C,~~0CAMgB~~;AAChB,8CAA2C;AAC3C,wDAA2C;~~AAC3C~~,~~sEAAoD;AAEpD,~~yEAGkC;AAElC,iEAAwD;AAE3C,QAAA,YAAY,GAAG,IAAA,kBAAU,EACpC,CACE,EACE,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,qCAAgB,CAAC,EAAE,EAC1B,gBAAgB,EAChB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,EACJ,OAAO,EACP,mBAAmB,EACnB,sBAAsB,EACtB,eAAe,EACf,aAAa,EACb,YAAY,EACZ,SAAS,GACV,GAAG,IAAA,uBAAe,GAAE,CAAC;IACtB,MAAM,~~WAAW,GAAG,IAAA,gCAAY,GAAE,CAAC;IACnC,MAAM,~~cAAc,GAAG,IAAA,cAAM,EAAc,IAAI,CAAC,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC5C,IAAI,mBAAmB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACjD,OAAO,EAAE,CAAC;aACX;QACH,CAAC,CAAC;QACF,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,IAAI,CAAC,sBAAsB,EAAE;gBAC3B,OAAO;aACR;YACD,MAAM,MAAM,GAAG,KAAK,CAAC,MAA4B,CAAC;YAClD,mEAAmE;YACnE,4DAA4D;YAC5D,kEAAkE;YAClE,8DAA8D;YAC9D,IAAI,MAAM,EAAE,OAAO,CAAC,IAAI,gEAAuC,GAAG,CAAC,EAAE;gBACnE,OAAO;aACR;YACD,IACE,cAAc,CAAC,OAAO;gBACtB,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAc,CAAC,EAChD;gBACA,OAAO,EAAE,CAAC;aACX;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QACnD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAE3D,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;YACtD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,mBAAmB,EAAE,sBAAsB,EAAE,OAAO,CAAC,CAAC,CAAC;IAE3D,OAAO,CACL,8BAAC,uBAAU,IACT,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS;QAEpB,uCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,kBAAO,EAChB,6EAA6E,EAC7E,gCAAgC,EAChC,SAAS,CACV,KACG,KAAK;YAET,8BAAC,SAAG,IACF,GAAG,EAAE,cAA2C,EAChD,OAAO,QACP,eAAe,~~EACb~~,~~WAAW;oBACT~~,CAAC,~~CAAC~~,~~wBAAkB~~,~~CAAC~~,~~qBAAqB;oBAC1C~~,~~CAAC~~,CAAC,~~wBAAkB~~,CAAC,~~iBAAiB~~,~~EAE1C,~~cAAc,EAAE,uBAAiB,CAAC,KAAK,EACvC,UAAU,EAAE,mBAAa,CAAC,OAAO,EACjC,aAAa,EAAE,sBAAgB,CAAC,MAAM,EACtC,UAAU,EAAE,CAAC,EACb,aAAa,EAAE,CAAC,KACZ,gBAAgB,EACpB,SAAS,EAAE,IAAA,kBAAO,EAChB,0EAA0E,EAC1E,sDAA6B,CAAC,IAAI,CAAC,EACnC,~~WAAW,IAAI,qBAAqB,EACpC,~~gBAAgB,EAAE,SAAS,CAC5B;gBAED,2CAAS,IAAI,EAAC,QAAQ,gBAAY,MAAM,IACrC,QAAQ,CACD,CACN,CACF,CACK,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import React, { forwardRef, useEffect, useRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport {\n Box,\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n BoxJustifyContent,\n} from '../Box';\nimport { useModalContext } from '../Modal';\nimport { ModalFocus } from '../ModalFocus';\~~nimport { usePureBlack } from '../PureBlackProvider';\~~n\nimport {\n MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR,\n TWCLASSMAP_MODAL_CONTENT_SIZE,\n} from './ModalContent.constants';\nimport type { ModalContentProps } from './ModalContent.types';\nimport { ModalContentSize } from './ModalContent.types';\n\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n (\n {\n className,\n children,\n size = ModalContentSize.Sm,\n modalDialogProps,\n ...props\n },\n ref,\n ) => {\n const {\n onClose,\n isClosedOnEscapeKey,\n isClosedOnOutsideClick,\n initialFocusRef,\n finalFocusRef,\n restoreFocus,\n autoFocus,\n } = useModalContext();\n const ~~isPureBlack = usePureBlack();\n const~~ modalDialogRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n const handleEscKey = (event: KeyboardEvent) => {\n if (isClosedOnEscapeKey && event.key === 'Escape') {\n onClose();\n }\n };\n const handleClickOutside = (event: MouseEvent) => {\n if (!isClosedOnOutsideClick) {\n return;\n }\n const target = event.target as HTMLElement \| null;\n // Floating UI primitives (Popover, Tooltip, Select dropdown, etc.)\n // that portal alongside the Modal but are part of the modal\n // interaction can opt out of the outside-click handler by setting\n // `data-mm-modal-ignore-outside-click` on their root element.\n if (target?.closest(`[${MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR}]`)) {\n return;\n }\n if (\n modalDialogRef.current &&\n !modalDialogRef.current.contains(target as Node)\n ) {\n onClose();\n }\n };\n\n document.addEventListener('keydown', handleEscKey);\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n document.removeEventListener('keydown', handleEscKey);\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [isClosedOnEscapeKey, isClosedOnOutsideClick, onClose]);\n\n return (\n <ModalFocus\n initialFocusRef={initialFocusRef}\n finalFocusRef={finalFocusRef}\n restoreFocus={restoreFocus}\n autoFocus={autoFocus}\n >\n <div\n ref={ref}\n className={twMerge(\n 'fixed inset-0 z-[1050] flex items-start justify-center p-4 sm:py-8 md:py-12',\n '[@media(max-height:475px)]:p-2',\n className,\n )}\n {...props}\n >\n <Box\n ref={modalDialogRef as React.Ref<HTMLDivElement>}\n asChild\n backgroundColor={~~\n isPureBlack\n ?~~ BoxBackgroundColor.~~BackgroundAlternative~~\n ~~: BoxBackgroundColor~~.~~BackgroundDefault~~\n }\n justifyContent={BoxJustifyContent.Start}\n alignItems={BoxAlignItems.Stretch}\n flexDirection={BoxFlexDirection.Column}\n paddingTop={4}\n paddingBottom={4}\n {...modalDialogProps}\n className={twMerge(\n 'flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up',\n TWCLASSMAP_MODAL_CONTENT_SIZE[size],\n ~~isPureBlack && 'border border-muted',\n~~ modalDialogProps?.className,\n )}\n >\n <section role=\"dialog\" aria-modal=\"true\">\n {children}\n </section>\n </Box>\n </div>\n </ModalFocus>\n );\n },\n);\n\nModalContent.displayName = 'ModalContent';\n"]}
1	+ {"version":3,"file":"ModalContent.cjs","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useEffect, useRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport {\n Box,\n BoxAlignItems,\n BoxBackgroundColor,\n BoxBorderColor,\n BoxFlexDirection,\n BoxJustifyContent,\n} from '../Box';\nimport { useModalContext } from '../Modal';\nimport { ModalFocus } from '../ModalFocus';\n\nimport {\n MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR,\n TWCLASSMAP_MODAL_CONTENT_SIZE,\n} from './ModalContent.constants';\nimport type { ModalContentProps } from './ModalContent.types';\nimport { ModalContentSize } from './ModalContent.types';\n\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n (\n {\n className,\n children,\n size = ModalContentSize.Sm,\n modalDialogProps,\n ...props\n },\n ref,\n ) => {\n const {\n onClose,\n isClosedOnEscapeKey,\n isClosedOnOutsideClick,\n initialFocusRef,\n finalFocusRef,\n restoreFocus,\n autoFocus,\n } = useModalContext();\n const modalDialogRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n const handleEscKey = (event: KeyboardEvent) => {\n if (isClosedOnEscapeKey && event.key === 'Escape') {\n onClose();\n }\n };\n const handleClickOutside = (event: MouseEvent) => {\n if (!isClosedOnOutsideClick) {\n return;\n }\n const target = event.target as HTMLElement \| null;\n // Floating UI primitives (Popover, Tooltip, Select dropdown, etc.)\n // that portal alongside the Modal but are part of the modal\n // interaction can opt out of the outside-click handler by setting\n // `data-mm-modal-ignore-outside-click` on their root element.\n if (target?.closest(`[${MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR}]`)) {\n return;\n }\n if (\n modalDialogRef.current &&\n !modalDialogRef.current.contains(target as Node)\n ) {\n onClose();\n }\n };\n\n document.addEventListener('keydown', handleEscKey);\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n document.removeEventListener('keydown', handleEscKey);\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [isClosedOnEscapeKey, isClosedOnOutsideClick, onClose]);\n\n return (\n <ModalFocus\n initialFocusRef={initialFocusRef}\n finalFocusRef={finalFocusRef}\n restoreFocus={restoreFocus}\n autoFocus={autoFocus}\n >\n <div\n ref={ref}\n className={twMerge(\n 'fixed inset-0 z-[1050] flex items-start justify-center p-4 sm:py-8 md:py-12',\n '[@media(max-height:475px)]:p-2',\n className,\n )}\n {...props}\n >\n <Box\n ref={modalDialogRef as React.Ref<HTMLDivElement>}\n asChild\n backgroundColor={BoxBackgroundColor.BackgroundElevated1}\n borderColor={BoxBorderColor.BorderAlternative}\n borderWidth={1}\n justifyContent={BoxJustifyContent.Start}\n alignItems={BoxAlignItems.Stretch}\n flexDirection={BoxFlexDirection.Column}\n paddingTop={4}\n paddingBottom={4}\n {...modalDialogProps}\n className={twMerge(\n 'flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up',\n TWCLASSMAP_MODAL_CONTENT_SIZE[size],\n modalDialogProps?.className,\n )}\n >\n <section role=\"dialog\" aria-modal=\"true\">\n {children}\n </section>\n </Box>\n </div>\n </ModalFocus>\n );\n },\n);\n\nModalContent.displayName = 'ModalContent';\n"]}