@openedx/paragon 22.0.0-alpha.23 → 22.0.0

package/dist/Toast/_variables.scss

@@ -0,0 +1,19 @@
+// Toasts
+
+$toast-max-width:                   400px !default;
+$toast-padding-x:                   .75rem !default;
+$toast-padding-y:                   .25rem !default;
+$toast-font-size:                   .875rem !default;
+$toast-color:                       null !default;
+$toast-background-color:            $gray-700 !default;
+$toast-border-width:                1px !default;
+$toast-border-color:                rgba(0, 0, 0, .1) !default;
+$toast-border-radius:               .25rem !default;
+$toast-box-shadow:                  0 1.25rem 2.5rem rgba($black, .15), 0 .5rem 3rem rgba($black, .15) !default;
+
+$toast-header-color:                $white !default;
+$toast-header-background-color:     $gray-700 !default;
+$toast-header-border-color:         rgba(0, 0, 0, .5) !default;
+
+$toast-container-gutter-lg:         1.25rem !default;
+$toast-container-gutter-sm:         .625rem !default;

package/dist/Toast/index.js

@@ -1,5 +1,11 @@
-const _excluded = ["action", "children", "className", "closeLabel", "onClose", "show"];
+var _excluded = ["action", "children", "className", "closeLabel", "onClose", "show"];
 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, { useState } from 'react';
@@ -12,21 +18,22 @@ import ToastContainer from './ToastContainer';
 import Button from '../Button';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
