@openedx/paragon 22.0.0-alpha.24 → 22.0.0

package/dist/Sheet/SheetContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SheetContainer.js","names":["React","ReactDOM","PropTypes","SheetContainer","Component","constructor","props","sheetRootName","document","rootElement","getElementById","createElement","setAttribute","body","appendChild","render","createPortal","children","propTypes","node","isRequired"],"sources":["../../src/Sheet/SheetContainer.jsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\n\nclass SheetContainer extends React.Component {\n  constructor(props) {\n    super(props);\n    this.sheetRootName = 'sheet-root';\n    if (typeof document === 'undefined') {\n      this.rootElement = null;\n    } else if (document.getElementById(this.sheetRootName)) {\n      this.rootElement = document.getElementById(this.sheetRootName);\n    } else {\n      const rootElement = document.createElement('div');\n      rootElement.setAttribute('id', this.sheetRootName);\n      rootElement.setAttribute('class', 'sheet-container');\n      rootElement.setAttribute('data-testid', 'sheet-container');\n      this.rootElement = document.body.appendChild(rootElement);\n    }\n  }\n\n  render() {\n    if (this.rootElement) {\n      return ReactDOM.createPortal(\n        this.props.children,\n        this.rootElement,\n      );\n    }\n    return null;\n  }\n}\n\nSheetContainer.propTypes = {\n  children: PropTypes.node.isRequired,\n};\n\nexport default SheetContainer;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,WAAW;AAChC,OAAOC,SAAS,MAAM,YAAY;AAElC,MAAMC,cAAc,SAASH,KAAK,CAACI,SAAS,CAAC;EAC3CC,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IACZ,IAAI,CAACC,aAAa,GAAG,YAAY;IACjC,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;MACnC,IAAI,CAACC,WAAW,GAAG,IAAI;IACzB,CAAC,MAAM,IAAID,QAAQ,CAACE,cAAc,CAAC,IAAI,CAACH,aAAa,CAAC,EAAE;MACtD,IAAI,CAACE,WAAW,GAAGD,QAAQ,CAACE,cAAc,CAAC,IAAI,CAACH,aAAa,CAAC;IAChE,CAAC,MAAM;MACL,MAAME,WAAW,GAAGD,QAAQ,CAACG,aAAa,CAAC,KAAK,CAAC;MACjDF,WAAW,CAACG,YAAY,CAAC,IAAI,EAAE,IAAI,CAACL,aAAa,CAAC;MAClDE,WAAW,CAACG,YAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC;MACpDH,WAAW,CAACG,YAAY,CAAC,aAAa,EAAE,iBAAiB,CAAC;MAC1D,IAAI,CAACH,WAAW,GAAGD,QAAQ,CAACK,IAAI,CAACC,WAAW,CAACL,WAAW,CAAC;IAC3D;EACF;EAEAM,MAAMA,CAAA,EAAG;IACP,IAAI,IAAI,CAACN,WAAW,EAAE;MACpB,oBAAOR,QAAQ,CAACe,YAAY,CAC1B,IAAI,CAACV,KAAK,CAACW,QAAQ,EACnB,IAAI,CAACR,WACP,CAAC;IACH;IACA,OAAO,IAAI;EACb;AACF;AAEAN,cAAc,CAACe,SAAS,GAAG;EACzBD,QAAQ,EAAEf,SAAS,CAACiB,IAAI,CAACC;AAC3B,CAAC;AAED,eAAejB,cAAc"}
+{"version":3,"file":"SheetContainer.js","names":["React","ReactDOM","PropTypes","SheetContainer","_React$Component","_inherits","_super","_createSuper","props","_this","_classCallCheck","call","sheetRootName","document","rootElement","getElementById","createElement","setAttribute","body","appendChild","_createClass","key","value","render","createPortal","children","Component","propTypes","node","isRequired"],"sources":["../../src/Sheet/SheetContainer.jsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\n\nclass SheetContainer extends React.Component {\n  constructor(props) {\n    super(props);\n    this.sheetRootName = 'sheet-root';\n    if (typeof document === 'undefined') {\n      this.rootElement = null;\n    } else if (document.getElementById(this.sheetRootName)) {\n      this.rootElement = document.getElementById(this.sheetRootName);\n    } else {\n      const rootElement = document.createElement('div');\n      rootElement.setAttribute('id', this.sheetRootName);\n      rootElement.setAttribute('class', 'sheet-container');\n      rootElement.setAttribute('data-testid', 'sheet-container');\n      this.rootElement = document.body.appendChild(rootElement);\n    }\n  }\n\n  render() {\n    if (this.rootElement) {\n      return ReactDOM.createPortal(\n        this.props.children,\n        this.rootElement,\n      );\n    }\n    return null;\n  }\n}\n\nSheetContainer.propTypes = {\n  children: PropTypes.node.isRequired,\n};\n\nexport default SheetContainer;\n"],"mappings":";;;;;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,WAAW;AAChC,OAAOC,SAAS,MAAM,YAAY;AAAC,IAE7BC,cAAc,0BAAAC,gBAAA;EAAAC,SAAA,CAAAF,cAAA,EAAAC,gBAAA;EAAA,IAAAE,MAAA,GAAAC,YAAA,CAAAJ,cAAA;EAClB,SAAAA,eAAYK,KAAK,EAAE;IAAA,IAAAC,KAAA;IAAAC,eAAA,OAAAP,cAAA;IACjBM,KAAA,GAAAH,MAAA,CAAAK,IAAA,OAAMH,KAAK;IACXC,KAAA,CAAKG,aAAa,GAAG,YAAY;IACjC,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;MACnCJ,KAAA,CAAKK,WAAW,GAAG,IAAI;IACzB,CAAC,MAAM,IAAID,QAAQ,CAACE,cAAc,CAACN,KAAA,CAAKG,aAAa,CAAC,EAAE;MACtDH,KAAA,CAAKK,WAAW,GAAGD,QAAQ,CAACE,cAAc,CAACN,KAAA,CAAKG,aAAa,CAAC;IAChE,CAAC,MAAM;MACL,IAAME,WAAW,GAAGD,QAAQ,CAACG,aAAa,CAAC,KAAK,CAAC;MACjDF,WAAW,CAACG,YAAY,CAAC,IAAI,EAAER,KAAA,CAAKG,aAAa,CAAC;MAClDE,WAAW,CAACG,YAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC;MACpDH,WAAW,CAACG,YAAY,CAAC,aAAa,EAAE,iBAAiB,CAAC;MAC1DR,KAAA,CAAKK,WAAW,GAAGD,QAAQ,CAACK,IAAI,CAACC,WAAW,CAACL,WAAW,CAAC;IAC3D;IAAC,OAAAL,KAAA;EACH;EAACW,YAAA,CAAAjB,cAAA;IAAAkB,GAAA;IAAAC,KAAA,EAED,SAAAC,OAAA,EAAS;MACP,IAAI,IAAI,CAACT,WAAW,EAAE;QACpB,oBAAOb,QAAQ,CAACuB,YAAY,CAC1B,IAAI,CAAChB,KAAK,CAACiB,QAAQ,EACnB,IAAI,CAACX,WACP,CAAC;MACH;MACA,OAAO,IAAI;IACb;EAAC;EAAA,OAAAX,cAAA;AAAA,EAzB0BH,KAAK,CAAC0B,SAAS;AA4B5CvB,cAAc,CAACwB,SAAS,GAAG;EACzBF,QAAQ,EAAEvB,SAAS,CAAC0B,IAAI,CAACC;AAC3B,CAAC;AAED,eAAe1B,cAAc"}

