@hyphen/hyphen-components 2.18.1 → 2.19.0

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import { Modal } from './Modal';
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof Modal>;
 export default meta;
+type Story = StoryObj<typeof Modal>;
 export declare const BasicUsage: () => React.JSX.Element;
+export declare const OpenModal: Story;
 export declare const BodyAndFooter: () => React.JSX.Element;
 export declare const CloseButton: () => React.JSX.Element;
 export declare const WithoutHeader: () => React.JSX.Element;

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

@@ -1,4 +1,4 @@
 import { FC } from 'react';
 import { BoxProps } from '../../../Box/Box';
-export type ModalFooterProps = Omit<BoxProps, 'as' | 'background' | 'borderColor' | 'borderWidth' | 'radius'>;
+export type ModalFooterProps = Omit<BoxProps, 'as' | 'radius'>;
 export declare const ModalFooter: FC<ModalFooterProps>;

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

@@ -3240,31 +3240,25 @@ var FormikToggle = function FormikToggle(_ref) {
   }, props));
 };
 
-var _excluded$5 = ["children", "padding", "direction", "alignItems", "justifyContent", "background", "gap", "style"];
+var _excluded$5 = ["children", "padding", "direction", "alignItems", "justifyContent", "gap", "style"];
 var ModalFooter = function ModalFooter(_ref) {
   var children = _ref.children,
-    _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? 'xl' : _ref$padding,
+    padding = _ref.padding,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
     _ref$alignItems = _ref.alignItems,
     alignItems = _ref$alignItems === void 0 ? 'center' : _ref$alignItems,
     _ref$justifyContent = _ref.justifyContent,
     justifyContent = _ref$justifyContent === void 0 ? 'flex-end' : _ref$justifyContent,
-    _ref$background = _ref.background,
-    background = _ref$background === void 0 ? 'secondary' : _ref$background,
     _ref$gap = _ref.gap,
-    gap = _ref$gap === void 0 ? 'sm' : _ref$gap,
+    gap = _ref$gap === void 0 ? 'md' : _ref$gap,
     style = _ref.style,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   return React.createElement(Box, _extends({
-    background: background,
     padding: padding,
     direction: direction,
     alignItems: alignItems,
     justifyContent: justifyContent,
-    borderWidth: "sm 0 0 0",
-    borderColor: "default",
     gap: gap,
     style: _extends({
       flexShrink: 0
@@ -3272,8 +3266,6 @@ var ModalFooter = function ModalFooter(_ref) {
   }, restProps), children);
 };
 
-var styles$7 = {"modal-close":"Modal-module_modal-close__1YmMa","modal":"Modal-module_modal__yNG-7","modal-content":"Modal-module_modal-content__GMtBm"};
-
 var ModalHeader = function ModalHeader(_ref) {
   var id = _ref.id,
     onDismiss = _ref.onDismiss,
@@ -3281,12 +3273,10 @@ var ModalHeader = function ModalHeader(_ref) {
     title = _ref$title === void 0 ? undefined : _ref$title;
   var justifyContentValue = title === undefined && onDismiss ? 'flex-end' : 'space-between';
   return React.createElement(Box, {
-    padding: "xl",
     direction: "row",
     alignItems: "center",
     justifyContent: justifyContentValue,
-    borderWidth: "0 0 sm 0",
-    borderColor: "default",
+    gap: "3xl",
     style: {
       flexShrink: 0
     }
@@ -3297,30 +3287,26 @@ var ModalHeader = function ModalHeader(_ref) {
       tablet: 'lg'
     },
     id: id
-  }, title), onDismiss && React.createElement("button", {
+  }, title), onDismiss && React.createElement(Button, {
     "aria-label": "close",
-    type: "button",
-    className: styles$7['modal-close'],
-    onClick: onDismiss
-  }, React.createElement(Icon, {
-    name: "remove"
-  })));
+    variant: "tertiary",
+    onClick: onDismiss,
+    iconPrefix: "remove",
+    size: "sm"
+  }));
 };
 
-var _excluded$4 = ["children", "flex", "padding", "overflow", "height"];
+var _excluded$4 = ["children", "flex", "overflow", "height"];
 var ModalBody = function ModalBody(_ref) {
   var children = _ref.children,
     _ref$flex = _ref.flex,
     flex = _ref$flex === void 0 ? 'auto' : _ref$flex,
-    _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? 'xl' : _ref$padding,
     _ref$overflow = _ref.overflow,
     overflow = _ref$overflow === void 0 ? 'auto' : _ref$overflow,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? '100' : _ref$height,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   return React.createElement(Box, _extends({
-    padding: padding,
     flex: flex,
     overflow: overflow,
     height: height,
@@ -3330,6 +3316,8 @@ var ModalBody = function ModalBody(_ref) {
   }, restProps), children);
 };
 
+var styles$7 = {"modal-close":"Modal-module_modal-close__1YmMa","modal":"Modal-module_modal__yNG-7","modal-content":"Modal-module_modal-content__GMtBm"};
+
 var _excluded$3 = ["ariaLabel", "ariaLabelledBy", "allowPinchZoom", "children", "className", "containerRef", "fullScreenMobile", "initialFocusRef", "isOpen", "maxWidth", "onDismiss", "overflow"];
 var ModalBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _classNames;
@@ -3363,6 +3351,7 @@ var ModalBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     fullscreen: fullScreenMobile
   });
   var contentClassnames = classNames(styles$7['modal-content'], className, maxWidthCss.classes, (_classNames = {}, _classNames["overflow-" + overflow] = overflow, _classNames));
+  if (!isOpen) return null;
   var parentElement = containerRef != null && containerRef.current ? containerRef.current : undefined;
   return React.createElement(FocusLock, {
     autoFocus: true,
@@ -3383,12 +3372,19 @@ var ModalBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ariaHideApp: false,
     parentSelector: parentElement ? function () {
       return parentElement;
-    } : undefined
+    } : undefined,
+    style: {
+      content: _extends({}, maxWidthCss.styles)
+    }
   }, restProps), React.createElement(Box, {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
-    style: _extends({}, maxWidthCss.styles),
-    height: "100"
+    height: "100",
+    padding: {
+      base: '2xl',
+      tablet: '4xl'
+    },
+    gap: "3xl"
   }, children)))));
 });
 // Actual component is wrapped in an IIFE for the export