@procore/core-react 11.20.0-vite.1 → 11.21.0

package/dist/Modal/Modal.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Heading } from '../Section/Section';
+import { TypographyProps } from '../Typography/Typography.types';
+import { RenderProps } from '../_hooks/Visibility';
+import { DivAttributes, SpanAttributes } from '../_utils/types';
+import { ConfirmModalProps, ModalBodyProps, ModalCloseableHeaderProps, ModalContainerProps, ModalProps } from './Modal.types';
+export declare const ConfirmModal: React.ForwardRefExoticComponent<ConfirmModalProps & React.RefAttributes<HTMLDivElement>>;
+declare function ModalState(props: RenderProps): JSX.Element;
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>> & {
+    Body: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>;
+    Container: React.ForwardRefExoticComponent<ModalContainerProps & React.RefAttributes<HTMLDivElement>>;
+    Content: import("styled-components").StyledComponent<"div", any, {}, never>;
+    Footer: import("styled-components").StyledComponent<"div", any, {}, never>;
+    FooterButtons: React.ForwardRefExoticComponent<ModalCloseableHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    FooterNotation: React.ForwardRefExoticComponent<SpanAttributes & TypographyProps & React.RefAttributes<HTMLSpanElement>>;
+    FooterSummary: React.ForwardRefExoticComponent<DivAttributes & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<ModalCloseableHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Heading: typeof Heading;
+    Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+    Scrim: import("styled-components").StyledComponent<"div", any, {}, never>;
+    State: typeof ModalState;
+    Section: React.ForwardRefExoticComponent<import("../Section/Section.types").SectionProps & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/Modal/Modal.js

@@ -0,0 +1,263 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Clear } from '@procore/core-icons/dist';
+import { FocusScope } from '@react-aria/focus';
+import React, { useEffect } from 'react';
+import { Button } from '../Button/Button';
+import { CloseWithConfirmContext, useCloseWithConfirmContext, useCloseWithConfirmState, } from '../Form/closeWithConfirm';
+import { useModalDialogLike } from '../OverlayTrigger/a11yPresets';
+import { Portal } from '../Portal/Portal';
+import { Heading, LevelContext, Section, SectionProvider, } from '../Section/Section';
+import { useDeprecation } from '../_hooks/Deprecation';
+import { useLayoutEventListener } from '../_hooks/EventListener';
+import { useI18nContext } from '../_hooks/I18n';
+import { useOverflowObserver } from '../_hooks/OverflowObserver';
+import { useScrollLock } from '../_hooks/ScrollLock';
+import { Visibility } from '../_hooks/Visibility';
+import { addSubcomponents } from '../_utils/addSubcomponents';
+import { mergeRefs } from '../_utils/mergeRefs';
+import { ChildRegistryProvider, useModalChildRegistryDispatch, } from './ChildRegistry.context';
+import { fadeInClassName, fadeOutClassName, StyledModal, StyledModalBody, StyledModalButtons, StyledModalCancel, StyledModalContainer, StyledModalContent, StyledModalFooter, StyledModalFooterNotation, StyledModalFooterSummary, StyledModalHeader, StyledModalHeading, StyledModalScrim, StyledModalWarningIcon, } from './Modal.styles';
+import { useInitializeModalFocus } from './useInitializeModalFocus';
+function noop() { }
+var defaultStartLevel = 2;
+var initialBodyLevel = 3;
+// TODO default in breaking
+var defaultHowToClose = ['scrim', 'x'];
+var ModalCloseContext = React.createContext({
+    howToClose: [],
+    onClose: undefined,
+});
+var ModalBodyScrollContext = React.createContext({
+    isBodyScrolled: false,
+    setIsBodyScrolled: noop,
+});
+var ModalClosableHeader = React.forwardRef(function (_a, ref) {
+    var children = _a.children, externalOnClose = _a.onClose, qa = _a.qa, props = __rest(_a, ["children", "onClose", "qa"]);
+    var isBodyScrolled = React.useContext(ModalBodyScrollContext).isBodyScrolled;
+    var _b = React.useContext(ModalCloseContext), howToClose = _b.howToClose, onClose = _b.onClose;
+    var I18n = useI18nContext();
+    var modalClosableHeaderRef = React.useRef(null);
+    var closeWithConfirm = useCloseWithConfirmContext().closeWithConfirm;
+    var registerChildRef = useModalChildRegistryDispatch();
+    useEffect(function () {
+        registerChildRef({ child: 'header', ref: modalClosableHeaderRef });
+    }, []);
+    function onClickButton(e) {
+        if (onClose && (howToClose === null || howToClose === void 0 ? void 0 : howToClose.includes('x'))) {
+            closeWithConfirm(onClose)(e, 'x');
+            return;
+        }
+        closeWithConfirm(externalOnClose)(e);
+    }
+    return (React.createElement(StyledModalHeader, __assign({ "$isBodyScrolled": isBodyScrolled }, props, { ref: mergeRefs(ref, modalClosableHeaderRef) }),
+        React.createElement(StyledModalHeading, null, children),
+        (onClose && (howToClose === null || howToClose === void 0 ? void 0 : howToClose.includes('x'))) || externalOnClose ? (React.createElement(StyledModalCancel, null,
+            React.createElement(Button, { "aria-label": I18n.t('core.modal.a11y.close'), "data-qa": qa === null || qa === void 0 ? void 0 : qa.closeButton, "data-internal": "close-button", onClick: onClickButton, icon: React.createElement(Clear, null), variant: "tertiary" }))) : null));
+});
+var ModalClosableFooterButtons = React.forwardRef(function (_a, ref) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var _b = React.useContext(ModalCloseContext), howToClose = _b.howToClose, onClose = _b.onClose;
+    var I18n = useI18nContext();
+    var closeWithConfirm = useCloseWithConfirmContext().closeWithConfirm;
+    var modalClosableFooterButtonsRef = React.useRef(null);
+    var registerChildRef = useModalChildRegistryDispatch();
+    useEffect(function () {
+        registerChildRef({
+            child: 'closeableButtons',
+            ref: modalClosableFooterButtonsRef,
+        });
+    }, []);
+    function onClickButton(e) {
+        closeWithConfirm(onClose)(e, 'footer-button');
+    }
+    return (React.createElement(StyledModalButtons, __assign({}, props, { ref: mergeRefs(ref, modalClosableFooterButtonsRef) }),
+        (howToClose === null || howToClose === void 0 ? void 0 : howToClose.includes('footer-button')) && (React.createElement(Button, { onClick: onClickButton, variant: "tertiary" }, I18n.t('core.modal.cancel'))),
+        children));
+});
+var ModalContainer = React.forwardRef(function (_a, ref) {
+    var placement = _a.placement, width = _a.width, props = __rest(_a, ["placement", "width"]);
+    var onClose = React.useContext(ModalCloseContext).onClose;
+    var modalContainerRef = React.useRef(null);
+    useInitializeModalFocus({ modalContainerRef: modalContainerRef, hasOnClose: !!onClose });
+    return (React.createElement(StyledModalContainer, __assign({}, props, { shadowStrength: 4, "$placement": placement, "$width": width, ref: mergeRefs(ref, modalContainerRef) })));
+});
+var ModalBody = React.forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.noSideSpacing, noSideSpacing = _b === void 0 ? false : _b, props = __rest(_a, ["children", "noSideSpacing"]);
+    var _c = useOverflowObserver(), isOverflowingY = _c.isOverflowingY, overflowRef = _c.ref;
+    var scrollRef = React.useRef(null);
+    var modalBodyRef = React.useRef(null);
+    var setIsBodyScrolled = React.useContext(ModalBodyScrollContext).setIsBodyScrolled;
+    var registerChildRef = useModalChildRegistryDispatch();
+    useEffect(function () {
+        registerChildRef({ child: 'body', ref: modalBodyRef });
+    }, []);
+    useLayoutEventListener({
+        event: 'scroll',
+        handler: function (e) {
+            setIsBodyScrolled(e.currentTarget.scrollTop > 0);
+        },
+        scope: scrollRef,
+    });
+    return (React.createElement(SectionProvider, null,
+        React.createElement(LevelContext.Provider, { value: initialBodyLevel },
+            React.createElement(StyledModalBody, __assign({}, props, { isOverflowingY: isOverflowingY, noSideSpacing: noSideSpacing, ref: mergeRefs(overflowRef, scrollRef, ref, modalBodyRef), tabIndex: 0 }), children))));
+});
+var ModalFooterSummary = React.forwardRef(function (_a, ref) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(StyledModalFooterSummary, __assign({}, props, { ref: ref }), children));
+});
+var ModalFooterNotation = React.forwardRef(function (_a, ref) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(StyledModalFooterNotation, __assign({ "aria-live": "polite", intent: "small", color: "gray45", italic: true }, props, { ref: ref }), children));
+});
+/**
+
+ We use modals to present additional actions, information, or forms on pages
+ where a user’s experience would benefit from remaining on the same page.
+ They can include graphics, inputs, buttons, and other elements as needed to
+ produce the workflow or action needed.
+
+ Do not include modals on pages with complicated UI layouts.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-modal--demo)
+
+ @see [Design Guidelines](https://design.procore.com/modal)
+
+ */
+var Modal_ = React.forwardRef(function (_a, ref) {
+    var ariaDescribedby = _a["aria-describedby"], ariaDetails = _a["aria-details"], ariaLabelledby = _a["aria-labelledby"], ariaLabel = _a["aria-label"], children = _a.children, howToClose = _a.howToClose, id = _a.id, _b = _a.onClickOverlay, onClickOverlay = _b === void 0 ? noop : _b, onClose = _a.onClose, _c = _a.open, open = _c === void 0 ? false : _c, _d = _a.placement, placement = _d === void 0 ? 'center' : _d, role = _a.role, props = __rest(_a, ['aria-describedby', 'aria-details', 'aria-labelledby', 'aria-label', "children", "howToClose", "id", "onClickOverlay", "onClose", "open", "placement", "role"]);
+    useScrollLock(open);
+    var _e = React.useState(open), visible = _e[0], setVisible = _e[1];
+    var _f = React.useState(''), fadeType = _f[0], setFadeType = _f[1];
+    var closeWithConfirmState = useCloseWithConfirmState();
+    var closeWithConfirm = closeWithConfirmState.closeWithConfirm;
+    React.useEffect(function () {
+        if (open) {
+            setVisible(true);
+            setTimeout(function () {
+                setFadeType(fadeInClassName);
+            }, 0);
+        }
+        else {
+            setFadeType(fadeOutClassName);
+        }
+    }, [open]);
+    var onTransitionEnd = function () {
+        if (fadeType === fadeOutClassName) {
+            setVisible(false);
+        }
+    };
+    var handleKeyDown = function (e) {
+        if (!onClose)
+            return;
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            closeWithConfirm(onClose)(e, 'x');
+        }
+    };
+    var dialogProps_ = useModalDialogLike({
+        'aria-describedby': ariaDescribedby,
+        'aria-details': ariaDetails,
+        'aria-labelledby': ariaLabelledby,
+        'aria-label': ariaLabel,
+        id: id,
+        isModal: false,
+        isOpen: open,
+        role: role,
+    }).dialogProps;
+    var dialogProps = onClose && role === 'dialog' ? dialogProps_ : {};
+    function onClickScrim(e) {
+        onClickOverlay(e);
+        if (onClose && (howToClose === null || howToClose === void 0 ? void 0 : howToClose.includes('scrim'))) {
+            closeWithConfirm(onClose)(e, 'scrim');
+        }
+    }
+    return visible ? (React.createElement(Portal, null,
+        React.createElement(ModalCloseContext.Provider, { value: { onClose: onClose, howToClose: howToClose } },
+            React.createElement(LevelContext.Provider, { value: defaultStartLevel },
+                React.createElement(ChildRegistryProvider, null,
+                    React.createElement(FocusScope
+                    // TODO breaking - always
+                    , { 
+                        // TODO breaking - always
+                        autoFocus: !!onClose, contain: !!onClose, restoreFocus: !!onClose },
+                        React.createElement(StyledModal, __assign({ className: fadeType, ref: ref, onTransitionEnd: onTransitionEnd, onKeyDown: handleKeyDown }, dialogProps),
+                            React.createElement(StyledModalScrim, { onClick: onClickScrim }),
+                            React.createElement(ModalContainer, __assign({}, props, { placement: placement }),
+                                React.createElement(StyledModalContent, null,
+                                    React.createElement(ModalBodyScrollObserver, null,
+                                        React.createElement(CloseWithConfirmContext.Provider, { value: closeWithConfirmState }, children))))))))))) : null;
+});
+function ModalBodyScrollObserver(_a) {
+    var children = _a.children;
+    var _b = React.useState(false), isBodyScrolled = _b[0], setIsBodyScrolled = _b[1];
+    return (React.createElement(ModalBodyScrollContext.Provider, { value: { isBodyScrolled: isBodyScrolled, setIsBodyScrolled: setIsBodyScrolled } }, children));
+}
+export var ConfirmModal = React.forwardRef(function (_a, ref) {
+    var children = _a.children, headline = _a.headline, onClose = _a.onClose, props = __rest(_a, ["children", "headline", "onClose"]);
+    return (React.createElement(Modal, __assign({}, props, { ref: ref }),
+        React.createElement(ModalClosableHeader, { onClose: onClose },
+            React.createElement(StyledModalWarningIcon, { size: "lg" }),
+            headline),
+        children));
+});
+function ModalState(props) {
+    useDeprecation({ oldThing: 'Modal.State' });
+    return React.createElement(Visibility, __assign({}, props));
+}
+Modal_.displayName = 'Modal';
+ConfirmModal.displayName = 'ConfirmModal';
+ModalBody.displayName = 'Modal.Body';
+ModalFooterNotation.displayName = 'Modal.FooterNotation';
+ModalFooterSummary.displayName = 'Modal.FooterSummary';
+var Body = ModalBody;
+var Container = ModalContainer;
+var Content = StyledModalContent;
+var FooterSummary = ModalFooterSummary;
+var Footer = StyledModalFooter;
+var FooterButtons = ModalClosableFooterButtons;
+var FooterNotation = ModalFooterNotation;
+var Header = ModalClosableHeader;
+var Overlay = StyledModal;
+var Scrim = StyledModalScrim;
+var State = ModalState;
+export var Modal = addSubcomponents({
+    Body: Body,
+    Container: Container,
+    Content: Content,
+    Footer: Footer,
+    FooterButtons: FooterButtons,
+    FooterNotation: FooterNotation,
+    FooterSummary: FooterSummary,
+    Header: Header,
+    Heading: Heading,
+    Overlay: Overlay,
+    Scrim: Scrim,
+    State: State,
+    Section: Section,
+}, Modal_);
+//# sourceMappingURL=Modal.js.map

