@openedx/paragon 22.0.0-alpha.23 → 22.0.0

package/dist/SelectableBox/index.js

@@ -1,10 +1,11 @@
-const _excluded = ["type", "value", "checked", "children", "isIndeterminate", "isInvalid", "onClick", "onFocus", "inputHidden", "className", "showActiveBoxState"];
+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 = ["type", "value", "checked", "children", "isIndeterminate", "isInvalid", "onClick", "onFocus", "inputHidden", "className", "showActiveBoxState"];
 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, { useRef, useEffect } from 'react';
@@ -14,30 +15,27 @@ import SelectableBoxSet from './SelectableBoxSet';
 import { useCheckboxSetContext } from '../Form/FormCheckboxSetContext';
 import { useRadioSetContext } from '../Form/FormRadioSetContext';
 import { getInputType } from './utils';
-const INPUT_TYPES = ['radio', 'checkbox'];
-const SelectableBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      type,
-      value,
-      checked,
-      children,
-      isIndeterminate,
-      isInvalid,
-      onClick,
-      onFocus,
-      inputHidden,
-      className,
-      showActiveBoxState
-    } = _ref,
+var INPUT_TYPES = ['radio', 'checkbox'];
+var SelectableBox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var type = _ref.type,
+    value = _ref.value,
+    checked = _ref.checked,
+    children = _ref.children,
+    isIndeterminate = _ref.isIndeterminate,
+    isInvalid = _ref.isInvalid,
+    onClick = _ref.onClick,
+    onFocus = _ref.onFocus,
+    inputHidden = _ref.inputHidden,
+    className = _ref.className,
+    showActiveBoxState = _ref.showActiveBoxState,
     props = _objectWithoutProperties(_ref, _excluded);