package/dist/Sheet/index.js

@@ -1,60 +1,82 @@
+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); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(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 _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FocusOn } from 'react-focus-on';
 import SheetContainer from './SheetContainer';
-export const POSITIONS = {
+export var POSITIONS = {
   left: 'left',
   right: 'right',
   top: 'top',
   bottom: 'bottom'
 };
-export const VARIANTS = {
+export var VARIANTS = {
   light: 'light',
   dark: 'dark'
 };
-class Sheet extends React.Component {
-  constructor(props) {
-    super(props);
-    this.wrapperRef = /*#__PURE__*/React.createRef();
-    this.renderSheet = this.renderSheet.bind(this);
+var Sheet = /*#__PURE__*/function (_React$Component) {
+  _inherits(Sheet, _React$Component);
+  var _super = _createSuper(Sheet);
+  function Sheet(props) {
+    var _this;
+    _classCallCheck(this, Sheet);
+    _this = _super.call(this, props);
+    _this.wrapperRef = /*#__PURE__*/React.createRef();
+    _this.renderSheet = _this.renderSheet.bind(_assertThisInitialized(_this));
+    return _this;
   }
-  renderSheet() {
-    const {
-      children,
-      position,
-      variant
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames('pgn__sheet-component', `pgn__sheet__${variant}`, position),
-      role: "alert",
-      "aria-live": "polite",
-      "aria-atomic": "true"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "pgn__sheet-content"
-    }, children));
-  }
-  render() {
-    const {
-      blocking,
-      show,
-      onClose
-    } = this.props;
-    if (!show) {
-      return null;
+  _createClass(Sheet, [{
+    key: "renderSheet",
+    value: function renderSheet() {
+      var _this$props = this.props,
+        children = _this$props.children,
+        position = _this$props.position,
+        variant = _this$props.variant;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames('pgn__sheet-component', "pgn__sheet__".concat(variant), position),
+        role: "alert",
+        "aria-live": "polite",
+        "aria-atomic": "true"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "pgn__sheet-content"
+      }, children));
     }
-    return /*#__PURE__*/React.createElement(SheetContainer, null, /*#__PURE__*/React.createElement("div", {
-      className: classNames('pgn__sheet-skrim', {
-        hidden: !blocking
-      }),
-      role: "presentation"
-    }), /*#__PURE__*/React.createElement(FocusOn, {
-      onClickOutside: blocking ? () => {} : onClose,
-      onEscapeKey: blocking ? () => {} : onClose,
-      shards: [this.wrapperRef]
-    }, this.renderSheet()));
-  }
-}
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        blocking = _this$props2.blocking,
+        show = _this$props2.show,
+        onClose = _this$props2.onClose;
+      if (!show) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(SheetContainer, null, /*#__PURE__*/React.createElement("div", {
+        className: classNames('pgn__sheet-skrim', {
+          hidden: !blocking
+        }),
+        role: "presentation"
+      }), /*#__PURE__*/React.createElement(FocusOn, {
+        onClickOutside: blocking ? function () {} : onClose,
+        onEscapeKey: blocking ? function () {} : onClose,
+        shards: [this.wrapperRef]
+      }, this.renderSheet()));
+    }
+  }]);
+  return Sheet;
+}(React.Component);
 Sheet.propTypes = {
   /** specifies whether the sheet provides a click-blocking scrim */
   blocking: PropTypes.bool,
@@ -74,7 +96,7 @@ Sheet.defaultProps = {
   children: undefined,
   position: POSITIONS.bottom,
   show: true,
-  onClose: () => {},
+  onClose: function onClose() {},
   variant: VARIANTS.light
 };
 export default Sheet;

package/dist/Sheet/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","FocusOn","SheetContainer","POSITIONS","left","right","top","bottom","VARIANTS","light","dark","Sheet","Component","constructor","props","wrapperRef","createRef","renderSheet","bind","children","position","variant","createElement","className","role","render","blocking","show","onClose","hidden","onClickOutside","onEscapeKey","shards","propTypes","bool","node","oneOf","func","defaultProps","undefined"],"sources":["../../src/Sheet/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { FocusOn } from 'react-focus-on';\n\nimport SheetContainer from './SheetContainer';\n\nexport const POSITIONS = {\n  left: 'left',\n  right: 'right',\n  top: 'top',\n  bottom: 'bottom',\n};\n\nexport const VARIANTS = {\n  light: 'light',\n  dark: 'dark',\n};\n\nclass Sheet extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.wrapperRef = React.createRef();\n    this.renderSheet = this.renderSheet.bind(this);\n  }\n\n  renderSheet() {\n    const { children, position, variant } = this.props;\n    return (\n      <div\n        className={classNames(\n          'pgn__sheet-component',\n          `pgn__sheet__${variant}`,\n          position,\n        )}\n        role=\"alert\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n      >\n        <div className=\"pgn__sheet-content\">\n          { children }\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const {\n      blocking,\n      show,\n      onClose,\n    } = this.props;\n    if (!show) {\n      return null;\n    }\n    return (\n      <SheetContainer>\n        <div\n          className={classNames(\n            'pgn__sheet-skrim',\n            { hidden: !blocking },\n          )}\n          role=\"presentation\"\n        />\n        <FocusOn\n          onClickOutside={blocking ? () => {} : onClose}\n          onEscapeKey={blocking ? () => {} : onClose}\n          shards={[this.wrapperRef]}\n        >\n          {this.renderSheet()}\n        </FocusOn>\n      </SheetContainer>\n    );\n  }\n}\n\nSheet.propTypes = {\n  /** specifies whether the sheet provides a click-blocking scrim */\n  blocking: PropTypes.bool,\n  /** an element rendered inside the sheet */\n  children: PropTypes.node,\n  /** a string designating the sheet's position on the window */\n  position: PropTypes.oneOf([\n    POSITIONS.left,\n    POSITIONS.right,\n    POSITIONS.top,\n    POSITIONS.bottom,\n  ]),\n  /** Boolean used to control whether the Sheet shows. */\n  show: PropTypes.bool,\n  /** Specifies function that controls `show` value. */\n  onClose: PropTypes.func,\n  /** a string designating which version of the sheet to show (light vs dark) */\n  variant: PropTypes.oneOf([VARIANTS.light, VARIANTS.dark]),\n};\n\nSheet.defaultProps = {\n  blocking: false,\n  children: undefined,\n  position: POSITIONS.bottom,\n  show: true,\n  onClose: () => {},\n  variant: VARIANTS.light,\n};\n\nexport default Sheet;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","FocusOn","SheetContainer","POSITIONS","left","right","top","bottom","VARIANTS","light","dark","Sheet","_React$Component","_inherits","_super","_createSuper","props","_this","_classCallCheck","call","wrapperRef","createRef","renderSheet","bind","_assertThisInitialized","_createClass","key","value","_this$props","children","position","variant","createElement","className","concat","role","render","_this$props2","blocking","show","onClose","hidden","onClickOutside","onEscapeKey","shards","Component","propTypes","bool","node","oneOf","func","defaultProps","undefined"],"sources":["../../src/Sheet/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { FocusOn } from 'react-focus-on';\n\nimport SheetContainer from './SheetContainer';\n\nexport const POSITIONS = {\n  left: 'left',\n  right: 'right',\n  top: 'top',\n  bottom: 'bottom',\n};\n\nexport const VARIANTS = {\n  light: 'light',\n  dark: 'dark',\n};\n\nclass Sheet extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.wrapperRef = React.createRef();\n    this.renderSheet = this.renderSheet.bind(this);\n  }\n\n  renderSheet() {\n    const { children, position, variant } = this.props;\n    return (\n      <div\n        className={classNames(\n          'pgn__sheet-component',\n          `pgn__sheet__${variant}`,\n          position,\n        )}\n        role=\"alert\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n      >\n        <div className=\"pgn__sheet-content\">\n          { children }\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const {\n      blocking,\n      show,\n      onClose,\n    } = this.props;\n    if (!show) {\n      return null;\n    }\n    return (\n      <SheetContainer>\n        <div\n          className={classNames(\n            'pgn__sheet-skrim',\n            { hidden: !blocking },\n          )}\n          role=\"presentation\"\n        />\n        <FocusOn\n          onClickOutside={blocking ? () => {} : onClose}\n          onEscapeKey={blocking ? () => {} : onClose}\n          shards={[this.wrapperRef]}\n        >\n          {this.renderSheet()}\n        </FocusOn>\n      </SheetContainer>\n    );\n  }\n}\n\nSheet.propTypes = {\n  /** specifies whether the sheet provides a click-blocking scrim */\n  blocking: PropTypes.bool,\n  /** an element rendered inside the sheet */\n  children: PropTypes.node,\n  /** a string designating the sheet's position on the window */\n  position: PropTypes.oneOf([\n    POSITIONS.left,\n    POSITIONS.right,\n    POSITIONS.top,\n    POSITIONS.bottom,\n  ]),\n  /** Boolean used to control whether the Sheet shows. */\n  show: PropTypes.bool,\n  /** Specifies function that controls `show` value. */\n  onClose: PropTypes.func,\n  /** a string designating which version of the sheet to show (light vs dark) */\n  variant: PropTypes.oneOf([VARIANTS.light, VARIANTS.dark]),\n};\n\nSheet.defaultProps = {\n  blocking: false,\n  children: undefined,\n  position: POSITIONS.bottom,\n  show: true,\n  onClose: () => {},\n  variant: VARIANTS.light,\n};\n\nexport default Sheet;\n"],"mappings":"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"}

