@kaizen/components 1.47.0 → 1.47.2

package/dist/esm/Menu/subcomponents/MenuItem/MenuItem.module.scss.mjs

@@ -0,0 +1,13 @@
+import { styleInject } from '../../../__build-tools/styleInject.mjs';
+var css_248z = ".MenuItem-module_menuListItem__TlgwJ{display:flex}.MenuItem-module_menuItem__sVlLA{align-items:center;background:none;border:2px solid transparent;border-radius:4px;box-sizing:border-box;color:var(--color-purple-800,#2f2438);display:flex;flex:1 1 auto;font-family:var(--typography-paragraph-body-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:var(--typography-paragraph-body-line-height,1.5rem);margin:0 var(--spacing-xs,.375rem);min-height:calc(var(--spacing-md, 1.5rem)*1.75);padding:6px calc(var(--spacing-sm, .75rem) - 2px);text-align:left;text-decoration:none}.MenuItem-module_menuItem__sVlLA:hover{text-decoration:none}.MenuItem-module_menuItem__sVlLA:focus,.MenuItem-module_menuItem__sVlLA:not(.MenuItem-module_menuItem--disabled__hPAaZ):hover{background:var(--color-blue-100,#e6f6ff);color:var(--color-blue-500,#0168b3)}.MenuItem-module_menuItem__sVlLA:focus .MenuItem-module_menuItem__Icon__MwIT9,.MenuItem-module_menuItem__sVlLA:not(.MenuItem-module_menuItem--disabled__hPAaZ):hover .MenuItem-module_menuItem__Icon__MwIT9{color:var(--color-blue-500,#0168b3)}.MenuItem-module_menuItem__sVlLA:focus.MenuItem-module_menuItem--destructive__PRybF,.MenuItem-module_menuItem__sVlLA:not(.MenuItem-module_menuItem--disabled__hPAaZ):hover.MenuItem-module_menuItem--destructive__PRybF{background:var(--color-red-100,#fdeaee);color:var(--color-red-600,#a82433)}.MenuItem-module_menuItem__sVlLA:focus.MenuItem-module_menuItem--destructive__PRybF .MenuItem-module_menuItem__Icon__MwIT9,.MenuItem-module_menuItem__sVlLA:not(.MenuItem-module_menuItem--disabled__hPAaZ):hover.MenuItem-module_menuItem--destructive__PRybF .MenuItem-module_menuItem__Icon__MwIT9{color:var(--color-red-600,#a82433)}.MenuItem-module_menuItem__sVlLA:focus{outline:none}.MenuItem-module_menuItem__sVlLA:focus-visible{border-color:var(--color-blue-500,#0168b3)}[dir=rtl] .MenuItem-module_menuItem__sVlLA{text-align:right}.MenuItem-module_menuItem--disabled__hPAaZ,.MenuItem-module_menuItem--disabled__hPAaZ .MenuItem-module_menuItem__Icon__MwIT9{color:rgba(var(--color-purple-800-rgb,47,36,56),.3)}.MenuItem-module_menuItem--active__XRziT{color:var(--color-blue-500,#0168b3);font-weight:var(--typography-paragraph-bold-font-weight,600)}.MenuItem-module_menuItem--destructive__PRybF,.MenuItem-module_menuItem--destructive__PRybF .MenuItem-module_menuItem__Icon__MwIT9{color:var(--color-red-600,#a82433)}.MenuItem-module_menuItem--destructive__PRybF.MenuItem-module_menuItem--disabled__hPAaZ,.MenuItem-module_menuItem--destructive__PRybF.MenuItem-module_menuItem--disabled__hPAaZ .MenuItem-module_menuItem__Icon__MwIT9{color:rgba(var(--color-red-600-rgb,168,36,51),.3)}.MenuItem-module_menuItem__Label__gXz-G{flex-grow:1}.MenuItem-module_menuItem__Icon__MwIT9{align-self:flex-start;color:rgba(var(--color-purple-800-rgb,47,36,56),.75);display:flex;margin-inline-end:calc(var(--spacing-md, 1.5rem)/3);transform:translateY(.2em)}";
+var styles = {
+  "menuListItem": "MenuItem-module_menuListItem__TlgwJ",
+  "menuItem": "MenuItem-module_menuItem__sVlLA",
+  "menuItem--disabled": "MenuItem-module_menuItem--disabled__hPAaZ",
+  "menuItem__Icon": "MenuItem-module_menuItem__Icon__MwIT9",
+  "menuItem--destructive": "MenuItem-module_menuItem--destructive__PRybF",
+  "menuItem--active": "MenuItem-module_menuItem--active__XRziT",
+  "menuItem__Label": "MenuItem-module_menuItem__Label__gXz-G"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Menu/subcomponents/MenuList/MenuList.mjs

@@ -0,0 +1,22 @@
+import { __rest, __assign } from 'tslib';
+import React, { useId, cloneElement } from 'react';
+import styles from './MenuList.module.scss.mjs';
+const MenuList = /*#__PURE__*/function () {
+  const MenuList = function (props) {
+    var _a;
+    var heading = props.heading,
+      children = props.children,
+      restProps = __rest(props, ["heading", "children"]);
+    var reactId = useId();
+    var listHeadingID = (_a = heading === null || heading === void 0 ? void 0 : heading.props.id) !== null && _a !== void 0 ? _a : reactId;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, heading && /*#__PURE__*/cloneElement(heading, {
+      id: listHeadingID
+    }), /*#__PURE__*/React.createElement("ul", __assign({
+      className: styles.menuSection,
+      "aria-labelledby": heading ? listHeadingID : undefined
+    }, restProps), children));
+  };
+  MenuList.displayName = "MenuList";
+  return MenuList;
+}();
+export { MenuList };

package/dist/esm/Menu/subcomponents/MenuList/MenuList.module.scss.mjs

