@hyphen/hyphen-components 6.11.0 → 6.12.0

package/dist/components/Modal/Modal.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, RefObject } from 'react';
-import { CssOverflowValue } from '../../types';
+import { BackgroundColor, CssOverflowValue } from '../../types';
 import { BoxProps } from '../Box/Box';
 import { ModalFooter, ModalHeader, ModalBody } from './components';
 export interface ModalProps {
@@ -36,6 +36,10 @@ export interface ModalProps {
      * At mobile viewport widths, the modal will take up the fullscreen
      */
     fullScreenMobile?: boolean;
+    /**
+     * Background color for the modal content using design tokens
+     */
+    background?: BackgroundColor;
     /**
      * By default the first focusable element will receive focus when the dialog
      * opens but you can provide a ref to focus instead.
@@ -60,6 +64,10 @@ export interface ModalProps {
      * The css overflow behavior of the Modal
      */
     overflow?: CssOverflowValue;
+    /**
+     * Inline styles for the modal container
+     */
+    style?: React.CSSProperties;
     /**
      * Allows spread props
      */

package/dist/hyphen-components.cjs.development.js

@@ -3782,13 +3782,15 @@ var ModalBody = function ModalBody(_ref) {
 
 var styles$a = {"modal-close":"Modal-module_modal-close__1YmMa","modal":"Modal-module_modal__yNG-7","modal-content":"Modal-module_modal-content__GMtBm"};
 
-var _excluded$5 = ["ariaLabel", "ariaLabelledBy", "allowPinchZoom", "children", "className", "containerRef", "fullScreenMobile", "initialFocusRef", "isOpen", "maxWidth", "onDismiss", "overflow"];
+var _excluded$5 = ["ariaLabel", "ariaLabelledBy", "allowPinchZoom", "background", "children", "className", "containerRef", "fullScreenMobile", "initialFocusRef", "isOpen", "maxWidth", "onDismiss", "overflow", "style"];
 var ModalBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _classNames;
   var ariaLabel = _ref.ariaLabel,
     ariaLabelledBy = _ref.ariaLabelledBy,
     _ref$allowPinchZoom = _ref.allowPinchZoom,
     allowPinchZoom = _ref$allowPinchZoom === void 0 ? false : _ref$allowPinchZoom,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? undefined : _ref$background,
     children = _ref.children,
     className = _ref.className,
     _ref$containerRef = _ref.containerRef,
@@ -3802,6 +3804,7 @@ var ModalBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onDismiss = _ref.onDismiss,
     _ref$overflow = _ref.overflow,
     overflow = _ref$overflow === void 0 ? 'hidden' : _ref$overflow,
+    style = _ref.style,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var activateFocusLock = React.useCallback(function () {
     setTimeout(function () {
@@ -3838,11 +3841,12 @@ var ModalBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return parentElement;
     } : undefined,
     style: {
-      content: _extends({}, maxWidthCss.styles)
+      content: _extends({}, maxWidthCss.styles, style)
     }
   }, restProps), React.createElement(Box, {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
+    background: background,
     height: "100",
     padding: {
       base: '2xl',