@openedx/paragon 23.0.0-alpha.3 → 23.0.0-alpha.5

package/dist/Modal/ModalDialogHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDialogHeader.js","names":["React","PropTypes","classNames","ModalDialogHeader","_ref","as","children","props","_objectWithoutProperties","_excluded","createElement","_objectSpread","className","propTypes","elementType","node","isRequired","string","defaultProps","undefined"],"sources":["../../src/Modal/ModalDialogHeader.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nfunction ModalDialogHeader({\n  as,\n  children,\n  ...props\n}) {\n  return React.createElement(\n    as,\n    {\n      ...props,\n      className: classNames('pgn__modal-header', props.className),\n    },\n    children,\n  );\n}\n\nModalDialogHeader.propTypes = {\n  /** Specifies the base element */\n  as: PropTypes.elementType,\n  /** Specifies the contents of the header */\n  children: PropTypes.node.isRequired,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n};\n\nModalDialogHeader.defaultProps = {\n  as: 'div',\n  className: undefined,\n};\n\nexport default ModalDialogHeader;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,iBAAiBA,CAAAC,IAAA,EAIvB;EAAA,IAHDC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACLC,KAAK,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAER,oBAAOT,KAAK,CAACU,aAAa,CACxBL,EAAE,EAAAM,aAAA,CAAAA,aAAA,KAEGJ,KAAK;IACRK,SAAS,EAAEV,UAAU,CAAC,mBAAmB,EAAEK,KAAK,CAACK,SAAS;EAAC,IAE7DN,QACF,CAAC;AACH;AAEAH,iBAAiB,CAACU,SAAS,GAAG;EAC5B;EACAR,EAAE,EAAEJ,SAAS,CAACa,WAAW;EACzB;EACAR,QAAQ,EAAEL,SAAS,CAACc,IAAI,CAACC,UAAU;EACnC;EACAJ,SAAS,EAAEX,SAAS,CAACgB;AACvB,CAAC;AAEDd,iBAAiB,CAACe,YAAY,GAAG;EAC/Bb,EAAE,EAAE,KAAK;EACTO,SAAS,EAAEO;AACb,CAAC;AAED,eAAehB,iBAAiB","ignoreList":[]}
+{"version":3,"file":"ModalDialogHeader.js","names":["React","PropTypes","classNames","ModalDialogHeader","forwardRef","_ref","ref","_ref$as","as","children","props","_objectWithoutProperties","_excluded","createElement","_objectSpread","className","propTypes","elementType","node","isRequired","string"],"sources":["../../src/Modal/ModalDialogHeader.tsx"],"sourcesContent":["/* eslint-disable react/require-default-props */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport type { ComponentWithAsProp } from '../utils/types/bootstrap';\n\nexport interface Props {\n  as?: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\ntype HeaderType = ComponentWithAsProp<'div', Props>;\n\nconst ModalDialogHeader: HeaderType = React.forwardRef<HTMLDivElement, Props>(({\n  as = 'div',\n  children,\n  ...props\n}, ref) => (\n  React.createElement(\n    as,\n    {\n      ...props,\n      ref,\n      className: classNames('pgn__modal-header', props.className),\n    },\n    children,\n  )\n));\n\nModalDialogHeader.propTypes = {\n  /** Specifies the base element */\n  as: PropTypes.elementType,\n  /** Specifies the contents of the header */\n  children: PropTypes.node.isRequired,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n};\n\nexport default ModalDialogHeader;\n"],"mappings":";;;;;;;;;AAAA;AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAWnC,IAAMC,iBAA6B,gBAAGH,KAAK,CAACI,UAAU,CAAwB,UAAAC,IAAA,EAI3EC,GAAG;EAAA,IAAAC,OAAA,GAAAF,IAAA,CAHJG,EAAE;IAAFA,EAAE,GAAAD,OAAA,cAAG,KAAK,GAAAA,OAAA;IACVE,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACLC,KAAK,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA;EAAA,oBAERZ,KAAK,CAACa,aAAa,CACjBL,EAAE,EAAAM,aAAA,CAAAA,aAAA,KAEGJ,KAAK;IACRJ,GAAG,EAAHA,GAAG;IACHS,SAAS,EAAEb,UAAU,CAAC,mBAAmB,EAAEQ,KAAK,CAACK,SAAS;EAAC,IAE7DN,QACF,CAAC;AAAA,CACF,CAAC;AAEFN,iBAAiB,CAACa,SAAS,GAAG;EAC5B;EACAR,EAAE,EAAEP,SAAS,CAACgB,WAAW;EACzB;EACAR,QAAQ,EAAER,SAAS,CAACiB,IAAI,CAACC,UAAU;EACnC;EACAJ,SAAS,EAAEd,SAAS,CAACmB;AACvB,CAAC;AAED,eAAejB,iBAAiB","ignoreList":[]}

