@openedx/paragon 22.0.0-alpha.24 → 22.0.0

package/dist/Pagination/subcomponents/PreviousPageButton.js

@@ -0,0 +1,57 @@
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+import { PAGINATION_BUTTON_ICON_BUTTON_PREV_ALT } from '../constants';
+import Button from '../../Button';
+import IconButton from '../../IconButton';
+import Icon from '../../Icon';
+import PaginationContext from '../PaginationContext';
+export default function PreviousPageButton() {
+  var _useContext = useContext(PaginationContext),
+    invertColors = _useContext.invertColors,
+    getPageButtonVariant = _useContext.getPageButtonVariant,
+    isDefaultVariant = _useContext.isDefaultVariant,
+    isOnFirstPage = _useContext.isOnFirstPage,
+    getAriaLabelForPreviousButton = _useContext.getAriaLabelForPreviousButton,
+    handlePreviousButtonClick = _useContext.handlePreviousButtonClick,
+    getPrevButtonIcon = _useContext.getPrevButtonIcon,
+    buttonLabels = _useContext.buttonLabels,
+    previousButtonRef = _useContext.previousButtonRef;
+  var isDisabled = isOnFirstPage();
+  var icon = getPrevButtonIcon();
+  if (isDefaultVariant()) {
+    return /*#__PURE__*/React.createElement("li", {
+      className: classNames('page-item', {
+        disabled: isDisabled
+      })
+    }, /*#__PURE__*/React.createElement(Button, {
+      className: "previous page-link",
+      variant: getPageButtonVariant(),
+      "aria-label": getAriaLabelForPreviousButton(),
+      tabIndex: isDisabled ? '-1' : undefined,
+      onClick: handlePreviousButtonClick,
+      ref: previousButtonRef,
+      disabled: isDisabled,
+      iconBefore: icon
+    }, buttonLabels.previous));
+  }
+  if (!icon) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("li", {
+    className: classNames('page-item', {
+      disabled: isDisabled
+    })
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    invertColors: invertColors,
+    src: getPrevButtonIcon(),
+    iconAs: Icon,
+    className: "previous page-link",
+    "aria-label": getAriaLabelForPreviousButton(),
+    tabIndex: isDisabled ? '-1' : undefined,
+    onClick: handlePreviousButtonClick,
+    ref: previousButtonRef,
+    disabled: isDisabled,
+    alt: PAGINATION_BUTTON_ICON_BUTTON_PREV_ALT
+  }));
+}
+//# sourceMappingURL=PreviousPageButton.js.map

package/dist/Pagination/subcomponents/PreviousPageButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviousPageButton.js","names":["React","useContext","classNames","PAGINATION_BUTTON_ICON_BUTTON_PREV_ALT","Button","IconButton","Icon","PaginationContext","PreviousPageButton","_useContext","invertColors","getPageButtonVariant","isDefaultVariant","isOnFirstPage","getAriaLabelForPreviousButton","handlePreviousButtonClick","getPrevButtonIcon","buttonLabels","previousButtonRef","isDisabled","icon","createElement","className","disabled","variant","tabIndex","undefined","onClick","ref","iconBefore","previous","src","iconAs","alt"],"sources":["../../../src/Pagination/subcomponents/PreviousPageButton.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { PAGINATION_BUTTON_ICON_BUTTON_PREV_ALT } from '../constants';\nimport Button from '../../Button';\nimport IconButton from '../../IconButton';\nimport Icon from '../../Icon';\nimport PaginationContext from '../PaginationContext';\n\nexport default function PreviousPageButton() {\n  const {\n    invertColors,\n    getPageButtonVariant,\n    isDefaultVariant,\n    isOnFirstPage,\n    getAriaLabelForPreviousButton,\n    handlePreviousButtonClick,\n    getPrevButtonIcon,\n    buttonLabels,\n    previousButtonRef,\n  } = useContext(PaginationContext);\n\n  const isDisabled = isOnFirstPage();\n  const icon = getPrevButtonIcon();\n\n  if (isDefaultVariant()) {\n    return (\n      <li className={classNames('page-item', { disabled: isDisabled })}>\n        <Button\n          className=\"previous page-link\"\n          variant={getPageButtonVariant()}\n          aria-label={getAriaLabelForPreviousButton()}\n          tabIndex={isDisabled ? '-1' : undefined}\n          onClick={handlePreviousButtonClick}\n          ref={previousButtonRef}\n          disabled={isDisabled}\n          iconBefore={icon}\n        >\n          {buttonLabels.previous}\n        </Button>\n      </li>\n    );\n  }\n\n  if (!icon) {\n    return null;\n  }\n\n  return (\n    <li className={classNames('page-item', { disabled: isDisabled })}>\n      <IconButton\n        invertColors={invertColors}\n        src={getPrevButtonIcon()}\n        iconAs={Icon}\n        className=\"previous page-link\"\n        aria-label={getAriaLabelForPreviousButton()}\n        tabIndex={isDisabled ? '-1' : undefined}\n        onClick={handlePreviousButtonClick}\n        ref={previousButtonRef}\n        disabled={isDisabled}\n        alt={PAGINATION_BUTTON_ICON_BUTTON_PREV_ALT}\n      />\n    </li>\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,sCAAsC,QAAQ,cAAc;AACrE,OAAOC,MAAM,MAAM,cAAc;AACjC,OAAOC,UAAU,MAAM,kBAAkB;AACzC,OAAOC,IAAI,MAAM,YAAY;AAC7B,OAAOC,iBAAiB,MAAM,sBAAsB;AAEpD,eAAe,SAASC,kBAAkBA,CAAA,EAAG;EAC3C,IAAAC,WAAA,GAUIR,UAAU,CAACM,iBAAiB,CAAC;IAT/BG,YAAY,GAAAD,WAAA,CAAZC,YAAY;IACZC,oBAAoB,GAAAF,WAAA,CAApBE,oBAAoB;IACpBC,gBAAgB,GAAAH,WAAA,CAAhBG,gBAAgB;IAChBC,aAAa,GAAAJ,WAAA,CAAbI,aAAa;IACbC,6BAA6B,GAAAL,WAAA,CAA7BK,6BAA6B;IAC7BC,yBAAyB,GAAAN,WAAA,CAAzBM,yBAAyB;IACzBC,iBAAiB,GAAAP,WAAA,CAAjBO,iBAAiB;IACjBC,YAAY,GAAAR,WAAA,CAAZQ,YAAY;IACZC,iBAAiB,GAAAT,WAAA,CAAjBS,iBAAiB;EAGnB,IAAMC,UAAU,GAAGN,aAAa,CAAC,CAAC;EAClC,IAAMO,IAAI,GAAGJ,iBAAiB,CAAC,CAAC;EAEhC,IAAIJ,gBAAgB,CAAC,CAAC,EAAE;IACtB,oBACEZ,KAAA,CAAAqB,aAAA;MAAIC,SAAS,EAAEpB,UAAU,CAAC,WAAW,EAAE;QAAEqB,QAAQ,EAAEJ;MAAW,CAAC;IAAE,gBAC/DnB,KAAA,CAAAqB,aAAA,CAACjB,MAAM;MACLkB,SAAS,EAAC,oBAAoB;MAC9BE,OAAO,EAAEb,oBAAoB,CAAC,CAAE;MAChC,cAAYG,6BAA6B,CAAC,CAAE;MAC5CW,QAAQ,EAAEN,UAAU,GAAG,IAAI,GAAGO,SAAU;MACxCC,OAAO,EAAEZ,yBAA0B;MACnCa,GAAG,EAAEV,iBAAkB;MACvBK,QAAQ,EAAEJ,UAAW;MACrBU,UAAU,EAAET;IAAK,GAEhBH,YAAY,CAACa,QACR,CACN,CAAC;EAET;EAEA,IAAI,CAACV,IAAI,EAAE;IACT,OAAO,IAAI;EACb;EAEA,oBACEpB,KAAA,CAAAqB,aAAA;IAAIC,SAAS,EAAEpB,UAAU,CAAC,WAAW,EAAE;MAAEqB,QAAQ,EAAEJ;IAAW,CAAC;EAAE,gBAC/DnB,KAAA,CAAAqB,aAAA,CAAChB,UAAU;IACTK,YAAY,EAAEA,YAAa;IAC3BqB,GAAG,EAAEf,iBAAiB,CAAC,CAAE;IACzBgB,MAAM,EAAE1B,IAAK;IACbgB,SAAS,EAAC,oBAAoB;IAC9B,cAAYR,6BAA6B,CAAC,CAAE;IAC5CW,QAAQ,EAAEN,UAAU,GAAG,IAAI,GAAGO,SAAU;IACxCC,OAAO,EAAEZ,yBAA0B;IACnCa,GAAG,EAAEV,iBAAkB;IACvBK,QAAQ,EAAEJ,UAAW;IACrBc,GAAG,EAAE9B;EAAuC,CAC7C,CACC,CAAC;AAET"}

package/dist/Pagination/subcomponents/ScreenReaderText.js

@@ -0,0 +1,13 @@
+import React, { useContext } from 'react';
+import PaginationContext from '../PaginationContext';
+export default function PaginationScreenReaderText() {
+  var _useContext = useContext(PaginationContext),
+    getScreenReaderText = _useContext.getScreenReaderText;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sr-only",
+    "aria-live": "polite",
+    "aria-relevant": "text",
+    "aria-atomic": true
+  }, getScreenReaderText());
+}
+//# sourceMappingURL=ScreenReaderText.js.map