@@ -0,0 +1,7 @@
+import { styleInject } from '../../../__build-tools/styleInject.mjs';
+var css_248z = ".MenuList-module_menuSection__Wbgbr{list-style:none;margin:0;padding:0}.MenuList-module_menuSection__Wbgbr:not(:last-of-type):after{background-color:var(--border-solid-border-color,#e1e2ea);content:\"\";display:block;height:1px;margin:5px 0;width:100%}";
+var styles = {
+  "menuSection": "MenuList-module_menuSection__Wbgbr"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Menu/subcomponents/StatelessMenu/StatelessMenu.mjs

@@ -0,0 +1,70 @@
+import React, { useState, useRef, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { MenuDropdown } from '../MenuDropdown/MenuDropdown.mjs';
+import styles from './StatelessMenu.module.scss.mjs';
+const StatelessMenu = /*#__PURE__*/function () {
+  const StatelessMenu = function (_a) {
+    var _b = _a.align,
+      align = _b === void 0 ? "left" : _b,
+      _c = _a.dropdownWidth,
+      dropdownWidth = _c === void 0 ? "default" : _c,
+      _d = _a.autoHide,
+      autoHide = _d === void 0 ? "on" : _d,
+      dataTestId = _a["data-testid"],
+      dropdownId = _a.dropdownId,
+      children = _a.children,
+      portalSelector = _a.portalSelector,
+      isMenuVisible = _a.isMenuVisible,
+      toggleMenuDropdown = _a.toggleMenuDropdown,
+      hideMenuDropdown = _a.hideMenuDropdown,
+      renderButton = _a.renderButton,
+      onClick = _a.onClick;
+    var _e = useState(null),
+      referenceElement = _e[0],
+      setReferenceElement = _e[1];
+    var portalSelectorElementRef = useRef(null);
+    var menuButton = renderButton({
+      onClick: function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        toggleMenuDropdown();
+      },
+      onMouseDown: function (e) {
+        return e.preventDefault();
+      },
+      "aria-haspopup": true,
+      "aria-expanded": isMenuVisible
+    });
+    useEffect(function () {
+      portalSelectorElementRef.current = portalSelector ? document.querySelector(portalSelector) : null;
+    }, [portalSelector]);
+    useEffect(function () {
+      if (portalSelector && !portalSelectorElementRef.current) {
+        // eslint-disable-next-line no-console
+        console.warn("The portal could not be created using the selector: " + portalSelector);
+      }
+    }, [portalSelectorElementRef, portalSelector]);
+    var menu = isMenuVisible ? ( /*#__PURE__*/React.createElement(MenuDropdown, {
+      referenceElement: referenceElement,
+      align: align,
+      hideMenuDropdown: hideMenuDropdown,
+      width: dropdownWidth,
+      id: dropdownId,
+      autoHide: autoHide
+    }, children)) : null;
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+      React.createElement("div", {
+        "data-testid": dataTestId,
+        onClick: onClick
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.buttonWrapper,
+        ref: setReferenceElement
+      }, menuButton), portalSelector && portalSelectorElementRef.current ? /*#__PURE__*/ReactDOM.createPortal(menu, portalSelectorElementRef.current) : menu)
+    );
+  };
+  StatelessMenu.displayName = "StatelessMenu";
+  return StatelessMenu;
+}();
+export { StatelessMenu };

package/dist/esm/Menu/subcomponents/StatelessMenu/StatelessMenu.module.scss.mjs

@@ -0,0 +1,7 @@
+import { styleInject } from '../../../__build-tools/styleInject.mjs';
+var css_248z = ".StatelessMenu-module_buttonWrapper__9LgSC{display:inline-block}";
+var styles = {
+  "buttonWrapper": "StatelessMenu-module_buttonWrapper__9LgSC"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Modal/ConfirmationModal/ConfirmationModal.mjs

@@ -0,0 +1,126 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { Heading } from '../../Heading/Heading.mjs';
+import '../../Icon/subcomponents/SVG/SVG.mjs';
+import { CautionWhiteIcon } from '../../Icon/CautionWhiteIcon.mjs';
+import { ExclamationWhiteIcon } from '../../Icon/ExclamationWhiteIcon.mjs';
+import { InformationWhiteIcon } from '../../Icon/InformationWhiteIcon.mjs';
+import { SuccessWhiteIcon } from '../../Icon/SuccessWhiteIcon.mjs';
+import { Assertive, Positive, Negative, Informative, Cautionary } from '../../Illustration/Spot/Spot.mjs';
+import '../../Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.mjs';
+import '../../Illustration/Scene/Scene.mjs';
+import { GenericModal } from '../GenericModal/GenericModal.mjs';
+import '../GenericModal/context/ModalContext.mjs';
+import { ModalAccessibleDescription } from '../GenericModal/subcomponents/ModalAccessibleDescription/ModalAccessibleDescription.mjs';
+import { ModalFooter } from '../GenericModal/subcomponents/ModalFooter/ModalFooter.mjs';
+import { ModalHeader } from '../GenericModal/subcomponents/ModalHeader/ModalHeader.mjs';
+import { ModalAccessibleLabel } from '../GenericModal/subcomponents/ModalAccessibleLabel/ModalAccessibleLabel.mjs';
+import { ModalBody } from '../GenericModal/subcomponents/ModalBody/ModalBody.mjs';
+import styles from './ConfirmationModal.module.scss.mjs';
+var getIcon = function (mood, isProminent) {
+  switch (mood) {
+    case "cautionary":
+      return isProminent ? ( /*#__PURE__*/React.createElement(Cautionary, null)) : ( /*#__PURE__*/React.createElement(CautionWhiteIcon, {
+        inheritSize: true,
+        role: "presentation"
+      }));
+    case "informative":
+      return isProminent ? ( /*#__PURE__*/React.createElement(Informative, null)) : ( /*#__PURE__*/React.createElement(InformationWhiteIcon, {
+        inheritSize: true,
+        role: "presentation"
+      }));
+    case "negative":
+      return isProminent ? ( /*#__PURE__*/React.createElement(Negative, null)) : ( /*#__PURE__*/React.createElement(ExclamationWhiteIcon, {
+        inheritSize: true,
+        role: "presentation"
+      }));
+    case "positive":
+      return isProminent ? ( /*#__PURE__*/React.createElement(Positive, null)) : ( /*#__PURE__*/React.createElement(SuccessWhiteIcon, {
+        inheritSize: true,
+        role: "presentation"
+      }));
+    case "assertive":
+      return isProminent ? ( /*#__PURE__*/React.createElement(Assertive, null)) : ( /*#__PURE__*/React.createElement(ExclamationWhiteIcon, {
+        inheritSize: true,
+        role: "presentation"
+      }));
+  }
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-modals-confirmationmodal--docs Storybook}
+ */
+const ConfirmationModal = /*#__PURE__*/function () {
+  const ConfirmationModal = function (_a) {
+    var isOpen = _a.isOpen,
+      _b = _a.isProminent,
+      isProminent = _b === void 0 ? false : _b,
+      _c = _a.unpadded,
+      unpadded = _c === void 0 ? false : _c,
+      mood = _a.mood,
+      title = _a.title,
+      onConfirm = _a.onConfirm,
+      onAfterLeave = _a.onAfterLeave,
+      onAfterEnter = _a.onAfterEnter,
+      _d = _a.confirmLabel,
+      confirmLabel = _d === void 0 ? "Confirm" : _d,
+      _e = _a.dismissLabel,
+      dismissLabel = _e === void 0 ? "Cancel" : _e,
+      confirmWorking = _a.confirmWorking,
+      propsOnDismiss = _a.onDismiss,
+      children = _a.children,
+      props = __rest(_a, ["isOpen", "isProminent", "unpadded", "mood", "title", "onConfirm", "onAfterLeave", "onAfterEnter", "confirmLabel", "dismissLabel", "confirmWorking", "onDismiss", "children"]);
+    var onDismiss = confirmWorking ? undefined : propsOnDismiss;
+    var footerActions = [];
+    if (onConfirm) {
+      var confirmAction = {
+        label: confirmLabel,
+        onClick: onConfirm
+      };
+      var workingProps = confirmWorking ? {
+        working: true,
+        workingLabel: confirmWorking.label,
+        workingLabelHidden: confirmWorking.labelHidden
+      } : {};
+      footerActions.push(__assign(__assign({}, confirmAction), workingProps));
+    }
+    footerActions.push({
+      label: dismissLabel,
+      onClick: onDismiss,
+      disabled: !!confirmWorking
+    });
+    return /*#__PURE__*/React.createElement(GenericModal, {
+      isOpen: isOpen,
+      onEscapeKeyup: onDismiss,
+      onOutsideModalClick: onDismiss,
+      onAfterLeave: onAfterLeave,
+      onAfterEnter: onAfterEnter
+    }, /*#__PURE__*/React.createElement("div", __assign({
+      className: styles.modal,
+      "data-modal": true
+    }, props), /*#__PURE__*/React.createElement(ModalHeader, {
+      onDismiss: onDismiss
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.header, styles["".concat(mood, "Header")], isProminent && styles.prominent, !unpadded && styles.padded)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.iconContainer, isProminent && styles.prominent)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.spotIcon
+    }, getIcon(mood, isProminent))), /*#__PURE__*/React.createElement(ModalAccessibleLabel, {
+      isProminent: isProminent
+    }, /*#__PURE__*/React.createElement(Heading, {
+      tag: "h2",
+      variant: "heading-2"
+    }, title)))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
+      className: classnames(isProminent && styles.prominent, !unpadded && styles.padded)
+    }, /*#__PURE__*/React.createElement(ModalAccessibleDescription, null, children))), /*#__PURE__*/React.createElement(ModalFooter, {
+      actions: footerActions,
+      appearance: mood === "negative" ? "destructive" : "primary",
+      unpadded: unpadded
+    })));
+  };
+  ConfirmationModal.displayName = "ConfirmationModal";
+  return ConfirmationModal;
+}();
+export { ConfirmationModal };