-export const TOAST_CLOSE_LABEL_TEXT = 'Close';
-export const TOAST_DELAY = 5000;
+export var TOAST_CLOSE_LABEL_TEXT = 'Close';
+export var TOAST_DELAY = 5000;
 function Toast(_ref) {
-  let {
-      action,
-      children,
-      className,
-      closeLabel,
-      onClose,
-      show
-    } = _ref,
+  var action = _ref.action,
+    children = _ref.children,
+    className = _ref.className,
+    closeLabel = _ref.closeLabel,
+    onClose = _ref.onClose,
+    show = _ref.show,
     rest = _objectWithoutProperties(_ref, _excluded);
-  const intl = useIntl();
-  const [autoHide, setAutoHide] = useState(true);
-  const intlCloseLabel = closeLabel || intl.formatMessage({
+  var intl = useIntl();
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    autoHide = _useState2[0],
+    setAutoHide = _useState2[1];
+  var intlCloseLabel = closeLabel || intl.formatMessage({
     id: 'pgn.Toast.closeLabel',
     defaultMessage: 'Close',
     description: 'Close label for Toast component'
@@ -35,10 +42,18 @@ function Toast(_ref) {
     autohide: autoHide,
     className: classNames('pgn__toast', className),
     onClose: onClose,
-    onBlur: () => setAutoHide(true),
-    onFocus: () => setAutoHide(false),
-    onMouseOut: () => setAutoHide(true),
-    onMouseOver: () => setAutoHide(false),
+    onBlur: function onBlur() {
+      return setAutoHide(true);
+    },
+    onFocus: function onFocus() {
+      return setAutoHide(false);
+    },
+    onMouseOut: function onMouseOut() {
+      return setAutoHide(true);
+    },
+    onMouseOver: function onMouseOver() {
+      return setAutoHide(false);
+    },
     show: show
   }, rest), /*#__PURE__*/React.createElement("div", {
     className: "toast-header"

package/dist/Toast/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useState","classNames","PropTypes","BaseToast","useIntl","Close","ToastContainer","Button","Icon","IconButton","TOAST_CLOSE_LABEL_TEXT","TOAST_DELAY","Toast","_ref","action","children","className","closeLabel","onClose","show","rest","_objectWithoutProperties","_excluded","intl","autoHide","setAutoHide","intlCloseLabel","formatMessage","id","defaultMessage","description","createElement","_extends","autohide","onBlur","onFocus","onMouseOut","onMouseOver","iconAs","alt","src","onClick","variant","invertColors","as","href","size","label","defaultProps","undefined","delay","propTypes","string","isRequired","func","bool","shape","number"],"sources":["../../src/Toast/index.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport BaseToast from 'react-bootstrap/Toast';\nimport { useIntl } from 'react-intl';\n\nimport { Close } from '../../icons';\nimport ToastContainer from './ToastContainer';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\n\nexport const TOAST_CLOSE_LABEL_TEXT = 'Close';\nexport const TOAST_DELAY = 5000;\n\nfunction Toast({\n  action, children, className, closeLabel, onClose, show, ...rest\n}) {\n  const intl = useIntl();\n  const [autoHide, setAutoHide] = useState(true);\n  const intlCloseLabel = closeLabel || intl.formatMessage({\n    id: 'pgn.Toast.closeLabel',\n    defaultMessage: 'Close',\n    description: 'Close label for Toast component',\n  });\n  return (\n    <ToastContainer>\n      <BaseToast\n        autohide={autoHide}\n        className={classNames('pgn__toast', className)}\n        onClose={onClose}\n        onBlur={() => setAutoHide(true)}\n        onFocus={() => setAutoHide(false)}\n        onMouseOut={() => setAutoHide(true)}\n        onMouseOver={() => setAutoHide(false)}\n        show={show}\n        {...rest}\n      >\n        <div\n          className=\"toast-header\"\n        >\n          <p className=\"small\">{children}</p>\n          <div className=\"toast-header-btn-container\">\n            <IconButton\n              iconAs={Icon}\n              alt={intlCloseLabel}\n              className=\"align-self-start\"\n              src={Close}\n              onClick={onClose}\n              variant=\"primary\"\n              invertColors\n            />\n          </div>\n        </div>\n        {action && (\n          <Button\n            as={action.href ? 'a' : 'button'}\n            href={action.href}\n            onClick={action.onClick}\n            size=\"sm\"\n            variant=\"inverse-outline-primary\"\n          >\n            {action.label}\n          </Button>\n        )}\n      </BaseToast>\n    </ToastContainer>\n  );\n}\n\nToast.defaultProps = {\n  action: null,\n  closeLabel: undefined,\n  delay: TOAST_DELAY,\n  className: undefined,\n};\n\nToast.propTypes = {\n  /** A string or an element that is rendered inside the main body of the `Toast`. */\n  children: PropTypes.string.isRequired,\n  /**\n   * A function that is called on close. It can be used to perform\n   * actions upon closing of the `Toast`, such as setting the \"show\"\n   * element to false.\n   * */\n  onClose: PropTypes.func.isRequired,\n  /** Boolean used to control whether the `Toast` shows */\n  show: PropTypes.bool.isRequired,\n  /**\n   * Fields used to build optional action button.\n   * `label` is a string rendered inside the button.\n   * `href` is a link that will render the action button as an anchor tag.\n   * `onClick` is a function that is called when the button is clicked.\n   */\n  action: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    href: PropTypes.string,\n    onClick: PropTypes.func,\n  }),\n  /**\n   * Alt text for the `Toast`'s dismiss button. Defaults to 'Close'.\n   */\n  closeLabel: PropTypes.string,\n  /** Time in milliseconds for which the `Toast` will display. */\n  delay: PropTypes.number,\n  /** Class names for the `BaseToast` component */\n  className: PropTypes.string,\n};\n\nexport default Toast;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAAM,YAAY;AAElC,OAAOC,SAAS,MAAM,uBAAuB;AAC7C,SAASC,OAAO,QAAQ,YAAY;AAEpC,SAASC,KAAK,QAAQ,aAAa;AACnC,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,UAAU,MAAM,eAAe;AAEtC,OAAO,MAAMC,sBAAsB,GAAG,OAAO;AAC7C,OAAO,MAAMC,WAAW,GAAG,IAAI;AAE/B,SAASC,KAAKA,CAAAC,IAAA,EAEX;EAAA,IAFY;MACbC,MAAM;MAAEC,QAAQ;MAAEC,SAAS;MAAEC,UAAU;MAAEC,OAAO;MAAEC;IACpD,CAAC,GAAAN,IAAA;IAD4DO,IAAI,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAE/D,MAAMC,IAAI,GAAGnB,OAAO,CAAC,CAAC;EACtB,MAAM,CAACoB,QAAQ,EAAEC,WAAW,CAAC,GAAGzB,QAAQ,CAAC,IAAI,CAAC;EAC9C,MAAM0B,cAAc,GAAGT,UAAU,IAAIM,IAAI,CAACI,aAAa,CAAC;IACtDC,EAAE,EAAE,sBAAsB;IAC1BC,cAAc,EAAE,OAAO;IACvBC,WAAW,EAAE;EACf,CAAC,CAAC;EACF,oBACE/B,KAAA,CAAAgC,aAAA,CAACzB,cAAc,qBACbP,KAAA,CAAAgC,aAAA,CAAC5B,SAAS,EAAA6B,QAAA;IACRC,QAAQ,EAAET,QAAS;IACnBR,SAAS,EAAEf,UAAU,CAAC,YAAY,EAAEe,SAAS,CAAE;IAC/CE,OAAO,EAAEA,OAAQ;IACjBgB,MAAM,EAAEA,CAAA,KAAMT,WAAW,CAAC,IAAI,CAAE;IAChCU,OAAO,EAAEA,CAAA,KAAMV,WAAW,CAAC,KAAK,CAAE;IAClCW,UAAU,EAAEA,CAAA,KAAMX,WAAW,CAAC,IAAI,CAAE;IACpCY,WAAW,EAAEA,CAAA,KAAMZ,WAAW,CAAC,KAAK,CAAE;IACtCN,IAAI,EAAEA;EAAK,GACPC,IAAI,gBAERrB,KAAA,CAAAgC,aAAA;IACEf,SAAS,EAAC;EAAc,gBAExBjB,KAAA,CAAAgC,aAAA;IAAGf,SAAS,EAAC;EAAO,GAAED,QAAY,CAAC,eACnChB,KAAA,CAAAgC,aAAA;IAAKf,SAAS,EAAC;EAA4B,gBACzCjB,KAAA,CAAAgC,aAAA,CAACtB,UAAU;IACT6B,MAAM,EAAE9B,IAAK;IACb+B,GAAG,EAAEb,cAAe;IACpBV,SAAS,EAAC,kBAAkB;IAC5BwB,GAAG,EAAEnC,KAAM;IACXoC,OAAO,EAAEvB,OAAQ;IACjBwB,OAAO,EAAC,SAAS;IACjBC,YAAY;EAAA,CACb,CACE,CACF,CAAC,EACL7B,MAAM,iBACLf,KAAA,CAAAgC,aAAA,CAACxB,MAAM;IACLqC,EAAE,EAAE9B,MAAM,CAAC+B,IAAI,GAAG,GAAG,GAAG,QAAS;IACjCA,IAAI,EAAE/B,MAAM,CAAC+B,IAAK;IAClBJ,OAAO,EAAE3B,MAAM,CAAC2B,OAAQ;IACxBK,IAAI,EAAC,IAAI;IACTJ,OAAO,EAAC;EAAyB,GAEhC5B,MAAM,CAACiC,KACF,CAED,CACG,CAAC;AAErB;AAEAnC,KAAK,CAACoC,YAAY,GAAG;EACnBlC,MAAM,EAAE,IAAI;EACZG,UAAU,EAAEgC,SAAS;EACrBC,KAAK,EAAEvC,WAAW;EAClBK,SAAS,EAAEiC;AACb,CAAC;AAEDrC,KAAK,CAACuC,SAAS,GAAG;EAChB;EACApC,QAAQ,EAAEb,SAAS,CAACkD,MAAM,CAACC,UAAU;EACrC;AACF;AACA;AACA;AACA;EACEnC,OAAO,EAAEhB,SAAS,CAACoD,IAAI,CAACD,UAAU;EAClC;EACAlC,IAAI,EAAEjB,SAAS,CAACqD,IAAI,CAACF,UAAU;EAC/B;AACF;AACA;AACA;AACA;AACA;EACEvC,MAAM,EAAEZ,SAAS,CAACsD,KAAK,CAAC;IACtBT,KAAK,EAAE7C,SAAS,CAACkD,MAAM,CAACC,UAAU;IAClCR,IAAI,EAAE3C,SAAS,CAACkD,MAAM;IACtBX,OAAO,EAAEvC,SAAS,CAACoD;EACrB,CAAC,CAAC;EACF;AACF;AACA;EACErC,UAAU,EAAEf,SAAS,CAACkD,MAAM;EAC5B;EACAF,KAAK,EAAEhD,SAAS,CAACuD,MAAM;EACvB;EACAzC,SAAS,EAAEd,SAAS,CAACkD;AACvB,CAAC;AAED,eAAexC,KAAK"}
+{"version":3,"file":"index.js","names":["React","useState","classNames","PropTypes","BaseToast","useIntl","Close","ToastContainer","Button","Icon","IconButton","TOAST_CLOSE_LABEL_TEXT","TOAST_DELAY","Toast","_ref","action","children","className","closeLabel","onClose","show","rest","_objectWithoutProperties","_excluded","intl","_useState","_useState2","_slicedToArray","autoHide","setAutoHide","intlCloseLabel","formatMessage","id","defaultMessage","description","createElement","_extends","autohide","onBlur","onFocus","onMouseOut","onMouseOver","iconAs","alt","src","onClick","variant","invertColors","as","href","size","label","defaultProps","undefined","delay","propTypes","string","isRequired","func","bool","shape","number"],"sources":["../../src/Toast/index.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport BaseToast from 'react-bootstrap/Toast';\nimport { useIntl } from 'react-intl';\n\nimport { Close } from '../../icons';\nimport ToastContainer from './ToastContainer';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\n\nexport const TOAST_CLOSE_LABEL_TEXT = 'Close';\nexport const TOAST_DELAY = 5000;\n\nfunction Toast({\n  action, children, className, closeLabel, onClose, show, ...rest\n}) {\n  const intl = useIntl();\n  const [autoHide, setAutoHide] = useState(true);\n  const intlCloseLabel = closeLabel || intl.formatMessage({\n    id: 'pgn.Toast.closeLabel',\n    defaultMessage: 'Close',\n    description: 'Close label for Toast component',\n  });\n  return (\n    <ToastContainer>\n      <BaseToast\n        autohide={autoHide}\n        className={classNames('pgn__toast', className)}\n        onClose={onClose}\n        onBlur={() => setAutoHide(true)}\n        onFocus={() => setAutoHide(false)}\n        onMouseOut={() => setAutoHide(true)}\n        onMouseOver={() => setAutoHide(false)}\n        show={show}\n        {...rest}\n      >\n        <div\n          className=\"toast-header\"\n        >\n          <p className=\"small\">{children}</p>\n          <div className=\"toast-header-btn-container\">\n            <IconButton\n              iconAs={Icon}\n              alt={intlCloseLabel}\n              className=\"align-self-start\"\n              src={Close}\n              onClick={onClose}\n              variant=\"primary\"\n              invertColors\n            />\n          </div>\n        </div>\n        {action && (\n          <Button\n            as={action.href ? 'a' : 'button'}\n            href={action.href}\n            onClick={action.onClick}\n            size=\"sm\"\n            variant=\"inverse-outline-primary\"\n          >\n            {action.label}\n          </Button>\n        )}\n      </BaseToast>\n    </ToastContainer>\n  );\n}\n\nToast.defaultProps = {\n  action: null,\n  closeLabel: undefined,\n  delay: TOAST_DELAY,\n  className: undefined,\n};\n\nToast.propTypes = {\n  /** A string or an element that is rendered inside the main body of the `Toast`. */\n  children: PropTypes.string.isRequired,\n  /**\n   * A function that is called on close. It can be used to perform\n   * actions upon closing of the `Toast`, such as setting the \"show\"\n   * element to false.\n   * */\n  onClose: PropTypes.func.isRequired,\n  /** Boolean used to control whether the `Toast` shows */\n  show: PropTypes.bool.isRequired,\n  /**\n   * Fields used to build optional action button.\n   * `label` is a string rendered inside the button.\n   * `href` is a link that will render the action button as an anchor tag.\n   * `onClick` is a function that is called when the button is clicked.\n   */\n  action: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    href: PropTypes.string,\n    onClick: PropTypes.func,\n  }),\n  /**\n   * Alt text for the `Toast`'s dismiss button. Defaults to 'Close'.\n   */\n  closeLabel: PropTypes.string,\n  /** Time in milliseconds for which the `Toast` will display. */\n  delay: PropTypes.number,\n  /** Class names for the `BaseToast` component */\n  className: PropTypes.string,\n};\n\nexport default Toast;\n"],"mappings":"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"}

package/dist/Toast/index.scss

@@ -1,12 +1,13 @@
-@import "bootstrap-toast";
+@import "variables";
+@import "~bootstrap/scss/toasts";
 
 .toast {
-  background-color: var(--pgn-color-toast-bg);
-  box-shadow: var(--pgn-elevation-toast-box-shadow);
+  background-color: $toast-background-color;
+  box-shadow: $toast-box-shadow;
   margin: 0;
   padding: 1rem;
   position: relative;
-  border-radius: var(--pgn-size-toast-border-radius);
+  border-radius: $toast-border-radius;
   z-index: 2;
 
   &.show {
@@ -31,7 +32,7 @@
     padding: 0;
 
     p {
-      font-size: var(--pgn-typography-font-size-small-base);
+      font-size: $small-font-size;
       margin: 0;
       padding-right: .75rem;
     }
@@ -41,12 +42,12 @@
     }
   }
 
-  @media (--pgn-size-breakpoint-max-width-sm) {
+  @media only screen and (max-width: 768px) {
     max-width: 100%;
   }
 
-  @media (--pgn-size-breakpoint-min-width-md) {
-    min-width: var(--pgn-size-toast-max-width);
-    max-width: var(--pgn-size-toast-max-width);
+  @media only screen and (min-width: 768px) {
+    min-width: $toast-max-width;
+    max-width: $toast-max-width;
   }
 }

package/dist/Tooltip/_variables.scss

@@ -0,0 +1,21 @@
+// Tooltips
+
+$tooltip-font-size:                 $font-size-sm !default;
+$tooltip-max-width:                 200px !default;
+$tooltip-color:                     $white !default;
+$tooltip-bg:                        $black !default;
+$tooltip-border-radius:             $border-radius !default;
+$tooltip-opacity:                   1 !default;
+$tooltip-padding-y:                 .5rem !default;
+$tooltip-padding-x:                 .5rem !default;
+$tooltip-margin:                    0 !default;
+$tooltip-box-shadow:                drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
+  drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
+
+$tooltip-arrow-width:               .8rem !default;
+$tooltip-arrow-height:              .4rem !default;
+$tooltip-arrow-color:               $tooltip-bg !default;
+
+$tooltip-color-light:               $black !default;
+$tooltip-bg-light:                  $white !default;
+$tooltip-arrow-color-light:         $white !default;

package/dist/Tooltip/index.js

@@ -1,9 +1,10 @@
-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 _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 _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; }
@@ -11,12 +12,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import BaseTooltip from 'react-bootstrap/Tooltip';
-const PLACEMENT_VARIANTS = ['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'];
-const Tooltip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      children,
-      variant
-    } = _ref,
+var PLACEMENT_VARIANTS = ['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'];
+var Tooltip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    variant = _ref.variant,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(BaseTooltip, _extends({}, props, {
     className: classNames({

package/dist/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","BaseTooltip","PLACEMENT_VARIANTS","Tooltip","forwardRef","_ref","ref","children","variant","props","_objectWithoutProperties","_excluded","createElement","_extends","className","propTypes","_objectSpread","id","string","isRequired","placement","oneOf","arrowProps","shape","oneOfType","func","current","element","style","show","bool","popper","bsPrefix","node","defaultProps","undefined"],"sources":["../../src/Tooltip/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport BaseTooltip from 'react-bootstrap/Tooltip';\n\nconst PLACEMENT_VARIANTS = [\n  'auto-start',\n  'auto',\n  'auto-end',\n  'top-start',\n  'top',\n  'top-end',\n  'right-start',\n  'right',\n  'right-end',\n  'bottom-end',\n  'bottom',\n  'bottom-start',\n  'left-end',\n  'left',\n  'left-start',\n];\n\nconst Tooltip = React.forwardRef(({\n  children,\n  variant,\n  ...props\n}, ref) => (\n  <BaseTooltip\n    {...props}\n    className={classNames({ 'tooltip-light': variant === 'light' }, props.className)}\n    ref={ref}\n  >\n    {children}\n  </BaseTooltip>\n));\n\nTooltip.propTypes = {\n  ...BaseTooltip.propTypes,\n  /** An html id attribute, necessary for accessibility. */\n  id: PropTypes.string.isRequired,\n  /**\n   * Sets the direction the `Tooltip` is positioned towards.\n   *\n   * This is generally provided by the `Overlay` component positioning the tooltip.\n   */\n  placement: PropTypes.oneOf(PLACEMENT_VARIANTS),\n  /**\n   * An `Overlay` injected set of props for positioning the `Tooltip` arrow.\n   *\n   * This is generally provided by the `Overlay` component positioning the tooltip.\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  /** Whether the `Overlay` is shown. */\n  show: PropTypes.bool,\n  /** A `Popper.js` config object passed to the the underlying popper instance. */\n  popper: PropTypes.shape({}),\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n  /** Specifies the content of the `Tooltip` */\n  children: PropTypes.node,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n  /** The visual style of the `Tooltip` */\n  variant: PropTypes.string,\n};\n\nTooltip.defaultProps = {\n  ...Tooltip.defaultProps,\n  id: undefined,\n  placement: 'right',\n  arrowProps: undefined,\n  show: undefined,\n  popper: undefined,\n  children: undefined,\n  className: undefined,\n  variant: undefined,\n  bsPrefix: 'tooltip',\n};\n\nexport default Tooltip;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,WAAW,MAAM,yBAAyB;AAEjD,MAAMC,kBAAkB,GAAG,CACzB,YAAY,EACZ,MAAM,EACN,UAAU,EACV,WAAW,EACX,KAAK,EACL,SAAS,EACT,aAAa,EACb,OAAO,EACP,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,UAAU,EACV,MAAM,EACN,YAAY,CACb;AAED,MAAMC,OAAO,gBAAGL,KAAK,CAACM,UAAU,CAAC,CAAAC,IAAA,EAI9BC,GAAG;EAAA,IAJ4B;MAChCC,QAAQ;MACRC;IAEF,CAAC,GAAAH,IAAA;IADII,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAAA,oBAERb,KAAA,CAAAc,aAAA,CAACX,WAAW,EAAAY,QAAA,KACNJ,KAAK;IACTK,SAAS,EAAEd,UAAU,CAAC;MAAE,eAAe,EAAEQ,OAAO,KAAK;IAAQ,CAAC,EAAEC,KAAK,CAACK,SAAS,CAAE;IACjFR,GAAG,EAAEA;EAAI,IAERC,QACU,CAAC;AAAA,CACf,CAAC;AAEFJ,OAAO,CAACY,SAAS,GAAAC,aAAA,CAAAA,aAAA,KACZf,WAAW,CAACc,SAAS;EACxB;EACAE,EAAE,EAAElB,SAAS,CAACmB,MAAM,CAACC,UAAU;EAC/B;AACF;AACA;AACA;AACA;EACEC,SAAS,EAAErB,SAAS,CAACsB,KAAK,CAACnB,kBAAkB,CAAC;EAC9C;AACF;AACA;AACA;AACA;EACEoB,UAAU,EAAEvB,SAAS,CAACwB,KAAK,CAAC;IAC1BjB,GAAG,EAAEP,SAAS,CAACyB,SAAS,CAAC,CACvBzB,SAAS,CAAC0B,IAAI,EACd1B,SAAS,CAACwB,KAAK,CAAC;MAAEG,OAAO,EAAE3B,SAAS,CAAC4B;IAAQ,CAAC,CAAC,CAChD,CAAC;IACFC,KAAK,EAAE7B,SAAS,CAACwB,KAAK,CAAC,CAAC,CAAC;EAC3B,CAAC,CAAC;EACF;EACAM,IAAI,EAAE9B,SAAS,CAAC+B,IAAI;EACpB;EACAC,MAAM,EAAEhC,SAAS,CAACwB,KAAK,CAAC,CAAC,CAAC,CAAC;EAC3B;EACAS,QAAQ,EAAEjC,SAAS,CAACmB,MAAM;EAC1B;EACAX,QAAQ,EAAER,SAAS,CAACkC,IAAI;EACxB;EACAnB,SAAS,EAAEf,SAAS,CAACmB,MAAM;EAC3B;EACAV,OAAO,EAAET,SAAS,CAACmB;AAAM,EAC1B;AAEDf,OAAO,CAAC+B,YAAY,GAAAlB,aAAA,CAAAA,aAAA,KACfb,OAAO,CAAC+B,YAAY;EACvBjB,EAAE,EAAEkB,SAAS;EACbf,SAAS,EAAE,OAAO;EAClBE,UAAU,EAAEa,SAAS;EACrBN,IAAI,EAAEM,SAAS;EACfJ,MAAM,EAAEI,SAAS;EACjB5B,QAAQ,EAAE4B,SAAS;EACnBrB,SAAS,EAAEqB,SAAS;EACpB3B,OAAO,EAAE2B,SAAS;EAClBH,QAAQ,EAAE;AAAS,EACpB;AAED,eAAe7B,OAAO"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","BaseTooltip","PLACEMENT_VARIANTS","Tooltip","forwardRef","_ref","ref","children","variant","props","_objectWithoutProperties","_excluded","createElement","_extends","className","propTypes","_objectSpread","id","string","isRequired","placement","oneOf","arrowProps","shape","oneOfType","func","current","element","style","show","bool","popper","bsPrefix","node","defaultProps","undefined"],"sources":["../../src/Tooltip/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport BaseTooltip from 'react-bootstrap/Tooltip';\n\nconst PLACEMENT_VARIANTS = [\n  'auto-start',\n  'auto',\n  'auto-end',\n  'top-start',\n  'top',\n  'top-end',\n  'right-start',\n  'right',\n  'right-end',\n  'bottom-end',\n  'bottom',\n  'bottom-start',\n  'left-end',\n  'left',\n  'left-start',\n];\n\nconst Tooltip = React.forwardRef(({\n  children,\n  variant,\n  ...props\n}, ref) => (\n  <BaseTooltip\n    {...props}\n    className={classNames({ 'tooltip-light': variant === 'light' }, props.className)}\n    ref={ref}\n  >\n    {children}\n  </BaseTooltip>\n));\n\nTooltip.propTypes = {\n  ...BaseTooltip.propTypes,\n  /** An html id attribute, necessary for accessibility. */\n  id: PropTypes.string.isRequired,\n  /**\n   * Sets the direction the `Tooltip` is positioned towards.\n   *\n   * This is generally provided by the `Overlay` component positioning the tooltip.\n   */\n  placement: PropTypes.oneOf(PLACEMENT_VARIANTS),\n  /**\n   * An `Overlay` injected set of props for positioning the `Tooltip` arrow.\n   *\n   * This is generally provided by the `Overlay` component positioning the tooltip.\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  /** Whether the `Overlay` is shown. */\n  show: PropTypes.bool,\n  /** A `Popper.js` config object passed to the the underlying popper instance. */\n  popper: PropTypes.shape({}),\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n  /** Specifies the content of the `Tooltip` */\n  children: PropTypes.node,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n  /** The visual style of the `Tooltip` */\n  variant: PropTypes.string,\n};\n\nTooltip.defaultProps = {\n  ...Tooltip.defaultProps,\n  id: undefined,\n  placement: 'right',\n  arrowProps: undefined,\n  show: undefined,\n  popper: undefined,\n  children: undefined,\n  className: undefined,\n  variant: undefined,\n  bsPrefix: 'tooltip',\n};\n\nexport default Tooltip;\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,WAAW,MAAM,yBAAyB;AAEjD,IAAMC,kBAAkB,GAAG,CACzB,YAAY,EACZ,MAAM,EACN,UAAU,EACV,WAAW,EACX,KAAK,EACL,SAAS,EACT,aAAa,EACb,OAAO,EACP,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,UAAU,EACV,MAAM,EACN,YAAY,CACb;AAED,IAAMC,OAAO,gBAAGL,KAAK,CAACM,UAAU,CAAC,UAAAC,IAAA,EAI9BC,GAAG;EAAA,IAHJC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACJC,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAAA,oBAERb,KAAA,CAAAc,aAAA,CAACX,WAAW,EAAAY,QAAA,KACNJ,KAAK;IACTK,SAAS,EAAEd,UAAU,CAAC;MAAE,eAAe,EAAEQ,OAAO,KAAK;IAAQ,CAAC,EAAEC,KAAK,CAACK,SAAS,CAAE;IACjFR,GAAG,EAAEA;EAAI,IAERC,QACU,CAAC;AAAA,CACf,CAAC;AAEFJ,OAAO,CAACY,SAAS,GAAAC,aAAA,CAAAA,aAAA,KACZf,WAAW,CAACc,SAAS;EACxB;EACAE,EAAE,EAAElB,SAAS,CAACmB,MAAM,CAACC,UAAU;EAC/B;AACF;AACA;AACA;AACA;EACEC,SAAS,EAAErB,SAAS,CAACsB,KAAK,CAACnB,kBAAkB,CAAC;EAC9C;AACF;AACA;AACA;AACA;EACEoB,UAAU,EAAEvB,SAAS,CAACwB,KAAK,CAAC;IAC1BjB,GAAG,EAAEP,SAAS,CAACyB,SAAS,CAAC,CACvBzB,SAAS,CAAC0B,IAAI,EACd1B,SAAS,CAACwB,KAAK,CAAC;MAAEG,OAAO,EAAE3B,SAAS,CAAC4B;IAAQ,CAAC,CAAC,CAChD,CAAC;IACFC,KAAK,EAAE7B,SAAS,CAACwB,KAAK,CAAC,CAAC,CAAC;EAC3B,CAAC,CAAC;EACF;EACAM,IAAI,EAAE9B,SAAS,CAAC+B,IAAI;EACpB;EACAC,MAAM,EAAEhC,SAAS,CAACwB,KAAK,CAAC,CAAC,CAAC,CAAC;EAC3B;EACAS,QAAQ,EAAEjC,SAAS,CAACmB,MAAM;EAC1B;EACAX,QAAQ,EAAER,SAAS,CAACkC,IAAI;EACxB;EACAnB,SAAS,EAAEf,SAAS,CAACmB,MAAM;EAC3B;EACAV,OAAO,EAAET,SAAS,CAACmB;AAAM,EAC1B;AAEDf,OAAO,CAAC+B,YAAY,GAAAlB,aAAA,CAAAA,aAAA,KACfb,OAAO,CAAC+B,YAAY;EACvBjB,EAAE,EAAEkB,SAAS;EACbf,SAAS,EAAE,OAAO;EAClBE,UAAU,EAAEa,SAAS;EACrBN,IAAI,EAAEM,SAAS;EACfJ,MAAM,EAAEI,SAAS;EACjB5B,QAAQ,EAAE4B,SAAS;EACnBrB,SAAS,EAAEqB,SAAS;EACpB3B,OAAO,EAAE2B,SAAS;EAClBH,QAAQ,EAAE;AAAS,EACpB;AAED,eAAe7B,OAAO"}

package/dist/Tooltip/index.scss

@@ -1,163 +1,37 @@
-// Base class
-.tooltip {
-  position: absolute;
-  z-index: var(--pgn-elevation-tooltip-zindex);
-  display: block;
-  margin: var(--pgn-spacing-tooltip-margin);
-  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
-  // So reset our font and text properties to avoid inheriting weird values.
-  @include reset-text();
-  @include font-size(var(--pgn-typography-tooltip-font-size));
-  // Allow breaking very long words so they don't overflow the tooltip's bounds
-  word-wrap: break-word;
-  opacity: 0;
-  filter: var(--pgn-elevation-tooltip-box-shadow);
-
-  &.show {
-    opacity: var(--pgn-other-tooltip-opacity);
-  }
-
-  .arrow {
-    position: absolute;
-    display: block;
-    width: var(--pgn-size-tooltip-arrow-width);
-    height: var(--pgn-size-tooltip-arrow-height);
-
-    &::before {
-      position: absolute;
-      content: "";
-      border-color: transparent;
-      border-style: solid;
-    }
-  }
-}
-
-.bs-tooltip-top {
-  padding: var(--pgn-size-tooltip-arrow-height) 0;
-
-  .arrow {
-    bottom: 0;
-
-    &::before {
-      top: 0;
-      border-width: var(--pgn-size-tooltip-arrow-height) calc(var(--pgn-size-tooltip-arrow-width) * .5) 0;
-      border-top-color: var(--pgn-color-tooltip-arrow-base);
-    }
-  }
-}
-
-.bs-tooltip-right {
-  padding: 0 var(--pgn-size-tooltip-arrow-height);
-
-  .arrow {
-    left: 0;
-    width: var(--pgn-size-tooltip-arrow-height);
-    height: var(--pgn-size-tooltip-arrow-width);
-
-    &::before {
-      right: 0;
-      border-width:
-        calc(var(--pgn-size-tooltip-arrow-width) * .5)
-        var(--pgn-size-tooltip-arrow-height)
-        calc(var(--pgn-size-tooltip-arrow-width) * .5) 0;
-      border-right-color: var(--pgn-color-tooltip-arrow-base);
-    }
-  }
-}
-
-.bs-tooltip-bottom {
-  padding: var(--pgn-size-tooltip-arrow-height) 0;
+@import "variables";
+@import "~bootstrap/scss/tooltip";
 
-  .arrow {
-    top: 0;
-
-    &::before {
-      bottom: 0;
-      border-width: 0 calc(var(--pgn-size-tooltip-arrow-width) * .5) var(--pgn-size-tooltip-arrow-height);
-      border-bottom-color: var(--pgn-color-tooltip-arrow-base);
-    }
-  }
-}
-
-.bs-tooltip-left {
-  padding: 0 var(--pgn-size-tooltip-arrow-height);
-
-  .arrow {
-    right: 0;
-    width: var(--pgn-size-tooltip-arrow-height);
-    height: var(--pgn-size-tooltip-arrow-width);
-
-    &::before {
-      left: 0;
-      border-width:
-        calc(var(--pgn-size-tooltip-arrow-width) * .5) 0
-        calc(var(--pgn-size-tooltip-arrow-width) * .5)
-        var(--pgn-size-tooltip-arrow-height);
-      border-left-color: var(--pgn-color-tooltip-arrow-base);
-    }
-  }
-}
-
-.bs-tooltip-auto {
-  &[x-placement^="top"] {
-    // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
-    @extend .bs-tooltip-top;
-  }
-
-  &[x-placement^="right"] {
-    // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
-    @extend .bs-tooltip-right;
-  }
-
-  &[x-placement^="bottom"] {
-    // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
-    @extend .bs-tooltip-bottom;
-  }
-
-  &[x-placement^="left"] {
-    // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
-    @extend .bs-tooltip-left;
-  }
-}
-
-// Wrapper for the tooltip content
-.tooltip-inner {
-  max-width: var(--pgn-size-tooltip-max-width);
-  padding: var(--pgn-spacing-tooltip-padding-y) var(--pgn-spacing-tooltip-padding-x);
-  color: var(--pgn-color-tooltip-text);
-  text-align: center;
-  background-color: var(--pgn-color-tooltip-bg-base);
-
-  @include border-radius(var(--pgn-size-tooltip-border-radius));
+.tooltip {
+  filter: $tooltip-box-shadow;
 }
 
 .tooltip-light {
   .tooltip-inner {
-    color: var(--pgn-color-tooltip-light);
-    background-color: var(--pgn-color-tooltip-bg-light);
+    color: $tooltip-color-light;
+    background-color: $tooltip-bg-light;
   }
 
   &.bs-tooltip-top .arrow {
     &::before {
-      border-top-color: var(--pgn-color-tooltip-arrow-light);
+      border-top-color: $tooltip-arrow-color-light;
     }
   }
 
   &.bs-tooltip-right .arrow {
     &::before {
-      border-right-color: var(--pgn-color-tooltip-arrow-light);
+      border-right-color: $tooltip-arrow-color-light;
     }
   }
 
   &.bs-tooltip-bottom .arrow {
     &::before {
-      border-bottom-color: var(--pgn-color-tooltip-arrow-light);
+      border-bottom-color: $tooltip-arrow-color-light;
     }
   }
 
   &.bs-tooltip-left .arrow {
     &::before {
-      border-left-color: var(--pgn-color-tooltip-arrow-light);
+      border-left-color: $tooltip-arrow-color-light;
     }
   }
 }

package/dist/TransitionReplace/DemoTransitionReplace.js

@@ -1,7 +1,13 @@
+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; }
 import React, { useState } from 'react';
 import TransitionReplace from './index';
 export default function DemoTransitionReplace() {
-  const contentOptions = [/*#__PURE__*/React.createElement("blockquote", {
+  var contentOptions = [/*#__PURE__*/React.createElement("blockquote", {
     className: "h2 m-0",
     key: 0
   }, /*#__PURE__*/React.createElement("p", null, "You know the golden rule, don\u2019t you boy? Those who have the gold make the rules."), /*#__PURE__*/React.createElement("footer", null, "\u2014 Crazy hunch-backed old guy in Aladdin")), /*#__PURE__*/React.createElement("blockquote", {
@@ -14,8 +20,11 @@ export default function DemoTransitionReplace() {
     className: "m-0",
     key: 3
   }, /*#__PURE__*/React.createElement("p", null, "The first time I see a jogger smiling, I\u2019ll consider it."), /*#__PURE__*/React.createElement("footer", null, "\u2014 Joan Rivers"))];
-  const [currentContentIndex, setCurrentContentIndex] = useState(0);
-  const changeContent = () => {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentContentIndex = _useState2[0],
+    setCurrentContentIndex = _useState2[1];
+  var changeContent = function changeContent() {
     setCurrentContentIndex((currentContentIndex + 1) % contentOptions.length);
   };
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {

package/dist/TransitionReplace/DemoTransitionReplace.js.map

@@ -1 +1 @@
-{"version":3,"file":"DemoTransitionReplace.js","names":["React","useState","TransitionReplace","DemoTransitionReplace","contentOptions","createElement","className","key","currentContentIndex","setCurrentContentIndex","changeContent","length","onClick","style","background","padding","maxWidth"],"sources":["../../src/TransitionReplace/DemoTransitionReplace.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport TransitionReplace from './index';\n\nexport default function DemoTransitionReplace() {\n  const contentOptions = [\n    (\n      <blockquote className=\"h2 m-0\" key={0}>\n        <p>You know the golden rule, don’t you boy? Those who have the gold make the rules.</p>\n        <footer>— Crazy hunch-backed old guy in Aladdin</footer>\n      </blockquote>\n    ),\n    (\n      <blockquote className=\"m-0\" key={1}>\n        <p>People say nothing is impossible, but I do nothing every day.</p>\n        <footer>— A. A. Milne</footer>\n      </blockquote>\n    ),\n    (\n      <blockquote className=\"h2 m-0\" key={2}>\n        <p>\n          I won’t go into a big spiel about reincarnation, but the first time I was in the\n          Gucci store in Chicago was the closest I’ve ever felt to home.\n        </p>\n        <footer>— Kanye</footer>\n      </blockquote>\n    ),\n    (\n      <blockquote className=\"m-0\" key={3}>\n        <p>The first time I see a jogger smiling, I’ll consider it.</p>\n        <footer>— Joan Rivers</footer>\n      </blockquote>\n    ),\n  ];\n\n  const [currentContentIndex, setCurrentContentIndex] = useState(0);\n  const changeContent = () => {\n    setCurrentContentIndex((currentContentIndex + 1) % contentOptions.length);\n  };\n\n  return (\n    <div>\n      {/*  eslint-disable-next-line react/button-has-type */}\n      <button className=\"btn btn-primary mb-2\" onClick={changeContent}>Next Quote</button>\n      <div\n        style={{\n          background: '#eee',\n          padding: '1rem',\n          maxWidth: '15rem',\n        }}\n      >\n        <TransitionReplace>\n          {contentOptions[currentContentIndex]}\n        </TransitionReplace>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,OAAOC,iBAAiB,MAAM,SAAS;AAEvC,eAAe,SAASC,qBAAqBA,CAAA,EAAG;EAC9C,MAAMC,cAAc,GAAG,cAEnBJ,KAAA,CAAAK,aAAA;IAAYC,SAAS,EAAC,QAAQ;IAACC,GAAG,EAAE;EAAE,gBACpCP,KAAA,CAAAK,aAAA,YAAG,uFAAmF,CAAC,eACvFL,KAAA,CAAAK,aAAA,iBAAQ,8CAA+C,CAC7C,CAAC,eAGbL,KAAA,CAAAK,aAAA;IAAYC,SAAS,EAAC,KAAK;IAACC,GAAG,EAAE;EAAE,gBACjCP,KAAA,CAAAK,aAAA,YAAG,+DAAgE,CAAC,eACpEL,KAAA,CAAAK,aAAA,iBAAQ,oBAAqB,CACnB,CAAC,eAGbL,KAAA,CAAAK,aAAA;IAAYC,SAAS,EAAC,QAAQ;IAACC,GAAG,EAAE;EAAE,gBACpCP,KAAA,CAAAK,aAAA,YAAG,2JAGA,CAAC,eACJL,KAAA,CAAAK,aAAA,iBAAQ,cAAe,CACb,CAAC,eAGbL,KAAA,CAAAK,aAAA;IAAYC,SAAS,EAAC,KAAK;IAACC,GAAG,EAAE;EAAE,gBACjCP,KAAA,CAAAK,aAAA,YAAG,+DAA2D,CAAC,eAC/DL,KAAA,CAAAK,aAAA,iBAAQ,oBAAqB,CACnB,CAAC,CAEhB;EAED,MAAM,CAACG,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGR,QAAQ,CAAC,CAAC,CAAC;EACjE,MAAMS,aAAa,GAAGA,CAAA,KAAM;IAC1BD,sBAAsB,CAAC,CAACD,mBAAmB,GAAG,CAAC,IAAIJ,cAAc,CAACO,MAAM,CAAC;EAC3E,CAAC;EAED,oBACEX,KAAA,CAAAK,aAAA,2BAEEL,KAAA,CAAAK,aAAA;IAAQC,SAAS,EAAC,sBAAsB;IAACM,OAAO,EAAEF;EAAc,GAAC,YAAkB,CAAC,eACpFV,KAAA,CAAAK,aAAA;IACEQ,KAAK,EAAE;MACLC,UAAU,EAAE,MAAM;MAClBC,OAAO,EAAE,MAAM;MACfC,QAAQ,EAAE;IACZ;EAAE,gBAEFhB,KAAA,CAAAK,aAAA,CAACH,iBAAiB,QACfE,cAAc,CAACI,mBAAmB,CAClB,CAChB,CACF,CAAC;AAEV"}
+{"version":3,"file":"DemoTransitionReplace.js","names":["React","useState","TransitionReplace","DemoTransitionReplace","contentOptions","createElement","className","key","_useState","_useState2","_slicedToArray","currentContentIndex","setCurrentContentIndex","changeContent","length","onClick","style","background","padding","maxWidth"],"sources":["../../src/TransitionReplace/DemoTransitionReplace.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport TransitionReplace from './index';\n\nexport default function DemoTransitionReplace() {\n  const contentOptions = [\n    (\n      <blockquote className=\"h2 m-0\" key={0}>\n        <p>You know the golden rule, don’t you boy? Those who have the gold make the rules.</p>\n        <footer>— Crazy hunch-backed old guy in Aladdin</footer>\n      </blockquote>\n    ),\n    (\n      <blockquote className=\"m-0\" key={1}>\n        <p>People say nothing is impossible, but I do nothing every day.</p>\n        <footer>— A. A. Milne</footer>\n      </blockquote>\n    ),\n    (\n      <blockquote className=\"h2 m-0\" key={2}>\n        <p>\n          I won’t go into a big spiel about reincarnation, but the first time I was in the\n          Gucci store in Chicago was the closest I’ve ever felt to home.\n        </p>\n        <footer>— Kanye</footer>\n      </blockquote>\n    ),\n    (\n      <blockquote className=\"m-0\" key={3}>\n        <p>The first time I see a jogger smiling, I’ll consider it.</p>\n        <footer>— Joan Rivers</footer>\n      </blockquote>\n    ),\n  ];\n\n  const [currentContentIndex, setCurrentContentIndex] = useState(0);\n  const changeContent = () => {\n    setCurrentContentIndex((currentContentIndex + 1) % contentOptions.length);\n  };\n\n  return (\n    <div>\n      {/*  eslint-disable-next-line react/button-has-type */}\n      <button className=\"btn btn-primary mb-2\" onClick={changeContent}>Next Quote</button>\n      <div\n        style={{\n          background: '#eee',\n          padding: '1rem',\n          maxWidth: '15rem',\n        }}\n      >\n        <TransitionReplace>\n          {contentOptions[currentContentIndex]}\n        </TransitionReplace>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,OAAOC,iBAAiB,MAAM,SAAS;AAEvC,eAAe,SAASC,qBAAqBA,CAAA,EAAG;EAC9C,IAAMC,cAAc,GAAG,cAEnBJ,KAAA,CAAAK,aAAA;IAAYC,SAAS,EAAC,QAAQ;IAACC,GAAG,EAAE;EAAE,gBACpCP,KAAA,CAAAK,aAAA,YAAG,uFAAmF,CAAC,eACvFL,KAAA,CAAAK,aAAA,iBAAQ,8CAA+C,CAC7C,CAAC,eAGbL,KAAA,CAAAK,aAAA;IAAYC,SAAS,EAAC,KAAK;IAACC,GAAG,EAAE;EAAE,gBACjCP,KAAA,CAAAK,aAAA,YAAG,+DAAgE,CAAC,eACpEL,KAAA,CAAAK,aAAA,iBAAQ,oBAAqB,CACnB,CAAC,eAGbL,KAAA,CAAAK,aAAA;IAAYC,SAAS,EAAC,QAAQ;IAACC,GAAG,EAAE;EAAE,gBACpCP,KAAA,CAAAK,aAAA,YAAG,2JAGA,CAAC,eACJL,KAAA,CAAAK,aAAA,iBAAQ,cAAe,CACb,CAAC,eAGbL,KAAA,CAAAK,aAAA;IAAYC,SAAS,EAAC,KAAK;IAACC,GAAG,EAAE;EAAE,gBACjCP,KAAA,CAAAK,aAAA,YAAG,+DAA2D,CAAC,eAC/DL,KAAA,CAAAK,aAAA,iBAAQ,oBAAqB,CACnB,CAAC,CAEhB;EAED,IAAAG,SAAA,GAAsDP,QAAQ,CAAC,CAAC,CAAC;IAAAQ,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAA1DG,mBAAmB,GAAAF,UAAA;IAAEG,sBAAsB,GAAAH,UAAA;EAClD,IAAMI,aAAa,GAAG,SAAhBA,aAAaA,CAAA,EAAS;IAC1BD,sBAAsB,CAAC,CAACD,mBAAmB,GAAG,CAAC,IAAIP,cAAc,CAACU,MAAM,CAAC;EAC3E,CAAC;EAED,oBACEd,KAAA,CAAAK,aAAA,2BAEEL,KAAA,CAAAK,aAAA;IAAQC,SAAS,EAAC,sBAAsB;IAACS,OAAO,EAAEF;EAAc,GAAC,YAAkB,CAAC,eACpFb,KAAA,CAAAK,aAAA;IACEW,KAAK,EAAE;MACLC,UAAU,EAAE,MAAM;MAClBC,OAAO,EAAE,MAAM;MACfC,QAAQ,EAAE;IACZ;EAAE,gBAEFnB,KAAA,CAAAK,aAAA,CAACH,iBAAiB,QACfE,cAAc,CAACO,mBAAmB,CAClB,CAChB,CACF,CAAC;AAEV"}