-  const inputType = getInputType('SelectableBox', type);
-  const {
-    value: radioValue
-  } = useRadioSetContext();
-  const {
-    value: checkboxValues = []
-  } = useCheckboxSetContext();
-  const isChecked = () => {
+  var inputType = getInputType('SelectableBox', type);
+  var _useRadioSetContext = useRadioSetContext(),
+    radioValue = _useRadioSetContext.value;
+  var _useCheckboxSetContex = useCheckboxSetContext(),
+    _useCheckboxSetContex2 = _useCheckboxSetContex.value,
+    checkboxValues = _useCheckboxSetContex2 === void 0 ? [] : _useCheckboxSetContex2;
+  var isChecked = function isChecked() {
     switch (type) {
       case 'radio':
         return radioValue === value;
@@ -47,26 +45,32 @@ const SelectableBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         return radioValue === value;
     }
   };
-  const inputRef = useRef(null);
-  const input = /*#__PURE__*/React.createElement(inputType, _objectSpread({
-    value,
-    checked,
+  var inputRef = useRef(null);
+  var input = /*#__PURE__*/React.createElement(inputType, _objectSpread({
+    value: value,
+    checked: checked,
     hidden: inputHidden,
     ref: inputRef,
     tabIndex: -1,
-    onChange: () => {}
+    onChange: function onChange() {}
   }, type === 'checkbox' ? _objectSpread(_objectSpread({}, props), {}, {
-    isIndeterminate
+    isIndeterminate: isIndeterminate
   }) : _objectSpread({}, props)), null);
-  useEffect(() => {
+  useEffect(function () {
     if (onClick && inputRef.current) {
-      inputRef.current.onclick = () => onClick(inputRef.current);
+      inputRef.current.onclick = function () {
+        return onClick(inputRef.current);
+      };
     }
   }, [onClick]);
   return /*#__PURE__*/React.createElement("div", _extends({
     role: "button",
-    onKeyPress: () => inputRef.current.click(),
-    onClick: () => inputRef.current.click(),
+    onKeyPress: function onKeyPress() {
+      return inputRef.current.click();
+    },
+    onClick: function onClick() {
+      return inputRef.current.click();
+    },
     onFocus: onFocus,
     className: classNames('pgn__selectable_box', className, {
       'pgn__selectable_box-active': !inputHidden && !showActiveBoxState ? false : isChecked() || checked,
@@ -104,8 +108,8 @@ SelectableBox.defaultProps = {
   value: undefined,
   checked: false,
   type: 'radio',
-  onClick: () => {},
-  onFocus: () => {},
+  onClick: function onClick() {},
+  onFocus: function onFocus() {},
   inputHidden: true,
   isIndeterminate: false,
   isInvalid: false,

package/dist/SelectableBox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useRef","useEffect","PropTypes","classNames","SelectableBoxSet","useCheckboxSetContext","useRadioSetContext","getInputType","INPUT_TYPES","SelectableBox","forwardRef","_ref","ref","type","value","checked","children","isIndeterminate","isInvalid","onClick","onFocus","inputHidden","className","showActiveBoxState","props","_objectWithoutProperties","_excluded","inputType","radioValue","checkboxValues","isChecked","includes","inputRef","input","createElement","_objectSpread","hidden","tabIndex","onChange","current","onclick","_extends","role","onKeyPress","click","propTypes","node","isRequired","oneOfType","string","number","bool","oneOf","func","defaultProps","undefined","Set"],"sources":["../../src/SelectableBox/index.jsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport SelectableBoxSet from './SelectableBoxSet';\nimport { useCheckboxSetContext } from '../Form/FormCheckboxSetContext';\nimport { useRadioSetContext } from '../Form/FormRadioSetContext';\nimport { getInputType } from './utils';\n\nconst INPUT_TYPES = [\n  'radio',\n  'checkbox',\n];\n\nconst SelectableBox = React.forwardRef(({\n  type,\n  value,\n  checked,\n  children,\n  isIndeterminate,\n  isInvalid,\n  onClick,\n  onFocus,\n  inputHidden,\n  className,\n  showActiveBoxState,\n  ...props\n}, ref) => {\n  const inputType = getInputType('SelectableBox', type);\n  const { value: radioValue } = useRadioSetContext();\n  const { value: checkboxValues = [] } = useCheckboxSetContext();\n\n  const isChecked = () => {\n    switch (type) {\n      case 'radio':\n        return radioValue === value;\n      case 'checkbox':\n        return checkboxValues.includes(value);\n      default:\n        return radioValue === value;\n    }\n  };\n\n  const inputRef = useRef(null);\n  const input = React.createElement(inputType, {\n    value,\n    checked,\n    hidden: inputHidden,\n    ref: inputRef,\n    tabIndex: -1,\n    onChange: () => {},\n    ...(type === 'checkbox' ? { ...props, isIndeterminate } : { ...props }),\n  }, null);\n\n  useEffect(() => {\n    if (onClick && inputRef.current) {\n      inputRef.current.onclick = () => onClick(inputRef.current);\n    }\n  }, [onClick]);\n\n  return (\n    <div\n      role=\"button\"\n      onKeyPress={() => inputRef.current.click()}\n      onClick={() => inputRef.current.click()}\n      onFocus={onFocus}\n      className={classNames('pgn__selectable_box', className, {\n        'pgn__selectable_box-active': (!inputHidden && !showActiveBoxState) ? false : isChecked() || checked,\n        'pgn__selectable_box-invalid': isInvalid,\n      })}\n      tabIndex={0}\n      ref={ref}\n      {...props}\n    >\n      {input}\n      {children}\n    </div>\n  );\n});\n\nSelectableBox.propTypes = {\n  /** Content of the `SelectableBox`. */\n  children: PropTypes.node.isRequired,\n  /** A value that is passed to the input tag. */\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Controls whether `SelectableBox` is checked. */\n  checked: PropTypes.bool,\n  /** Indicates the input type: checkbox or radio. */\n  type: PropTypes.oneOf(INPUT_TYPES),\n  /** Function that is called when the `SelectableBox` is clicked. */\n  onClick: PropTypes.func,\n  /** Function that is called when the `SelectableBox` is focused. */\n  onFocus: PropTypes.func,\n  /** Controls display of the input (checkbox or radio button) on the `SelectableBox`. */\n  inputHidden: PropTypes.bool,\n  /** Indicates a state for the 'checkbox' `type` when `SelectableBox` is neither checked nor unchecked. */\n  isIndeterminate: PropTypes.bool,\n  /** Adds errors styles to the `SelectableBox`. */\n  isInvalid: PropTypes.bool,\n  /** A class that is appended to the base element. */\n  className: PropTypes.string,\n  /** Controls the visibility of the active state for the `SelectableBox`. */\n  showActiveBoxState: PropTypes.bool,\n};\n\nSelectableBox.defaultProps = {\n  value: undefined,\n  checked: false,\n  type: 'radio',\n  onClick: () => {},\n  onFocus: () => {},\n  inputHidden: true,\n  isIndeterminate: false,\n  isInvalid: false,\n  className: undefined,\n  showActiveBoxState: true,\n};\n\nSelectableBox.Set = SelectableBoxSet;\nexport default SelectableBox;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useRef","useEffect","PropTypes","classNames","SelectableBoxSet","useCheckboxSetContext","useRadioSetContext","getInputType","INPUT_TYPES","SelectableBox","forwardRef","_ref","ref","type","value","checked","children","isIndeterminate","isInvalid","onClick","onFocus","inputHidden","className","showActiveBoxState","props","_objectWithoutProperties","_excluded","inputType","_useRadioSetContext","radioValue","_useCheckboxSetContex","_useCheckboxSetContex2","checkboxValues","isChecked","includes","inputRef","input","createElement","_objectSpread","hidden","tabIndex","onChange","current","onclick","_extends","role","onKeyPress","click","propTypes","node","isRequired","oneOfType","string","number","bool","oneOf","func","defaultProps","undefined","Set"],"sources":["../../src/SelectableBox/index.jsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport SelectableBoxSet from './SelectableBoxSet';\nimport { useCheckboxSetContext } from '../Form/FormCheckboxSetContext';\nimport { useRadioSetContext } from '../Form/FormRadioSetContext';\nimport { getInputType } from './utils';\n\nconst INPUT_TYPES = [\n  'radio',\n  'checkbox',\n];\n\nconst SelectableBox = React.forwardRef(({\n  type,\n  value,\n  checked,\n  children,\n  isIndeterminate,\n  isInvalid,\n  onClick,\n  onFocus,\n  inputHidden,\n  className,\n  showActiveBoxState,\n  ...props\n}, ref) => {\n  const inputType = getInputType('SelectableBox', type);\n  const { value: radioValue } = useRadioSetContext();\n  const { value: checkboxValues = [] } = useCheckboxSetContext();\n\n  const isChecked = () => {\n    switch (type) {\n      case 'radio':\n        return radioValue === value;\n      case 'checkbox':\n        return checkboxValues.includes(value);\n      default:\n        return radioValue === value;\n    }\n  };\n\n  const inputRef = useRef(null);\n  const input = React.createElement(inputType, {\n    value,\n    checked,\n    hidden: inputHidden,\n    ref: inputRef,\n    tabIndex: -1,\n    onChange: () => {},\n    ...(type === 'checkbox' ? { ...props, isIndeterminate } : { ...props }),\n  }, null);\n\n  useEffect(() => {\n    if (onClick && inputRef.current) {\n      inputRef.current.onclick = () => onClick(inputRef.current);\n    }\n  }, [onClick]);\n\n  return (\n    <div\n      role=\"button\"\n      onKeyPress={() => inputRef.current.click()}\n      onClick={() => inputRef.current.click()}\n      onFocus={onFocus}\n      className={classNames('pgn__selectable_box', className, {\n        'pgn__selectable_box-active': (!inputHidden && !showActiveBoxState) ? false : isChecked() || checked,\n        'pgn__selectable_box-invalid': isInvalid,\n      })}\n      tabIndex={0}\n      ref={ref}\n      {...props}\n    >\n      {input}\n      {children}\n    </div>\n  );\n});\n\nSelectableBox.propTypes = {\n  /** Content of the `SelectableBox`. */\n  children: PropTypes.node.isRequired,\n  /** A value that is passed to the input tag. */\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Controls whether `SelectableBox` is checked. */\n  checked: PropTypes.bool,\n  /** Indicates the input type: checkbox or radio. */\n  type: PropTypes.oneOf(INPUT_TYPES),\n  /** Function that is called when the `SelectableBox` is clicked. */\n  onClick: PropTypes.func,\n  /** Function that is called when the `SelectableBox` is focused. */\n  onFocus: PropTypes.func,\n  /** Controls display of the input (checkbox or radio button) on the `SelectableBox`. */\n  inputHidden: PropTypes.bool,\n  /** Indicates a state for the 'checkbox' `type` when `SelectableBox` is neither checked nor unchecked. */\n  isIndeterminate: PropTypes.bool,\n  /** Adds errors styles to the `SelectableBox`. */\n  isInvalid: PropTypes.bool,\n  /** A class that is appended to the base element. */\n  className: PropTypes.string,\n  /** Controls the visibility of the active state for the `SelectableBox`. */\n  showActiveBoxState: PropTypes.bool,\n};\n\nSelectableBox.defaultProps = {\n  value: undefined,\n  checked: false,\n  type: 'radio',\n  onClick: () => {},\n  onFocus: () => {},\n  inputHidden: true,\n  isIndeterminate: false,\n  isInvalid: false,\n  className: undefined,\n  showActiveBoxState: true,\n};\n\nSelectableBox.Set = SelectableBoxSet;\nexport default SelectableBox;\n"],"mappings":"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"}

package/dist/SelectableBox/index.scss

@@ -1,9 +1,11 @@
+@import "variables";
+
 .pgn__selectable_box-set {
   display: grid;
   grid-auto-rows: 1fr;
-  grid-gap: var(--pgn-spacing-selectable-box-box-space);
+  grid-gap: $selectable-box-space;
 
-  @for $i from 1 through 12 {
+  @for $i from $min-cols-number through $max-cols-number {
     &.pgn__selectable_box-set--#{$i} {
       grid-template-columns: repeat(#{$i}, 1fr);
     }
@@ -17,21 +19,21 @@
 .pgn__selectable_box {
   position: relative;
   height: 100%;
-  padding: var(--pgn-spacing-selectable-box-padding);
-  box-shadow: var(--pgn-elevation-box-shadow-level-1);
-  border-radius: var(--pgn-spacing-selectable-box-border-radius);
+  padding: $selectable-box-padding;
+  box-shadow: $level-1-box-shadow;
+  border-radius: $selectable-box-border-radius;
   text-align: start;
-  background: var(--pgn-color-white);
+  background: $white;
 
   &:focus-visible {
-    outline: 1px solid var(--pgn-color-primary-700);
+    outline: 1px solid $primary-700;
   }
 
   .pgn__form-radio,
   .pgn__form-checkbox {
     position: absolute;
-    top: var(--pgn-spacing-selectable-box-padding);
-    inset-inline-end: var(--pgn-spacing-selectable-box-padding);
+    top: $selectable-box-padding;
+    inset-inline-end: $selectable-box-padding;
 
     input {
       margin-inline-end: 0;
@@ -44,9 +46,9 @@
 }
 
 .pgn__selectable_box-active {
-  outline: 2px solid var(--pgn-color-primary-500);
+  outline: 2px solid $primary-500;
 }
 
 .pgn__selectable_box-invalid {
-  outline: 2px solid var(--pgn-color-danger-300);
+  outline: 2px solid $danger-300;
 }

package/dist/Sheet/SheetContainer.js

@@ -1,29 +1,51 @@
+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 ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-class SheetContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.sheetRootName = 'sheet-root';
+var SheetContainer = /*#__PURE__*/function (_React$Component) {
+  _inherits(SheetContainer, _React$Component);
+  var _super = _createSuper(SheetContainer);
+  function SheetContainer(props) {
+    var _this;
+    _classCallCheck(this, SheetContainer);
+    _this = _super.call(this, props);
+    _this.sheetRootName = 'sheet-root';
     if (typeof document === 'undefined') {
-      this.rootElement = null;
-    } else if (document.getElementById(this.sheetRootName)) {
-      this.rootElement = document.getElementById(this.sheetRootName);
+      _this.rootElement = null;
+    } else if (document.getElementById(_this.sheetRootName)) {
+      _this.rootElement = document.getElementById(_this.sheetRootName);
     } else {
-      const rootElement = document.createElement('div');
-      rootElement.setAttribute('id', this.sheetRootName);
+      var rootElement = document.createElement('div');
+      rootElement.setAttribute('id', _this.sheetRootName);
       rootElement.setAttribute('class', 'sheet-container');
       rootElement.setAttribute('data-testid', 'sheet-container');
-      this.rootElement = document.body.appendChild(rootElement);
+      _this.rootElement = document.body.appendChild(rootElement);
     }
+    return _this;
   }
-  render() {
-    if (this.rootElement) {
-      return /*#__PURE__*/ReactDOM.createPortal(this.props.children, this.rootElement);
+  _createClass(SheetContainer, [{
+    key: "render",
+    value: function render() {
+      if (this.rootElement) {
+        return /*#__PURE__*/ReactDOM.createPortal(this.props.children, this.rootElement);
+      }
+      return null;
     }
-    return null;
-  }
-}
+  }]);
+  return SheetContainer;
+}(React.Component);
 SheetContainer.propTypes = {
   children: PropTypes.node.isRequired
 };

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"}