package/dist/esm/Modal/ConfirmationModal/ConfirmationModal.module.scss.mjs

@@ -0,0 +1,31 @@
+import { styleInject } from '../../__build-tools/styleInject.mjs';
+var css_248z = ".ConfirmationModal-module_defaultModalWidth__K3fje{max-width:600px;min-width:300px}.ConfirmationModal-module_backdropLayer__wvXnl{background-color:#000;bottom:0;left:0;opacity:50%;position:fixed;right:0;top:0;z-index:1040}.ConfirmationModal-module_backdropLayer__wvXnl[dir=rtl],[dir=rtl] .ConfirmationModal-module_backdropLayer__wvXnl{left:0;right:0}.ConfirmationModal-module_scrollLayer__x-yP4{align-items:center;bottom:0;display:flex;left:0;overflow-y:auto;position:fixed;right:0;top:0;z-index:1050}.ConfirmationModal-module_scrollLayer__x-yP4[dir=rtl],[dir=rtl] .ConfirmationModal-module_scrollLayer__x-yP4{left:0;right:0}.ConfirmationModal-module_modalLayer__MucTZ{margin:auto;padding:1.5rem 0;width:100%}.ConfirmationModal-module_modal__k3pXu{-webkit-font-smoothing:antialiased;background-color:var(--color-white,#fff);border-radius:var(--border-solid-border-radius,7px);box-shadow:var(--shadow-large-box-shadow,0 3px 9px 0 rgba(0,0,0,.1),0 8px 40px 0 rgba(0,0,0,.08));color:var(--color-purple-800,#2f2438);margin:auto;position:relative;width:90%}@media (min-width:768px){.ConfirmationModal-module_modal__k3pXu{width:100%}}.ConfirmationModal-module_animatingEnter__4W4xh{transition-duration:var(--animation-duration-fast,.3s)}.ConfirmationModal-module_animatingEnter__4W4xh .ConfirmationModal-module_backdropLayer__wvXnl{animation-duration:201ms;animation-fill-mode:forwards;animation-name:ConfirmationModal-module_fade-0-to-0-5__353tZ}@keyframes ConfirmationModal-module_fade-0-to-0-5__353tZ{0%{opacity:0}to{opacity:.5}}.ConfirmationModal-module_animatingEnter__4W4xh [data-modal]{animation-duration:var(--animation-duration-fast,.3s);animation-fill-mode:forwards;animation-name:ConfirmationModal-module_custom-1__Ibcy-;animation-timing-function:var(--animation-easing-function-bounce-in,cubic-bezier(.485,.155,.24,1.245))}@keyframes ConfirmationModal-module_custom-1__Ibcy-{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.ConfirmationModal-module_animatingLeave__n-S4X{transition-duration:var(--animation-duration-rapid,.2s)}.ConfirmationModal-module_animatingLeave__n-S4X .ConfirmationModal-module_backdropLayer__wvXnl{animation-duration:var(--animation-duration-rapid,.2s);animation-fill-mode:forwards;animation-name:ConfirmationModal-module_fade-0-5-to-0__pfhV-}@keyframes ConfirmationModal-module_fade-0-5-to-0__pfhV-{0%{opacity:.5}to{opacity:0}}.ConfirmationModal-module_animatingLeave__n-S4X [data-modal]{animation-duration:var(--animation-duration-rapid,.2s);animation-fill-mode:forwards;animation-name:ConfirmationModal-module_custom-3__MEO7v;animation-timing-function:var(--animation-easing-function-bounce-out,cubic-bezier(.485,.155,.515,.845))}@keyframes ConfirmationModal-module_custom-3__MEO7v{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}.ConfirmationModal-module_unscrollable__wg2AZ{overflow:hidden!important}.ConfirmationModal-module_pseudoScrollbar__NqMuT{padding-right:15px!important}.ConfirmationModal-module_hide__jOdWV{opacity:0;pointer-events:none}.ConfirmationModal-module_modal__k3pXu{max-width:600px;min-width:300px}.ConfirmationModal-module_header__Ooy23{border-radius:var(--border-solid-border-radius,7px) var(--border-solid-border-radius,7px) 0 0;color:var(--color-white,#fff);text-align:left}.ConfirmationModal-module_header__Ooy23.ConfirmationModal-module_padded__nGa2-{padding:var(--spacing-md,1.5rem) var(--spacing-lg,2.25rem)}@media (max-width:768px){.ConfirmationModal-module_header__Ooy23.ConfirmationModal-module_padded__nGa2-{padding:var(--spacing-md,1.5rem)}}.ConfirmationModal-module_header__Ooy23 h1{color:var(--color-purple-800,#2f2438)}.ConfirmationModal-module_iconContainer__QjdGa{position:relative}.ConfirmationModal-module_positiveHeader__8Dmja{background-color:var(--color-green-100,#e8f8f4)}.ConfirmationModal-module_positiveHeader__8Dmja .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_positiveHeader__8Dmja .ConfirmationModal-module_svgIcon__f1ncQ>svg{color:var(--color-green-500,#44a289)}.ConfirmationModal-module_assertiveHeader__3chNK{background-color:var(--color-orange-100,#fff0e8)}.ConfirmationModal-module_assertiveHeader__3chNK .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_assertiveHeader__3chNK .ConfirmationModal-module_svgIcon__f1ncQ>svg{color:var(--color-orange-500,#e96c2f)}.ConfirmationModal-module_informativeHeader__lTv94{background-color:var(--color-blue-100,#e6f6ff)}.ConfirmationModal-module_informativeHeader__lTv94 .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_informativeHeader__lTv94 .ConfirmationModal-module_svgIcon__f1ncQ>svg{color:var(--color-blue-500,#0168b3)}.ConfirmationModal-module_negativeHeader__Pmob9{background-color:var(--color-red-100,#fdeaee)}.ConfirmationModal-module_negativeHeader__Pmob9 .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_negativeHeader__Pmob9 .ConfirmationModal-module_svgIcon__f1ncQ>svg{color:var(--color-red-500,#c93b55)}.ConfirmationModal-module_cautionaryHeader__ZnE4P{background-color:var(--color-yellow-100,#fff9e4)}.ConfirmationModal-module_cautionaryHeader__ZnE4P .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_cautionaryHeader__ZnE4P .ConfirmationModal-module_svgIcon__f1ncQ>svg{color:var(--color-yellow-500,#ffb600)}.ConfirmationModal-module_assertiveHeader__3chNK,.ConfirmationModal-module_cautionaryHeader__ZnE4P,.ConfirmationModal-module_informativeHeader__lTv94,.ConfirmationModal-module_negativeHeader__Pmob9,.ConfirmationModal-module_positiveHeader__8Dmja{align-items:center;display:grid;grid-template-columns:.2fr 2fr}.ConfirmationModal-module_assertiveHeader__3chNK .ConfirmationModal-module_iconContainer__QjdGa,.ConfirmationModal-module_cautionaryHeader__ZnE4P .ConfirmationModal-module_iconContainer__QjdGa,.ConfirmationModal-module_informativeHeader__lTv94 .ConfirmationModal-module_iconContainer__QjdGa,.ConfirmationModal-module_negativeHeader__Pmob9 .ConfirmationModal-module_iconContainer__QjdGa,.ConfirmationModal-module_positiveHeader__8Dmja .ConfirmationModal-module_iconContainer__QjdGa{align-self:flex-start}@media (min-width:768px){.ConfirmationModal-module_assertiveHeader__3chNK .ConfirmationModal-module_iconContainer__QjdGa,.ConfirmationModal-module_cautionaryHeader__ZnE4P .ConfirmationModal-module_iconContainer__QjdGa,.ConfirmationModal-module_informativeHeader__lTv94 .ConfirmationModal-module_iconContainer__QjdGa,.ConfirmationModal-module_negativeHeader__Pmob9 .ConfirmationModal-module_iconContainer__QjdGa,.ConfirmationModal-module_positiveHeader__8Dmja .ConfirmationModal-module_iconContainer__QjdGa{align-self:center}}.ConfirmationModal-module_assertiveHeader__3chNK .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_assertiveHeader__3chNK .ConfirmationModal-module_svgIcon__f1ncQ>svg,.ConfirmationModal-module_cautionaryHeader__ZnE4P .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_cautionaryHeader__ZnE4P .ConfirmationModal-module_svgIcon__f1ncQ>svg,.ConfirmationModal-module_informativeHeader__lTv94 .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_informativeHeader__lTv94 .ConfirmationModal-module_svgIcon__f1ncQ>svg,.ConfirmationModal-module_negativeHeader__Pmob9 .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_negativeHeader__Pmob9 .ConfirmationModal-module_svgIcon__f1ncQ>svg,.ConfirmationModal-module_positiveHeader__8Dmja .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_positiveHeader__8Dmja .ConfirmationModal-module_svgIcon__f1ncQ>svg{height:30px;width:30px}@media (max-width:768px){.ConfirmationModal-module_assertiveHeader__3chNK .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_assertiveHeader__3chNK .ConfirmationModal-module_svgIcon__f1ncQ>svg,.ConfirmationModal-module_cautionaryHeader__ZnE4P .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_cautionaryHeader__ZnE4P .ConfirmationModal-module_svgIcon__f1ncQ>svg,.ConfirmationModal-module_informativeHeader__lTv94 .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_informativeHeader__lTv94 .ConfirmationModal-module_svgIcon__f1ncQ>svg,.ConfirmationModal-module_negativeHeader__Pmob9 .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_negativeHeader__Pmob9 .ConfirmationModal-module_svgIcon__f1ncQ>svg,.ConfirmationModal-module_positiveHeader__8Dmja .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_positiveHeader__8Dmja .ConfirmationModal-module_svgIcon__f1ncQ>svg{margin-right:.9375rem;position:relative;top:.125rem}}.ConfirmationModal-module_assertiveHeader__3chNK.ConfirmationModal-module_prominent__8-gkP,.ConfirmationModal-module_cautionaryHeader__ZnE4P.ConfirmationModal-module_prominent__8-gkP,.ConfirmationModal-module_informativeHeader__lTv94.ConfirmationModal-module_prominent__8-gkP,.ConfirmationModal-module_negativeHeader__Pmob9.ConfirmationModal-module_prominent__8-gkP,.ConfirmationModal-module_positiveHeader__8Dmja.ConfirmationModal-module_prominent__8-gkP{grid-template-columns:1.1fr 2fr}@media (max-width:768px){.ConfirmationModal-module_assertiveHeader__3chNK.ConfirmationModal-module_prominent__8-gkP,.ConfirmationModal-module_cautionaryHeader__ZnE4P.ConfirmationModal-module_prominent__8-gkP,.ConfirmationModal-module_informativeHeader__lTv94.ConfirmationModal-module_prominent__8-gkP,.ConfirmationModal-module_negativeHeader__Pmob9.ConfirmationModal-module_prominent__8-gkP,.ConfirmationModal-module_positiveHeader__8Dmja.ConfirmationModal-module_prominent__8-gkP{align-items:flex-start;display:flex;flex-direction:column;place-content:flex-start center}}.ConfirmationModal-module_assertiveHeader__3chNK.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_iconContainer__QjdGa,.ConfirmationModal-module_cautionaryHeader__ZnE4P.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_iconContainer__QjdGa,.ConfirmationModal-module_informativeHeader__lTv94.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_iconContainer__QjdGa,.ConfirmationModal-module_negativeHeader__Pmob9.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_iconContainer__QjdGa,.ConfirmationModal-module_positiveHeader__8Dmja.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_iconContainer__QjdGa{position:absolute;top:8%}@media (max-width:768px){.ConfirmationModal-module_assertiveHeader__3chNK.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_iconContainer__QjdGa,.ConfirmationModal-module_cautionaryHeader__ZnE4P.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_iconContainer__QjdGa,.ConfirmationModal-module_informativeHeader__lTv94.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_iconContainer__QjdGa,.ConfirmationModal-module_negativeHeader__Pmob9.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_iconContainer__QjdGa,.ConfirmationModal-module_positiveHeader__8Dmja.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_iconContainer__QjdGa{margin-bottom:var(--spacing-sm,.75rem);position:relative;top:0}}.ConfirmationModal-module_assertiveHeader__3chNK.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_assertiveHeader__3chNK.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_svgIcon__f1ncQ>svg,.ConfirmationModal-module_cautionaryHeader__ZnE4P.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_cautionaryHeader__ZnE4P.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_svgIcon__f1ncQ>svg,.ConfirmationModal-module_informativeHeader__lTv94.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_informativeHeader__lTv94.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_svgIcon__f1ncQ>svg,.ConfirmationModal-module_negativeHeader__Pmob9.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_negativeHeader__Pmob9.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_svgIcon__f1ncQ>svg,.ConfirmationModal-module_positiveHeader__8Dmja.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_positiveHeader__8Dmja.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_svgIcon__f1ncQ>svg{color:var(--color-purple-800,#2f2438);height:155px;margin:0 auto;width:155px}@media (max-width:768px){.ConfirmationModal-module_assertiveHeader__3chNK.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_assertiveHeader__3chNK.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_svgIcon__f1ncQ>svg,.ConfirmationModal-module_cautionaryHeader__ZnE4P.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_cautionaryHeader__ZnE4P.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_svgIcon__f1ncQ>svg,.ConfirmationModal-module_informativeHeader__lTv94.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_informativeHeader__lTv94.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_svgIcon__f1ncQ>svg,.ConfirmationModal-module_negativeHeader__Pmob9.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_negativeHeader__Pmob9.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_svgIcon__f1ncQ>svg,.ConfirmationModal-module_positiveHeader__8Dmja.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_spotIcon__rFSHQ,.ConfirmationModal-module_positiveHeader__8Dmja.ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_svgIcon__f1ncQ>svg{height:86px;width:86px}}.ConfirmationModal-module_prominent__8-gkP{align-items:center;display:grid;grid-template-columns:1.1fr 2fr}@media (max-width:768px){.ConfirmationModal-module_prominent__8-gkP{grid-template-columns:1fr}}.ConfirmationModal-module_padded__nGa2-{padding:var(--spacing-md,1.5rem) var(--spacing-lg,2.25rem) var(--spacing-md,1.5rem) var(--spacing-lg,2.25rem)}@media (max-width:768px){.ConfirmationModal-module_padded__nGa2-{padding:var(--spacing-md,1.5rem)}}";
+var styles = {
+  "defaultModalWidth": "ConfirmationModal-module_defaultModalWidth__K3fje",
+  "backdropLayer": "ConfirmationModal-module_backdropLayer__wvXnl",
+  "scrollLayer": "ConfirmationModal-module_scrollLayer__x-yP4",
+  "modalLayer": "ConfirmationModal-module_modalLayer__MucTZ",
+  "modal": "ConfirmationModal-module_modal__k3pXu",
+  "animatingEnter": "ConfirmationModal-module_animatingEnter__4W4xh",
+  "fade-0-to-0-5": "ConfirmationModal-module_fade-0-to-0-5__353tZ",
+  "custom-1": "ConfirmationModal-module_custom-1__Ibcy-",
+  "animatingLeave": "ConfirmationModal-module_animatingLeave__n-S4X",
+  "fade-0-5-to-0": "ConfirmationModal-module_fade-0-5-to-0__pfhV-",
+  "custom-3": "ConfirmationModal-module_custom-3__MEO7v",
+  "unscrollable": "ConfirmationModal-module_unscrollable__wg2AZ",
+  "pseudoScrollbar": "ConfirmationModal-module_pseudoScrollbar__NqMuT",
+  "hide": "ConfirmationModal-module_hide__jOdWV",
+  "header": "ConfirmationModal-module_header__Ooy23",
+  "padded": "ConfirmationModal-module_padded__nGa2-",
+  "iconContainer": "ConfirmationModal-module_iconContainer__QjdGa",
+  "positiveHeader": "ConfirmationModal-module_positiveHeader__8Dmja",
+  "spotIcon": "ConfirmationModal-module_spotIcon__rFSHQ",
+  "svgIcon": "ConfirmationModal-module_svgIcon__f1ncQ",
+  "assertiveHeader": "ConfirmationModal-module_assertiveHeader__3chNK",
+  "informativeHeader": "ConfirmationModal-module_informativeHeader__lTv94",
+  "negativeHeader": "ConfirmationModal-module_negativeHeader__Pmob9",
+  "cautionaryHeader": "ConfirmationModal-module_cautionaryHeader__ZnE4P",
+  "prominent": "ConfirmationModal-module_prominent__8-gkP"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Modal/ContextModal/ContextModal.mjs

@@ -0,0 +1,97 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { Heading } from '../../Heading/Heading.mjs';
+import { GenericModal } from '../GenericModal/GenericModal.mjs';
+import '../GenericModal/context/ModalContext.mjs';
+import '../GenericModal/subcomponents/ModalAccessibleDescription/ModalAccessibleDescription.mjs';
+import { ModalFooter } from '../GenericModal/subcomponents/ModalFooter/ModalFooter.mjs';
+import { ModalHeader } from '../GenericModal/subcomponents/ModalHeader/ModalHeader.mjs';
+import { ModalAccessibleLabel } from '../GenericModal/subcomponents/ModalAccessibleLabel/ModalAccessibleLabel.mjs';
+import { ModalBody } from '../GenericModal/subcomponents/ModalBody/ModalBody.mjs';
+import styles from './ContextModal.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-modals--contextmodal--docs Storybook}
+ */
+const ContextModal = /*#__PURE__*/function () {
+  const ContextModal = function (_a) {
+    var isOpen = _a.isOpen,
+      _b = _a.unpadded,
+      unpadded = _b === void 0 ? false : _b,
+      _c = _a.layout,
+      layout = _c === void 0 ? "portrait" : _c,
+      title = _a.title,
+      onConfirm = _a.onConfirm,
+      propsOnDismiss = _a.onDismiss,
+      onAfterLeave = _a.onAfterLeave,
+      onAfterEnter = _a.onAfterEnter,
+      _d = _a.confirmLabel,
+      confirmLabel = _d === void 0 ? "Confirm" : _d,
+      confirmWorking = _a.confirmWorking,
+      renderBackground = _a.renderBackground,
+      children = _a.children,
+      contentHeader = _a.contentHeader,
+      image = _a.image,
+      secondaryLabel = _a.secondaryLabel,
+      onSecondaryAction = _a.onSecondaryAction,
+      props = __rest(_a, ["isOpen", "unpadded", "layout", "title", "onConfirm", "onDismiss", "onAfterLeave", "onAfterEnter", "confirmLabel", "confirmWorking", "renderBackground", "children", "contentHeader", "image", "secondaryLabel", "onSecondaryAction"]);
+    var onDismiss = confirmWorking ? undefined : propsOnDismiss;
+    var footerActions = [];
+    var workingProps = confirmWorking ? {
+      working: true,
+      workingLabel: confirmWorking.label,
+      workingLabelHidden: confirmWorking.labelHidden
+    } : {};
+    if (onConfirm) {
+      var confirmAction = {
+        label: confirmLabel,
+        onClick: onConfirm
+      };
+      footerActions.push(__assign(__assign({}, confirmAction), workingProps));
+    }
+    if (secondaryLabel) {
+      footerActions.push({
+        label: secondaryLabel,
+        onClick: onSecondaryAction,
+        disabled: !!confirmWorking
+      });
+    }
+    return /*#__PURE__*/React.createElement(GenericModal, {
+      isOpen: isOpen,
+      onEscapeKeyup: onDismiss,
+      onOutsideModalClick: onDismiss,
+      onAfterLeave: onAfterLeave,
+      onAfterEnter: onAfterEnter
+    }, /*#__PURE__*/React.createElement("div", __assign({
+      className: styles.modal,
+      "data-modal": true
+    }, props), renderBackground && renderBackground(), /*#__PURE__*/React.createElement(ModalHeader, {
+      onDismiss: onDismiss
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.header, !unpadded && styles.padded)
+    }, /*#__PURE__*/React.createElement(ModalAccessibleLabel, null, /*#__PURE__*/React.createElement(Heading, {
+      variant: "heading-2",
+      tag: "h2"
+    }, title)))), contentHeader && ( /*#__PURE__*/React.createElement("div", {
+      className: styles.contentHeader
+    }, contentHeader)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.contentLayout, styles["".concat(layout, "Contentlayout")])
+    }, image && /*#__PURE__*/React.createElement("div", {
+      className: styles.image
+    }, image), /*#__PURE__*/React.createElement("div", {
+      className: styles.content
+    }, children, onConfirm != null && ( /*#__PURE__*/React.createElement("div", {
+      className: secondaryLabel ? styles.footerWithSecondaryAction : styles.footer
+    }))))), /*#__PURE__*/React.createElement(ModalFooter, {
+      variant: image ? "context" : undefined,
+      actions: footerActions,
+      appearance: "primary",
+      unpadded: unpadded
+    })));
+  };
+  ContextModal.displayName = "ContextModal";
+  return ContextModal;
+}();
+export { ContextModal };