package/dist/Sheet/index.scss

@@ -1,7 +1,7 @@
 .pgn__sheet-skrim {
   width: 100%;
   height: 100%;
-  background-color: var(--pgn-color-sheet-skrim-bg);
+  background-color: rgba(196, 196, 196, .5);
   position: fixed;
   top: 0;
   left: 0;
@@ -10,17 +10,17 @@
     display: none;
   }
 
-  z-index: var(--pgn-elevation-sheet-zindex-backdrop);
+  z-index: $zindex-sheet-backdrop;
 }
 
 %component-left {
   left: 0;
-  box-shadow: 8px 0 16px 0 var(--pgn-color-sheet-skrim-component-box-shadow);
+  box-shadow: 8px 0 16px 0 rgba(0, 0, 0, .15);
 }
 
 %component-right {
   right: 0;
-  box-shadow: -8px 0 16px 0 var(--pgn-color-sheet-skrim-component-box-shadow);
+  box-shadow: -8px 0 16px 0 rgba(0, 0, 0, .15);
 }
 
 .pgn__sheet-component-left {
@@ -34,22 +34,22 @@
 .pgn__sheet-component {
   position: fixed;
   padding: 1.25rem;
-  background-color: var(--pgn-color-white);
-  z-index: var(--pgn-elevation-sheet-zindex-main);
+  background-color: white;
+  z-index: $zindex-sheet;
 
   &.pgn__sheet__dark {
-    background-color: var(--pgn-color-dark-500);
-    color: var(--pgn-color-light-300);
+    background-color: $dark-500;
+    color: $light-300;
   }
 
   &.bottom {
     bottom: 0;
-    box-shadow: 0 -8px 16px 0 var(--pgn-color-sheet-skrim-component-box-shadow);
+    box-shadow: 0 -8px 16px 0 rgba(0, 0, 0, .15);
   }
 
   &.top {
     top: 0;
-    box-shadow: 0 8px 16px 0 var(--pgn-color-sheet-skrim-component-box-shadow);
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .15);
   }
 
   &.left {

package/dist/Spinner/_variables.scss

@@ -0,0 +1,9 @@
+// Spinners
+
+$spinner-width:         2rem !default;
+$spinner-height:        $spinner-width !default;
+$spinner-border-width:  .25em !default;
+
+$spinner-width-sm:        1rem !default;
+$spinner-height-sm:       $spinner-width-sm !default;
+$spinner-border-width-sm: .2em !default;

package/dist/Spinner/index.js

@@ -1,23 +1,22 @@
-const _excluded = ["className", "screenReaderText"];
+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 = ["className", "screenReaderText"];
 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 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 _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';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import BaseSpinner from 'react-bootstrap/Spinner';
-const Spinner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      className,
-      screenReaderText
-    } = _ref,
+var Spinner = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    screenReaderText = _ref.screenReaderText,
     attrs = _objectWithoutProperties(_ref, _excluded);
-  const spinnerProps = _objectSpread(_objectSpread({}, attrs), {}, {
+  var spinnerProps = _objectSpread(_objectSpread({}, attrs), {}, {
     className: classNames('pgn__spinner', className),
     role: screenReaderText ? 'status' : undefined
   });

package/dist/Spinner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","BaseSpinner","Spinner","forwardRef","_ref","ref","className","screenReaderText","attrs","_objectWithoutProperties","_excluded","spinnerProps","_objectSpread","role","undefined","createElement","_extends","propTypes","string","node","defaultProps"],"sources":["../../src/Spinner/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport BaseSpinner from 'react-bootstrap/Spinner';\n\nconst Spinner = React.forwardRef(({\n  className,\n  screenReaderText,\n  ...attrs\n}, ref) => {\n  const spinnerProps = {\n    ...attrs,\n    className: classNames('pgn__spinner', className),\n    role: screenReaderText ? 'status' : undefined,\n  };\n  return (\n    <BaseSpinner {...spinnerProps} ref={ref}>\n      {screenReaderText && <span className=\"sr-only\">{screenReaderText}</span>}\n    </BaseSpinner>\n  );\n});\n\nSpinner.propTypes = {\n  /** Specifies the class name for the component. */\n  className: PropTypes.string,\n  /** Specifies the screen reader content for a11y. */\n  screenReaderText: PropTypes.node,\n};\n\nSpinner.defaultProps = {\n  className: undefined,\n  screenReaderText: undefined,\n};\n\nexport default Spinner;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,WAAW,MAAM,yBAAyB;AAEjD,MAAMC,OAAO,gBAAGJ,KAAK,CAACK,UAAU,CAAC,CAAAC,IAAA,EAI9BC,GAAG,KAAK;EAAA,IAJuB;MAChCC,SAAS;MACTC;IAEF,CAAC,GAAAH,IAAA;IADII,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAER,MAAMC,YAAY,GAAAC,aAAA,CAAAA,aAAA,KACbJ,KAAK;IACRF,SAAS,EAAEN,UAAU,CAAC,cAAc,EAAEM,SAAS,CAAC;IAChDO,IAAI,EAAEN,gBAAgB,GAAG,QAAQ,GAAGO;EAAS,EAC9C;EACD,oBACEhB,KAAA,CAAAiB,aAAA,CAACd,WAAW,EAAAe,QAAA,KAAKL,YAAY;IAAEN,GAAG,EAAEA;EAAI,IACrCE,gBAAgB,iBAAIT,KAAA,CAAAiB,aAAA;IAAMT,SAAS,EAAC;EAAS,GAAEC,gBAAuB,CAC5D,CAAC;AAElB,CAAC,CAAC;AAEFL,OAAO,CAACe,SAAS,GAAG;EAClB;EACAX,SAAS,EAAEP,SAAS,CAACmB,MAAM;EAC3B;EACAX,gBAAgB,EAAER,SAAS,CAACoB;AAC9B,CAAC;AAEDjB,OAAO,CAACkB,YAAY,GAAG;EACrBd,SAAS,EAAEQ,SAAS;EACpBP,gBAAgB,EAAEO;AACpB,CAAC;AAED,eAAeZ,OAAO"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","BaseSpinner","Spinner","forwardRef","_ref","ref","className","screenReaderText","attrs","_objectWithoutProperties","_excluded","spinnerProps","_objectSpread","role","undefined","createElement","_extends","propTypes","string","node","defaultProps"],"sources":["../../src/Spinner/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport BaseSpinner from 'react-bootstrap/Spinner';\n\nconst Spinner = React.forwardRef(({\n  className,\n  screenReaderText,\n  ...attrs\n}, ref) => {\n  const spinnerProps = {\n    ...attrs,\n    className: classNames('pgn__spinner', className),\n    role: screenReaderText ? 'status' : undefined,\n  };\n  return (\n    <BaseSpinner {...spinnerProps} ref={ref}>\n      {screenReaderText && <span className=\"sr-only\">{screenReaderText}</span>}\n    </BaseSpinner>\n  );\n});\n\nSpinner.propTypes = {\n  /** Specifies the class name for the component. */\n  className: PropTypes.string,\n  /** Specifies the screen reader content for a11y. */\n  screenReaderText: PropTypes.node,\n};\n\nSpinner.defaultProps = {\n  className: undefined,\n  screenReaderText: undefined,\n};\n\nexport default Spinner;\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,WAAW,MAAM,yBAAyB;AAEjD,IAAMC,OAAO,gBAAGJ,KAAK,CAACK,UAAU,CAAC,UAAAC,IAAA,EAI9BC,GAAG,EAAK;EAAA,IAHTC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,gBAAgB,GAAAH,IAAA,CAAhBG,gBAAgB;IACbC,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAER,IAAMC,YAAY,GAAAC,aAAA,CAAAA,aAAA,KACbJ,KAAK;IACRF,SAAS,EAAEN,UAAU,CAAC,cAAc,EAAEM,SAAS,CAAC;IAChDO,IAAI,EAAEN,gBAAgB,GAAG,QAAQ,GAAGO;EAAS,EAC9C;EACD,oBACEhB,KAAA,CAAAiB,aAAA,CAACd,WAAW,EAAAe,QAAA,KAAKL,YAAY;IAAEN,GAAG,EAAEA;EAAI,IACrCE,gBAAgB,iBAAIT,KAAA,CAAAiB,aAAA;IAAMT,SAAS,EAAC;EAAS,GAAEC,gBAAuB,CAC5D,CAAC;AAElB,CAAC,CAAC;AAEFL,OAAO,CAACe,SAAS,GAAG;EAClB;EACAX,SAAS,EAAEP,SAAS,CAACmB,MAAM;EAC3B;EACAX,gBAAgB,EAAER,SAAS,CAACoB;AAC9B,CAAC;AAEDjB,OAAO,CAACkB,YAAY,GAAG;EACrBd,SAAS,EAAEQ,SAAS;EACpBP,gBAAgB,EAAEO;AACpB,CAAC;AAED,eAAeZ,OAAO"}

package/dist/Spinner/index.scss

@@ -1,57 +1,2 @@
-@keyframes spinner-border {
-  to { transform: rotate(360deg); }
-}
-
-.spinner-border {
-  display: inline-block;
-  width: var(--pgn-size-spinner-base-width);
-  height: var(--pgn-size-spinner-base-height);
-  vertical-align: calc(var(--pgn-spacing-vertical-align) * -1);
-  border: var(--pgn-size-spinner-base-border-width) solid currentcolor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  animation: .75s linear infinite spinner-border;
-}
-
-.spinner-border-sm {
-  width: var(--pgn-size-spinner-sm-width);
-  height: var(--pgn-size-spinner-sm-height);
-  border-width: var(--pgn-size-spinner-sm-border-width);
-}
-
-@keyframes spinner-grow {
-  0% {
-    transform: scale(0);
-  }
-
-  50% {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.spinner-grow {
-  display: inline-block;
-  width: var(--pgn-size-spinner-base-width);
-  height: var(--pgn-size-spinner-base-height);
-  vertical-align: calc(var(--pgn-spacing-vertical-align) * -1);
-  background-color: currentcolor;
-  border-radius: 50%;
-  opacity: 0;
-  animation: .75s linear infinite spinner-grow;
-}
-
-.spinner-grow-sm {
-  width: var(--pgn-size-spinner-sm-width);
-  height: var(--pgn-size-spinner-sm-height);
-}
-
-@if $enable-prefers-reduced-motion-media-query {
-  @media (prefers-reduced-motion: reduce) {
-    .spinner-border,
-    .spinner-grow {
-      animation-duration: 1.5s;
-    }
-  }
-}
-
+@import "variables";
+@import "~bootstrap/scss/spinners";

package/dist/Stack/_variables.scss

@@ -0,0 +1 @@
+$stack-gap:                       0 !default;

package/dist/Stack/index.js

@@ -1,23 +1,21 @@
-const _excluded = ["direction", "gap", "reversed", "children", "className"];
+var _excluded = ["direction", "gap", "reversed", "children", "className"];
 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; }
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-const DIRECTION_VARIANTS = ['horizontal', 'vertical'];
-const Stack = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-      direction,
-      gap,
-      reversed,
-      children,
-      className
-    } = _ref,
+var DIRECTION_VARIANTS = ['horizontal', 'vertical'];
+var Stack = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var direction = _ref.direction,
+    gap = _ref.gap,
+    reversed = _ref.reversed,
+    children = _ref.children,
+    className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
-    className: classNames(direction === 'horizontal' ? 'pgn__hstack' : 'pgn__vstack', gap ? `pgn__stack-gap--${gap}` : '', reversed ? 'pgn__stack-reversed' : '', className)
+    className: classNames(direction === 'horizontal' ? 'pgn__hstack' : 'pgn__vstack', gap ? "pgn__stack-gap--".concat(gap) : '', reversed ? 'pgn__stack-reversed' : '', className)
   }, rest), children);
 });
 Stack.propTypes = {

package/dist/Stack/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","PropTypes","classNames","DIRECTION_VARIANTS","Stack","_ref","ref","direction","gap","reversed","children","className","rest","_objectWithoutProperties","_excluded","createElement","_extends","propTypes","node","isRequired","oneOf","number","bool","string","defaultProps","undefined"],"sources":["../../src/Stack/index.jsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nconst DIRECTION_VARIANTS = [\n  'horizontal',\n  'vertical',\n];\n\nconst Stack = forwardRef(({\n  direction,\n  gap,\n  reversed,\n  children,\n  className,\n  ...rest\n}, ref) => (\n  <div\n    ref={ref}\n    className={classNames(\n      direction === 'horizontal' ? 'pgn__hstack' : 'pgn__vstack',\n      gap ? `pgn__stack-gap--${gap}` : '',\n      reversed ? 'pgn__stack-reversed' : '',\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </div>\n));\n\nStack.propTypes = {\n  /** Specifies the content of the `Stack`. */\n  children: PropTypes.node.isRequired,\n  /** Specifies direction of the children blocks (column/row). */\n  direction: PropTypes.oneOf(DIRECTION_VARIANTS),\n  /**\n   * Specifies inner space between children blocks.\n   *\n   * Valid values are based on `the spacing classes`:\n   * `0, 0.5, ... 6`.\n   */\n  gap: PropTypes.number,\n  /** Specifies the order of the children. */\n  reversed: PropTypes.bool,\n  /** Specifies an additional `className` to add to the base element. */\n  className: PropTypes.string,\n};\n\nStack.defaultProps = {\n  direction: 'vertical',\n  gap: 0,\n  className: undefined,\n  reversed: false,\n};\n\nexport default Stack;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,MAAMC,kBAAkB,GAAG,CACzB,YAAY,EACZ,UAAU,CACX;AAED,MAAMC,KAAK,gBAAGJ,UAAU,CAAC,CAAAK,IAAA,EAOtBC,GAAG;EAAA,IAPoB;MACxBC,SAAS;MACTC,GAAG;MACHC,QAAQ;MACRC,QAAQ;MACRC;IAEF,CAAC,GAAAN,IAAA;IADIO,IAAI,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAAA,oBAEPf,KAAA,CAAAgB,aAAA,QAAAC,QAAA;IACEV,GAAG,EAAEA,GAAI;IACTK,SAAS,EAAET,UAAU,CACnBK,SAAS,KAAK,YAAY,GAAG,aAAa,GAAG,aAAa,EAC1DC,GAAG,GAAI,mBAAkBA,GAAI,EAAC,GAAG,EAAE,EACnCC,QAAQ,GAAG,qBAAqB,GAAG,EAAE,EACrCE,SACF;EAAE,GACEC,IAAI,GAEPF,QACE,CAAC;AAAA,CACP,CAAC;AAEFN,KAAK,CAACa,SAAS,GAAG;EAChB;EACAP,QAAQ,EAAET,SAAS,CAACiB,IAAI,CAACC,UAAU;EACnC;EACAZ,SAAS,EAAEN,SAAS,CAACmB,KAAK,CAACjB,kBAAkB,CAAC;EAC9C;AACF;AACA;AACA;AACA;AACA;EACEK,GAAG,EAAEP,SAAS,CAACoB,MAAM;EACrB;EACAZ,QAAQ,EAAER,SAAS,CAACqB,IAAI;EACxB;EACAX,SAAS,EAAEV,SAAS,CAACsB;AACvB,CAAC;AAEDnB,KAAK,CAACoB,YAAY,GAAG;EACnBjB,SAAS,EAAE,UAAU;EACrBC,GAAG,EAAE,CAAC;EACNG,SAAS,EAAEc,SAAS;EACpBhB,QAAQ,EAAE;AACZ,CAAC;AAED,eAAeL,KAAK"}
+{"version":3,"file":"index.js","names":["React","forwardRef","PropTypes","classNames","DIRECTION_VARIANTS","Stack","_ref","ref","direction","gap","reversed","children","className","rest","_objectWithoutProperties","_excluded","createElement","_extends","concat","propTypes","node","isRequired","oneOf","number","bool","string","defaultProps","undefined"],"sources":["../../src/Stack/index.jsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nconst DIRECTION_VARIANTS = [\n  'horizontal',\n  'vertical',\n];\n\nconst Stack = forwardRef(({\n  direction,\n  gap,\n  reversed,\n  children,\n  className,\n  ...rest\n}, ref) => (\n  <div\n    ref={ref}\n    className={classNames(\n      direction === 'horizontal' ? 'pgn__hstack' : 'pgn__vstack',\n      gap ? `pgn__stack-gap--${gap}` : '',\n      reversed ? 'pgn__stack-reversed' : '',\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </div>\n));\n\nStack.propTypes = {\n  /** Specifies the content of the `Stack`. */\n  children: PropTypes.node.isRequired,\n  /** Specifies direction of the children blocks (column/row). */\n  direction: PropTypes.oneOf(DIRECTION_VARIANTS),\n  /**\n   * Specifies inner space between children blocks.\n   *\n   * Valid values are based on `the spacing classes`:\n   * `0, 0.5, ... 6`.\n   */\n  gap: PropTypes.number,\n  /** Specifies the order of the children. */\n  reversed: PropTypes.bool,\n  /** Specifies an additional `className` to add to the base element. */\n  className: PropTypes.string,\n};\n\nStack.defaultProps = {\n  direction: 'vertical',\n  gap: 0,\n  className: undefined,\n  reversed: false,\n};\n\nexport default Stack;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,IAAMC,kBAAkB,GAAG,CACzB,YAAY,EACZ,UAAU,CACX;AAED,IAAMC,KAAK,gBAAGJ,UAAU,CAAC,UAAAK,IAAA,EAOtBC,GAAG;EAAA,IANJC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,GAAG,GAAAH,IAAA,CAAHG,GAAG;IACHC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACRC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,SAAS,GAAAN,IAAA,CAATM,SAAS;IACNC,IAAI,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAAA,oBAEPf,KAAA,CAAAgB,aAAA,QAAAC,QAAA;IACEV,GAAG,EAAEA,GAAI;IACTK,SAAS,EAAET,UAAU,CACnBK,SAAS,KAAK,YAAY,GAAG,aAAa,GAAG,aAAa,EAC1DC,GAAG,sBAAAS,MAAA,CAAsBT,GAAG,IAAK,EAAE,EACnCC,QAAQ,GAAG,qBAAqB,GAAG,EAAE,EACrCE,SACF;EAAE,GACEC,IAAI,GAEPF,QACE,CAAC;AAAA,CACP,CAAC;AAEFN,KAAK,CAACc,SAAS,GAAG;EAChB;EACAR,QAAQ,EAAET,SAAS,CAACkB,IAAI,CAACC,UAAU;EACnC;EACAb,SAAS,EAAEN,SAAS,CAACoB,KAAK,CAAClB,kBAAkB,CAAC;EAC9C;AACF;AACA;AACA;AACA;AACA;EACEK,GAAG,EAAEP,SAAS,CAACqB,MAAM;EACrB;EACAb,QAAQ,EAAER,SAAS,CAACsB,IAAI;EACxB;EACAZ,SAAS,EAAEV,SAAS,CAACuB;AACvB,CAAC;AAEDpB,KAAK,CAACqB,YAAY,GAAG;EACnBlB,SAAS,EAAE,UAAU;EACrBC,GAAG,EAAE,CAAC;EACNG,SAAS,EAAEe,SAAS;EACpBjB,QAAQ,EAAE;AACZ,CAAC;AAED,eAAeL,KAAK"}

package/dist/Stack/index.scss

@@ -1,8 +1,10 @@
+@import "variables";
+
 .pgn__vstack,
 .pgn__hstack {
   display: flex;
   align-self: stretch;
-  gap: var(--pgn-size-stack-gap);
+  gap: $stack-gap;
 
   @each $level, $space in $spacers {
     &.pgn__stack-gap--#{$level} {

package/dist/StatefulButton/index.js

@@ -1,4 +1,4 @@
-const _excluded = ["className", "state", "labels", "icons", "disabledStates", "onClick"];
+var _excluded = ["className", "state", "labels", "icons", "disabledStates", "onClick"];
 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; }
@@ -9,25 +9,23 @@ import { Cancel, CheckCircleOutline, SpinnerSimple } from '../../icons';
 import Button from '../Button';
 import Icon from '../Icon';
 function StatefulButton(_ref) {
-  let {
-      className,
-      state,
-      labels,
-      icons,
-      disabledStates,
-      onClick
-    } = _ref,
+  var className = _ref.className,
+    state = _ref.state,
+    labels = _ref.labels,
+    icons = _ref.icons,
+    disabledStates = _ref.disabledStates,
+    _onClick = _ref.onClick,
     attributes = _objectWithoutProperties(_ref, _excluded);
-  const isDisabled = disabledStates.indexOf(state) !== -1;
-  const icon = icons[state] !== undefined ? icons[state] : icons.default;
-  const label = labels[state] !== undefined ? labels[state] : labels.default;
+  var isDisabled = disabledStates.indexOf(state) !== -1;
+  var icon = icons[state] !== undefined ? icons[state] : icons["default"];
+  var label = labels[state] !== undefined ? labels[state] : labels["default"];
   return /*#__PURE__*/React.createElement(Button, _extends({
     "aria-live": "assertive",
     "aria-disabled": isDisabled,
-    className: classNames('pgn__stateful-btn', `pgn__stateful-btn-state-${state}`, className, {
+    className: classNames('pgn__stateful-btn', "pgn__stateful-btn-state-".concat(state), className, {
       disabled: isDisabled
     }),
-    onClick: e => {
+    onClick: function onClick(e) {
       // Swallow clicks if the button is disabled.
       // We do this instead of disabling the button to prevent
       // it from losing focus (disabled elements cannot have focus).
@@ -35,8 +33,8 @@ function StatefulButton(_ref) {
         e.preventDefault();
         return;
       }
-      if (onClick) {
-        onClick(e);
+      if (_onClick) {
+        _onClick(e);
       }
     }
   }, attributes), /*#__PURE__*/React.createElement("span", {
@@ -91,7 +89,7 @@ StatefulButton.defaultProps = {
   className: undefined,
   state: 'default',
   icons: {
-    default: undefined,
+    "default": undefined,
     pending: /*#__PURE__*/React.createElement(Icon, {
       src: SpinnerSimple,
       className: classNames('icon-spin')

package/dist/StatefulButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Cancel","CheckCircleOutline","SpinnerSimple","Button","Icon","StatefulButton","_ref","className","state","labels","icons","disabledStates","onClick","attributes","_objectWithoutProperties","_excluded","isDisabled","indexOf","icon","undefined","default","label","createElement","_extends","disabled","e","preventDefault","propTypes","string","objectOf","node","isRequired","arrayOf","func","defaultProps","pending","src","complete","error"],"sources":["../../src/StatefulButton/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { Cancel, CheckCircleOutline, SpinnerSimple } from '../../icons';\nimport Button from '../Button';\nimport Icon from '../Icon';\n\nfunction StatefulButton({\n  className,\n  state,\n  labels,\n  icons,\n  disabledStates,\n  onClick,\n  ...attributes\n}) {\n  const isDisabled = disabledStates.indexOf(state) !== -1;\n  const icon = icons[state] !== undefined ? icons[state] : icons.default;\n  const label = labels[state] !== undefined ? labels[state] : labels.default;\n\n  return (\n    <Button\n      aria-live=\"assertive\"\n      aria-disabled={isDisabled}\n      className={classNames(\n        'pgn__stateful-btn',\n        `pgn__stateful-btn-state-${state}`,\n        className,\n        { disabled: isDisabled },\n      )}\n      onClick={(e) => {\n        // Swallow clicks if the button is disabled.\n        // We do this instead of disabling the button to prevent\n        // it from losing focus (disabled elements cannot have focus).\n        if (isDisabled) {\n          e.preventDefault();\n          return;\n        }\n\n        if (onClick) {\n          onClick(e);\n        }\n      }}\n      {...attributes}\n    >\n      <span className=\"d-flex align-items-center justify-content-center\">\n        {icon && <span className={classNames({ 'pgn__stateful-btn-icon': !!label })}>{icon}</span>}\n        {label ? <span>{label}</span> : <span className=\"sr-only\">{state}</span>}\n      </span>\n    </Button>\n  );\n}\n\nStatefulButton.propTypes = {\n  className: PropTypes.string,\n  /**\n   * Each state has:\n   * - A label (required)\n   * - An icon\n   * - an option to be disabled\n   *\n   * Control the state with the `state` prop. Example usage:\n   *\n   * ```jsx\n   * <StatefulButton\n   *   state=\"pending\"\n   *   labels={{\n   *     default: 'Download',\n   *     pending: 'Downloading',\n   *     complete: 'Downloaded',\n   *   }}\n   *   icons={{\n   *     default: <Icon className=\"fa fa-download\" />,\n   *     pending: <Icon className=\"fa fa-spinner fa-spin\" />,\n   *     complete: <Icon className=\"fa fa-check\" />,\n   *   }}\n   *   disabledStates=['pending']\n   *   className='btn-primary mr-2'\n   * />\n   * ```\n   */\n  state: PropTypes.string,\n  /** Required. Each state has a `label`. */\n  labels: PropTypes.objectOf(PropTypes.node).isRequired,\n  /** Required. Each state has an `icon`. */\n  icons: PropTypes.objectOf(PropTypes.node),\n  /** Required. Each state has a `disabledState` */\n  disabledStates: PropTypes.arrayOf(PropTypes.string),\n  /** Specifies the callback function when the button is clicked */\n  onClick: PropTypes.func,\n};\n\nStatefulButton.defaultProps = {\n  className: undefined,\n  state: 'default',\n  icons: {\n    default: undefined,\n    pending: <Icon src={SpinnerSimple} className={classNames('icon-spin')} />,\n    complete: <Icon src={CheckCircleOutline} />,\n    error: <Icon src={Cancel} />,\n  },\n  disabledStates: ['pending', 'complete'],\n  onClick: undefined,\n};\n\nexport default StatefulButton;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Cancel","CheckCircleOutline","SpinnerSimple","Button","Icon","StatefulButton","_ref","className","state","labels","icons","disabledStates","onClick","attributes","_objectWithoutProperties","_excluded","isDisabled","indexOf","icon","undefined","label","createElement","_extends","concat","disabled","e","preventDefault","propTypes","string","objectOf","node","isRequired","arrayOf","func","defaultProps","pending","src","complete","error"],"sources":["../../src/StatefulButton/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { Cancel, CheckCircleOutline, SpinnerSimple } from '../../icons';\nimport Button from '../Button';\nimport Icon from '../Icon';\n\nfunction StatefulButton({\n  className,\n  state,\n  labels,\n  icons,\n  disabledStates,\n  onClick,\n  ...attributes\n}) {\n  const isDisabled = disabledStates.indexOf(state) !== -1;\n  const icon = icons[state] !== undefined ? icons[state] : icons.default;\n  const label = labels[state] !== undefined ? labels[state] : labels.default;\n\n  return (\n    <Button\n      aria-live=\"assertive\"\n      aria-disabled={isDisabled}\n      className={classNames(\n        'pgn__stateful-btn',\n        `pgn__stateful-btn-state-${state}`,\n        className,\n        { disabled: isDisabled },\n      )}\n      onClick={(e) => {\n        // Swallow clicks if the button is disabled.\n        // We do this instead of disabling the button to prevent\n        // it from losing focus (disabled elements cannot have focus).\n        if (isDisabled) {\n          e.preventDefault();\n          return;\n        }\n\n        if (onClick) {\n          onClick(e);\n        }\n      }}\n      {...attributes}\n    >\n      <span className=\"d-flex align-items-center justify-content-center\">\n        {icon && <span className={classNames({ 'pgn__stateful-btn-icon': !!label })}>{icon}</span>}\n        {label ? <span>{label}</span> : <span className=\"sr-only\">{state}</span>}\n      </span>\n    </Button>\n  );\n}\n\nStatefulButton.propTypes = {\n  className: PropTypes.string,\n  /**\n   * Each state has:\n   * - A label (required)\n   * - An icon\n   * - an option to be disabled\n   *\n   * Control the state with the `state` prop. Example usage:\n   *\n   * ```jsx\n   * <StatefulButton\n   *   state=\"pending\"\n   *   labels={{\n   *     default: 'Download',\n   *     pending: 'Downloading',\n   *     complete: 'Downloaded',\n   *   }}\n   *   icons={{\n   *     default: <Icon className=\"fa fa-download\" />,\n   *     pending: <Icon className=\"fa fa-spinner fa-spin\" />,\n   *     complete: <Icon className=\"fa fa-check\" />,\n   *   }}\n   *   disabledStates=['pending']\n   *   className='btn-primary mr-2'\n   * />\n   * ```\n   */\n  state: PropTypes.string,\n  /** Required. Each state has a `label`. */\n  labels: PropTypes.objectOf(PropTypes.node).isRequired,\n  /** Required. Each state has an `icon`. */\n  icons: PropTypes.objectOf(PropTypes.node),\n  /** Required. Each state has a `disabledState` */\n  disabledStates: PropTypes.arrayOf(PropTypes.string),\n  /** Specifies the callback function when the button is clicked */\n  onClick: PropTypes.func,\n};\n\nStatefulButton.defaultProps = {\n  className: undefined,\n  state: 'default',\n  icons: {\n    default: undefined,\n    pending: <Icon src={SpinnerSimple} className={classNames('icon-spin')} />,\n    complete: <Icon src={CheckCircleOutline} />,\n    error: <Icon src={Cancel} />,\n  },\n  disabledStates: ['pending', 'complete'],\n  onClick: undefined,\n};\n\nexport default StatefulButton;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,aAAa,QAAQ,aAAa;AACvE,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,IAAI,MAAM,SAAS;AAE1B,SAASC,cAAcA,CAAAC,IAAA,EAQpB;EAAA,IAPDC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,MAAM,GAAAH,IAAA,CAANG,MAAM;IACNC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IACLC,cAAc,GAAAL,IAAA,CAAdK,cAAc;IACdC,QAAO,GAAAN,IAAA,CAAPM,OAAO;IACJC,UAAU,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAEb,IAAMC,UAAU,GAAGL,cAAc,CAACM,OAAO,CAACT,KAAK,CAAC,KAAK,CAAC,CAAC;EACvD,IAAMU,IAAI,GAAGR,KAAK,CAACF,KAAK,CAAC,KAAKW,SAAS,GAAGT,KAAK,CAACF,KAAK,CAAC,GAAGE,KAAK,WAAQ;EACtE,IAAMU,KAAK,GAAGX,MAAM,CAACD,KAAK,CAAC,KAAKW,SAAS,GAAGV,MAAM,CAACD,KAAK,CAAC,GAAGC,MAAM,WAAQ;EAE1E,oBACEZ,KAAA,CAAAwB,aAAA,CAAClB,MAAM,EAAAmB,QAAA;IACL,aAAU,WAAW;IACrB,iBAAeN,UAAW;IAC1BT,SAAS,EAAER,UAAU,CACnB,mBAAmB,6BAAAwB,MAAA,CACQf,KAAK,GAChCD,SAAS,EACT;MAAEiB,QAAQ,EAAER;IAAW,CACzB,CAAE;IACFJ,OAAO,EAAE,SAAAA,QAACa,CAAC,EAAK;MACd;MACA;MACA;MACA,IAAIT,UAAU,EAAE;QACdS,CAAC,CAACC,cAAc,CAAC,CAAC;QAClB;MACF;MAEA,IAAId,QAAO,EAAE;QACXA,QAAO,CAACa,CAAC,CAAC;MACZ;IACF;EAAE,GACEZ,UAAU,gBAEdhB,KAAA,CAAAwB,aAAA;IAAMd,SAAS,EAAC;EAAkD,GAC/DW,IAAI,iBAAIrB,KAAA,CAAAwB,aAAA;IAAMd,SAAS,EAAER,UAAU,CAAC;MAAE,wBAAwB,EAAE,CAAC,CAACqB;IAAM,CAAC;EAAE,GAAEF,IAAW,CAAC,EACzFE,KAAK,gBAAGvB,KAAA,CAAAwB,aAAA,eAAOD,KAAY,CAAC,gBAAGvB,KAAA,CAAAwB,aAAA;IAAMd,SAAS,EAAC;EAAS,GAAEC,KAAY,CACnE,CACA,CAAC;AAEb;AAEAH,cAAc,CAACsB,SAAS,GAAG;EACzBpB,SAAS,EAAET,SAAS,CAAC8B,MAAM;EAC3B;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEpB,KAAK,EAAEV,SAAS,CAAC8B,MAAM;EACvB;EACAnB,MAAM,EAAEX,SAAS,CAAC+B,QAAQ,CAAC/B,SAAS,CAACgC,IAAI,CAAC,CAACC,UAAU;EACrD;EACArB,KAAK,EAAEZ,SAAS,CAAC+B,QAAQ,CAAC/B,SAAS,CAACgC,IAAI,CAAC;EACzC;EACAnB,cAAc,EAAEb,SAAS,CAACkC,OAAO,CAAClC,SAAS,CAAC8B,MAAM,CAAC;EACnD;EACAhB,OAAO,EAAEd,SAAS,CAACmC;AACrB,CAAC;AAED5B,cAAc,CAAC6B,YAAY,GAAG;EAC5B3B,SAAS,EAAEY,SAAS;EACpBX,KAAK,EAAE,SAAS;EAChBE,KAAK,EAAE;IACL,WAASS,SAAS;IAClBgB,OAAO,eAAEtC,KAAA,CAAAwB,aAAA,CAACjB,IAAI;MAACgC,GAAG,EAAElC,aAAc;MAACK,SAAS,EAAER,UAAU,CAAC,WAAW;IAAE,CAAE,CAAC;IACzEsC,QAAQ,eAAExC,KAAA,CAAAwB,aAAA,CAACjB,IAAI;MAACgC,GAAG,EAAEnC;IAAmB,CAAE,CAAC;IAC3CqC,KAAK,eAAEzC,KAAA,CAAAwB,aAAA,CAACjB,IAAI;MAACgC,GAAG,EAAEpC;IAAO,CAAE;EAC7B,CAAC;EACDW,cAAc,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC;EACvCC,OAAO,EAAEO;AACX,CAAC;AAED,eAAed,cAAc"}