package/dist/Modal/ModalLayer.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+declare function ModalBackdrop({ onClick }: {
+    onClick?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace ModalBackdrop {
+    var propTypes: {
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+declare function ModalContentContainer({ children }: {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace ModalContentContainer {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+}
+interface Props {
+    /** Specifies the contents of the modal */
+    children: React.ReactNode;
+    /** A callback function for when the modal is dismissed */
+    onClose: () => void;
+    /** Is the modal dialog open or closed */
+    isOpen: boolean;
+    /** Prevent clicking on the backdrop or pressing Esc to close the modal */
+    isBlocking?: boolean;
+    /** Specifies the z-index of the modal */
+    zIndex?: number;
+}
+/**
+ * The ModalLayer should be used for any component that wishes to engage the user
+ * in a "mode" where a layer on top of the application is interactive while the
+ * rest of the application is made non-interactive. The assumption made by this
+ * component is that if a modal object is visible then it is "enabled"
+ */
+declare function ModalLayer({ children, onClose, isOpen, isBlocking, zIndex, }: Props): import("react/jsx-runtime").JSX.Element | null;
+declare namespace ModalLayer {
+    var propTypes: {
+        /** Specifies the contents of the modal */
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /** A callback function for when the modal is dismissed */
+        onClose: PropTypes.Validator<(...args: any[]) => any>;
+        /** Is the modal dialog open or closed */
+        isOpen: PropTypes.Validator<boolean>;
+        /** Prevent clicking on the backdrop or pressing Esc to close the modal */
+        isBlocking: PropTypes.Requireable<boolean>;
+        /** Specifies the z-index of the modal */
+        zIndex: PropTypes.Requireable<number>;
+    };
+}
+export { ModalBackdrop, ModalContentContainer };
+export default ModalLayer;

package/dist/Modal/ModalLayer.js

@@ -22,13 +22,11 @@ function ModalBackdrop(_ref) {
 ModalBackdrop.propTypes = {
   onClick: PropTypes.func
 };
-ModalBackdrop.defaultProps = {
-  onClick: undefined
-};
 
 // istanbul ignore next
 function ModalContentContainer(_ref2) {
-  var children = _ref2.children;
+  var _ref2$children = _ref2.children,
+    children = _ref2$children === void 0 ? null : _ref2$children;
   return /*#__PURE__*/React.createElement("div", {
     className: "pgn__modal-content-container"
   }, children);
@@ -36,10 +34,6 @@ function ModalContentContainer(_ref2) {
 ModalContentContainer.propTypes = {
   children: PropTypes.node
 };
-ModalContentContainer.defaultProps = {
-  children: null
-};
-
 /**
  * The ModalLayer should be used for any component that wishes to engage the user
  * in a "mode" where a layer on top of the application is interactive while the
@@ -50,7 +44,8 @@ function ModalLayer(_ref3) {
   var children = _ref3.children,
     onClose = _ref3.onClose,
     isOpen = _ref3.isOpen,
-    isBlocking = _ref3.isBlocking,
+    _ref3$isBlocking = _ref3.isBlocking,
+    isBlocking = _ref3$isBlocking === void 0 ? false : _ref3$isBlocking,
     zIndex = _ref3.zIndex;
   useEffect(function () {
     if (isOpen) {
@@ -65,7 +60,7 @@ function ModalLayer(_ref3) {
   if (!isOpen) {
     return null;
   }
-  var handleClose = isBlocking ? null : onClose;
+  var handleClose = isBlocking ? undefined : onClose;
   return /*#__PURE__*/React.createElement(ModalContextProvider, {
     onClose: onClose,
     isOpen: isOpen,
@@ -93,10 +88,6 @@ ModalLayer.propTypes = {
   /** Specifies the z-index of the modal */
   zIndex: PropTypes.number
 };
-ModalLayer.defaultProps = {
-  isBlocking: false,
-  zIndex: undefined
-};
 export { ModalBackdrop, ModalContentContainer };
 export default ModalLayer;
 //# sourceMappingURL=ModalLayer.js.map

package/dist/Modal/ModalLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalLayer.js","names":["React","useEffect","classNames","PropTypes","FocusOn","Portal","ModalContextProvider","ModalBackdrop","_ref","onClick","createElement","className","onKeyDown","propTypes","func","defaultProps","undefined","ModalContentContainer","_ref2","children","node","ModalLayer","_ref3","onClose","isOpen","isBlocking","zIndex","document","body","classList","add","remove","handleClose","allowPinchZoom","scrollLock","enabled","onEscapeKey","onClickOutside","concat","isRequired","bool","number"],"sources":["../../src/Modal/ModalLayer.jsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { FocusOn } from 'react-focus-on';\nimport Portal from './Portal';\nimport { ModalContextProvider } from './ModalContext';\n\n// istanbul ignore next\nfunction ModalBackdrop({ onClick }) {\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      className=\"pgn__modal-backdrop\"\n      onClick={onClick}\n      onKeyDown={onClick}\n      data-testid=\"modal-backdrop\"\n    />\n  );\n}\n\nModalBackdrop.propTypes = {\n  onClick: PropTypes.func,\n};\n\nModalBackdrop.defaultProps = {\n  onClick: undefined,\n};\n\n// istanbul ignore next\nfunction ModalContentContainer({ children }) {\n  return <div className=\"pgn__modal-content-container\">{children}</div>;\n}\n\nModalContentContainer.propTypes = {\n  children: PropTypes.node,\n};\n\nModalContentContainer.defaultProps = {\n  children: null,\n};\n\n/**\n * The ModalLayer should be used for any component that wishes to engage the user\n * in a \"mode\" where a layer on top of the application is interactive while the\n * rest of the application is made non-interactive. The assumption made by this\n * component is that if a modal object is visible then it is \"enabled\"\n */\nfunction ModalLayer({\n  children, onClose, isOpen, isBlocking, zIndex,\n}) {\n  useEffect(() => {\n    if (isOpen) {\n      document.body.classList.add('pgn__hidden-scroll-padding-right');\n    } else {\n      document.body.classList.remove('pgn__hidden-scroll-padding-right');\n    }\n    return () => {\n      document.body.classList.remove('pgn__hidden-scroll-padding-right');\n    };\n  }, [isOpen]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  const handleClose = isBlocking ? null : onClose;\n\n  return (\n    <ModalContextProvider onClose={onClose} isOpen={isOpen} isBlocking={isBlocking}>\n      <Portal>\n        <FocusOn\n          allowPinchZoom\n          scrollLock\n          enabled={isOpen}\n          onEscapeKey={handleClose}\n          onClickOutside={handleClose}\n          className={classNames(\n            'pgn__modal-layer',\n            zIndex ? `zindex-${zIndex}` : '',\n          )}\n        >\n          <ModalContentContainer>\n            <ModalBackdrop onClick={handleClose} />\n            {children}\n          </ModalContentContainer>\n        </FocusOn>\n      </Portal>\n    </ModalContextProvider>\n  );\n}\n\nModalLayer.propTypes = {\n  /** Specifies the contents of the modal */\n  children: PropTypes.node.isRequired,\n  /** A callback function for when the modal is dismissed */\n  onClose: PropTypes.func.isRequired,\n  /** Is the modal dialog open or closed */\n  isOpen: PropTypes.bool.isRequired,\n  /** Prevent clicking on the backdrop or pressing Esc to close the modal */\n  isBlocking: PropTypes.bool,\n  /** Specifies the z-index of the modal */\n  zIndex: PropTypes.number,\n};\n\nModalLayer.defaultProps = {\n  isBlocking: false,\n  zIndex: undefined,\n};\n\nexport { ModalBackdrop, ModalContentContainer };\nexport default ModalLayer;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ModalLayer.js","names":["React","useEffect","classNames","PropTypes","FocusOn","Portal","ModalContextProvider","ModalBackdrop","_ref","onClick","createElement","className","onKeyDown","propTypes","func","ModalContentContainer","_ref2","_ref2$children","children","node","ModalLayer","_ref3","onClose","isOpen","_ref3$isBlocking","isBlocking","zIndex","document","body","classList","add","remove","handleClose","undefined","allowPinchZoom","scrollLock","enabled","onEscapeKey","onClickOutside","concat","isRequired","bool","number"],"sources":["../../src/Modal/ModalLayer.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { FocusOn } from 'react-focus-on';\nimport Portal from './Portal';\nimport { ModalContextProvider } from './ModalContext';\n\n// istanbul ignore next\nfunction ModalBackdrop({ onClick }: { onClick?: () => void }) {\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      className=\"pgn__modal-backdrop\"\n      onClick={onClick}\n      onKeyDown={onClick}\n      data-testid=\"modal-backdrop\"\n    />\n  );\n}\n\nModalBackdrop.propTypes = {\n  onClick: PropTypes.func,\n};\n\n// istanbul ignore next\nfunction ModalContentContainer({ children = null }: { children?: React.ReactNode }) {\n  return <div className=\"pgn__modal-content-container\">{children}</div>;\n}\n\nModalContentContainer.propTypes = {\n  children: PropTypes.node,\n};\n\ninterface Props {\n  /** Specifies the contents of the modal */\n  children: React.ReactNode;\n  /** A callback function for when the modal is dismissed */\n  onClose: () => void;\n  /** Is the modal dialog open or closed */\n  isOpen: boolean;\n  /** Prevent clicking on the backdrop or pressing Esc to close the modal */\n  isBlocking?: boolean;\n  /** Specifies the z-index of the modal */\n  zIndex?: number;\n}\n\n/**\n * The ModalLayer should be used for any component that wishes to engage the user\n * in a \"mode\" where a layer on top of the application is interactive while the\n * rest of the application is made non-interactive. The assumption made by this\n * component is that if a modal object is visible then it is \"enabled\"\n */\nfunction ModalLayer({\n  children, onClose, isOpen, isBlocking = false, zIndex,\n}: Props) {\n  useEffect(() => {\n    if (isOpen) {\n      document.body.classList.add('pgn__hidden-scroll-padding-right');\n    } else {\n      document.body.classList.remove('pgn__hidden-scroll-padding-right');\n    }\n    return () => {\n      document.body.classList.remove('pgn__hidden-scroll-padding-right');\n    };\n  }, [isOpen]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  const handleClose = isBlocking ? undefined : onClose;\n\n  return (\n    <ModalContextProvider onClose={onClose} isOpen={isOpen} isBlocking={isBlocking}>\n      <Portal>\n        <FocusOn\n          allowPinchZoom\n          scrollLock\n          enabled={isOpen}\n          onEscapeKey={handleClose}\n          onClickOutside={handleClose}\n          className={classNames(\n            'pgn__modal-layer',\n            zIndex ? `zindex-${zIndex}` : '',\n          )}\n        >\n          <ModalContentContainer>\n            <ModalBackdrop onClick={handleClose} />\n            {children}\n          </ModalContentContainer>\n        </FocusOn>\n      </Portal>\n    </ModalContextProvider>\n  );\n}\n\nModalLayer.propTypes = {\n  /** Specifies the contents of the modal */\n  children: PropTypes.node.isRequired,\n  /** A callback function for when the modal is dismissed */\n  onClose: PropTypes.func.isRequired,\n  /** Is the modal dialog open or closed */\n  isOpen: PropTypes.bool.isRequired,\n  /** Prevent clicking on the backdrop or pressing Esc to close the modal */\n  isBlocking: PropTypes.bool,\n  /** Specifies the z-index of the modal */\n  zIndex: PropTypes.number,\n};\n\nexport { ModalBackdrop, ModalContentContainer };\nexport default ModalLayer;\n"],"mappings":"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","ignoreList":[]}

package/dist/Modal/Portal.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    children: React.ReactNode;
+}
+declare class Portal extends React.Component<Props> {
+    private rootName;
+    private rootElement;
+    constructor(props: Props);
+    render(): React.ReactPortal | null;
+}
+export default Portal;

package/dist/Modal/Portal.js

@@ -2,8 +2,6 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -11,9 +9,11 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
 var Portal = /*#__PURE__*/function (_React$Component) {
   _inherits(Portal, _React$Component);
   var _super = _createSuper(Portal);
@@ -21,6 +21,8 @@ var Portal = /*#__PURE__*/function (_React$Component) {
     var _this;
     _classCallCheck(this, Portal);
     _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "rootName", void 0);
+    _defineProperty(_assertThisInitialized(_this), "rootElement", void 0);
     _this.rootName = 'paragon-portal-root';
     // istanbul ignore if
     if (typeof document === 'undefined') {
@@ -47,8 +49,5 @@ var Portal = /*#__PURE__*/function (_React$Component) {
   }]);
   return Portal;
 }(React.Component);
-Portal.propTypes = {
-  children: PropTypes.node.isRequired
-};
 export default Portal;
 //# sourceMappingURL=Portal.js.map

package/dist/Modal/Portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.js","names":["React","ReactDOM","PropTypes","Portal","_React$Component","_inherits","_super","_createSuper","props","_this","_classCallCheck","call","rootName","document","rootElement","getElementById","createElement","setAttribute","body","appendChild","_createClass","key","value","render","createPortal","children","Component","propTypes","node","isRequired"],"sources":["../../src/Modal/Portal.jsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\n\nclass Portal extends React.Component {\n  constructor(props) {\n    super(props);\n    this.rootName = 'paragon-portal-root';\n    // istanbul ignore if\n    if (typeof document === 'undefined') {\n      this.rootElement = null;\n    } else if (document.getElementById(this.rootName)) {\n      this.rootElement = document.getElementById(this.rootName);\n    } else {\n      const rootElement = document.createElement('div');\n      rootElement.setAttribute('id', this.rootName);\n      this.rootElement = document.body.appendChild(rootElement);\n    }\n  }\n\n  render() {\n    // istanbul ignore else\n    if (this.rootElement) {\n      return ReactDOM.createPortal(\n        this.props.children,\n        this.rootElement,\n      );\n    }\n    // istanbul ignore next\n    return null;\n  }\n}\n\nPortal.propTypes = {\n  children: PropTypes.node.isRequired,\n};\n\nexport default Portal;\n"],"mappings":";;;;;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,WAAW;AAChC,OAAOC,SAAS,MAAM,YAAY;AAAC,IAE7BC,MAAM,0BAAAC,gBAAA;EAAAC,SAAA,CAAAF,MAAA,EAAAC,gBAAA;EAAA,IAAAE,MAAA,GAAAC,YAAA,CAAAJ,MAAA;EACV,SAAAA,OAAYK,KAAK,EAAE;IAAA,IAAAC,KAAA;IAAAC,eAAA,OAAAP,MAAA;IACjBM,KAAA,GAAAH,MAAA,CAAAK,IAAA,OAAMH,KAAK;IACXC,KAAA,CAAKG,QAAQ,GAAG,qBAAqB;IACrC;IACA,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;MACnCJ,KAAA,CAAKK,WAAW,GAAG,IAAI;IACzB,CAAC,MAAM,IAAID,QAAQ,CAACE,cAAc,CAACN,KAAA,CAAKG,QAAQ,CAAC,EAAE;MACjDH,KAAA,CAAKK,WAAW,GAAGD,QAAQ,CAACE,cAAc,CAACN,KAAA,CAAKG,QAAQ,CAAC;IAC3D,CAAC,MAAM;MACL,IAAME,WAAW,GAAGD,QAAQ,CAACG,aAAa,CAAC,KAAK,CAAC;MACjDF,WAAW,CAACG,YAAY,CAAC,IAAI,EAAER,KAAA,CAAKG,QAAQ,CAAC;MAC7CH,KAAA,CAAKK,WAAW,GAAGD,QAAQ,CAACK,IAAI,CAACC,WAAW,CAACL,WAAW,CAAC;IAC3D;IAAC,OAAAL,KAAA;EACH;EAACW,YAAA,CAAAjB,MAAA;IAAAkB,GAAA;IAAAC,KAAA,EAED,SAAAC,OAAA,EAAS;MACP;MACA,IAAI,IAAI,CAACT,WAAW,EAAE;QACpB,oBAAOb,QAAQ,CAACuB,YAAY,CAC1B,IAAI,CAAChB,KAAK,CAACiB,QAAQ,EACnB,IAAI,CAACX,WACP,CAAC;MACH;MACA;MACA,OAAO,IAAI;IACb;EAAC;EAAA,OAAAX,MAAA;AAAA,EA1BkBH,KAAK,CAAC0B,SAAS;AA6BpCvB,MAAM,CAACwB,SAAS,GAAG;EACjBF,QAAQ,EAAEvB,SAAS,CAAC0B,IAAI,CAACC;AAC3B,CAAC;AAED,eAAe1B,MAAM","ignoreList":[]}
+{"version":3,"file":"Portal.js","names":["React","ReactDOM","Portal","_React$Component","_inherits","_super","_createSuper","props","_this","_classCallCheck","call","_defineProperty","_assertThisInitialized","rootName","document","rootElement","getElementById","createElement","setAttribute","body","appendChild","_createClass","key","value","render","createPortal","children","Component"],"sources":["../../src/Modal/Portal.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\ninterface Props {\n  children: React.ReactNode;\n}\n\nclass Portal extends React.Component<Props> {\n  private rootName: string;\n\n  private rootElement: HTMLElement | null;\n\n  constructor(props: Props) {\n    super(props);\n    this.rootName = 'paragon-portal-root';\n    // istanbul ignore if\n    if (typeof document === 'undefined') {\n      this.rootElement = null;\n    } else if (document.getElementById(this.rootName)) {\n      this.rootElement = document.getElementById(this.rootName);\n    } else {\n      const rootElement = document.createElement('div');\n      rootElement.setAttribute('id', this.rootName);\n      this.rootElement = document.body.appendChild(rootElement);\n    }\n  }\n\n  render() {\n    // istanbul ignore else\n    if (this.rootElement) {\n      return ReactDOM.createPortal(\n        this.props.children,\n        this.rootElement,\n      );\n    }\n    // istanbul ignore next\n    return null;\n  }\n}\n\nexport default Portal;\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,WAAW;AAAC,IAM3BC,MAAM,0BAAAC,gBAAA;EAAAC,SAAA,CAAAF,MAAA,EAAAC,gBAAA;EAAA,IAAAE,MAAA,GAAAC,YAAA,CAAAJ,MAAA;EAKV,SAAAA,OAAYK,KAAY,EAAE;IAAA,IAAAC,KAAA;IAAAC,eAAA,OAAAP,MAAA;IACxBM,KAAA,GAAAH,MAAA,CAAAK,IAAA,OAAMH,KAAK;IAAEI,eAAA,CAAAC,sBAAA,CAAAJ,KAAA;IAAAG,eAAA,CAAAC,sBAAA,CAAAJ,KAAA;IACbA,KAAA,CAAKK,QAAQ,GAAG,qBAAqB;IACrC;IACA,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;MACnCN,KAAA,CAAKO,WAAW,GAAG,IAAI;IACzB,CAAC,MAAM,IAAID,QAAQ,CAACE,cAAc,CAACR,KAAA,CAAKK,QAAQ,CAAC,EAAE;MACjDL,KAAA,CAAKO,WAAW,GAAGD,QAAQ,CAACE,cAAc,CAACR,KAAA,CAAKK,QAAQ,CAAC;IAC3D,CAAC,MAAM;MACL,IAAME,WAAW,GAAGD,QAAQ,CAACG,aAAa,CAAC,KAAK,CAAC;MACjDF,WAAW,CAACG,YAAY,CAAC,IAAI,EAAEV,KAAA,CAAKK,QAAQ,CAAC;MAC7CL,KAAA,CAAKO,WAAW,GAAGD,QAAQ,CAACK,IAAI,CAACC,WAAW,CAACL,WAAW,CAAC;IAC3D;IAAC,OAAAP,KAAA;EACH;EAACa,YAAA,CAAAnB,MAAA;IAAAoB,GAAA;IAAAC,KAAA,EAED,SAAAC,OAAA,EAAS;MACP;MACA,IAAI,IAAI,CAACT,WAAW,EAAE;QACpB,oBAAOd,QAAQ,CAACwB,YAAY,CAC1B,IAAI,CAAClB,KAAK,CAACmB,QAAQ,EACnB,IAAI,CAACX,WACP,CAAC;MACH;MACA;MACA,OAAO,IAAI;IACb;EAAC;EAAA,OAAAb,MAAA;AAAA,EA9BkBF,KAAK,CAAC2B,SAAS;AAiCpC,eAAezB,MAAM","ignoreList":[]}

package/dist/Modal/_ModalDialog.scss

@@ -1,3 +1,23 @@
+:root {
+  --pgn-elevation-modal-content-box-shadow-sm-up:
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-x)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-y)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-blur)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-color),
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-x)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-y)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-blur)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-color);
+
+  --pgn-spacing-modal-footer-padding-base:
+    var(--pgn-spacing-modal-footer-padding-base-y)
+    var(--pgn-spacing-modal-footer-padding-base-x);
+
+  --pgn-spacing-modal-header-padding-base:
+    var(--pgn-spacing-modal-header-padding-base-y)
+    var(--pgn-spacing-modal-header-padding-base-x);
+}
+
 .pgn__modal {
   background: var(--pgn-color-modal-content-bg);
   border-radius: calc(var(--pgn-size-modal-content-border-radius) - var(--pgn-size-modal-content-border-width));
@@ -122,7 +142,7 @@
   }
 
   .pgn__modal-title {
-    font-size: var(--pgn-typography-font-size-h3);
+    font-size: var(--pgn-typography-font-size-h3-base);
     margin-inline-end: 3rem; // roughly accomodate the width of the close buttonn
     text-align: start;
   }
@@ -310,7 +330,7 @@
   }
 
   .pgn__modal-title {
-    font-size: var(--pgn-typography-font-size-h4);
+    font-size: var(--pgn-typography-font-size-h4-base);
     display: flex;
     flex-grow: 1;
     align-items: center;

package/dist/Nav/index.scss

@@ -1,5 +1,13 @@
 @import "mixins";
 
+:root {
+  --pgn-border-color-nav-tabs-link-border-hover:
+    var(--pgn-border-color-nav-tabs-link-border-hover-top)
+    var(--pgn-border-color-nav-tabs-link-border-hover-right)
+    var(--pgn-border-color-nav-tabs-link-border-hover-bottom)
+    var(--pgn-border-color-nav-tabs-link-border-hover-left);
+}
+
 // Base class
 //
 // Kickstart any navigation component with a set of style resets. Works with

package/dist/Overlay/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { type OverlayProps } from 'react-bootstrap/Overlay';
 import { type OverlayTriggerProps, type OverlayTriggerType } from 'react-bootstrap/OverlayTrigger';
 import PropTypes from 'prop-types';
-declare function Overlay(props: OverlayProps): React.JSX.Element;
+declare function Overlay(props: OverlayProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Overlay {
     var propTypes: {
         /** Specifies the content of the `Overlay`. */
@@ -72,7 +72,7 @@ declare namespace Overlay {
         transition: React.ForwardRefExoticComponent<import("react-bootstrap/Fade").FadeProps & React.RefAttributes<import("react-transition-group/Transition").default<any>>>;
     };
 }
-declare function OverlayTrigger(props: OverlayTriggerProps): React.JSX.Element;
+declare function OverlayTrigger(props: OverlayTriggerProps): import("react/jsx-runtime").JSX.Element;
 declare namespace OverlayTrigger {
     var propTypes: {
         /** Specifies the content of the `OverlayTrigger`. */

package/dist/PageBanner/index.scss

@@ -4,12 +4,12 @@
   min-height: 36px;
   display: flex;
   flex-wrap: nowrap;
-  font-size: var(--pgn-typography-font-size-small-x);
+  font-size: var(--pgn-typography-font-size-xs);
   background-color: var(--pgn-page-baner-bg, inherit);
   color: var(--pgn-page-baner-color, inherit);
 
   @include media-breakpoint-up(md) {
-    font-size: var(--pgn-typography-font-size-small-base);
+    font-size: var(--pgn-typography-font-size-sm);
   }
 }
 

package/dist/Pagination/pagination-bootstrap.scss

@@ -1,3 +1,12 @@
+:root {
+  --pgn-elevation-pagination-focus-box-shadow:
+    var(--pgn-elevation-pagination-focus-box-shadow-offset-x)
+    var(--pgn-elevation-pagination-focus-box-shadow-offset-y)
+    var(--pgn-elevation-pagination-focus-box-shadow-blur)
+    var(--pgn-elevation-pagination-focus-box-shadow-spread)
+    var(--pgn-elevation-pagination-focus-box-shadow-color);
+}
+
 .pagination {
   display: flex;
 

package/dist/Popover/index.scss

@@ -7,7 +7,7 @@
   .popover-header {
     display: flex;
     align-items: center;
-    font-size: var(--pgn-typography-font-size-h5);
+    font-size: var(--pgn-typography-font-size-h5-base);
   }
 
   .pgn__icon {

package/dist/ProductTour/Checkpoint.scss

@@ -88,7 +88,7 @@
   }
 
   #pgn__checkpoint-title {
-    font-size: var(--pgn-typography-font-size-h3);
+    font-size: var(--pgn-typography-font-size-h3-base);
     margin-inline-end: map_get($spacers, 2\.5);
     margin-bottom: 0;
   }

package/dist/ProgressBar/bootstrap-progress.scss

@@ -1,3 +1,18 @@
+:root {
+  --pgn-transition-progress-bar-animation-timing:
+    var(--pgn-transition-progress-bar-animation-timing-duration)
+    var(--pgn-transition-progress-bar-animation-timing-timing-function)
+    var(--pgn-transition-progress-bar-animation-timing-iteration-count)
+    var(--pgn-transition-progress-bar-animation-timing-delay);
+
+  --pgn-transition-progress-bar-transition:
+    var(--pgn-transition-progress-bar-transition-property)
+    var(--pgn-transition-progress-bar-transition-duration)
+    var(--pgn-transition-progress-bar-transition-timing-function)
+    var(--pgn-transition-progress-bar-transition-delay)
+    var(--pgn-transition-progress-bar-transition-behavior);
+}
+
 @if $enable-transitions {
   @keyframes progress-bar-stripes {
     from { background-position: var(--pgn-size-progress-bar-height-base) 0; }
@@ -10,7 +25,7 @@
   height: var(--pgn-size-progress-bar-height-base);
   overflow: hidden;
   line-height: 0;
-  background-color: var(--pgn-color-progress-bar-bg);
+  background-color: var(--pgn-color-progress-bg);
   box-shadow: var(--pgn-elevation-progress-bar-box-shadow);
 
   @include font-size(var(--pgn-typography-progress-bar-font-size));
@@ -22,12 +37,12 @@
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
-  color: var(--pgn-color-progress-bar-bar-base);
+  color: var(--pgn-color-progress-bar-base);
   text-align: center;
   white-space: nowrap;
-  background-color: var(--pgn-color-progress-bar-bar-bg-base);
+  background-color: var(--pgn-color-progress-bar-bg-base);
 
-  @include transition(var(--pgn-transition-progress-bar-bar-transition));
+  @include transition(var(--pgn-transition-progress-bar-transition));
 }
 
 .progress-bar-striped {
@@ -38,7 +53,7 @@
 
 @if $enable-transitions {
   .progress-bar-animated {
-    animation: var(--pgn-transition-progress-bar-bar-animation-timing) progress-bar-stripes;
+    animation: var(--pgn-transition-progress-bar-animation-timing) progress-bar-stripes;
 
     @if $enable-prefers-reduced-motion-media-query {
       @media (prefers-reduced-motion: reduce) {

package/dist/ProgressBar/index.scss

@@ -6,7 +6,7 @@
 }
 
 .progress-bar {
-  background-color: var(--pgn-color-progress-bar-bar-bg-base);
+  background-color: var(--pgn-color-progress-bar-bg-base);
 }
 
 .pgn__progress-annotated {
@@ -22,7 +22,7 @@
     border: none;
 
     .progress-bar {
-      background-color: var(--pgn-color-progress-bar-bar-bg-annotated);
+      background-color: var(--pgn-color-progress-bar-bg-annotated);
       overflow: visible;
       position: relative;
     }
@@ -87,6 +87,6 @@
   .pgn__progress-hint {
     box-sizing: border-box;
     padding: 0 var(--pgn-spacing-progress-bar-hint-annotation-gap);
-    font-size: var(--pgn-typography-font-size-small-base);
+    font-size: var(--pgn-typography-font-size-sm);
   }
 }

package/dist/Stepper/index.scss

@@ -56,7 +56,7 @@
     }
 
     .pgn__stepper-header-step-description {
-      font-size: var(--pgn-typography-font-size-small-x);
+      font-size: var(--pgn-typography-font-size-xs);
     }
 
     &.pgn__stepper-header-step-active ~ .pgn__stepper-header-step {

package/dist/Sticky/index.scss

@@ -1,3 +1,15 @@
+:root {
+  --pgn-elevation-sticky-shadow-bottom:
+    var(--pgn-elevation-sticky-shadow-bottom-1-offset-x)
+    var(--pgn-elevation-sticky-shadow-bottom-1-offset-y)
+    var(--pgn-elevation-sticky-shadow-bottom-1-blur)
+    var(--pgn-elevation-sticky-shadow-bottom-1-color),
+    var(--pgn-elevation-sticky-shadow-bottom-2-offset-x)
+    var(--pgn-elevation-sticky-shadow-bottom-2-offset-y)
+    var(--pgn-elevation-sticky-shadow-bottom-2-blur)
+    var(--pgn-elevation-sticky-shadow-bottom-2-color);
+}
+
 .pgn__sticky {
   display: flex;
   width: 100%;

package/dist/Toast/index.scss

@@ -1,5 +1,17 @@
 @import "bootstrap-toast";
 
+:root {
+  --pgn-elevation-toast-box-shadow:
+    var(--pgn-elevation-toast-box-shadow-1-offset-x)
+    var(--pgn-elevation-toast-box-shadow-1-offset-y)
+    var(--pgn-elevation-toast-box-shadow-1-blur)
+    var(--pgn-elevation-toast-box-shadow-1-color),
+    var(--pgn-elevation-toast-box-shadow-2-offset-x)
+    var(--pgn-elevation-toast-box-shadow-2-offset-y)
+    var(--pgn-elevation-toast-box-shadow-2-blur)
+    var(--pgn-elevation-toast-box-shadow-2-color);
+}
+
 .toast {
   background-color: var(--pgn-color-toast-bg);
   box-shadow: var(--pgn-elevation-toast-box-shadow);
@@ -31,7 +43,7 @@
     padding: 0;
 
     p {
-      font-size: var(--pgn-typography-font-size-small-base);
+      font-size: var(--pgn-typography-font-size-sm);
       margin: 0;
       padding-right: .75rem;
     }

package/dist/Tooltip/index.scss

@@ -1,3 +1,19 @@
+:root {
+  --pgn-elevation-tooltip-box-shadow:
+    drop-shadow(
+      var(--pgn-elevation-tooltip-box-shadow-1-offset-x)
+      var(--pgn-elevation-tooltip-box-shadow-1-offset-y)
+      var(--pgn-elevation-tooltip-box-shadow-1-blur)
+      var(--pgn-elevation-tooltip-box-shadow-1-color)
+    )
+    drop-shadow(
+      var(--pgn-elevation-tooltip-box-shadow-2-offset-x)
+      var(--pgn-elevation-tooltip-box-shadow-2-offset-y)
+      var(--pgn-elevation-tooltip-box-shadow-2-blur)
+      var(--pgn-elevation-tooltip-box-shadow-2-color)
+    );
+}
+
 // Base class
 .tooltip {
   position: absolute;