package/dist/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"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"}

package/dist/Modal/Modal.styles.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { ModalPlacement, ModalWidth } from './Modal.types';
+export declare const fadeInClassName = "fade-in";
+export declare const fadeOutClassName = "fade-out";
+export declare const modalMaxWidth = "640px";
+export declare const modalPixelGutter: number;
+export declare const modalPixelWidths: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export declare const StyledModal: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../_utils/types").DivAttributes & import("..").CardProps & import("react").RefAttributes<HTMLDivElement>>, any, {
+    $placement: ModalPlacement;
+    $width?: ModalWidth | undefined;
+}, never>;
+export declare const StyledModalFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalBody: import("styled-components").StyledComponent<"div", any, {
+    isOverflowingY: boolean;
+    noSideSpacing: boolean;
+}, never>;
+export declare const StyledModalContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalFooterNotation: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../_utils/types").SpanAttributes & import("..").TypographyProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const StyledModalHeader: import("styled-components").StyledComponent<"div", any, {
+    $isBodyScrolled: boolean;
+}, never>;
+export declare const StyledModalHeading: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalCancel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalScrim: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalWarningIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    size?: import("@procore/core-icons/dist/Icon").IconSize | undefined;
+} & import("react").SVGAttributes<SVGElement> & import("react").RefAttributes<SVGSVGElement>>, any, {}, never>;
+export declare const StyledModalFooterSummary: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Modal/Modal.styles.js