package/dist/Pagination/subcomponents/ScreenReaderText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenReaderText.js","names":["React","useContext","PaginationContext","PaginationScreenReaderText","_useContext","getScreenReaderText","createElement","className"],"sources":["../../../src/Pagination/subcomponents/ScreenReaderText.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PaginationContext from '../PaginationContext';\n\nexport default function PaginationScreenReaderText() {\n  const { getScreenReaderText } = useContext(PaginationContext);\n\n  return (\n    <div\n      className=\"sr-only\"\n      aria-live=\"polite\"\n      aria-relevant=\"text\"\n      aria-atomic\n    >\n      {getScreenReaderText()}\n    </div>\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,iBAAiB,MAAM,sBAAsB;AAEpD,eAAe,SAASC,0BAA0BA,CAAA,EAAG;EACnD,IAAAC,WAAA,GAAgCH,UAAU,CAACC,iBAAiB,CAAC;IAArDG,mBAAmB,GAAAD,WAAA,CAAnBC,mBAAmB;EAE3B,oBACEL,KAAA,CAAAM,aAAA;IACEC,SAAS,EAAC,SAAS;IACnB,aAAU,QAAQ;IAClB,iBAAc,MAAM;IACpB;EAAW,GAEVF,mBAAmB,CAAC,CAClB,CAAC;AAEV"}

package/dist/Pagination/subcomponents/index.js

@@ -0,0 +1,7 @@
+export { default as Ellipsis } from './Ellipsis';
+export { default as NextPageButton } from './NextPageButton';
+export { default as PageButton } from './PageButton';
+export { default as PageOfCountButton } from './PageOfCountButton';
+export { default as PaginationDropdown } from './PaginationDropdown';
+export { default as PreviousPageButton } from './PreviousPageButton';
+export { default as ScreenReaderText } from './ScreenReaderText';

package/dist/Popover/_variables.scss

@@ -0,0 +1,36 @@
+// Popovers
+
+$popover-font-size:                 $font-size-sm !default;
+$popover-bg:                        $white !default;
+$popover-max-width:                 480px !default;
+$popover-border-width:              $border-width !default;
+$popover-border-color:              rgba($black, .2) !default;
+$popover-border-radius:             $border-radius-sm !default;
+$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
+$popover-box-shadow:                drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
+  drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
+$popover-icon-margin-right:         .5rem;
+$popover-icon-height:               1rem;
+$popover-icon-width:                1rem;
+
+$popover-header-bg:                 $white !default;
+$popover-header-color:              $headings-color !default;
+$popover-header-padding-y:          .5rem !default;
+$popover-header-padding-x:          1rem !default;
+
+$popover-body-color:                $body-color !default;
+$popover-body-padding-y:            $popover-header-padding-y !default;
+$popover-body-padding-x:            $popover-header-padding-x !default;
+
+$popover-arrow-width:               1rem !default;
+$popover-arrow-height:              .5rem !default;
+$popover-arrow-color:               $popover-bg !default;
+
+$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
+
+$popover-success-bg:                $success-100 !default;
+$popover-success-icon-color:        $success-500 !default;
+$popover-warning-bg:                $warning-100 !default;
+$popover-warning-icon-color:        $warning-500 !default;
+$popover-danger-bg:                 $danger-100 !default;
+$popover-danger-icon-color:         $danger-500 !default;

package/dist/Popover/index.js

@@ -1,10 +1,11 @@
-const _excluded = ["children", "variant"];
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["children", "variant"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-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(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
@@ -13,17 +14,13 @@ import classNames from 'classnames';
 import BasePopover from 'react-bootstrap/Popover';
 import BasePopoverTitle from 'react-bootstrap/PopoverTitle';
 import BasePopoverContent from 'react-bootstrap/PopoverContent';
-const PLACEMENT_VARIANTS = ['auto', 'top', 'bottom', 'left', 'right'];
-const Popover = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      children,
-      variant
-    } = _ref,
+var PLACEMENT_VARIANTS = ['auto', 'top', 'bottom', 'left', 'right'];
+var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    variant = _ref.variant,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(BasePopover, _extends({}, props, {
-    className: classNames({
-      [`popover-${variant}`]: !!variant
-    }, props.className),
+    className: classNames(_defineProperty({}, "popover-".concat(variant), !!variant), props.className),
     ref: ref
   }), children);
 });