package/dist/esm/Modal/ContextModal/ContextModal.module.scss.mjs

@@ -0,0 +1,31 @@
+import { styleInject } from '../../__build-tools/styleInject.mjs';
+var css_248z = ".ContextModal-module_defaultModalWidth__bgf7L{max-width:600px;min-width:300px}.ContextModal-module_backdropLayer__wuj3B{background-color:#000;bottom:0;left:0;opacity:50%;position:fixed;right:0;top:0;z-index:1040}.ContextModal-module_backdropLayer__wuj3B[dir=rtl],[dir=rtl] .ContextModal-module_backdropLayer__wuj3B{left:0;right:0}.ContextModal-module_scrollLayer__JANXA{align-items:center;bottom:0;display:flex;left:0;overflow-y:auto;position:fixed;right:0;top:0;z-index:1050}.ContextModal-module_scrollLayer__JANXA[dir=rtl],[dir=rtl] .ContextModal-module_scrollLayer__JANXA{left:0;right:0}.ContextModal-module_modalLayer__Cx6aX{margin:auto;padding:1.5rem 0;width:100%}.ContextModal-module_modal__wriV7{-webkit-font-smoothing:antialiased;background-color:var(--color-white,#fff);border-radius:var(--border-solid-border-radius,7px);box-shadow:var(--shadow-large-box-shadow,0 3px 9px 0 rgba(0,0,0,.1),0 8px 40px 0 rgba(0,0,0,.08));color:var(--color-purple-800,#2f2438);margin:auto;position:relative;width:90%}@media (min-width:768px){.ContextModal-module_modal__wriV7{width:100%}}.ContextModal-module_animatingEnter__53BlF{transition-duration:var(--animation-duration-fast,.3s)}.ContextModal-module_animatingEnter__53BlF .ContextModal-module_backdropLayer__wuj3B{animation-duration:201ms;animation-fill-mode:forwards;animation-name:ContextModal-module_fade-0-to-0-5__vZx9M}@keyframes ContextModal-module_fade-0-to-0-5__vZx9M{0%{opacity:0}to{opacity:.5}}.ContextModal-module_animatingEnter__53BlF [data-modal]{animation-duration:var(--animation-duration-fast,.3s);animation-fill-mode:forwards;animation-name:ContextModal-module_custom-1__be8sO;animation-timing-function:var(--animation-easing-function-bounce-in,cubic-bezier(.485,.155,.24,1.245))}@keyframes ContextModal-module_custom-1__be8sO{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.ContextModal-module_animatingLeave__-JR11{transition-duration:var(--animation-duration-rapid,.2s)}.ContextModal-module_animatingLeave__-JR11 .ContextModal-module_backdropLayer__wuj3B{animation-duration:var(--animation-duration-rapid,.2s);animation-fill-mode:forwards;animation-name:ContextModal-module_fade-0-5-to-0__R4eO-}@keyframes ContextModal-module_fade-0-5-to-0__R4eO-{0%{opacity:.5}to{opacity:0}}.ContextModal-module_animatingLeave__-JR11 [data-modal]{animation-duration:var(--animation-duration-rapid,.2s);animation-fill-mode:forwards;animation-name:ContextModal-module_custom-3__klp3m;animation-timing-function:var(--animation-easing-function-bounce-out,cubic-bezier(.485,.155,.515,.845))}@keyframes ContextModal-module_custom-3__klp3m{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}.ContextModal-module_unscrollable__kF7MR{overflow:hidden!important}.ContextModal-module_pseudoScrollbar__6RfHj{padding-right:15px!important}.ContextModal-module_hide__Sdnsg{opacity:0;pointer-events:none}.ContextModal-module_modal__wriV7{max-width:840px;min-width:300px}@media (min-width:768px){.ContextModal-module_modal__wriV7{width:90%}}.ContextModal-module_animatingEnter__53BlF .ContextModal-module_modal__wriV7{animation-duration:var(--animation-duration-fast,.3s);animation-fill-mode:forwards;animation-name:ContextModal-module_custom-5__deZpl;animation-timing-function:var(--animation-easing-function-bounce-in,cubic-bezier(.485,.155,.24,1.245))}@keyframes ContextModal-module_custom-5__deZpl{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.ContextModal-module_animatingLeave__-JR11 .ContextModal-module_modal__wriV7{animation-duration:var(--animation-duration-rapid,.2s);animation-fill-mode:forwards;animation-name:ContextModal-module_custom-7__rPmP4;animation-timing-function:var(--animation-easing-function-bounce-out,cubic-bezier(.485,.155,.515,.845))}@keyframes ContextModal-module_custom-7__rPmP4{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}.ContextModal-module_header__V4IRF{color:var(--color-purple-800,#2f2438);text-align:left}.ContextModal-module_header__V4IRF.ContextModal-module_padded__osmk1{padding:var(--spacing-md,1.5rem)}@media (min-width:768px){.ContextModal-module_header__V4IRF.ContextModal-module_padded__osmk1{padding:var(--spacing-md,1.5rem) var(--spacing-lg,2.25rem)}}.ContextModal-module_footerWithSecondaryAction__-5sq8,.ContextModal-module_footer__JIwF5{white-space:normal}@media (min-width:768px){.ContextModal-module_footerWithSecondaryAction__-5sq8,.ContextModal-module_footer__JIwF5{white-space:nowrap}}.ContextModal-module_footerWithSecondaryAction__-5sq8{margin-left:calc(var(--spacing-sm, .75rem)*-1)}.ContextModal-module_emptyFooter__UHWc-{height:var(--spacing-sm,.75rem)}.ContextModal-module_portraitContentlayout__kqUJG{box-sizing:content-box;display:block;padding:var(--spacing-md,1.5rem)}@media (min-width:768px){.ContextModal-module_portraitContentlayout__kqUJG{column-gap:var(--spacing-xl,3rem);display:grid;grid-auto-columns:1fr;grid-auto-flow:column;max-width:800px;padding:var(--spacing-md,1.5rem) var(--spacing-lg,2.25rem)}}.ContextModal-module_landscapeContentlayout__IFqQN{display:flex;flex-direction:column;padding:var(--spacing-md,1.5rem)}@media (min-width:768px){.ContextModal-module_landscapeContentlayout__IFqQN{padding:var(--spacing-md,1.5rem) var(--spacing-lg,2.25rem)}}.ContextModal-module_landscapeContentlayout__IFqQN .ContextModal-module_image__aEDvK{align-items:center;display:flex;flex-direction:column;justify-content:center}.ContextModal-module_landscapeContentlayout__IFqQN .ContextModal-module_content__-KrFF{padding-left:0}@media (min-width:768px){.ContextModal-module_landscapeContentlayout__IFqQN .ContextModal-module_content__-KrFF{max-width:100%}}";
+var styles = {
+  "defaultModalWidth": "ContextModal-module_defaultModalWidth__bgf7L",
+  "backdropLayer": "ContextModal-module_backdropLayer__wuj3B",
+  "scrollLayer": "ContextModal-module_scrollLayer__JANXA",
+  "modalLayer": "ContextModal-module_modalLayer__Cx6aX",
+  "modal": "ContextModal-module_modal__wriV7",
+  "animatingEnter": "ContextModal-module_animatingEnter__53BlF",
+  "fade-0-to-0-5": "ContextModal-module_fade-0-to-0-5__vZx9M",
+  "custom-1": "ContextModal-module_custom-1__be8sO",
+  "animatingLeave": "ContextModal-module_animatingLeave__-JR11",
+  "fade-0-5-to-0": "ContextModal-module_fade-0-5-to-0__R4eO-",
+  "custom-3": "ContextModal-module_custom-3__klp3m",
+  "unscrollable": "ContextModal-module_unscrollable__kF7MR",
+  "pseudoScrollbar": "ContextModal-module_pseudoScrollbar__6RfHj",
+  "hide": "ContextModal-module_hide__Sdnsg",
+  "custom-5": "ContextModal-module_custom-5__deZpl",
+  "custom-7": "ContextModal-module_custom-7__rPmP4",
+  "header": "ContextModal-module_header__V4IRF",
+  "padded": "ContextModal-module_padded__osmk1",
+  "footerWithSecondaryAction": "ContextModal-module_footerWithSecondaryAction__-5sq8",
+  "footer": "ContextModal-module_footer__JIwF5",
+  "emptyFooter": "ContextModal-module_emptyFooter__UHWc-",
+  "portraitContentlayout": "ContextModal-module_portraitContentlayout__kqUJG",
+  "landscapeContentlayout": "ContextModal-module_landscapeContentlayout__IFqQN",
+  "image": "ContextModal-module_image__aEDvK",
+  "content": "ContextModal-module_content__-KrFF"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Modal/GenericModal/GenericModal.mjs

@@ -0,0 +1,147 @@
+import React, { useId, useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Transition } from '@headlessui/react';
+import FocusLock from 'react-focus-lock';
+import { warn } from '../util/console.mjs';
+import { ModalContext } from './context/ModalContext.mjs';
+import styles from './GenericModal.module.scss.mjs';
+const GenericModal = /*#__PURE__*/function () {
+  const GenericModal = function (_a) {
+    var propsId = _a.id,
+      children = _a.children,
+      _b = _a.isOpen,
+      isOpen = _b === void 0 ? true : _b,
+      focusLockDisabled = _a.focusLockDisabled,
+      onEscapeKeyup = _a.onEscapeKeyup,
+      onOutsideModalClick = _a.onOutsideModalClick,
+      onAfterEnter = _a.onAfterEnter,
+      propsOnAfterLeave = _a.onAfterLeave;
+    var reactId = useId();
+    var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
+    var labelledByID = useId();
+    var describedByID = useId();
+    var _c = useState(null),
+      scrollLayer = _c[0],
+      setScrollLayer = _c[1];
+    var _d = useState(null),
+      modalLayer = _d[0],
+      setModalLayer = _d[1];
+    var scrollModalToTop = function () {
+      // If we have a really long modal, the autofocus could land on an element down below
+      // causing the modal to scroll down and skipping over the content near the modal's top.
+      // Ensure that when the modal opens, we are at the top of its content.
+      requestAnimationFrame(function () {
+        if (!scrollLayer) return;
+        scrollLayer.scrollTop = 0;
+      });
+    };
+    var outsideModalClickHandler = function (event) {
+      if (event.target === scrollLayer || event.target === modalLayer) {
+        onOutsideModalClick === null || onOutsideModalClick === void 0 ? void 0 : onOutsideModalClick(event);
+      }
+    };
+    var focusOnAccessibleLabel = function () {
+      // Check if focus already exists within the modal
+      if (modalLayer === null || modalLayer === void 0 ? void 0 : modalLayer.contains(document.activeElement)) {
+        return;
+      }
+      var labelElement = document.getElementById(labelledByID);
+      labelElement === null || labelElement === void 0 ? void 0 : labelElement.focus();
+    };
+    var a11yWarn = function () {
+      // Ensure that consumers have provided an element that labels the modal
+      // to meet ARIA accessibility guidelines.
+      if (!document.getElementById(labelledByID)) {
+        warn("When using the Modal component, you must provide a label for the modal.\n        Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.");
+      }
+    };
+    var preventBodyScroll = function () {
+      var _a;
+      var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;
+      var scrollStyles = [styles.unscrollable];
+      if (hasScrollbar) {
+        scrollStyles.push(styles.pseudoScrollbar);
+      }
+      (_a = document.documentElement.classList).add.apply(_a, scrollStyles);
+    };
+    var onAfterEnterHandler = function () {
+      scrollModalToTop();
+      if (modalLayer) {
+        onAfterEnter === null || onAfterEnter === void 0 ? void 0 : onAfterEnter();
+        focusOnAccessibleLabel();
+        a11yWarn();
+      }
+    };
+    var onBeforeEnterHandler = function () {
+      preventBodyScroll();
+      if (onEscapeKeyup) {
+        document.addEventListener("keyup", function (event) {
+          if (event.key === "Escape") {
+            onEscapeKeyup === null || onEscapeKeyup === void 0 ? void 0 : onEscapeKeyup(event);
+          }
+        });
+      }
+    };
+    var cleanUpAfterClose = function () {
+      document.documentElement.classList.remove(styles.unscrollable, styles.pseudoScrollbar);
+      if (onEscapeKeyup) {
+        document.removeEventListener("keyup", onEscapeKeyup);
+      }
+    };
+    /* Ensure sure add-on styles (e.g. unscrollable) and key event is cleaned up when the modal is unmounted*/
+    useEffect(function () {
+      return function () {
+        return cleanUpAfterClose();
+      };
+    }, []);
+    var onAfterLeaveHandler = function () {
+      cleanUpAfterClose();
+      propsOnAfterLeave === null || propsOnAfterLeave === void 0 ? void 0 : propsOnAfterLeave();
+    };
+    return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
+      appear: true,
+      show: isOpen,
+      enter: styles.animatingEnter,
+      leave: styles.animatingLeave,
+      beforeEnter: onBeforeEnterHandler,
+      afterEnter: onAfterEnterHandler,
+      afterLeave: onAfterLeaveHandler,
+      "data-generic-modal-transition-wrapper": true,
+      onClick: function (e) {
+        return e.stopPropagation();
+      }
+    }, /*#__PURE__*/React.createElement(FocusLock, {
+      disabled: focusLockDisabled,
+      returnFocus: true,
+      // Disabling false positive
+      // eslint-disable-next-line jsx-a11y/no-autofocus
+      autoFocus: false
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.backdropLayer
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles.scrollLayer,
+      ref: function (scrollLayerRef) {
+        setScrollLayer(scrollLayerRef);
+      },
+      onClick: outsideModalClickHandler,
+      "data-testid": "".concat(id, "-scrollLayer")
+    }, /*#__PURE__*/React.createElement(ModalContext.Provider, {
+      value: {
+        labelledByID: labelledByID,
+        describedByID: describedByID
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      role: "dialog",
+      className: styles.modalLayer,
+      "aria-labelledby": labelledByID,
+      "aria-describedby": describedByID,
+      ref: function (modalLayerRef) {
+        return setModalLayer(modalLayerRef);
+      },
+      "data-testid": id
+    }, children))))), document.body);
+  };
+  GenericModal.displayName = "GenericModal";
+  return GenericModal;
+}();
+export { GenericModal };