@@ -0,0 +1,59 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { Warning } from '@procore/core-icons/dist';
+import styled, { css } from 'styled-components';
+import { Card } from '../Card/Card';
+import { StyledSection, StyledSectionInner } from '../Section/Section.styles';
+import { Typography } from '../Typography/Typography';
+import { getTypographyIntent } from '../Typography/Typography.styles';
+import { colors } from '../_styles/colors';
+import { spacing } from '../_styles/spacing';
+export var fadeInClassName = 'fade-in';
+export var fadeOutClassName = 'fade-out';
+export var modalMaxWidth = '640px';
+export var modalPixelGutter = spacing.xl;
+export var modalPixelWidths = {
+    sm: 432,
+    md: 688,
+    lg: 1152,
+    xl: 1920,
+};
+export var StyledModal = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100vh;\n  position: absolute;\n  opacity: 0;\n  transition: 0.3s opacity ease;\n  width: 100vw;\n  z-index: 0;\n\n  &.", " {\n    opacity: 1;\n  }\n\n  &.", " {\n    opacity: 0;\n  }\n"], ["\n  display: flex;\n  height: 100vh;\n  position: absolute;\n  opacity: 0;\n  transition: 0.3s opacity ease;\n  width: 100vw;\n  z-index: 0;\n\n  &.", " {\n    opacity: 1;\n  }\n\n  &.", " {\n    opacity: 0;\n  }\n"])), fadeInClassName, fadeOutClassName);
+export var StyledModalButtons = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex: 0 0 auto;\n  margin-left: ", "px;\n\n  > * + * {\n    margin-left: ", "px;\n  }\n"], ["\n  display: flex;\n  flex: 0 0 auto;\n  margin-left: ", "px;\n\n  > * + * {\n    margin-left: ", "px;\n  }\n"])), spacing.lg, spacing.sm);
+export var StyledModalContainer = styled(Card)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  position: absolute;\n  z-index: 2;\n\n  ", "\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: row;\n  position: absolute;\n  z-index: 2;\n\n  ", "\n\n  ", "\n"])), function (_a) {
+    var $placement = _a.$placement;
+    if ($placement === 'top') {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        top: 5vh;\n      "], ["\n        top: 5vh;\n      "])));
+    }
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      top: 50vh;\n      transform: translateY(-50%);\n    "], ["\n      top: 50vh;\n      transform: translateY(-50%);\n    "])));
+}, function (_a) {
+    var $width = _a.$width, $placement = _a.$placement;
+    if ($width) {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        left: ", "px;\n        right: ", "px;\n        margin-left: auto;\n        margin-right: auto;\n        max-width: ", "px;\n\n        // TODO deprecated, moving width up\n        ", " {\n          max-width: none;\n        }\n      "], ["\n        left: ", "px;\n        right: ", "px;\n        margin-left: auto;\n        margin-right: auto;\n        max-width: ", "px;\n\n        // TODO deprecated, moving width up\n        ", " {\n          max-width: none;\n        }\n      "])), modalPixelGutter, modalPixelGutter, modalPixelWidths[$width], StyledModalBody);
+    }
+    // TODO deprecated, uses new centering, required width
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      left: 50vw;\n      transform: translateX(-50%)\n        ", ";\n    "], ["\n      left: 50vw;\n      transform: translateX(-50%)\n        ", ";\n    "])), $placement === 'center' && 'translateY(-50%)');
+});
+export var StyledModalFooter = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex: 0 0 auto;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  padding: ", "px ", "px ", "px;\n"], ["\n  align-items: center;\n  display: flex;\n  flex: 0 0 auto;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  padding: ", "px ", "px ", "px;\n"])), spacing.xl, spacing.xxl, spacing.xxl);
+export var StyledModalBody = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", "\n\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  // TODO deprecated, delete line in breaking change\n  max-width: ", ";\n  overflow: auto;\n  ", "\n\n  > ", " {\n    padding-left: 0;\n    padding-right: 0;\n\n    &:first-child > ", " {\n      padding-top: 0;\n    }\n  }\n\n  ", "\n"], ["\n  ", "\n\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  // TODO deprecated, delete line in breaking change\n  max-width: ", ";\n  overflow: auto;\n  ", "\n\n  > ", " {\n    padding-left: 0;\n    padding-right: 0;\n\n    &:first-child > ", " {\n      padding-top: 0;\n    }\n  }\n\n  ", "\n"])), getTypographyIntent('body'), colors.gray15, modalMaxWidth, function (_a) {
+    var noSideSpacing = _a.noSideSpacing;
+    return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      padding: ", "px ", "px;\n    "], ["\n      padding: ", "px ", "px;\n    "])), spacing.xl, noSideSpacing ? 0 : spacing.xxl);
+}, StyledSection, StyledSectionInner, function (_a) {
+    var isOverflowingY = _a.isOverflowingY;
+    return isOverflowingY && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      & + ", " {\n        border-top-width: 1px;\n        border-top-style: solid;\n        border-top-color: ", ";\n        ", " {\n          border-top: none;\n        }\n      }\n    "], ["\n      & + ", " {\n        border-top-width: 1px;\n        border-top-style: solid;\n        border-top-color: ", ";\n        ", " {\n          border-top: none;\n        }\n      }\n    "])), StyledModalFooter, colors.gray85, StyledModalFooterSummary);
+});
+export var StyledModalContent = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  max-height: 90vh;\n  overflow: hidden;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  max-height: 90vh;\n  overflow: hidden;\n  width: 100%;\n"])));
+export var StyledModalFooterNotation = styled(Typography)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
+export var StyledModalHeader = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  align-items: flex-start;\n  color: ", ";\n  display: flex;\n  flex: 0 0 auto;\n  padding: ", "px ", "px;\n  position: relative;\n  ", "\n"], ["\n  align-items: flex-start;\n  color: ", ";\n  display: flex;\n  flex: 0 0 auto;\n  padding: ", "px ", "px;\n  position: relative;\n  ", "\n"])), colors.gray10, spacing.xl, spacing.xxl, function (_a) {
+    var $isBodyScrolled = _a.$isBodyScrolled;
+    return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    border-bottom: 1px solid ", ";\n  "], ["\n    border-bottom: 1px solid ", ";\n  "])), $isBodyScrolled ? colors.gray85 : 'transparent');
+});
+export var StyledModalHeading = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", "\n  align-items: center;\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 36px;\n  padding-right: ", "px;\n"], ["\n  ", "\n  align-items: center;\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 36px;\n  padding-right: ", "px;\n"])), getTypographyIntent('h2'), spacing.lg);
+export var StyledModalCancel = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  flex: 0 0 auto;\n"], ["\n  flex: 0 0 auto;\n"])));
+export var StyledModalScrim = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background: hsla(200, 8%, 10%, 0.6);\n  height: 100vh;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100vw;\n  z-index: 1;\n"], ["\n  background: hsla(200, 8%, 10%, 0.6);\n  height: 100vh;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100vw;\n  z-index: 1;\n"])));
+export var StyledModalWarningIcon = styled(Warning)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  color: ", ";\n  margin-right: ", "px;\n"], ["\n  color: ", ";\n  margin-right: ", "px;\n"])), colors.yellow40, spacing.sm);
+export var StyledModalFooterSummary = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  ", "\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  padding: ", "px ", "px;\n  color: ", ";\n  font-style: italic;\n  background-color: ", ";\n  margin: -", "px -", "px ", "px -", "px;\n  flex: 1 1 100%;\n"], ["\n  ", "\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  padding: ", "px ", "px;\n  color: ", ";\n  font-style: italic;\n  background-color: ", ";\n  margin: -", "px -", "px ", "px -", "px;\n  flex: 1 1 100%;\n"])), getTypographyIntent('small'), colors.gray85, colors.gray85, spacing.md, spacing.xxl, colors.gray15, colors.gray98, spacing.xl, spacing.xxl, spacing.xl, spacing.xxl);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
+//# sourceMappingURL=Modal.styles.js.map

