@metamask/design-system-react 0.35.1 → 0.36.0

package/CHANGELOG.md

@@ -7,6 +7,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [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
+
+- Fixed `Checkbox` so the native `<input>` is the visible, clickable control instead of an `opacity-0` overlay; use `inputProps` for `data-testid` so Selenium E2E tests can find and click the control ([#1437](https://github.com/MetaMask/metamask-design-system/pull/1437))
+
 ## [0.35.1]
 
 ### Fixed
@@ -455,7 +479,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.1...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.36.0...HEAD
+[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
 [0.34.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.33.0...@metamask/design-system-react@0.34.0

package/dist/components/Checkbox/Checkbox.cjs

@@ -48,10 +48,13 @@ exports.Checkbox = (0, react_1.forwardRef)(({ id, isSelected, isDisabled = false
         }
     };
     (0, react_1.useImperativeHandle)(ref, () => ({ toggle: handleClick }), [handleClick]);
-    const outerClassName = (0, tw_merge_1.twMerge)('inline-flex items-center', isDisabled && 'cursor-not-allowed opacity-50', className);
+    const { className: inputClassName, ...restInputProps } = inputProps ?? {};
+    const { className: checkboxContainerClassName, ...restCheckboxContainerProps } = checkboxContainerProps ?? {};
+    const { className: checkedIconClassName, ...restCheckedIconProps } = checkedIconProps ?? {};
+    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 hover:bg-icon-default-hover active:bg-icon-default-pressed'
-        : 'bg-default hover:bg-default-hover active:bg-default-pressed';
+        ? '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';
     let baseBorder = 'border-default';
     if (isSelected) {
         baseBorder = 'border-icon-default';
@@ -59,13 +62,14 @@ exports.Checkbox = (0, react_1.forwardRef)(({ id, isSelected, isDisabled = false
     else if (isInvalid) {
         baseBorder = 'border-error-default';
     }
-    const checkboxClasses = (0, tw_merge_1.twMerge)('relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary-default', baseBg, baseBorder, checkboxContainerProps?.className);
-    const iconClasses = (0, tw_merge_1.twMerge)('pointer-events-none transition-opacity', isSelected ? 'opacity-100' : 'opacity-0', checkedIconProps?.className);
+    // Native input is the visible control (no opacity-0) for Selenium isDisplayed().
+    const inputClasses = (0, tw_merge_1.twMerge)('peer size-6 shrink-0 cursor-pointer appearance-none rounded border-2 p-0 transition-transform enabled:active:scale-95', 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', 'disabled:cursor-not-allowed', baseBg, baseBorder, inputClassName);
+    const wrapperClasses = (0, tw_merge_1.twMerge)('relative inline-flex size-6 items-center justify-center', checkboxContainerClassName);
+    const iconClasses = (0, tw_merge_1.twMerge)('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', isSelected ? 'opacity-100' : 'opacity-0', checkedIconClassName);
     return (react_1.default.createElement("label", { htmlFor: id, className: outerClassName, style: style, ...props },
-        react_1.default.createElement("div", { className: "relative" },
-            react_1.default.createElement("input", { type: "checkbox", id: id, checked: isSelected, disabled: isDisabled, "aria-invalid": isInvalid, onChange: handleChange, onKeyDown: handleKeyDown, className: "peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed", ...inputProps }),
-            react_1.default.createElement("div", { className: checkboxClasses, ...checkboxContainerProps },
-                react_1.default.createElement(Icon_1.Icon, { name: Icon_1.IconName.Check, color: Icon_1.IconColor.IconInverse, size: Icon_1.IconSize.Sm, ...checkedIconProps, className: iconClasses }))),
+        react_1.default.createElement("div", { className: wrapperClasses, ...restCheckboxContainerProps },
+            react_1.default.createElement("input", { type: "checkbox", id: id, checked: isSelected, disabled: isDisabled, "aria-invalid": isInvalid, onChange: handleChange, onKeyDown: handleKeyDown, className: inputClasses, ...restInputProps }),
+            react_1.default.createElement(Icon_1.Icon, { name: Icon_1.IconName.Check, color: Icon_1.IconColor.IconInverse, size: Icon_1.IconSize.Sm, ...restCheckedIconProps, className: iconClasses })),
         label ? (react_1.default.createElement(Text_1.Text, { asChild: true, ...labelProps, className: (0, tw_merge_1.twMerge)('ml-3', labelProps?.className) },
             react_1.default.createElement("span", null, label))) : null));
 });

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

@@ -1 +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 outerClassName = twMerge(\n      'inline-flex items-center',\n      isDisabled && 'cursor-not-allowed opacity-50',\n      className,\n    );\n\n    const baseBg = isSelected\n      ? 'bg-icon-default hover:bg-icon-default-hover active:bg-icon-default-pressed'\n      : 'bg-default hover:bg-default-hover 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    const checkboxClasses = twMerge(\n      'relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary-default',\n      baseBg,\n      baseBorder,\n      checkboxContainerProps?.className,\n    );\n\n    const iconClasses = twMerge(\n      'pointer-events-none transition-opacity',\n      isSelected ? 'opacity-100' : 'opacity-0',\n      checkedIconProps?.className,\n    );\n\n    return (\n      <label htmlFor={id} className={outerClassName} style={style} {...props}>\n        <div className=\"relative\">\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=\"peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n            {...inputProps}\n          />\n          <div className={checkboxClasses} {...checkboxContainerProps}>\n            <Icon\n              name={IconName.Check}\n              color={IconColor.IconInverse}\n              size={IconSize.Sm}\n              {...checkedIconProps}\n              className={iconClasses}\n            />\n          </div>\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"]}
+{"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-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"]}

package/dist/components/Checkbox/Checkbox.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.cts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,cAAc;AAM/D,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ;YAAwB,MAAM,IAAI;GA2GtD,CAAC"}
+{"version":3,"file":"Checkbox.d.cts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,cAAc;AAM/D,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ;YAAwB,MAAM,IAAI;GAyHtD,CAAC"}

package/dist/components/Checkbox/Checkbox.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.mts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,cAAc;AAM/D,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ;YAAwB,MAAM,IAAI;GA2GtD,CAAC"}
+{"version":3,"file":"Checkbox.d.mts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,cAAc;AAM/D,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ;YAAwB,MAAM,IAAI;GAyHtD,CAAC"}

package/dist/components/Checkbox/Checkbox.mjs

@@ -29,10 +29,13 @@ export const Checkbox = forwardRef(({ id, isSelected, isDisabled = false, isInva
         }
     };
     useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);
-    const outerClassName = twMerge('inline-flex items-center', isDisabled && 'cursor-not-allowed opacity-50', className);
+    const { className: inputClassName, ...restInputProps } = inputProps ?? {};
+    const { className: checkboxContainerClassName, ...restCheckboxContainerProps } = checkboxContainerProps ?? {};
+    const { className: checkedIconClassName, ...restCheckedIconProps } = checkedIconProps ?? {};
+    const outerClassName = twMerge('inline-flex items-center self-start', isDisabled && 'cursor-not-allowed opacity-50', className);
     const baseBg = isSelected
-        ? 'bg-icon-default hover:bg-icon-default-hover active:bg-icon-default-pressed'
-        : 'bg-default hover:bg-default-hover active:bg-default-pressed';
+        ? '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';
     let baseBorder = 'border-default';
     if (isSelected) {
         baseBorder = 'border-icon-default';
@@ -40,13 +43,14 @@ export const Checkbox = forwardRef(({ id, isSelected, isDisabled = false, isInva
     else if (isInvalid) {
         baseBorder = 'border-error-default';
     }
-    const checkboxClasses = twMerge('relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary-default', baseBg, baseBorder, checkboxContainerProps?.className);
-    const iconClasses = twMerge('pointer-events-none transition-opacity', isSelected ? 'opacity-100' : 'opacity-0', checkedIconProps?.className);
+    // Native input is the visible control (no opacity-0) for Selenium isDisplayed().
+    const inputClasses = twMerge('peer size-6 shrink-0 cursor-pointer appearance-none rounded border-2 p-0 transition-transform enabled:active:scale-95', 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', 'disabled:cursor-not-allowed', baseBg, baseBorder, inputClassName);
+    const wrapperClasses = twMerge('relative inline-flex size-6 items-center justify-center', checkboxContainerClassName);
+    const iconClasses = twMerge('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', isSelected ? 'opacity-100' : 'opacity-0', checkedIconClassName);
     return (React.createElement("label", { htmlFor: id, className: outerClassName, style: style, ...props },
-        React.createElement("div", { className: "relative" },
-            React.createElement("input", { type: "checkbox", id: id, checked: isSelected, disabled: isDisabled, "aria-invalid": isInvalid, onChange: handleChange, onKeyDown: handleKeyDown, className: "peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed", ...inputProps }),
-            React.createElement("div", { className: checkboxClasses, ...checkboxContainerProps },
-                React.createElement(Icon, { name: IconName.Check, color: IconColor.IconInverse, size: IconSize.Sm, ...checkedIconProps, className: iconClasses }))),
+        React.createElement("div", { className: wrapperClasses, ...restCheckboxContainerProps },
+            React.createElement("input", { type: "checkbox", id: id, checked: isSelected, disabled: isDisabled, "aria-invalid": isInvalid, onChange: handleChange, onKeyDown: handleKeyDown, className: inputClasses, ...restInputProps }),
+            React.createElement(Icon, { name: IconName.Check, color: IconColor.IconInverse, size: IconSize.Sm, ...restCheckedIconProps, className: iconClasses })),
         label ? (React.createElement(Text, { asChild: true, ...labelProps, className: twMerge('ml-3', labelProps?.className) },
             React.createElement("span", null, label))) : null));
 });

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

@@ -1 +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 outerClassName = twMerge(\n      'inline-flex items-center',\n      isDisabled && 'cursor-not-allowed opacity-50',\n      className,\n    );\n\n    const baseBg = isSelected\n      ? 'bg-icon-default hover:bg-icon-default-hover active:bg-icon-default-pressed'\n      : 'bg-default hover:bg-default-hover 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    const checkboxClasses = twMerge(\n      'relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary-default',\n      baseBg,\n      baseBorder,\n      checkboxContainerProps?.className,\n    );\n\n    const iconClasses = twMerge(\n      'pointer-events-none transition-opacity',\n      isSelected ? 'opacity-100' : 'opacity-0',\n      checkedIconProps?.className,\n    );\n\n    return (\n      <label htmlFor={id} className={outerClassName} style={style} {...props}>\n        <div className=\"relative\">\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=\"peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n            {...inputProps}\n          />\n          <div className={checkboxClasses} {...checkboxContainerProps}>\n            <Icon\n              name={IconName.Check}\n              color={IconColor.IconInverse}\n              size={IconSize.Sm}\n              {...checkedIconProps}\n              className={iconClasses}\n            />\n          </div>\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"]}
+{"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-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"]}

package/dist/components/Checkbox/Checkbox.types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CheckboxPropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type CheckboxProps = Omit<\n  ComponentProps<'label'>,\n  'style' | 'className' | 'children' | 'htmlFor'\n> &\n  CheckboxPropsShared & {\n    /**\n     * Required unique identifier for the checkbox input element.\n     * This is used for the input's ID and the label's htmlFor attributes.\n     */\n    id: string;\n\n    /**\n     * Optional props to be passed to the label's Text component\n     */\n    labelProps?: Omit<Partial<TextProps>, 'children'>;\n\n    /**\n     * Optional props passed to the input element.\n     */\n    inputProps?: Omit<\n      ComponentProps<'input'>,\n      'type' | 'checked' | 'onChange' | 'disabled'\n    > & {\n      [key: `data-${string}`]: string;\n    };\n\n    /**\n     * Optional props passed to the container div wrapping the checkbox icon.\n     */\n    checkboxContainerProps?: (Omit<ComponentProps<'div'>, 'children'> & {\n      className?: string;\n    }) &\n      Record<string, unknown>;\n\n    /**\n     * Optional props to be passed to the check Icon component\n     */\n    checkedIconProps?: Partial<IconProps>;\n    /**\n     * Optional prop for additional CSS classes to be applied to the Checkbox component.\n     * These classes will be merged with the component's default classes using twMerge.\n     */\n    className?: string;\n    /**\n     * Optional CSS styles for the outer container.\n     */\n    style?: React.CSSProperties;\n  };\n"]}
+{"version":3,"file":"Checkbox.types.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CheckboxPropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type CheckboxProps = Omit<\n  ComponentProps<'label'>,\n  'style' | 'className' | 'children' | 'htmlFor'\n> &\n  CheckboxPropsShared & {\n    /**\n     * Required unique identifier for the checkbox input element.\n     * This is used for the input's ID and the label's htmlFor attributes.\n     */\n    id: string;\n\n    /**\n     * Optional props to be passed to the label's Text component\n     */\n    labelProps?: Omit<Partial<TextProps>, 'children'>;\n\n    /**\n     * Optional props passed to the native input element (the visible control).\n     * Prefer putting test ids here — the input is Selenium-visible and clickable.\n     */\n    inputProps?: Omit<\n      ComponentProps<'input'>,\n      'type' | 'checked' | 'onChange' | 'disabled'\n    > & {\n      [key: `data-${string}`]: string;\n    };\n\n    /**\n     * Optional props passed to the relative wrapper around the input and check icon.\n     */\n    checkboxContainerProps?: (Omit<ComponentProps<'div'>, 'children'> & {\n      className?: string;\n    }) &\n      Record<string, unknown>;\n\n    /**\n     * Optional props to be passed to the check Icon component\n     */\n    checkedIconProps?: Partial<IconProps>;\n    /**\n     * Optional prop for additional CSS classes to be applied to the Checkbox component.\n     * These classes will be merged with the component's default classes using twMerge.\n     */\n    className?: string;\n    /**\n     * Optional CSS styles for the outer container.\n     */\n    style?: React.CSSProperties;\n  };\n"]}

package/dist/components/Checkbox/Checkbox.types.d.cts

@@ -13,13 +13,14 @@ export type CheckboxProps = Omit<ComponentProps<'label'>, 'style' | 'className'
      */
     labelProps?: Omit<Partial<TextProps>, 'children'>;
     /**
-     * Optional props passed to the input element.
+     * Optional props passed to the native input element (the visible control).
+     * Prefer putting test ids here — the input is Selenium-visible and clickable.
      */
     inputProps?: Omit<ComponentProps<'input'>, 'type' | 'checked' | 'onChange' | 'disabled'> & {
         [key: `data-${string}`]: string;
     };
     /**
-     * Optional props passed to the container div wrapping the checkbox icon.
+     * Optional props passed to the relative wrapper around the input and check icon.
      */
     checkboxContainerProps?: (Omit<ComponentProps<'div'>, 'children'> & {
         className?: string;

package/dist/components/Checkbox/Checkbox.types.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.d.cts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,uCAAuC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,CAAC,EACvB,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAC/C,GACC,mBAAmB,GAAG;IACpB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAElD;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CACf,cAAc,CAAC,OAAO,CAAC,EACvB,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAC7C,GAAG;QACF,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;KACjC,CAAC;IAEF;;OAEG;IACH,sBAAsB,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;QAClE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,GACA,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
+{"version":3,"file":"Checkbox.types.d.cts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,uCAAuC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,CAAC,EACvB,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAC/C,GACC,mBAAmB,GAAG;IACpB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAElD;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CACf,cAAc,CAAC,OAAO,CAAC,EACvB,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAC7C,GAAG;QACF,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;KACjC,CAAC;IAEF;;OAEG;IACH,sBAAsB,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;QAClE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,GACA,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}

package/dist/components/Checkbox/Checkbox.types.d.mts

@@ -13,13 +13,14 @@ export type CheckboxProps = Omit<ComponentProps<'label'>, 'style' | 'className'
      */
     labelProps?: Omit<Partial<TextProps>, 'children'>;
     /**
-     * Optional props passed to the input element.
+     * Optional props passed to the native input element (the visible control).
+     * Prefer putting test ids here — the input is Selenium-visible and clickable.
      */
     inputProps?: Omit<ComponentProps<'input'>, 'type' | 'checked' | 'onChange' | 'disabled'> & {
         [key: `data-${string}`]: string;
     };
     /**
-     * Optional props passed to the container div wrapping the checkbox icon.
+     * Optional props passed to the relative wrapper around the input and check icon.
      */
     checkboxContainerProps?: (Omit<ComponentProps<'div'>, 'children'> & {
         className?: string;

package/dist/components/Checkbox/Checkbox.types.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.d.mts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,uCAAuC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,CAAC,EACvB,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAC/C,GACC,mBAAmB,GAAG;IACpB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAElD;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CACf,cAAc,CAAC,OAAO,CAAC,EACvB,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAC7C,GAAG;QACF,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;KACjC,CAAC;IAEF;;OAEG;IACH,sBAAsB,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;QAClE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,GACA,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
+{"version":3,"file":"Checkbox.types.d.mts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,uCAAuC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,CAAC,EACvB,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAC/C,GACC,mBAAmB,GAAG;IACpB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAElD;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CACf,cAAc,CAAC,OAAO,CAAC,EACvB,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAC7C,GAAG;QACF,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;KACjC,CAAC;IAEF;;OAEG;IACH,sBAAsB,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;QAClE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,GACA,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}

package/dist/components/Checkbox/Checkbox.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CheckboxPropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type CheckboxProps = Omit<\n  ComponentProps<'label'>,\n  'style' | 'className' | 'children' | 'htmlFor'\n> &\n  CheckboxPropsShared & {\n    /**\n     * Required unique identifier for the checkbox input element.\n     * This is used for the input's ID and the label's htmlFor attributes.\n     */\n    id: string;\n\n    /**\n     * Optional props to be passed to the label's Text component\n     */\n    labelProps?: Omit<Partial<TextProps>, 'children'>;\n\n    /**\n     * Optional props passed to the input element.\n     */\n    inputProps?: Omit<\n      ComponentProps<'input'>,\n      'type' | 'checked' | 'onChange' | 'disabled'\n    > & {\n      [key: `data-${string}`]: string;\n    };\n\n    /**\n     * Optional props passed to the container div wrapping the checkbox icon.\n     */\n    checkboxContainerProps?: (Omit<ComponentProps<'div'>, 'children'> & {\n      className?: string;\n    }) &\n      Record<string, unknown>;\n\n    /**\n     * Optional props to be passed to the check Icon component\n     */\n    checkedIconProps?: Partial<IconProps>;\n    /**\n     * Optional prop for additional CSS classes to be applied to the Checkbox component.\n     * These classes will be merged with the component's default classes using twMerge.\n     */\n    className?: string;\n    /**\n     * Optional CSS styles for the outer container.\n     */\n    style?: React.CSSProperties;\n  };\n"]}
+{"version":3,"file":"Checkbox.types.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CheckboxPropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type CheckboxProps = Omit<\n  ComponentProps<'label'>,\n  'style' | 'className' | 'children' | 'htmlFor'\n> &\n  CheckboxPropsShared & {\n    /**\n     * Required unique identifier for the checkbox input element.\n     * This is used for the input's ID and the label's htmlFor attributes.\n     */\n    id: string;\n\n    /**\n     * Optional props to be passed to the label's Text component\n     */\n    labelProps?: Omit<Partial<TextProps>, 'children'>;\n\n    /**\n     * Optional props passed to the native input element (the visible control).\n     * Prefer putting test ids here — the input is Selenium-visible and clickable.\n     */\n    inputProps?: Omit<\n      ComponentProps<'input'>,\n      'type' | 'checked' | 'onChange' | 'disabled'\n    > & {\n      [key: `data-${string}`]: string;\n    };\n\n    /**\n     * Optional props passed to the relative wrapper around the input and check icon.\n     */\n    checkboxContainerProps?: (Omit<ComponentProps<'div'>, 'children'> & {\n      className?: string;\n    }) &\n      Record<string, unknown>;\n\n    /**\n     * Optional props to be passed to the check Icon component\n     */\n    checkedIconProps?: Partial<IconProps>;\n    /**\n     * Optional prop for additional CSS classes to be applied to the Checkbox component.\n     * These classes will be merged with the component's default classes using twMerge.\n     */\n    className?: string;\n    /**\n     * Optional CSS styles for the outer container.\n     */\n    style?: React.CSSProperties;\n  };\n"]}

package/dist/components/ModalContent/ModalContent.cjs

@@ -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

@@ -1 +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  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"]}
+{"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"]}

package/dist/components/ModalContent/ModalContent.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.d.cts","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,cAAc;AAkB7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAG9D,eAAO,MAAM,YAAY,uGAuGxB,CAAC"}
+{"version":3,"file":"ModalContent.d.cts","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,cAAc;AAkB7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAG9D,eAAO,MAAM,YAAY,uGAmGxB,CAAC"}

package/dist/components/ModalContent/ModalContent.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.d.mts","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,cAAc;AAkB7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAG9D,eAAO,MAAM,YAAY,uGAuGxB,CAAC"}
+{"version":3,"file":"ModalContent.d.mts","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,cAAc;AAkB7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAG9D,eAAO,MAAM,YAAY,uGAmGxB,CAAC"}

package/dist/components/ModalContent/ModalContent.mjs

@@ -7,15 +7,13 @@ function $importDefault(module) {
 import $React, { forwardRef, useEffect, useRef } from "react";
 const React = $importDefault($React);
 import { twMerge } from "../../utils/tw-merge.mjs";
-import { Box, BoxAlignItems, BoxBackgroundColor, BoxFlexDirection, BoxJustifyContent } from "../Box/index.mjs";
+import { Box, BoxAlignItems, BoxBackgroundColor, BoxBorderColor, BoxFlexDirection, BoxJustifyContent } from "../Box/index.mjs";
 import { useModalContext } from "../Modal/index.mjs";
 import { ModalFocus } from "../ModalFocus/index.mjs";
-import { usePureBlack } from "../PureBlackProvider/index.mjs";
 import { MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR, TWCLASSMAP_MODAL_CONTENT_SIZE } from "./ModalContent.constants.mjs";
 import { ModalContentSize } from "./ModalContent.types.mjs";
 export const ModalContent = forwardRef(({ className, children, size = ModalContentSize.Sm, modalDialogProps, ...props }, ref) => {
     const { onClose, isClosedOnEscapeKey, isClosedOnOutsideClick, initialFocusRef, finalFocusRef, restoreFocus, autoFocus, } = useModalContext();
-    const isPureBlack = usePureBlack();
     const modalDialogRef = useRef(null);
     useEffect(() => {
         const handleEscKey = (event) => {
@@ -49,9 +47,7 @@ export const ModalContent = forwardRef(({ className, children, size = ModalConte
     }, [isClosedOnEscapeKey, isClosedOnOutsideClick, onClose]);
     return (React.createElement(ModalFocus, { initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, restoreFocus: restoreFocus, autoFocus: autoFocus },
         React.createElement("div", { ref: ref, className: 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.createElement(Box, { ref: modalDialogRef, asChild: true, backgroundColor: isPureBlack
-                    ? BoxBackgroundColor.BackgroundAlternative
-                    : BoxBackgroundColor.BackgroundDefault, justifyContent: BoxJustifyContent.Start, alignItems: BoxAlignItems.Stretch, flexDirection: BoxFlexDirection.Column, paddingTop: 4, paddingBottom: 4, ...modalDialogProps, className: twMerge('flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up', TWCLASSMAP_MODAL_CONTENT_SIZE[size], isPureBlack && 'border border-muted', modalDialogProps?.className) },
+            React.createElement(Box, { ref: modalDialogRef, asChild: true, backgroundColor: BoxBackgroundColor.BackgroundElevated1, borderColor: BoxBorderColor.BorderAlternative, borderWidth: 1, justifyContent: BoxJustifyContent.Start, alignItems: BoxAlignItems.Stretch, flexDirection: BoxFlexDirection.Column, paddingTop: 4, paddingBottom: 4, ...modalDialogProps, className: twMerge('flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up', TWCLASSMAP_MODAL_CONTENT_SIZE[size], modalDialogProps?.className) },
                 React.createElement("section", { role: "dialog", "aria-modal": "true" }, children)))));
 });
 ModalContent.displayName = 'ModalContent';

package/dist/components/ModalContent/ModalContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.mjs","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  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"]}
+{"version":3,"file":"ModalContent.mjs","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"]}

package/dist/components/PureBlackProvider/PureBlackProvider.cjs

@@ -32,7 +32,10 @@ const react_1 = __importStar(require("react"));
  * Controlled component: the app owns when pure black is active (e.g. feature
  * flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides
  * come from `data-pure-black` on the document root (see extension `setTheme`);
- * this provider supplies `usePureBlack()` for components that branch in JS.
+ * this provider supplies `usePureBlack()` for any remaining JS consumers.
+ *
+ * Design-system components no longer branch on pure black for surfaces —
+ * use elevated / border-alternative tokens instead (TMCU-1282).
  *
  * @param options - Component props
  * @param options.children - Child components to render
@@ -48,9 +51,9 @@ exports.PureBlackProvider.displayName = 'PureBlackProvider';
 /**
  * Returns whether pure-black dark mode is active in the current subtree.
  *
- * Use for component logic that depends on the active dark palette (e.g. elevated
- * surfaces in Modal). On React Native, use `usePureBlack` from
- * `@metamask/design-system-twrnc-preset` instead.
+ * Prefer semantic tokens (`bg-elevated1`, `border-alternative`, etc.) over
+ * branching on this flag in design-system components. On React Native, use
+ * `usePureBlack` from `@metamask/design-system-twrnc-preset` instead.
  *
  * @returns True when wrapped by `PureBlackProvider` with `isPureBlack` enabled
  */

package/dist/components/PureBlackProvider/PureBlackProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PureBlackProvider.cjs","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAAkE;AAElE,+CAAmD;AAEnD;;;;;;;;;;;;GAYG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAChC,QAAQ,EACR,WAAW,GAAG,KAAK,GACI,EAAE,EAAE;IAC3B,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9D,OAAO,CACL,8BAAC,uCAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IACpC,QAAQ,CACiB,CAC7B,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,iBAAiB,qBAW5B;AAEF,yBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC;AAEpD;;;;;;;;GAQG;AACI,MAAM,YAAY,GAAG,GAAY,EAAE;IACxC,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAU,EAAC,uCAAgB,CAAC,CAAC;IACrD,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAHW,QAAA,YAAY,gBAGvB","sourcesContent":["import { PureBlackContext } from '@metamask/design-system-shared';\nimport type { PureBlackProviderProps } from '@metamask/design-system-shared';\nimport React, { useContext, useMemo } from 'react';\n\n/**\n * React context for pure-black (OLED) dark mode on web.\n *\n * Controlled component: the app owns when pure black is active (e.g. feature\n * flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides\n * come from `data-pure-black` on the document root (see extension `setTheme`);\n * this provider supplies `usePureBlack()` for components that branch in JS.\n *\n * @param options - Component props\n * @param options.children - Child components to render\n * @param options.isPureBlack - When true, `usePureBlack()` returns true\n * @returns React component that provides pure-black context to children\n */\nexport const PureBlackProvider = ({\n  children,\n  isPureBlack = false,\n}: PureBlackProviderProps) => {\n  const value = useMemo(() => ({ isPureBlack }), [isPureBlack]);\n\n  return (\n    <PureBlackContext.Provider value={value}>\n      {children}\n    </PureBlackContext.Provider>\n  );\n};\n\nPureBlackProvider.displayName = 'PureBlackProvider';\n\n/**\n * Returns whether pure-black dark mode is active in the current subtree.\n *\n * Use for component logic that depends on the active dark palette (e.g. elevated\n * surfaces in Modal). On React Native, use `usePureBlack` from\n * `@metamask/design-system-twrnc-preset` instead.\n *\n * @returns True when wrapped by `PureBlackProvider` with `isPureBlack` enabled\n */\nexport const usePureBlack = (): boolean => {\n  const { isPureBlack } = useContext(PureBlackContext);\n  return isPureBlack;\n};\n"]}
+{"version":3,"file":"PureBlackProvider.cjs","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAAkE;AAElE,+CAAmD;AAEnD;;;;;;;;;;;;;;;GAeG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAChC,QAAQ,EACR,WAAW,GAAG,KAAK,GACI,EAAE,EAAE;IAC3B,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9D,OAAO,CACL,8BAAC,uCAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IACpC,QAAQ,CACiB,CAC7B,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,iBAAiB,qBAW5B;AAEF,yBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC;AAEpD;;;;;;;;GAQG;AACI,MAAM,YAAY,GAAG,GAAY,EAAE;IACxC,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAU,EAAC,uCAAgB,CAAC,CAAC;IACrD,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAHW,QAAA,YAAY,gBAGvB","sourcesContent":["import { PureBlackContext } from '@metamask/design-system-shared';\nimport type { PureBlackProviderProps } from '@metamask/design-system-shared';\nimport React, { useContext, useMemo } from 'react';\n\n/**\n * React context for pure-black (OLED) dark mode on web.\n *\n * Controlled component: the app owns when pure black is active (e.g. feature\n * flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides\n * come from `data-pure-black` on the document root (see extension `setTheme`);\n * this provider supplies `usePureBlack()` for any remaining JS consumers.\n *\n * Design-system components no longer branch on pure black for surfaces —\n * use elevated / border-alternative tokens instead (TMCU-1282).\n *\n * @param options - Component props\n * @param options.children - Child components to render\n * @param options.isPureBlack - When true, `usePureBlack()` returns true\n * @returns React component that provides pure-black context to children\n */\nexport const PureBlackProvider = ({\n  children,\n  isPureBlack = false,\n}: PureBlackProviderProps) => {\n  const value = useMemo(() => ({ isPureBlack }), [isPureBlack]);\n\n  return (\n    <PureBlackContext.Provider value={value}>\n      {children}\n    </PureBlackContext.Provider>\n  );\n};\n\nPureBlackProvider.displayName = 'PureBlackProvider';\n\n/**\n * Returns whether pure-black dark mode is active in the current subtree.\n *\n * Prefer semantic tokens (`bg-elevated1`, `border-alternative`, etc.) over\n * branching on this flag in design-system components. On React Native, use\n * `usePureBlack` from `@metamask/design-system-twrnc-preset` instead.\n *\n * @returns True when wrapped by `PureBlackProvider` with `isPureBlack` enabled\n */\nexport const usePureBlack = (): boolean => {\n  const { isPureBlack } = useContext(PureBlackContext);\n  return isPureBlack;\n};\n"]}

package/dist/components/PureBlackProvider/PureBlackProvider.d.cts

@@ -6,7 +6,10 @@ import React from "react";
  * Controlled component: the app owns when pure black is active (e.g. feature
  * flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides
  * come from `data-pure-black` on the document root (see extension `setTheme`);
- * this provider supplies `usePureBlack()` for components that branch in JS.
+ * this provider supplies `usePureBlack()` for any remaining JS consumers.
+ *
+ * Design-system components no longer branch on pure black for surfaces —
+ * use elevated / border-alternative tokens instead (TMCU-1282).
  *
  * @param options - Component props
  * @param options.children - Child components to render
@@ -20,9 +23,9 @@ export declare const PureBlackProvider: {
 /**
  * Returns whether pure-black dark mode is active in the current subtree.
  *
- * Use for component logic that depends on the active dark palette (e.g. elevated
- * surfaces in Modal). On React Native, use `usePureBlack` from
- * `@metamask/design-system-twrnc-preset` instead.
+ * Prefer semantic tokens (`bg-elevated1`, `border-alternative`, etc.) over
+ * branching on this flag in design-system components. On React Native, use
+ * `usePureBlack` from `@metamask/design-system-twrnc-preset` instead.
  *
  * @returns True when wrapped by `PureBlackProvider` with `isPureBlack` enabled
  */

package/dist/components/PureBlackProvider/PureBlackProvider.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"PureBlackProvider.d.cts","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,uCAAuC;AAC7E,OAAO,KAA8B,cAAc;AAEnD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,iBAAiB;iCAG3B,sBAAsB;;CAQxB,CAAC;AAIF;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,QAAO,OAG/B,CAAC"}
+{"version":3,"file":"PureBlackProvider.d.cts","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,uCAAuC;AAC7E,OAAO,KAA8B,cAAc;AAEnD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB;iCAG3B,sBAAsB;;CAQxB,CAAC;AAIF;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,QAAO,OAG/B,CAAC"}

package/dist/components/PureBlackProvider/PureBlackProvider.d.mts

@@ -6,7 +6,10 @@ import React from "react";
  * Controlled component: the app owns when pure black is active (e.g. feature
  * flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides
  * come from `data-pure-black` on the document root (see extension `setTheme`);
- * this provider supplies `usePureBlack()` for components that branch in JS.
+ * this provider supplies `usePureBlack()` for any remaining JS consumers.
+ *
+ * Design-system components no longer branch on pure black for surfaces —
+ * use elevated / border-alternative tokens instead (TMCU-1282).
  *
  * @param options - Component props
  * @param options.children - Child components to render
@@ -20,9 +23,9 @@ export declare const PureBlackProvider: {
 /**
  * Returns whether pure-black dark mode is active in the current subtree.
  *
- * Use for component logic that depends on the active dark palette (e.g. elevated
- * surfaces in Modal). On React Native, use `usePureBlack` from
- * `@metamask/design-system-twrnc-preset` instead.
+ * Prefer semantic tokens (`bg-elevated1`, `border-alternative`, etc.) over
+ * branching on this flag in design-system components. On React Native, use
+ * `usePureBlack` from `@metamask/design-system-twrnc-preset` instead.
  *
  * @returns True when wrapped by `PureBlackProvider` with `isPureBlack` enabled
  */

package/dist/components/PureBlackProvider/PureBlackProvider.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"PureBlackProvider.d.mts","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,uCAAuC;AAC7E,OAAO,KAA8B,cAAc;AAEnD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,iBAAiB;iCAG3B,sBAAsB;;CAQxB,CAAC;AAIF;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,QAAO,OAG/B,CAAC"}
+{"version":3,"file":"PureBlackProvider.d.mts","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,uCAAuC;AAC7E,OAAO,KAA8B,cAAc;AAEnD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB;iCAG3B,sBAAsB;;CAQxB,CAAC;AAIF;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,QAAO,OAG/B,CAAC"}

package/dist/components/PureBlackProvider/PureBlackProvider.mjs

@@ -13,7 +13,10 @@ const React = $importDefault($React);
  * Controlled component: the app owns when pure black is active (e.g. feature
  * flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides
  * come from `data-pure-black` on the document root (see extension `setTheme`);
- * this provider supplies `usePureBlack()` for components that branch in JS.
+ * this provider supplies `usePureBlack()` for any remaining JS consumers.
+ *
+ * Design-system components no longer branch on pure black for surfaces —
+ * use elevated / border-alternative tokens instead (TMCU-1282).
  *
  * @param options - Component props
  * @param options.children - Child components to render
@@ -28,9 +31,9 @@ PureBlackProvider.displayName = 'PureBlackProvider';
 /**
  * Returns whether pure-black dark mode is active in the current subtree.
  *
- * Use for component logic that depends on the active dark palette (e.g. elevated
- * surfaces in Modal). On React Native, use `usePureBlack` from
- * `@metamask/design-system-twrnc-preset` instead.
+ * Prefer semantic tokens (`bg-elevated1`, `border-alternative`, etc.) over
+ * branching on this flag in design-system components. On React Native, use
+ * `usePureBlack` from `@metamask/design-system-twrnc-preset` instead.
  *
  * @returns True when wrapped by `PureBlackProvider` with `isPureBlack` enabled
  */

package/dist/components/PureBlackProvider/PureBlackProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PureBlackProvider.mjs","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,gBAAgB,EAAE,uCAAuC;AAElE,OAAO,QAAO,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc;;AAEnD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,QAAQ,EACR,WAAW,GAAG,KAAK,GACI,EAAE,EAAE;IAC3B,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9D,OAAO,CACL,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IACpC,QAAQ,CACiB,CAC7B,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC;AAEpD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAY,EAAE;IACxC,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IACrD,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC","sourcesContent":["import { PureBlackContext } from '@metamask/design-system-shared';\nimport type { PureBlackProviderProps } from '@metamask/design-system-shared';\nimport React, { useContext, useMemo } from 'react';\n\n/**\n * React context for pure-black (OLED) dark mode on web.\n *\n * Controlled component: the app owns when pure black is active (e.g. feature\n * flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides\n * come from `data-pure-black` on the document root (see extension `setTheme`);\n * this provider supplies `usePureBlack()` for components that branch in JS.\n *\n * @param options - Component props\n * @param options.children - Child components to render\n * @param options.isPureBlack - When true, `usePureBlack()` returns true\n * @returns React component that provides pure-black context to children\n */\nexport const PureBlackProvider = ({\n  children,\n  isPureBlack = false,\n}: PureBlackProviderProps) => {\n  const value = useMemo(() => ({ isPureBlack }), [isPureBlack]);\n\n  return (\n    <PureBlackContext.Provider value={value}>\n      {children}\n    </PureBlackContext.Provider>\n  );\n};\n\nPureBlackProvider.displayName = 'PureBlackProvider';\n\n/**\n * Returns whether pure-black dark mode is active in the current subtree.\n *\n * Use for component logic that depends on the active dark palette (e.g. elevated\n * surfaces in Modal). On React Native, use `usePureBlack` from\n * `@metamask/design-system-twrnc-preset` instead.\n *\n * @returns True when wrapped by `PureBlackProvider` with `isPureBlack` enabled\n */\nexport const usePureBlack = (): boolean => {\n  const { isPureBlack } = useContext(PureBlackContext);\n  return isPureBlack;\n};\n"]}
+{"version":3,"file":"PureBlackProvider.mjs","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,gBAAgB,EAAE,uCAAuC;AAElE,OAAO,QAAO,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc;;AAEnD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,QAAQ,EACR,WAAW,GAAG,KAAK,GACI,EAAE,EAAE;IAC3B,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9D,OAAO,CACL,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IACpC,QAAQ,CACiB,CAC7B,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC;AAEpD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAY,EAAE;IACxC,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IACrD,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC","sourcesContent":["import { PureBlackContext } from '@metamask/design-system-shared';\nimport type { PureBlackProviderProps } from '@metamask/design-system-shared';\nimport React, { useContext, useMemo } from 'react';\n\n/**\n * React context for pure-black (OLED) dark mode on web.\n *\n * Controlled component: the app owns when pure black is active (e.g. feature\n * flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides\n * come from `data-pure-black` on the document root (see extension `setTheme`);\n * this provider supplies `usePureBlack()` for any remaining JS consumers.\n *\n * Design-system components no longer branch on pure black for surfaces —\n * use elevated / border-alternative tokens instead (TMCU-1282).\n *\n * @param options - Component props\n * @param options.children - Child components to render\n * @param options.isPureBlack - When true, `usePureBlack()` returns true\n * @returns React component that provides pure-black context to children\n */\nexport const PureBlackProvider = ({\n  children,\n  isPureBlack = false,\n}: PureBlackProviderProps) => {\n  const value = useMemo(() => ({ isPureBlack }), [isPureBlack]);\n\n  return (\n    <PureBlackContext.Provider value={value}>\n      {children}\n    </PureBlackContext.Provider>\n  );\n};\n\nPureBlackProvider.displayName = 'PureBlackProvider';\n\n/**\n * Returns whether pure-black dark mode is active in the current subtree.\n *\n * Prefer semantic tokens (`bg-elevated1`, `border-alternative`, etc.) over\n * branching on this flag in design-system components. On React Native, use\n * `usePureBlack` from `@metamask/design-system-twrnc-preset` instead.\n *\n * @returns True when wrapped by `PureBlackProvider` with `isPureBlack` enabled\n */\nexport const usePureBlack = (): boolean => {\n  const { isPureBlack } = useContext(PureBlackContext);\n  return isPureBlack;\n};\n"]}

package/dist/components/Toast/Toast.cjs

@@ -63,7 +63,7 @@ exports.Toast = (0, react_1.forwardRef)(({ actionButtonLabel, actionButtonOnClic
         : undefined;
     // Toast reuses BannerBase so the web surface stays aligned with the shared
     // banner layout and the React Native Toast API.
-    return (react_1.default.createElement(BannerBase_1.BannerBase, { ref: ref, ...resolvedActionProps, ...props, backgroundColor: design_system_shared_1.BoxBackgroundColor.BackgroundSection, borderColor: design_system_shared_1.BoxBorderColor.BorderMuted, borderWidth: 1, className: (0, tw_merge_1.twMerge)('rounded-xl', className), closeButtonProps: resolvedCloseButtonProps, onClose: onClose, startAccessory: renderSeverityAccessory({
+    return (react_1.default.createElement(BannerBase_1.BannerBase, { ref: ref, ...resolvedActionProps, ...props, backgroundColor: design_system_shared_1.BoxBackgroundColor.BackgroundElevated2, borderColor: design_system_shared_1.BoxBorderColor.BorderMuted, borderWidth: 1, className: (0, tw_merge_1.twMerge)('rounded-xl', className), closeButtonProps: resolvedCloseButtonProps, onClose: onClose, startAccessory: renderSeverityAccessory({
             severity,
             startAccessory,
             iconProps,

package/dist/components/Toast/Toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAMwC;AACxC,+CAA0C;AAE1C,uDAA+C;AAC/C,wDAA2C;AAC3C,4CAA+B;AAE/B,2DAA4D;AAG5D,MAAM,uBAAuB,GAAG,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,SAAS,GACqD,EAAE,EAAE;IAClE,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,SAAS,EAAE;QAC3D,OAAO,cAAc,CAAC;KACvB;IAED,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,oCAAa,CAAC,OAAO,EAAE;QACnD,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,yCAAuB,CAAC,QAAQ,CAAC,CAAC;IAE1D,OAAO,8BAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,+BAAQ,CAAC,EAAE,KAAM,SAAS,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEW,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EACE,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,oCAAa,CAAC,OAAO,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,4EAA4E;IAC5E,yDAAyD;IACzD,MAAM,mBAAmB,GACvB,iBAAiB,IAAI,mBAAmB;QACtC,CAAC,CAAC;YACE,iBAAiB;YACjB,mBAAmB;YACnB,iBAAiB,EAAE;gBACjB,IAAI,EAAE,iCAAU,CAAC,EAAE;gBACnB,GAAG,iBAAiB;aACrB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAET,wEAAwE;IACxE,wEAAwE;IACxE,MAAM,wBAAwB,GAC5B,OAAO,IAAI,gBAAgB;QACzB,CAAC,CAAC;YACE,SAAS,EAAE,aAAa;YACxB,GAAG,gBAAgB;SACpB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,2EAA2E;IAC3E,gDAAgD;IAChD,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,KACJ,mBAAmB,KACnB,KAAK,EACT,eAAe,EAAE,yCAAkB,CAAC,iBAAiB,EACrD,WAAW,EAAE,qCAAc,CAAC,WAAW,EACvC,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,IAAA,kBAAO,EAAC,YAAY,EAAE,SAAS,CAAC,EAC3C,gBAAgB,EAAE,wBAAwB,EAC1C,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,uBAAuB,CAAC;YACtC,QAAQ;YACR,cAAc;YACd,SAAS;SACV,CAAC,GACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import {\n  BoxBackgroundColor,\n  BoxBorderColor,\n  ButtonSize,\n  IconSize,\n  ToastSeverity,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport { TOAST_SEVERITY_ICON_MAP } from './Toast.constants';\nimport type { ToastProps } from './Toast.types';\n\nconst renderSeverityAccessory = ({\n  severity,\n  startAccessory,\n  iconProps,\n}: Pick<ToastProps, 'severity' | 'startAccessory' | 'iconProps'>) => {\n  if (startAccessory !== null && startAccessory !== undefined) {\n    return startAccessory;\n  }\n\n  if (!severity || severity === ToastSeverity.Default) {\n    return undefined;\n  }\n\n  const { name, color } = TOAST_SEVERITY_ICON_MAP[severity];\n\n  return <Icon name={name} color={color} size={IconSize.Lg} {...iconProps} />;\n};\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n  (\n    {\n      actionButtonLabel,\n      actionButtonOnClick,\n      actionButtonProps,\n      className,\n      closeButtonProps,\n      iconProps,\n      onClose,\n      severity = ToastSeverity.Default,\n      startAccessory,\n      ...props\n    },\n    ref,\n  ) => {\n    // Only pass action props through when both the label and handler are set so\n    // BannerBase can keep its action button contract simple.\n    const resolvedActionProps =\n      actionButtonLabel && actionButtonOnClick\n        ? {\n            actionButtonLabel,\n            actionButtonOnClick,\n            actionButtonProps: {\n              size: ButtonSize.Sm,\n              ...actionButtonProps,\n            },\n          }\n        : {};\n\n    // Derive the close button config from the Toast API, keeping the button\n    // visible whenever the consumer provides dismiss behavior or overrides.\n    const resolvedCloseButtonProps =\n      onClose || closeButtonProps\n        ? {\n            ariaLabel: 'Close toast',\n            ...closeButtonProps,\n          }\n        : undefined;\n\n    // Toast reuses BannerBase so the web surface stays aligned with the shared\n    // banner layout and the React Native Toast API.\n    return (\n      <BannerBase\n        ref={ref}\n        {...resolvedActionProps}\n        {...props}\n        backgroundColor={BoxBackgroundColor.BackgroundSection}\n        borderColor={BoxBorderColor.BorderMuted}\n        borderWidth={1}\n        className={twMerge('rounded-xl', className)}\n        closeButtonProps={resolvedCloseButtonProps}\n        onClose={onClose}\n        startAccessory={renderSeverityAccessory({\n          severity,\n          startAccessory,\n          iconProps,\n        })}\n      />\n    );\n  },\n);\n\nToast.displayName = 'Toast';\n"]}
+{"version":3,"file":"Toast.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAMwC;AACxC,+CAA0C;AAE1C,uDAA+C;AAC/C,wDAA2C;AAC3C,4CAA+B;AAE/B,2DAA4D;AAG5D,MAAM,uBAAuB,GAAG,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,SAAS,GACqD,EAAE,EAAE;IAClE,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,SAAS,EAAE;QAC3D,OAAO,cAAc,CAAC;KACvB;IAED,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,oCAAa,CAAC,OAAO,EAAE;QACnD,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,yCAAuB,CAAC,QAAQ,CAAC,CAAC;IAE1D,OAAO,8BAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,+BAAQ,CAAC,EAAE,KAAM,SAAS,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEW,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EACE,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,oCAAa,CAAC,OAAO,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,4EAA4E;IAC5E,yDAAyD;IACzD,MAAM,mBAAmB,GACvB,iBAAiB,IAAI,mBAAmB;QACtC,CAAC,CAAC;YACE,iBAAiB;YACjB,mBAAmB;YACnB,iBAAiB,EAAE;gBACjB,IAAI,EAAE,iCAAU,CAAC,EAAE;gBACnB,GAAG,iBAAiB;aACrB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAET,wEAAwE;IACxE,wEAAwE;IACxE,MAAM,wBAAwB,GAC5B,OAAO,IAAI,gBAAgB;QACzB,CAAC,CAAC;YACE,SAAS,EAAE,aAAa;YACxB,GAAG,gBAAgB;SACpB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,2EAA2E;IAC3E,gDAAgD;IAChD,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,KACJ,mBAAmB,KACnB,KAAK,EACT,eAAe,EAAE,yCAAkB,CAAC,mBAAmB,EACvD,WAAW,EAAE,qCAAc,CAAC,WAAW,EACvC,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,IAAA,kBAAO,EAAC,YAAY,EAAE,SAAS,CAAC,EAC3C,gBAAgB,EAAE,wBAAwB,EAC1C,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,uBAAuB,CAAC;YACtC,QAAQ;YACR,cAAc;YACd,SAAS;SACV,CAAC,GACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import {\n  BoxBackgroundColor,\n  BoxBorderColor,\n  ButtonSize,\n  IconSize,\n  ToastSeverity,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport { TOAST_SEVERITY_ICON_MAP } from './Toast.constants';\nimport type { ToastProps } from './Toast.types';\n\nconst renderSeverityAccessory = ({\n  severity,\n  startAccessory,\n  iconProps,\n}: Pick<ToastProps, 'severity' | 'startAccessory' | 'iconProps'>) => {\n  if (startAccessory !== null && startAccessory !== undefined) {\n    return startAccessory;\n  }\n\n  if (!severity || severity === ToastSeverity.Default) {\n    return undefined;\n  }\n\n  const { name, color } = TOAST_SEVERITY_ICON_MAP[severity];\n\n  return <Icon name={name} color={color} size={IconSize.Lg} {...iconProps} />;\n};\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n  (\n    {\n      actionButtonLabel,\n      actionButtonOnClick,\n      actionButtonProps,\n      className,\n      closeButtonProps,\n      iconProps,\n      onClose,\n      severity = ToastSeverity.Default,\n      startAccessory,\n      ...props\n    },\n    ref,\n  ) => {\n    // Only pass action props through when both the label and handler are set so\n    // BannerBase can keep its action button contract simple.\n    const resolvedActionProps =\n      actionButtonLabel && actionButtonOnClick\n        ? {\n            actionButtonLabel,\n            actionButtonOnClick,\n            actionButtonProps: {\n              size: ButtonSize.Sm,\n              ...actionButtonProps,\n            },\n          }\n        : {};\n\n    // Derive the close button config from the Toast API, keeping the button\n    // visible whenever the consumer provides dismiss behavior or overrides.\n    const resolvedCloseButtonProps =\n      onClose || closeButtonProps\n        ? {\n            ariaLabel: 'Close toast',\n            ...closeButtonProps,\n          }\n        : undefined;\n\n    // Toast reuses BannerBase so the web surface stays aligned with the shared\n    // banner layout and the React Native Toast API.\n    return (\n      <BannerBase\n        ref={ref}\n        {...resolvedActionProps}\n        {...props}\n        backgroundColor={BoxBackgroundColor.BackgroundElevated2}\n        borderColor={BoxBorderColor.BorderMuted}\n        borderWidth={1}\n        className={twMerge('rounded-xl', className)}\n        closeButtonProps={resolvedCloseButtonProps}\n        onClose={onClose}\n        startAccessory={renderSeverityAccessory({\n          severity,\n          startAccessory,\n          iconProps,\n        })}\n      />\n    );\n  },\n);\n\nToast.displayName = 'Toast';\n"]}

package/dist/components/Toast/Toast.mjs

@@ -44,7 +44,7 @@ export const Toast = forwardRef(({ actionButtonLabel, actionButtonOnClick, actio
         : undefined;
     // Toast reuses BannerBase so the web surface stays aligned with the shared
     // banner layout and the React Native Toast API.
-    return (React.createElement(BannerBase, { ref: ref, ...resolvedActionProps, ...props, backgroundColor: BoxBackgroundColor.BackgroundSection, borderColor: BoxBorderColor.BorderMuted, borderWidth: 1, className: twMerge('rounded-xl', className), closeButtonProps: resolvedCloseButtonProps, onClose: onClose, startAccessory: renderSeverityAccessory({
+    return (React.createElement(BannerBase, { ref: ref, ...resolvedActionProps, ...props, backgroundColor: BoxBackgroundColor.BackgroundElevated2, borderColor: BoxBorderColor.BorderMuted, borderWidth: 1, className: twMerge('rounded-xl', className), closeButtonProps: resolvedCloseButtonProps, onClose: onClose, startAccessory: renderSeverityAccessory({
             severity,
             startAccessory,
             iconProps,

package/dist/components/Toast/Toast.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,QAAQ,EACR,aAAa,EACd,uCAAuC;AACxC,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EAAE,uBAAuB,EAAE,8BAA0B;AAG5D,MAAM,uBAAuB,GAAG,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,SAAS,GACqD,EAAE,EAAE;IAClE,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,SAAS,EAAE;QAC3D,OAAO,cAAc,CAAC;KACvB;IAED,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,aAAa,CAAC,OAAO,EAAE;QACnD,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAE1D,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,KAAM,SAAS,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,aAAa,CAAC,OAAO,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,4EAA4E;IAC5E,yDAAyD;IACzD,MAAM,mBAAmB,GACvB,iBAAiB,IAAI,mBAAmB;QACtC,CAAC,CAAC;YACE,iBAAiB;YACjB,mBAAmB;YACnB,iBAAiB,EAAE;gBACjB,IAAI,EAAE,UAAU,CAAC,EAAE;gBACnB,GAAG,iBAAiB;aACrB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAET,wEAAwE;IACxE,wEAAwE;IACxE,MAAM,wBAAwB,GAC5B,OAAO,IAAI,gBAAgB;QACzB,CAAC,CAAC;YACE,SAAS,EAAE,aAAa;YACxB,GAAG,gBAAgB;SACpB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,2EAA2E;IAC3E,gDAAgD;IAChD,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,KACJ,mBAAmB,KACnB,KAAK,EACT,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,EACrD,WAAW,EAAE,cAAc,CAAC,WAAW,EACvC,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,EAC3C,gBAAgB,EAAE,wBAAwB,EAC1C,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,uBAAuB,CAAC;YACtC,QAAQ;YACR,cAAc;YACd,SAAS;SACV,CAAC,GACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import {\n  BoxBackgroundColor,\n  BoxBorderColor,\n  ButtonSize,\n  IconSize,\n  ToastSeverity,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport { TOAST_SEVERITY_ICON_MAP } from './Toast.constants';\nimport type { ToastProps } from './Toast.types';\n\nconst renderSeverityAccessory = ({\n  severity,\n  startAccessory,\n  iconProps,\n}: Pick<ToastProps, 'severity' | 'startAccessory' | 'iconProps'>) => {\n  if (startAccessory !== null && startAccessory !== undefined) {\n    return startAccessory;\n  }\n\n  if (!severity || severity === ToastSeverity.Default) {\n    return undefined;\n  }\n\n  const { name, color } = TOAST_SEVERITY_ICON_MAP[severity];\n\n  return <Icon name={name} color={color} size={IconSize.Lg} {...iconProps} />;\n};\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n  (\n    {\n      actionButtonLabel,\n      actionButtonOnClick,\n      actionButtonProps,\n      className,\n      closeButtonProps,\n      iconProps,\n      onClose,\n      severity = ToastSeverity.Default,\n      startAccessory,\n      ...props\n    },\n    ref,\n  ) => {\n    // Only pass action props through when both the label and handler are set so\n    // BannerBase can keep its action button contract simple.\n    const resolvedActionProps =\n      actionButtonLabel && actionButtonOnClick\n        ? {\n            actionButtonLabel,\n            actionButtonOnClick,\n            actionButtonProps: {\n              size: ButtonSize.Sm,\n              ...actionButtonProps,\n            },\n          }\n        : {};\n\n    // Derive the close button config from the Toast API, keeping the button\n    // visible whenever the consumer provides dismiss behavior or overrides.\n    const resolvedCloseButtonProps =\n      onClose || closeButtonProps\n        ? {\n            ariaLabel: 'Close toast',\n            ...closeButtonProps,\n          }\n        : undefined;\n\n    // Toast reuses BannerBase so the web surface stays aligned with the shared\n    // banner layout and the React Native Toast API.\n    return (\n      <BannerBase\n        ref={ref}\n        {...resolvedActionProps}\n        {...props}\n        backgroundColor={BoxBackgroundColor.BackgroundSection}\n        borderColor={BoxBorderColor.BorderMuted}\n        borderWidth={1}\n        className={twMerge('rounded-xl', className)}\n        closeButtonProps={resolvedCloseButtonProps}\n        onClose={onClose}\n        startAccessory={renderSeverityAccessory({\n          severity,\n          startAccessory,\n          iconProps,\n        })}\n      />\n    );\n  },\n);\n\nToast.displayName = 'Toast';\n"]}
+{"version":3,"file":"Toast.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,QAAQ,EACR,aAAa,EACd,uCAAuC;AACxC,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EAAE,uBAAuB,EAAE,8BAA0B;AAG5D,MAAM,uBAAuB,GAAG,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,SAAS,GACqD,EAAE,EAAE;IAClE,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,SAAS,EAAE;QAC3D,OAAO,cAAc,CAAC;KACvB;IAED,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,aAAa,CAAC,OAAO,EAAE;QACnD,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAE1D,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,KAAM,SAAS,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,aAAa,CAAC,OAAO,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,4EAA4E;IAC5E,yDAAyD;IACzD,MAAM,mBAAmB,GACvB,iBAAiB,IAAI,mBAAmB;QACtC,CAAC,CAAC;YACE,iBAAiB;YACjB,mBAAmB;YACnB,iBAAiB,EAAE;gBACjB,IAAI,EAAE,UAAU,CAAC,EAAE;gBACnB,GAAG,iBAAiB;aACrB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAET,wEAAwE;IACxE,wEAAwE;IACxE,MAAM,wBAAwB,GAC5B,OAAO,IAAI,gBAAgB;QACzB,CAAC,CAAC;YACE,SAAS,EAAE,aAAa;YACxB,GAAG,gBAAgB;SACpB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,2EAA2E;IAC3E,gDAAgD;IAChD,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,KACJ,mBAAmB,KACnB,KAAK,EACT,eAAe,EAAE,kBAAkB,CAAC,mBAAmB,EACvD,WAAW,EAAE,cAAc,CAAC,WAAW,EACvC,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,EAC3C,gBAAgB,EAAE,wBAAwB,EAC1C,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,uBAAuB,CAAC;YACtC,QAAQ;YACR,cAAc;YACd,SAAS;SACV,CAAC,GACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import {\n  BoxBackgroundColor,\n  BoxBorderColor,\n  ButtonSize,\n  IconSize,\n  ToastSeverity,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport { TOAST_SEVERITY_ICON_MAP } from './Toast.constants';\nimport type { ToastProps } from './Toast.types';\n\nconst renderSeverityAccessory = ({\n  severity,\n  startAccessory,\n  iconProps,\n}: Pick<ToastProps, 'severity' | 'startAccessory' | 'iconProps'>) => {\n  if (startAccessory !== null && startAccessory !== undefined) {\n    return startAccessory;\n  }\n\n  if (!severity || severity === ToastSeverity.Default) {\n    return undefined;\n  }\n\n  const { name, color } = TOAST_SEVERITY_ICON_MAP[severity];\n\n  return <Icon name={name} color={color} size={IconSize.Lg} {...iconProps} />;\n};\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n  (\n    {\n      actionButtonLabel,\n      actionButtonOnClick,\n      actionButtonProps,\n      className,\n      closeButtonProps,\n      iconProps,\n      onClose,\n      severity = ToastSeverity.Default,\n      startAccessory,\n      ...props\n    },\n    ref,\n  ) => {\n    // Only pass action props through when both the label and handler are set so\n    // BannerBase can keep its action button contract simple.\n    const resolvedActionProps =\n      actionButtonLabel && actionButtonOnClick\n        ? {\n            actionButtonLabel,\n            actionButtonOnClick,\n            actionButtonProps: {\n              size: ButtonSize.Sm,\n              ...actionButtonProps,\n            },\n          }\n        : {};\n\n    // Derive the close button config from the Toast API, keeping the button\n    // visible whenever the consumer provides dismiss behavior or overrides.\n    const resolvedCloseButtonProps =\n      onClose || closeButtonProps\n        ? {\n            ariaLabel: 'Close toast',\n            ...closeButtonProps,\n          }\n        : undefined;\n\n    // Toast reuses BannerBase so the web surface stays aligned with the shared\n    // banner layout and the React Native Toast API.\n    return (\n      <BannerBase\n        ref={ref}\n        {...resolvedActionProps}\n        {...props}\n        backgroundColor={BoxBackgroundColor.BackgroundElevated2}\n        borderColor={BoxBorderColor.BorderMuted}\n        borderWidth={1}\n        className={twMerge('rounded-xl', className)}\n        closeButtonProps={resolvedCloseButtonProps}\n        onClose={onClose}\n        startAccessory={renderSeverityAccessory({\n          severity,\n          startAccessory,\n          iconProps,\n        })}\n      />\n    );\n  },\n);\n\nToast.displayName = 'Toast';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask/design-system-react",
-  "version": "0.35.1",
+  "version": "0.36.0",
   "description": "Design system react ui components",
   "keywords": [
     "MetaMask",
@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@metamask/design-system-shared": "^0.32.0",
+    "@metamask/design-system-shared": "^0.33.0",
     "@metamask/jazzicon": "^2.0.0",
     "@radix-ui/react-slot": "^1.1.0",
     "blo": "^2.0.0",
@@ -59,7 +59,7 @@
     "@figma/code-connect": "^1.4.9",
     "@jest/globals": "^29.7.0",
     "@metamask/auto-changelog": "^6.1.1",
-    "@metamask/design-system-tailwind-preset": "^0.10.0",
+    "@metamask/design-system-tailwind-preset": "^0.11.0",
     "@metamask/utils": "^11.11.0",
     "@svgr/cli": "^8.1.0",
     "@testing-library/dom": "^10.0.0",
@@ -83,8 +83,8 @@
     "typescript": "~5.2.2"
   },
   "peerDependencies": {
-    "@metamask/design-system-tailwind-preset": "^0.10.0",
-    "@metamask/design-tokens": "^8.1.0",
+    "@metamask/design-system-tailwind-preset": "^0.11.0",
+    "@metamask/design-tokens": "^9.0.0",
     "@metamask/utils": "^11.11.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"