package/dist/esm/Modal/GenericModal/GenericModal.module.scss.mjs

@@ -0,0 +1,19 @@
+import { styleInject } from '../../__build-tools/styleInject.mjs';
+var css_248z = ".GenericModal-module_defaultModalWidth__kG7lU{max-width:600px;min-width:300px}.GenericModal-module_backdropLayer__RNQ-U{background-color:#000;bottom:0;left:0;opacity:50%;position:fixed;right:0;top:0;z-index:1040}.GenericModal-module_backdropLayer__RNQ-U[dir=rtl],[dir=rtl] .GenericModal-module_backdropLayer__RNQ-U{left:0;right:0}.GenericModal-module_scrollLayer__A5VdY{align-items:center;bottom:0;display:flex;left:0;overflow-y:auto;position:fixed;right:0;top:0;z-index:1050}.GenericModal-module_scrollLayer__A5VdY[dir=rtl],[dir=rtl] .GenericModal-module_scrollLayer__A5VdY{left:0;right:0}.GenericModal-module_modalLayer__WfD1U{margin:auto;padding:1.5rem 0;width:100%}.GenericModal-module_animatingEnter__P3wuk{transition-duration:var(--animation-duration-fast,.3s)}.GenericModal-module_animatingEnter__P3wuk .GenericModal-module_backdropLayer__RNQ-U{animation-duration:201ms;animation-fill-mode:forwards;animation-name:GenericModal-module_fade-0-to-0-5__-4t3h}@keyframes GenericModal-module_fade-0-to-0-5__-4t3h{0%{opacity:0}to{opacity:.5}}.GenericModal-module_animatingEnter__P3wuk [data-modal]{animation-duration:var(--animation-duration-fast,.3s);animation-fill-mode:forwards;animation-name:GenericModal-module_custom-1__G0JT4;animation-timing-function:var(--animation-easing-function-bounce-in,cubic-bezier(.485,.155,.24,1.245))}@keyframes GenericModal-module_custom-1__G0JT4{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.GenericModal-module_animatingLeave__rNkKX{transition-duration:var(--animation-duration-rapid,.2s)}.GenericModal-module_animatingLeave__rNkKX .GenericModal-module_backdropLayer__RNQ-U{animation-duration:var(--animation-duration-rapid,.2s);animation-fill-mode:forwards;animation-name:GenericModal-module_fade-0-5-to-0__JkaSn}@keyframes GenericModal-module_fade-0-5-to-0__JkaSn{0%{opacity:.5}to{opacity:0}}.GenericModal-module_animatingLeave__rNkKX [data-modal]{animation-duration:var(--animation-duration-rapid,.2s);animation-fill-mode:forwards;animation-name:GenericModal-module_custom-3__oWflS;animation-timing-function:var(--animation-easing-function-bounce-out,cubic-bezier(.485,.155,.515,.845))}@keyframes GenericModal-module_custom-3__oWflS{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}.GenericModal-module_unscrollable__HjRaW{overflow:hidden!important}.GenericModal-module_pseudoScrollbar__BhRqh{padding-right:15px!important}.GenericModal-module_hide__SK9PI{opacity:0;pointer-events:none}";
+var styles = {
+  "defaultModalWidth": "GenericModal-module_defaultModalWidth__kG7lU",
+  "backdropLayer": "GenericModal-module_backdropLayer__RNQ-U",
+  "scrollLayer": "GenericModal-module_scrollLayer__A5VdY",
+  "modalLayer": "GenericModal-module_modalLayer__WfD1U",
+  "animatingEnter": "GenericModal-module_animatingEnter__P3wuk",
+  "fade-0-to-0-5": "GenericModal-module_fade-0-to-0-5__-4t3h",
+  "custom-1": "GenericModal-module_custom-1__G0JT4",
+  "animatingLeave": "GenericModal-module_animatingLeave__rNkKX",
+  "fade-0-5-to-0": "GenericModal-module_fade-0-5-to-0__JkaSn",
+  "custom-3": "GenericModal-module_custom-3__oWflS",
+  "unscrollable": "GenericModal-module_unscrollable__HjRaW",
+  "pseudoScrollbar": "GenericModal-module_pseudoScrollbar__BhRqh",
+  "hide": "GenericModal-module_hide__SK9PI"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Modal/GenericModal/context/ModalContext.mjs

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+var ModalContext = /*#__PURE__*/createContext({
+  labelledByID: "modal-labelledby",
+  describedByID: "modal-describedby"
+});
+export { ModalContext };