package/dist/Modal/Modal.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.styles.js","sourceRoot":"","sources":["../../src/Modal/Modal.styles.ts"],"names":[],"mappings":"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"}

package/dist/Modal/Modal.types.d.ts

@@ -0,0 +1,134 @@
+import React from 'react';
+import { DivAttributes, Props } from '../_utils/types';
+export declare type ModalPlacement = 'top' | 'center';
+export declare type ModalWidth = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Additional UI/UX to dismiss. (In addition to the Esc key)
+ *  - `x` Close Button in the Modal Header
+ *  - `scrim` Overlay dimmed scrim
+ *  - `footer-button` Cancel Button in the Modal Footer Actions
+ */
+export declare type ModalOptionalCloseStartegy = 'x' | 'footer-button' | 'scrim';
+declare type ModalCloseStragety = 'esc' | ModalOptionalCloseStartegy;
+declare type ModalOnClose = (event: React.MouseEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLElement>, how: ModalCloseStragety) => void;
+export interface ModalCloseContextApi {
+    /**
+     * Escape key will always close a dialog. This adds additional UI or UX to close.
+     */
+    howToClose: ModalOptionalCloseStartegy[] | undefined;
+    onClose: ModalOnClose | undefined;
+}
+export interface ModalCloseableHeaderProps extends DivAttributes {
+    qa?: {
+        closeButton?: string;
+    };
+}
+export interface ModalProps extends Props {
+    'aria-describedby'?: string;
+    'aria-details'?: string;
+    /**
+     * @a11y `role='dialog'` MUST be labelled. Prefer `aria-labelledby` over `aria-label`.
+     * @since 11.12.0
+     */
+    'aria-labelledby'?: string;
+    /**
+     * @a11y `role='dialog'` MUST be labelled. Prefer `aria-labelledby` over `aria-label`.
+     * @since 11.12.0
+     */
+    'aria-label'?: string;
+    /**
+     * This adds additional UI or UX to close. Escape key will always close a dialog, see `onClose`.
+     *
+     * NOTE 'footer-button': Footer Cancel button still requires at least a rendered self closing `Modal.FooterButtons`.
+     *
+     * NOTE 'x': The X button still requires a rendered `Modal.Header` component.
+     * @defaultValue []
+     * @since 11.12.0
+     */
+    howToClose?: ModalOptionalCloseStartegy[];
+    /**
+     * Aligns with `role` and `ref` location.
+     */
+    id?: string;
+    /**
+     * Callback for clicking the overlay
+     * @since 10.19.0
+     */
+    onClickOverlay?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * When a user closes the Modal by some approved `howToClose` method or the Escape key. This also opts-in to dialog focus management.
+     * @a11y Future default! Moves focus into and cycles focus in the Modal, and returning focus
+     * to the trigger when closed. Also enables the Escape key to close the Modal.
+     * @since 11.6.0
+     */
+    onClose?: ModalOnClose;
+    /**
+     * Modal open state
+     * @defaultValue false
+     * @since 10.19.0
+     */
+    open?: boolean;
+    /**
+     * Enable dialog props. REQUIRES `onClose` to enable Escape key and focus management. MUST be labelled, prefer `aria-labelledby` over `aria-label`.
+     */
+    role?: 'dialog';
+    /**
+     * Vertical placement of the modal
+     * @defaultValue center
+     * @since 10.19.0
+     */
+    placement?: ModalPlacement;
+    /**
+     * Sets a width on the container and uses next centering.
+     * Future will default to `md`
+     * @since 10.19.0
+     */
+    width?: ModalWidth;
+}
+export interface ModalContainerProps extends Props {
+    /**
+     * @since 10.19.0
+     */
+    placement: ModalPlacement;
+    /**
+     * @since 10.19.0
+     */
+    width?: ModalWidth;
+}
+export interface ConfirmModalProps extends Omit<ModalProps, 'onClose'> {
+    /**
+     * Headline message
+     * @since 10.19.0
+     */
+    headline?: string;
+    /**
+     * The dismiss onClick callback
+     * @since 10.19.0
+     */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * NOTE: Using howToClose 'x' requires the `Modal.Header` component.
+ * @a11y This component is a not semantic heading! For that, see `Modal.Heading`.
+ */
+export interface ModalCloseableHeaderProps extends Props {
+    /**
+     * @since 10.19.0
+     */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * @since 10.19.0
+     */
+    qa?: {
+        closeButton?: string;
+    };
+}
+export interface ModalBodyProps extends DivAttributes {
+    /**
+     * Removes left, right paddings from the modal body when true
+     * @defaultValue false
+     * @since 10.19.0
+     */
+    noSideSpacing?: boolean;
+}
+export {};

package/dist/Modal/Modal.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Modal.types.js.map

package/dist/Modal/Modal.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.types.js","sourceRoot":"","sources":["../../src/Modal/Modal.types.ts"],"names":[],"mappings":""}

package/dist/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export { ConfirmModal, Modal } from './Modal';
+export { ConfirmModalProps, ModalProps } from './Modal.types';

package/dist/Modal/index.js

@@ -0,0 +1,2 @@
+export { ConfirmModal, Modal } from './Modal';
+//# sourceMappingURL=index.js.map

package/dist/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA"}

package/dist/Modal/storyHelpers.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function EscapefulFieldSet(): JSX.Element;