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

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

package/CHANGELOG.md CHANGED Viewed

@@ -7,6 +7,36 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
+## [0.38.0]
+### Changed
+- **BREAKING:** Updated peer dependencies to `@metamask/design-tokens@^10.0.0` and `@metamask/design-system-tailwind-preset@^0.12.0` ([#1450](https://github.com/MetaMask/metamask-design-system/pull/1450))
+  - Coordinates with `@metamask/design-tokens@10.0.0` PureBlack API removals and `@metamask/design-system-tailwind-preset@0.12.0` peer alignment; no additional React API changes beyond what 0.37.0 already shipped
+  - See [design-tokens Migration Guide](../design-tokens/MIGRATION.md#from-version-9x-to-1000)
+### Fixed
+- Updated `Popover` default surface and arrow to `BackgroundElevated2` so floating UI is elevated above base surfaces ([#1458](https://github.com/MetaMask/metamask-design-system/pull/1458))
+## [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 +509,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.36.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.38.0...HEAD
+[0.38.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.37.0...@metamask/design-system-react@0.38.0
+[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/Popover/Popover.cjs CHANGED Viewed

@@ -112,7 +112,7 @@ exports.Popover = (0, react_1.forwardRef)(({ children, className, style, positio
         refs.setFloating(element);
         popoverRef.current = element;
     };
-    const popoverContent = (react_1.default.createElement(Box_1.Box, { backgroundColor: Box_1.BoxBackgroundColor.BackgroundDefault, borderColor: Box_1.BoxBorderColor.BorderMuted, borderWidth: 1, padding: 4, role: role, ref: setPopoverRef, "data-popper-placement": placement, "data-popper-reference-hidden": referenceHiddenValue, className: (0, tw_merge_1.twMerge)('rounded-lg shadow-md', referenceHidden &&
+    const popoverContent = (react_1.default.createElement(Box_1.Box, { backgroundColor: Box_1.BoxBackgroundColor.BackgroundElevated2, borderColor: Box_1.BoxBorderColor.BorderMuted, borderWidth: 1, padding: 4, role: role, ref: setPopoverRef, "data-popper-placement": placement, "data-popper-reference-hidden": referenceHiddenValue, className: (0, tw_merge_1.twMerge)('rounded-lg shadow-md', referenceHidden &&
             'data-[popper-reference-hidden=true]:pointer-events-none data-[popper-reference-hidden=true]:invisible', className), ...props, style: popoverStyle },
         children,
         hasArrow && (react_1.default.createElement(Box_1.Box, { "data-testid": "popover-arrow", ...arrowProps, ref: arrowRef, className: (0, tw_merge_1.twMerge)('invisible absolute size-10', arrowProps?.className), style: {
@@ -120,7 +120,7 @@ exports.Popover = (0, react_1.forwardRef)(({ children, className, style, positio
                 top: middlewareData.arrow?.y,
                 ...arrowPlacementStyle.container,
             } },
-            react_1.default.createElement(Box_1.Box, { backgroundColor: Box_1.BoxBackgroundColor.BackgroundDefault, borderColor: Box_1.BoxBorderColor.BorderMuted, borderWidth: 1, "data-testid": "popover-arrow-visual", className: "visible absolute left-1/2 top-1/2 -ml-1 -mt-1 size-2 rounded-tl-sm border-b-transparent border-r-transparent", style: arrowPlacementStyle.visual })))));
+            react_1.default.createElement(Box_1.Box, { backgroundColor: Box_1.BoxBackgroundColor.BackgroundElevated2, borderColor: Box_1.BoxBorderColor.BorderMuted, borderWidth: 1, "data-testid": "popover-arrow-visual", className: "visible absolute left-1/2 top-1/2 -ml-1 -mt-1 size-2 rounded-tl-sm border-b-transparent border-r-transparent", style: arrowPlacementStyle.visual })))));
     return isPortal
         ? (0, react_dom_2.createPortal)(popoverContent, document.body)
         : popoverContent;