@@ -33,7 +30,7 @@ function PopoverTitle(props) {
 function PopoverContent(props) {
   return /*#__PURE__*/React.createElement(BasePopoverContent, props);
 }
-const commonPropTypes = {
+var commonPropTypes = {
   /** Specifies the base element */
   as: PropTypes.elementType,
   /** Overrides underlying component base CSS class name */

package/dist/Popover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","BasePopover","BasePopoverTitle","BasePopoverContent","PLACEMENT_VARIANTS","Popover","forwardRef","_ref","ref","children","variant","props","_objectWithoutProperties","_excluded","createElement","_extends","className","PopoverTitle","PopoverContent","commonPropTypes","as","elementType","bsPrefix","string","propTypes","_objectSpread","id","isRequired","placement","oneOf","title","arrowProps","shape","oneOfType","func","current","element","style","content","bool","popper","show","node","defaultProps","undefined","Title","Content"],"sources":["../../src/Popover/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport BasePopover from 'react-bootstrap/Popover';\nimport BasePopoverTitle from 'react-bootstrap/PopoverTitle';\nimport BasePopoverContent from 'react-bootstrap/PopoverContent';\n\nconst PLACEMENT_VARIANTS = [\n  'auto',\n  'top',\n  'bottom',\n  'left',\n  'right',\n];\n\nconst Popover = React.forwardRef(({\n  children,\n  variant,\n  ...props\n}, ref) => (\n  <BasePopover\n    {...props}\n    className={classNames({ [`popover-${variant}`]: !!variant }, props.className)}\n    ref={ref}\n  >\n    {children}\n  </BasePopover>\n));\n\nfunction PopoverTitle(props) {\n  return <BasePopoverTitle {...props} />;\n}\nfunction PopoverContent(props) {\n  return <BasePopoverContent {...props} />;\n}\n\nconst commonPropTypes = {\n  /** Specifies the base element */\n  as: PropTypes.elementType,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nPopoverTitle.propTypes = commonPropTypes;\nPopoverContent.propTypes = commonPropTypes;\n\nPopover.propTypes = {\n  ...BasePopover.propTypes,\n  /** An html id attribute, necessary for accessibility. */\n  id: PropTypes.string.isRequired,\n  /**\n   * Sets the direction the Popover is positioned towards.\n   *\n   * This is generally provided by the `Overlay` component positioning the popover.\n   */\n  placement: PropTypes.oneOf(PLACEMENT_VARIANTS),\n  /**\n   * When this prop is set, it creates a `Popover` with\n   * a `Popover.Title` inside passing the children directly to it.\n   */\n  title: PropTypes.string,\n  /**\n   * An `Overlay` injected set of props for positioning the popover arrow.\n   *\n   * This is generally provided by the `Overlay` component positioning the popover.\n   */\n  arrowProps: PropTypes.shape({\n    ref: PropTypes.oneOfType([\n      PropTypes.func,\n      PropTypes.shape({ current: PropTypes.element }),\n    ]),\n    style: PropTypes.shape({}),\n  }),\n  /**\n   * When this prop is set, it creates a `Popover` with\n   * a `Popover.Content` inside passing the children directly to it.\n   */\n  content: PropTypes.bool,\n  /** A `Popper.js` config object passed to the the underlying popper instance. */\n  popper: PropTypes.shape({}),\n  /** Whether the `Overlay` is shown. */\n  show: PropTypes.bool,\n  /** Specifies the content of the `Overlay` */\n  children: PropTypes.node,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n  /** The visual style of the `Overlay` */\n  variant: PropTypes.string,\n};\n\nPopover.defaultProps = {\n  ...BasePopover.defaultProps,\n  placement: 'right',\n  title: undefined,\n  arrowProps: undefined,\n  content: undefined,\n  popper: undefined,\n  show: undefined,\n  children: undefined,\n  className: undefined,\n  variant: undefined,\n};\n\nPopoverTitle.defaultProps = {\n  as: 'div',\n  bsPrefix: 'popover-header',\n};\n\nPopoverContent.defaultProps = {\n  as: 'div',\n  bsPrefix: 'popover-body',\n};\n\nPopover.Title = PopoverTitle;\nPopover.Content = PopoverContent;\n\nexport { PopoverTitle, PopoverContent };\nexport default Popover;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","BasePopover","BasePopoverTitle","BasePopoverContent","PLACEMENT_VARIANTS","Popover","forwardRef","_ref","ref","children","variant","props","_objectWithoutProperties","_excluded","createElement","_extends","className","_defineProperty","concat","PopoverTitle","PopoverContent","commonPropTypes","as","elementType","bsPrefix","string","propTypes","_objectSpread","id","isRequired","placement","oneOf","title","arrowProps","shape","oneOfType","func","current","element","style","content","bool","popper","show","node","defaultProps","undefined","Title","Content"],"sources":["../../src/Popover/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport BasePopover from 'react-bootstrap/Popover';\nimport BasePopoverTitle from 'react-bootstrap/PopoverTitle';\nimport BasePopoverContent from 'react-bootstrap/PopoverContent';\n\nconst PLACEMENT_VARIANTS = [\n  'auto',\n  'top',\n  'bottom',\n  'left',\n  'right',\n];\n\nconst Popover = React.forwardRef(({\n  children,\n  variant,\n  ...props\n}, ref) => (\n  <BasePopover\n    {...props}\n    className={classNames({ [`popover-${variant}`]: !!variant }, props.className)}\n    ref={ref}\n  >\n    {children}\n  </BasePopover>\n));\n\nfunction PopoverTitle(props) {\n  return <BasePopoverTitle {...props} />;\n}\nfunction PopoverContent(props) {\n  return <BasePopoverContent {...props} />;\n}\n\nconst commonPropTypes = {\n  /** Specifies the base element */\n  as: PropTypes.elementType,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nPopoverTitle.propTypes = commonPropTypes;\nPopoverContent.propTypes = commonPropTypes;\n\nPopover.propTypes = {\n  ...BasePopover.propTypes,\n  /** An html id attribute, necessary for accessibility. */\n  id: PropTypes.string.isRequired,\n  /**\n   * Sets the direction the Popover is positioned towards.\n   *\n   * This is generally provided by the `Overlay` component positioning the popover.\n   */\n  placement: PropTypes.oneOf(PLACEMENT_VARIANTS),\n  /**\n   * When this prop is set, it creates a `Popover` with\n   * a `Popover.Title` inside passing the children directly to it.\n   */\n  title: PropTypes.string,\n  /**\n   * An `Overlay` injected set of props for positioning the popover arrow.\n   *\n   * This is generally provided by the `Overlay` component positioning the popover.\n   */\n  arrowProps: PropTypes.shape({\n    ref: PropTypes.oneOfType([\n      PropTypes.func,\n      PropTypes.shape({ current: PropTypes.element }),\n    ]),\n    style: PropTypes.shape({}),\n  }),\n  /**\n   * When this prop is set, it creates a `Popover` with\n   * a `Popover.Content` inside passing the children directly to it.\n   */\n  content: PropTypes.bool,\n  /** A `Popper.js` config object passed to the the underlying popper instance. */\n  popper: PropTypes.shape({}),\n  /** Whether the `Overlay` is shown. */\n  show: PropTypes.bool,\n  /** Specifies the content of the `Overlay` */\n  children: PropTypes.node,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n  /** The visual style of the `Overlay` */\n  variant: PropTypes.string,\n};\n\nPopover.defaultProps = {\n  ...BasePopover.defaultProps,\n  placement: 'right',\n  title: undefined,\n  arrowProps: undefined,\n  content: undefined,\n  popper: undefined,\n  show: undefined,\n  children: undefined,\n  className: undefined,\n  variant: undefined,\n};\n\nPopoverTitle.defaultProps = {\n  as: 'div',\n  bsPrefix: 'popover-header',\n};\n\nPopoverContent.defaultProps = {\n  as: 'div',\n  bsPrefix: 'popover-body',\n};\n\nPopover.Title = PopoverTitle;\nPopover.Content = PopoverContent;\n\nexport { PopoverTitle, PopoverContent };\nexport default Popover;\n"],"mappings":"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"}

package/dist/Popover/index.scss

@@ -1,30 +1,31 @@
+@import "variables";
 @import "mixins";
-@import "popover-bootstrap";
+@import "~bootstrap/scss/popover";
 
 .popover {
-  filter: var(--pgn-elevation-popover-box-shadow);
+  filter: $popover-box-shadow;
 
   .popover-header {
     display: flex;
     align-items: center;
-    font-size: var(--pgn-typography-font-size-h5);
+    font-size: $h5-font-size;
   }
 
   .pgn__icon {
-    margin-inline-end: var(--pgn-spacing-popover-icon-margin-right);
-    height: var(--pgn-size-popover-icon-height);
-    width: var(--pgn-size-popover-icon-width);
+    margin-inline-end: $popover-icon-margin-right;
+    height: $popover-icon-height;
+    width: $popover-icon-width;
   }
 }
 
 .popover-success {
-  @include get-popover-variant(var(--pgn-color-popover-success-bg), var(--pgn-color-popover-success-icon));
+  @include get-popover-variant($popover-success-bg, $popover-success-icon-color);
 }
 
 .popover-warning {
-  @include get-popover-variant(var(--pgn-color-popover-warning-bg), var(--pgn-color-popover-warning-icon));
+  @include get-popover-variant($popover-warning-bg, $popover-warning-icon-color);
 }
 
 .popover-danger {
-  @include get-popover-variant(var(--pgn-color-popover-danger-bg), var(--pgn-color-popover-danger-icon));
+  @include get-popover-variant($popover-danger-bg, $popover-danger-icon-color);
 }

package/dist/ProductTour/Checkpoint.js

@@ -1,5 +1,11 @@
-const _excluded = ["body", "index", "placement", "target", "title", "totalCheckpoints"];
+var _excluded = ["body", "index", "placement", "target", "title", "totalCheckpoints"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useEffect, useState } from 'react';
@@ -13,26 +19,27 @@ import CheckpointBody from './CheckpointBody';
 import CheckpointBreadcrumbs from './CheckpointBreadcrumbs';
 import CheckpointTitle from './CheckpointTitle';
 import messages from './messages';
-const Checkpoint = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      body,
-      index,
-      placement,
-      target,
-      title,
-      totalCheckpoints
-    } = _ref,
+var Checkpoint = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var body = _ref.body,
+    index = _ref.index,
+    placement = _ref.placement,
+    target = _ref.target,
+    title = _ref.title,
+    totalCheckpoints = _ref.totalCheckpoints,
     props = _objectWithoutProperties(_ref, _excluded);
-  const [checkpointVisible, setCheckpointVisible] = useState(false);
-  const isMobile = useMediaQuery({
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    checkpointVisible = _useState2[0],
+    setCheckpointVisible = _useState2[1];
+  var isMobile = useMediaQuery({
     maxWidth: breakpoints.small.maxWidth
   });
-  useEffect(() => {
-    const targetElement = document.querySelector(target);
-    const checkpoint = document.querySelector('#pgn__checkpoint');
+  useEffect(function () {
+    var targetElement = document.querySelector(target);
+    var checkpoint = document.querySelector('#pgn__checkpoint');
     if (targetElement && checkpoint) {
       // Use the Popper library to translate the Checkpoint to its target's coordinates
-      const checkpointPopper = createPopper(targetElement, checkpoint, {
+      var checkpointPopper = createPopper(targetElement, checkpoint, {
         placement: isMobile ? 'top' : placement,
         strategy: 'fixed',
         modifiers: [{
@@ -59,11 +66,11 @@ const Checkpoint = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       }
     }
   }, [target, isMobile, placement]);
-  useEffect(() => {
+  useEffect(function () {
     if (checkpointVisible) {
       // Scroll the Checkpoint into view once its rendered
-      const targetElement = document.querySelector(target);
-      let targetOffset = targetElement.getBoundingClientRect().top;
+      var targetElement = document.querySelector(target);
+      var targetOffset = targetElement.getBoundingClientRect().top;
       if (targetOffset < 0 || targetElement.getBoundingClientRect().bottom > global.innerHeight) {
         if (placement.includes('top')) {
           if (targetOffset < 0) {
@@ -78,12 +85,12 @@ const Checkpoint = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           behavior: 'smooth'
         });
       }
-      const button = document.querySelector('.pgn__checkpoint-button_advance');
+      var button = document.querySelector('.pgn__checkpoint-button_advance');
       button.focus();
     }
   }, [target, checkpointVisible, placement]);
-  const isLastCheckpoint = index + 1 === totalCheckpoints;
-  const isOnlyCheckpoint = totalCheckpoints === 1;
+  var isLastCheckpoint = index + 1 === totalCheckpoints;
+  var isOnlyCheckpoint = totalCheckpoints === 1;
   return /*#__PURE__*/React.createElement("div", {
     id: "pgn__checkpoint",
     className: "pgn__checkpoint",

package/dist/ProductTour/Checkpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkpoint.js","names":["React","useEffect","useState","useMediaQuery","PropTypes","createPopper","FormattedMessage","breakpoints","CheckpointActionRow","CheckpointBody","CheckpointBreadcrumbs","CheckpointTitle","messages","Checkpoint","forwardRef","_ref","ref","body","index","placement","target","title","totalCheckpoints","props","_objectWithoutProperties","_excluded","checkpointVisible","setCheckpointVisible","isMobile","maxWidth","small","targetElement","document","querySelector","checkpoint","checkpointPopper","strategy","modifiers","name","options","padding","offset","tetherOffset","forceUpdate","targetOffset","getBoundingClientRect","top","bottom","global","innerHeight","includes","scrollTo","behavior","button","focus","isLastCheckpoint","isOnlyCheckpoint","createElement","id","className","role","style","visibility","pointerEvents","_extends","topPositionText","values","step","currentIndex","bottomPositionText","defaultProps","advanceButtonText","dismissButtonText","endButtonText","showDismissButton","undefined","propTypes","node","number","isRequired","onAdvance","func","onDismiss","onEnd","oneOf","string","bool"],"sources":["../../src/ProductTour/Checkpoint.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { useMediaQuery } from 'react-responsive';\nimport PropTypes from 'prop-types';\nimport { createPopper } from '@popperjs/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport breakpoints from '../utils/breakpoints';\n\nimport CheckpointActionRow from './CheckpointActionRow';\nimport CheckpointBody from './CheckpointBody';\nimport CheckpointBreadcrumbs from './CheckpointBreadcrumbs';\nimport CheckpointTitle from './CheckpointTitle';\nimport messages from './messages';\n\nconst Checkpoint = React.forwardRef(({\n  body,\n  index,\n  placement,\n  target,\n  title,\n  totalCheckpoints,\n  ...props\n}, ref) => {\n  const [checkpointVisible, setCheckpointVisible] = useState(false);\n  const isMobile = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });\n\n  useEffect(() => {\n    const targetElement = document.querySelector(target);\n    const checkpoint = document.querySelector('#pgn__checkpoint');\n    if (targetElement && checkpoint) {\n      // Use the Popper library to translate the Checkpoint to its target's coordinates\n      const checkpointPopper = createPopper(targetElement, checkpoint, {\n        placement: isMobile ? 'top' : placement,\n        strategy: 'fixed',\n        modifiers: [\n          {\n            name: 'arrow',\n            options: {\n              padding: 25,\n            },\n          },\n          {\n            name: 'offset',\n            options: {\n              offset: [0, 20],\n            },\n          },\n          {\n            name: 'preventOverflow',\n            options: {\n              padding: 20,\n              tetherOffset: 35,\n            },\n          },\n        ],\n      });\n      setCheckpointVisible(true);\n      if (checkpointPopper) {\n        checkpointPopper.forceUpdate();\n      }\n    }\n  }, [target, isMobile, placement]);\n\n  useEffect(() => {\n    if (checkpointVisible) {\n      // Scroll the Checkpoint into view once its rendered\n      const targetElement = document.querySelector(target);\n      let targetOffset = targetElement.getBoundingClientRect().top;\n      if ((targetOffset < 0) || (targetElement.getBoundingClientRect().bottom > global.innerHeight)) {\n        if (placement.includes('top')) {\n          if (targetOffset < 0) {\n            targetOffset *= -1;\n          }\n          targetOffset -= 280;\n        } else {\n          targetOffset -= 80;\n        }\n\n        global.scrollTo({\n          top: targetOffset, behavior: 'smooth',\n        });\n      }\n\n      const button = document.querySelector('.pgn__checkpoint-button_advance');\n      button.focus();\n    }\n  }, [target, checkpointVisible, placement]);\n\n  const isLastCheckpoint = index + 1 === totalCheckpoints;\n  const isOnlyCheckpoint = totalCheckpoints === 1;\n\n  return (\n    <div\n      id=\"pgn__checkpoint\"\n      className=\"pgn__checkpoint\"\n      aria-labelledby=\"pgn__checkpoint-title\"\n      ref={ref}\n      role=\"dialog\"\n      style={{ visibility: checkpointVisible ? 'visible' : 'hidden', pointerEvents: checkpointVisible ? 'auto' : 'none' }}\n    >\n      <span className=\"sr-only\">\n        <FormattedMessage\n          {...messages.topPositionText}\n          values={{ step: index + 1 }}\n        />\n      </span>\n      {(title || !isOnlyCheckpoint) && (\n        <div className=\"pgn__checkpoint-header\">\n          <CheckpointTitle>{title}</CheckpointTitle>\n          <CheckpointBreadcrumbs currentIndex={index} totalCheckpoints={totalCheckpoints} />\n        </div>\n      )}\n      <CheckpointBody>{body}</CheckpointBody>\n      <CheckpointActionRow\n        isLastCheckpoint={isLastCheckpoint}\n        index={index}\n        {...props}\n      />\n      <div id=\"pgn__checkpoint-arrow\" data-popper-arrow />\n      <span className=\"sr-only\">\n        <FormattedMessage\n          {...messages.bottomPositionText}\n          values={{ step: index + 1 }}\n        />\n      </span>\n    </div>\n  );\n});\n\nCheckpoint.defaultProps = {\n  advanceButtonText: null,\n  body: null,\n  dismissButtonText: null,\n  endButtonText: null,\n  placement: 'top',\n  title: null,\n  showDismissButton: undefined,\n};\n\nCheckpoint.propTypes = {\n  /** The text displayed on the button used to advance the tour for the given Checkpoint. */\n  advanceButtonText: PropTypes.node,\n  /** The text displayed in the body of the Checkpoint */\n  body: PropTypes.node,\n  /** The text displayed on the button used to dismiss the tour for the given Checkpoint. */\n  dismissButtonText: PropTypes.node,\n  /** The text displayed on the button used to end the tour for the given Checkpoint. */\n  endButtonText: PropTypes.node,\n  /** The current index of the given Checkpoint */\n  index: PropTypes.number.isRequired,\n  /** A function that runs when triggering the `onClick` event of the advance\n   * button for the given Checkpoint. */\n  onAdvance: PropTypes.func.isRequired,\n  /** A function that runs when triggering the `onClick` event of the dismiss\n   * button for the given Checkpoint. */\n  onDismiss: PropTypes.func.isRequired,\n  /** A function that runs when triggering the `onClick` event of the advance\n   * button if the given Checkpoint is the only or last Checkpoint in a tour. */\n  onEnd: PropTypes.func.isRequired,\n  /** A string that dictates the alignment of the Checkpoint around its target. */\n  placement: PropTypes.oneOf([\n    'top', 'top-start', 'top-end', 'right-start', 'right', 'right-end',\n    'left-start', 'left', 'left-end', 'bottom', 'bottom-start', 'bottom-end',\n  ]),\n  /** The CSS selector for the Checkpoint's desired target. */\n  target: PropTypes.string.isRequired,\n  /** The text displayed in the title of the Checkpoint */\n  title: PropTypes.node,\n  /** The total number of Checkpoints in a tour */\n  totalCheckpoints: PropTypes.number.isRequired,\n  /** Enforces visibility of the dismiss button under all circumstances */\n  showDismissButton: PropTypes.bool,\n};\n\nexport default Checkpoint;\n"],"mappings":"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"}
+{"version":3,"file":"Checkpoint.js","names":["React","useEffect","useState","useMediaQuery","PropTypes","createPopper","FormattedMessage","breakpoints","CheckpointActionRow","CheckpointBody","CheckpointBreadcrumbs","CheckpointTitle","messages","Checkpoint","forwardRef","_ref","ref","body","index","placement","target","title","totalCheckpoints","props","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","checkpointVisible","setCheckpointVisible","isMobile","maxWidth","small","targetElement","document","querySelector","checkpoint","checkpointPopper","strategy","modifiers","name","options","padding","offset","tetherOffset","forceUpdate","targetOffset","getBoundingClientRect","top","bottom","global","innerHeight","includes","scrollTo","behavior","button","focus","isLastCheckpoint","isOnlyCheckpoint","createElement","id","className","role","style","visibility","pointerEvents","_extends","topPositionText","values","step","currentIndex","bottomPositionText","defaultProps","advanceButtonText","dismissButtonText","endButtonText","showDismissButton","undefined","propTypes","node","number","isRequired","onAdvance","func","onDismiss","onEnd","oneOf","string","bool"],"sources":["../../src/ProductTour/Checkpoint.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { useMediaQuery } from 'react-responsive';\nimport PropTypes from 'prop-types';\nimport { createPopper } from '@popperjs/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport breakpoints from '../utils/breakpoints';\n\nimport CheckpointActionRow from './CheckpointActionRow';\nimport CheckpointBody from './CheckpointBody';\nimport CheckpointBreadcrumbs from './CheckpointBreadcrumbs';\nimport CheckpointTitle from './CheckpointTitle';\nimport messages from './messages';\n\nconst Checkpoint = React.forwardRef(({\n  body,\n  index,\n  placement,\n  target,\n  title,\n  totalCheckpoints,\n  ...props\n}, ref) => {\n  const [checkpointVisible, setCheckpointVisible] = useState(false);\n  const isMobile = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });\n\n  useEffect(() => {\n    const targetElement = document.querySelector(target);\n    const checkpoint = document.querySelector('#pgn__checkpoint');\n    if (targetElement && checkpoint) {\n      // Use the Popper library to translate the Checkpoint to its target's coordinates\n      const checkpointPopper = createPopper(targetElement, checkpoint, {\n        placement: isMobile ? 'top' : placement,\n        strategy: 'fixed',\n        modifiers: [\n          {\n            name: 'arrow',\n            options: {\n              padding: 25,\n            },\n          },\n          {\n            name: 'offset',\n            options: {\n              offset: [0, 20],\n            },\n          },\n          {\n            name: 'preventOverflow',\n            options: {\n              padding: 20,\n              tetherOffset: 35,\n            },\n          },\n        ],\n      });\n      setCheckpointVisible(true);\n      if (checkpointPopper) {\n        checkpointPopper.forceUpdate();\n      }\n    }\n  }, [target, isMobile, placement]);\n\n  useEffect(() => {\n    if (checkpointVisible) {\n      // Scroll the Checkpoint into view once its rendered\n      const targetElement = document.querySelector(target);\n      let targetOffset = targetElement.getBoundingClientRect().top;\n      if ((targetOffset < 0) || (targetElement.getBoundingClientRect().bottom > global.innerHeight)) {\n        if (placement.includes('top')) {\n          if (targetOffset < 0) {\n            targetOffset *= -1;\n          }\n          targetOffset -= 280;\n        } else {\n          targetOffset -= 80;\n        }\n\n        global.scrollTo({\n          top: targetOffset, behavior: 'smooth',\n        });\n      }\n\n      const button = document.querySelector('.pgn__checkpoint-button_advance');\n      button.focus();\n    }\n  }, [target, checkpointVisible, placement]);\n\n  const isLastCheckpoint = index + 1 === totalCheckpoints;\n  const isOnlyCheckpoint = totalCheckpoints === 1;\n\n  return (\n    <div\n      id=\"pgn__checkpoint\"\n      className=\"pgn__checkpoint\"\n      aria-labelledby=\"pgn__checkpoint-title\"\n      ref={ref}\n      role=\"dialog\"\n      style={{ visibility: checkpointVisible ? 'visible' : 'hidden', pointerEvents: checkpointVisible ? 'auto' : 'none' }}\n    >\n      <span className=\"sr-only\">\n        <FormattedMessage\n          {...messages.topPositionText}\n          values={{ step: index + 1 }}\n        />\n      </span>\n      {(title || !isOnlyCheckpoint) && (\n        <div className=\"pgn__checkpoint-header\">\n          <CheckpointTitle>{title}</CheckpointTitle>\n          <CheckpointBreadcrumbs currentIndex={index} totalCheckpoints={totalCheckpoints} />\n        </div>\n      )}\n      <CheckpointBody>{body}</CheckpointBody>\n      <CheckpointActionRow\n        isLastCheckpoint={isLastCheckpoint}\n        index={index}\n        {...props}\n      />\n      <div id=\"pgn__checkpoint-arrow\" data-popper-arrow />\n      <span className=\"sr-only\">\n        <FormattedMessage\n          {...messages.bottomPositionText}\n          values={{ step: index + 1 }}\n        />\n      </span>\n    </div>\n  );\n});\n\nCheckpoint.defaultProps = {\n  advanceButtonText: null,\n  body: null,\n  dismissButtonText: null,\n  endButtonText: null,\n  placement: 'top',\n  title: null,\n  showDismissButton: undefined,\n};\n\nCheckpoint.propTypes = {\n  /** The text displayed on the button used to advance the tour for the given Checkpoint. */\n  advanceButtonText: PropTypes.node,\n  /** The text displayed in the body of the Checkpoint */\n  body: PropTypes.node,\n  /** The text displayed on the button used to dismiss the tour for the given Checkpoint. */\n  dismissButtonText: PropTypes.node,\n  /** The text displayed on the button used to end the tour for the given Checkpoint. */\n  endButtonText: PropTypes.node,\n  /** The current index of the given Checkpoint */\n  index: PropTypes.number.isRequired,\n  /** A function that runs when triggering the `onClick` event of the advance\n   * button for the given Checkpoint. */\n  onAdvance: PropTypes.func.isRequired,\n  /** A function that runs when triggering the `onClick` event of the dismiss\n   * button for the given Checkpoint. */\n  onDismiss: PropTypes.func.isRequired,\n  /** A function that runs when triggering the `onClick` event of the advance\n   * button if the given Checkpoint is the only or last Checkpoint in a tour. */\n  onEnd: PropTypes.func.isRequired,\n  /** A string that dictates the alignment of the Checkpoint around its target. */\n  placement: PropTypes.oneOf([\n    'top', 'top-start', 'top-end', 'right-start', 'right', 'right-end',\n    'left-start', 'left', 'left-end', 'bottom', 'bottom-start', 'bottom-end',\n  ]),\n  /** The CSS selector for the Checkpoint's desired target. */\n  target: PropTypes.string.isRequired,\n  /** The text displayed in the title of the Checkpoint */\n  title: PropTypes.node,\n  /** The total number of Checkpoints in a tour */\n  totalCheckpoints: PropTypes.number.isRequired,\n  /** Enforces visibility of the dismiss button under all circumstances */\n  showDismissButton: PropTypes.bool,\n};\n\nexport default Checkpoint;\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,aAAa,QAAQ,kBAAkB;AAChD,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,OAAOC,WAAW,MAAM,sBAAsB;AAE9C,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,qBAAqB,MAAM,yBAAyB;AAC3D,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,QAAQ,MAAM,YAAY;AAEjC,IAAMC,UAAU,gBAAGb,KAAK,CAACc,UAAU,CAAC,UAAAC,IAAA,EAQjCC,GAAG,EAAK;EAAA,IAPTC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IACTC,MAAM,GAAAL,IAAA,CAANK,MAAM;IACNC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,gBAAgB,GAAAP,IAAA,CAAhBO,gBAAgB;IACbC,KAAK,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAER,IAAAC,SAAA,GAAkDxB,QAAQ,CAAC,KAAK,CAAC;IAAAyB,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAA1DG,iBAAiB,GAAAF,UAAA;IAAEG,oBAAoB,GAAAH,UAAA;EAC9C,IAAMI,QAAQ,GAAG5B,aAAa,CAAC;IAAE6B,QAAQ,EAAEzB,WAAW,CAAC0B,KAAK,CAACD;EAAS,CAAC,CAAC;EAExE/B,SAAS,CAAC,YAAM;IACd,IAAMiC,aAAa,GAAGC,QAAQ,CAACC,aAAa,CAAChB,MAAM,CAAC;IACpD,IAAMiB,UAAU,GAAGF,QAAQ,CAACC,aAAa,CAAC,kBAAkB,CAAC;IAC7D,IAAIF,aAAa,IAAIG,UAAU,EAAE;MAC/B;MACA,IAAMC,gBAAgB,GAAGjC,YAAY,CAAC6B,aAAa,EAAEG,UAAU,EAAE;QAC/DlB,SAAS,EAAEY,QAAQ,GAAG,KAAK,GAAGZ,SAAS;QACvCoB,QAAQ,EAAE,OAAO;QACjBC,SAAS,EAAE,CACT;UACEC,IAAI,EAAE,OAAO;UACbC,OAAO,EAAE;YACPC,OAAO,EAAE;UACX;QACF,CAAC,EACD;UACEF,IAAI,EAAE,QAAQ;UACdC,OAAO,EAAE;YACPE,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;UAChB;QACF,CAAC,EACD;UACEH,IAAI,EAAE,iBAAiB;UACvBC,OAAO,EAAE;YACPC,OAAO,EAAE,EAAE;YACXE,YAAY,EAAE;UAChB;QACF,CAAC;MAEL,CAAC,CAAC;MACFf,oBAAoB,CAAC,IAAI,CAAC;MAC1B,IAAIQ,gBAAgB,EAAE;QACpBA,gBAAgB,CAACQ,WAAW,CAAC,CAAC;MAChC;IACF;EACF,CAAC,EAAE,CAAC1B,MAAM,EAAEW,QAAQ,EAAEZ,SAAS,CAAC,CAAC;EAEjClB,SAAS,CAAC,YAAM;IACd,IAAI4B,iBAAiB,EAAE;MACrB;MACA,IAAMK,aAAa,GAAGC,QAAQ,CAACC,aAAa,CAAChB,MAAM,CAAC;MACpD,IAAI2B,YAAY,GAAGb,aAAa,CAACc,qBAAqB,CAAC,CAAC,CAACC,GAAG;MAC5D,IAAKF,YAAY,GAAG,CAAC,IAAMb,aAAa,CAACc,qBAAqB,CAAC,CAAC,CAACE,MAAM,GAAGC,MAAM,CAACC,WAAY,EAAE;QAC7F,IAAIjC,SAAS,CAACkC,QAAQ,CAAC,KAAK,CAAC,EAAE;UAC7B,IAAIN,YAAY,GAAG,CAAC,EAAE;YACpBA,YAAY,IAAI,CAAC,CAAC;UACpB;UACAA,YAAY,IAAI,GAAG;QACrB,CAAC,MAAM;UACLA,YAAY,IAAI,EAAE;QACpB;QAEAI,MAAM,CAACG,QAAQ,CAAC;UACdL,GAAG,EAAEF,YAAY;UAAEQ,QAAQ,EAAE;QAC/B,CAAC,CAAC;MACJ;MAEA,IAAMC,MAAM,GAAGrB,QAAQ,CAACC,aAAa,CAAC,iCAAiC,CAAC;MACxEoB,MAAM,CAACC,KAAK,CAAC,CAAC;IAChB;EACF,CAAC,EAAE,CAACrC,MAAM,EAAES,iBAAiB,EAAEV,SAAS,CAAC,CAAC;EAE1C,IAAMuC,gBAAgB,GAAGxC,KAAK,GAAG,CAAC,KAAKI,gBAAgB;EACvD,IAAMqC,gBAAgB,GAAGrC,gBAAgB,KAAK,CAAC;EAE/C,oBACEtB,KAAA,CAAA4D,aAAA;IACEC,EAAE,EAAC,iBAAiB;IACpBC,SAAS,EAAC,iBAAiB;IAC3B,mBAAgB,uBAAuB;IACvC9C,GAAG,EAAEA,GAAI;IACT+C,IAAI,EAAC,QAAQ;IACbC,KAAK,EAAE;MAAEC,UAAU,EAAEpC,iBAAiB,GAAG,SAAS,GAAG,QAAQ;MAAEqC,aAAa,EAAErC,iBAAiB,GAAG,MAAM,GAAG;IAAO;EAAE,gBAEpH7B,KAAA,CAAA4D,aAAA;IAAME,SAAS,EAAC;EAAS,gBACvB9D,KAAA,CAAA4D,aAAA,CAACtD,gBAAgB,EAAA6D,QAAA,KACXvD,QAAQ,CAACwD,eAAe;IAC5BC,MAAM,EAAE;MAAEC,IAAI,EAAEpD,KAAK,GAAG;IAAE;EAAE,EAC7B,CACG,CAAC,EACN,CAACG,KAAK,IAAI,CAACsC,gBAAgB,kBAC1B3D,KAAA,CAAA4D,aAAA;IAAKE,SAAS,EAAC;EAAwB,gBACrC9D,KAAA,CAAA4D,aAAA,CAACjD,eAAe,QAAEU,KAAuB,CAAC,eAC1CrB,KAAA,CAAA4D,aAAA,CAAClD,qBAAqB;IAAC6D,YAAY,EAAErD,KAAM;IAACI,gBAAgB,EAAEA;EAAiB,CAAE,CAC9E,CACN,eACDtB,KAAA,CAAA4D,aAAA,CAACnD,cAAc,QAAEQ,IAAqB,CAAC,eACvCjB,KAAA,CAAA4D,aAAA,CAACpD,mBAAmB,EAAA2D,QAAA;IAClBT,gBAAgB,EAAEA,gBAAiB;IACnCxC,KAAK,EAAEA;EAAM,GACTK,KAAK,CACV,CAAC,eACFvB,KAAA,CAAA4D,aAAA;IAAKC,EAAE,EAAC,uBAAuB;IAAC;EAAiB,CAAE,CAAC,eACpD7D,KAAA,CAAA4D,aAAA;IAAME,SAAS,EAAC;EAAS,gBACvB9D,KAAA,CAAA4D,aAAA,CAACtD,gBAAgB,EAAA6D,QAAA,KACXvD,QAAQ,CAAC4D,kBAAkB;IAC/BH,MAAM,EAAE;MAAEC,IAAI,EAAEpD,KAAK,GAAG;IAAE;EAAE,EAC7B,CACG,CACH,CAAC;AAEV,CAAC,CAAC;AAEFL,UAAU,CAAC4D,YAAY,GAAG;EACxBC,iBAAiB,EAAE,IAAI;EACvBzD,IAAI,EAAE,IAAI;EACV0D,iBAAiB,EAAE,IAAI;EACvBC,aAAa,EAAE,IAAI;EACnBzD,SAAS,EAAE,KAAK;EAChBE,KAAK,EAAE,IAAI;EACXwD,iBAAiB,EAAEC;AACrB,CAAC;AAEDjE,UAAU,CAACkE,SAAS,GAAG;EACrB;EACAL,iBAAiB,EAAEtE,SAAS,CAAC4E,IAAI;EACjC;EACA/D,IAAI,EAAEb,SAAS,CAAC4E,IAAI;EACpB;EACAL,iBAAiB,EAAEvE,SAAS,CAAC4E,IAAI;EACjC;EACAJ,aAAa,EAAExE,SAAS,CAAC4E,IAAI;EAC7B;EACA9D,KAAK,EAAEd,SAAS,CAAC6E,MAAM,CAACC,UAAU;EAClC;AACF;EACEC,SAAS,EAAE/E,SAAS,CAACgF,IAAI,CAACF,UAAU;EACpC;AACF;EACEG,SAAS,EAAEjF,SAAS,CAACgF,IAAI,CAACF,UAAU;EACpC;AACF;EACEI,KAAK,EAAElF,SAAS,CAACgF,IAAI,CAACF,UAAU;EAChC;EACA/D,SAAS,EAAEf,SAAS,CAACmF,KAAK,CAAC,CACzB,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,WAAW,EAClE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,YAAY,CACzE,CAAC;EACF;EACAnE,MAAM,EAAEhB,SAAS,CAACoF,MAAM,CAACN,UAAU;EACnC;EACA7D,KAAK,EAAEjB,SAAS,CAAC4E,IAAI;EACrB;EACA1D,gBAAgB,EAAElB,SAAS,CAAC6E,MAAM,CAACC,UAAU;EAC7C;EACAL,iBAAiB,EAAEzE,SAAS,CAACqF;AAC/B,CAAC;AAED,eAAe5E,UAAU"}

package/dist/ProductTour/Checkpoint.scss

@@ -1,16 +1,20 @@
+@import "variables";
+
+$checkpoint-arrow-top-color: solid $checkpoint-arrow-width $checkpoint-border-color;
+$checkpoint-arrow-default-color: solid $checkpoint-arrow-width $checkpoint-background-color;
+$checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
+
 .pgn__checkpoint {
   position: absolute;
-  background: var(--pgn-color-product-tour-checkpoint-bg);
-  border-top:
-    var(--pgn-size-product-tour-checkpoint-width-border)
-    solid var(--pgn-color-product-tour-checkpoint-border);
-  border-radius: var(--pgn-size-border-radius-base);
-  padding: var(--pgn-spacing-spacer-4);
-  box-shadow: 0 .25rem .5rem var(--pgn-color-product-tour-checkpoint-box-shadow);
-  z-index: var(--pgn-elevation-product-tour-checkpoint-zindex);
-  max-width: var(--pgn-size-product-tour-checkpoint-width-max);
-
-  @media (--pgn-size-breakpoint-max-width-sm) {
+  background: $checkpoint-background-color;
+  border-top: $checkpoint-border-width solid $checkpoint-border-color;
+  border-radius: $border-radius;
+  padding: map_get($spacers, 4);
+  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .3);
+  z-index: $checkpoint-z-index;
+  max-width: $checkpoint-max-width;
+
+  @media (max-width: map-get($grid-breakpoints, "md")) {
     min-width: 90%;
     max-width: 90%;
   }
@@ -34,12 +38,12 @@
 
   #pgn__checkpoint-arrow::before,
   #pgn__checkpoint-arrow::after {
-    content: "";
     visibility: visible;
+    content: "";
   }
 
   .pgn__checkpoint-button_dismiss {
-    margin-inline-end: var(--pgn-spacing-spacer-2);
+    margin-inline-end: map_get($spacers, 2);
   }
 
   .pgn__checkpoint-breadcrumb {
@@ -48,11 +52,11 @@
     border-radius: 50%;
 
     &.pgn__checkpoint-breadcrumb_active {
-      background: var(--pgn-color-product-tour-checkpoint-breadcrumb);
+      background: $checkpoint-breadcrumb-color;
     }
 
     &.pgn__checkpoint-breadcrumb_inactive {
-      border: 1px solid var(--pgn-color-product-tour-checkpoint-breadcrumb);
+      border: 1px solid $checkpoint-breadcrumb-color;
       background: transparent;
     }
 
@@ -76,7 +80,7 @@
   }
 
   .pgn__checkpoint-body {
-    color: var(--pgn-color-product-tour-checkpoint-body);
+    color: $checkpoint-body-color;
     margin-bottom: map_get($spacers, 3\.5);
     text-align: start;
   }
@@ -88,33 +92,25 @@
   }
 
   #pgn__checkpoint-title {
-    font-size: var(--pgn-typography-font-size-h3);
+    font-size: $h3-font-size;
     margin-inline-end: map_get($spacers, 2\.5);
     margin-bottom: 0;
   }
 }
 
 .pgn__checkpoint[data-popper-placement^="top"] > #pgn__checkpoint-arrow {
-  left: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important;
+  left: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
   bottom: 1px;
 
   [dir="rtl"] & {
-    left: var(--pgn-size-product-tour-checkpoint-width-arrow) !important;
+    left: $checkpoint-arrow-width !important;
   }
 
   &::after {
-    border-bottom:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    border-top:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-top)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-top);
-    border-left:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    border-right:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-bottom: $checkpoint-arrow-transparent;
+    border-top: $checkpoint-arrow-default-color;
+    border-left: $checkpoint-arrow-transparent;
+    border-right: $checkpoint-arrow-transparent;
     filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .1));
     -webkit-filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .1));
   }
@@ -122,63 +118,39 @@
 
 .pgn__checkpoint[data-popper-placement^="bottom"] > #pgn__checkpoint-arrow {
   top: -36px;
-  left: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important;
+  left: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
 
   &::after {
-    border-bottom:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-border);
-    border-top:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    border-left:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    border-right:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-bottom: $checkpoint-arrow-top-color;
+    border-top: $checkpoint-arrow-transparent;
+    border-left: $checkpoint-arrow-transparent;
+    border-right: $checkpoint-arrow-transparent;
   }
 }
 
 .pgn__checkpoint[data-popper-placement^="left"] > #pgn__checkpoint-arrow {
-  top: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement
+  top: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
   right: 1px;
 
   &::after {
-    border-bottom:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    border-top:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    border-left:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-top)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-top);
-    border-right:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-bottom: $checkpoint-arrow-transparent;
+    border-top: $checkpoint-arrow-transparent;
+    border-left: $checkpoint-arrow-default-color;
+    border-right: $checkpoint-arrow-transparent;
     filter: drop-shadow(3px 1px 2px rgba(0, 0, 0, .1));
   }
 }
 
 .pgn__checkpoint[data-popper-placement^="right"] > #pgn__checkpoint-arrow {
-  top: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement
+  top: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
   left: 1px;
 
   &::after {
-    left: calc(-2 * var(--pgn-size-product-tour-checkpoint-width-arrow));
-    border-bottom:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    border-top:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    border-left:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    border-right:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-top)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-top);
+    left: -2 * $checkpoint-arrow-width;
+    border-bottom: $checkpoint-arrow-transparent;
+    border-top: $checkpoint-arrow-transparent;
+    border-left: $checkpoint-arrow-transparent;
+    border-right: $checkpoint-arrow-default-color;
     filter: drop-shadow(-3px 1px 2px rgba(0, 0, 0, .1));
   }
 }