@openedx/paragon 22.0.0-alpha.24 → 22.1.0

package/dist/Stepper/StepperHeaderStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperHeaderStep.js","names":["React","useContext","PropTypes","classNames","Check","Error","StepperContext","Icon","Bubble","StepperHeaderStep","_ref","title","isActive","hasError","description","index","onClick","getIsViewed","isComplete","isViewed","stepIcon","createElement","src","errorIcon","isClickable","type","className","onKeyPress","variant","disabled","propTypes","number","isRequired","string","bool","func","defaultProps","undefined"],"sources":["../../src/Stepper/StepperHeaderStep.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { Check, Error } from '../../icons';\nimport { StepperContext } from './StepperContext';\nimport Icon from '../Icon';\nimport Bubble from '../Bubble';\n\nfunction StepperHeaderStep({\n  title,\n  isActive,\n  hasError,\n  description,\n  index,\n  onClick,\n}) {\n  const { getIsViewed } = useContext(StepperContext);\n  const isComplete = getIsViewed(index + 1);\n  const isViewed = getIsViewed(index);\n  const stepIcon = isComplete ? <Icon src={Check} /> : <span>{index + 1}</span>;\n  const errorIcon = <Icon src={Error} data-testid=\"step-error\" />;\n  const isClickable = onClick && isViewed && !isActive;\n\n  if (isClickable) {\n    return (\n      <button\n        type=\"button\"\n        aria-label={`${title} step`}\n        className={classNames(\n          'pgn__stepper-header-step',\n          {\n            'pgn__stepper-header-step-has-error': hasError,\n            'pgn__stepper-header-step-complete': isComplete,\n          },\n        )}\n        onClick={onClick}\n        onKeyPress={onClick}\n      >\n        <Bubble variant={hasError ? 'error' : 'primary'} disabled>\n          {hasError ? errorIcon : stepIcon}\n        </Bubble>\n        <div className=\"pgn__stepper-header-step-title-description\">\n          <div className=\"pgn__stepper-header-step-title\">{title}</div>\n          <div className=\"pgn__stepper-header-step-description\">{description}</div>\n        </div>\n      </button>\n    );\n  }\n\n  return (\n    <li\n      className={classNames(\n        'pgn__stepper-header-step',\n        {\n          'pgn__stepper-header-step-active': isActive,\n          'pgn__stepper-header-step-has-error': hasError,\n          'pgn__stepper-header-step-complete': isComplete,\n        },\n      )}\n      data-testid=\"step\"\n    >\n      <Bubble variant={hasError ? 'error' : 'primary'} disabled={!isActive}>\n        {hasError ? errorIcon : stepIcon}\n      </Bubble>\n      <div className=\"pgn__stepper-header-step-title-description\">\n        <div className=\"pgn__stepper-header-step-title\">{title}</div>\n        <div className=\"pgn__stepper-header-step-description\">{description}</div>\n      </div>\n    </li>\n  );\n}\n\nStepperHeaderStep.propTypes = {\n  /** A number that will be display in the icon of the `HeaderStep`. */\n  index: PropTypes.number.isRequired,\n  /** A text of the `HeaderStep`. */\n  title: PropTypes.string.isRequired,\n  /** Specifies that this `HeaderStep` is active. */\n  isActive: PropTypes.bool,\n  /** Informs user if this `Step` has errors. */\n  hasError: PropTypes.bool,\n  /** A text under the `title`. */\n  description: PropTypes.string,\n  /** Callback fired when element gets clicked. */\n  onClick: PropTypes.func,\n};\n\nStepperHeaderStep.defaultProps = {\n  isActive: false,\n  hasError: false,\n  description: undefined,\n  onClick: undefined,\n};\n\nexport default StepperHeaderStep;\n"],"mappings":"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"}
+{"version":3,"file":"StepperHeaderStep.js","names":["React","useContext","PropTypes","classNames","Check","Error","StepperContext","Icon","Bubble","StepperHeaderStep","_ref","title","isActive","hasError","description","index","onClick","_useContext","getIsViewed","isComplete","isViewed","stepIcon","createElement","src","errorIcon","isClickable","type","concat","className","onKeyPress","variant","disabled","propTypes","number","isRequired","string","bool","func","defaultProps","undefined"],"sources":["../../src/Stepper/StepperHeaderStep.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { Check, Error } from '../../icons';\nimport { StepperContext } from './StepperContext';\nimport Icon from '../Icon';\nimport Bubble from '../Bubble';\n\nfunction StepperHeaderStep({\n  title,\n  isActive,\n  hasError,\n  description,\n  index,\n  onClick,\n}) {\n  const { getIsViewed } = useContext(StepperContext);\n  const isComplete = getIsViewed(index + 1);\n  const isViewed = getIsViewed(index);\n  const stepIcon = isComplete ? <Icon src={Check} /> : <span>{index + 1}</span>;\n  const errorIcon = <Icon src={Error} data-testid=\"step-error\" />;\n  const isClickable = onClick && isViewed && !isActive;\n\n  if (isClickable) {\n    return (\n      <button\n        type=\"button\"\n        aria-label={`${title} step`}\n        className={classNames(\n          'pgn__stepper-header-step',\n          {\n            'pgn__stepper-header-step-has-error': hasError,\n            'pgn__stepper-header-step-complete': isComplete,\n          },\n        )}\n        onClick={onClick}\n        onKeyPress={onClick}\n      >\n        <Bubble variant={hasError ? 'error' : 'primary'} disabled>\n          {hasError ? errorIcon : stepIcon}\n        </Bubble>\n        <div className=\"pgn__stepper-header-step-title-description\">\n          <div className=\"pgn__stepper-header-step-title\">{title}</div>\n          <div className=\"pgn__stepper-header-step-description\">{description}</div>\n        </div>\n      </button>\n    );\n  }\n\n  return (\n    <li\n      className={classNames(\n        'pgn__stepper-header-step',\n        {\n          'pgn__stepper-header-step-active': isActive,\n          'pgn__stepper-header-step-has-error': hasError,\n          'pgn__stepper-header-step-complete': isComplete,\n        },\n      )}\n      data-testid=\"step\"\n    >\n      <Bubble variant={hasError ? 'error' : 'primary'} disabled={!isActive}>\n        {hasError ? errorIcon : stepIcon}\n      </Bubble>\n      <div className=\"pgn__stepper-header-step-title-description\">\n        <div className=\"pgn__stepper-header-step-title\">{title}</div>\n        <div className=\"pgn__stepper-header-step-description\">{description}</div>\n      </div>\n    </li>\n  );\n}\n\nStepperHeaderStep.propTypes = {\n  /** A number that will be display in the icon of the `HeaderStep`. */\n  index: PropTypes.number.isRequired,\n  /** A text of the `HeaderStep`. */\n  title: PropTypes.string.isRequired,\n  /** Specifies that this `HeaderStep` is active. */\n  isActive: PropTypes.bool,\n  /** Informs user if this `Step` has errors. */\n  hasError: PropTypes.bool,\n  /** A text under the `title`. */\n  description: PropTypes.string,\n  /** Callback fired when element gets clicked. */\n  onClick: PropTypes.func,\n};\n\nStepperHeaderStep.defaultProps = {\n  isActive: false,\n  hasError: false,\n  description: undefined,\n  onClick: undefined,\n};\n\nexport default StepperHeaderStep;\n"],"mappings":"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"}

package/dist/Stepper/StepperStep.js

@@ -3,33 +3,32 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { StepperContext } from './StepperContext';
 export default function StepperStep(_ref) {
-  let {
-    children,
-    eventKey,
-    className,
-    title,
-    index,
-    description,
-    hasError,
-    onClick
-  } = _ref;
-  const {
-    activeKey,
-    registerStep,
-    removeStep
-  } = useContext(StepperContext);
-  useEffect(() => {
+  var children = _ref.children,
+    eventKey = _ref.eventKey,
+    className = _ref.className,
+    title = _ref.title,
+    index = _ref.index,
+    description = _ref.description,
+    hasError = _ref.hasError,
+    onClick = _ref.onClick;
+  var _useContext = useContext(StepperContext),
+    activeKey = _useContext.activeKey,
+    registerStep = _useContext.registerStep,
+    removeStep = _useContext.removeStep;
+  useEffect(function () {
     registerStep({
-      title,
-      index,
-      eventKey,
-      description,
-      hasError,
-      onClick
+      title: title,
+      index: index,
+      eventKey: eventKey,
+      description: description,
+      hasError: hasError,
+      onClick: onClick
     });
-    return () => removeStep(eventKey);
+    return function () {
+      return removeStep(eventKey);
+    };
   }, [title, eventKey, description, hasError, index, registerStep, removeStep, onClick]);
-  const isActive = activeKey === eventKey;
+  var isActive = activeKey === eventKey;
   if (!isActive) {
     return null;
   }

package/dist/Stepper/StepperStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperStep.js","names":["React","useContext","useEffect","PropTypes","classNames","StepperContext","StepperStep","_ref","children","eventKey","className","title","index","description","hasError","onClick","activeKey","registerStep","removeStep","isActive","createElement","propTypes","node","isRequired","string","bool","number","func","defaultProps","undefined"],"sources":["../../src/Stepper/StepperStep.jsx"],"sourcesContent":["import React, { useContext, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { StepperContext } from './StepperContext';\n\nexport default function StepperStep({\n  children,\n  eventKey,\n  className,\n  title,\n  index,\n  description,\n  hasError,\n  onClick,\n}) {\n  const { activeKey, registerStep, removeStep } = useContext(StepperContext);\n\n  useEffect(() => {\n    registerStep({\n      title,\n      index,\n      eventKey,\n      description,\n      hasError,\n      onClick,\n    });\n    return () => removeStep(eventKey);\n  }, [title, eventKey, description, hasError, index, registerStep, removeStep, onClick]);\n\n  const isActive = activeKey === eventKey;\n\n  if (!isActive) {\n    return null;\n  }\n\n  return (\n    <div className={classNames('pgn__stepper-step', className)}>\n      {children}\n    </div>\n  );\n}\n\nStepperStep.propTypes = {\n  /** Specifies the content of the `Step`. */\n  children: PropTypes.node.isRequired,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n  /**\n   * An identifier of the `Step`. When `activeKey` on the\n   * `Stepper` equals to the `eventKey`, the `Step` will be displayed.\n   */\n  eventKey: PropTypes.string.isRequired,\n  /** A text of the `Step`. */\n  title: PropTypes.string.isRequired,\n  /** A text under the `title`. */\n  description: PropTypes.string,\n  /** Informs user if this `Step` has errors. */\n  hasError: PropTypes.bool,\n  /**\n   * Position of the `Step`, only required if adding error state\n   * or conditionally rendering steps.\n   * */\n  index: PropTypes.number,\n  /**\n   * Click handler for the `Step`. Takes effect only after the `Step` has been visited, making it clickable\n   * and invoking this function on click. Should be used to provide navigation between steps.\n   */\n  onClick: PropTypes.func,\n};\n\nStepperStep.defaultProps = {\n  className: undefined,\n  description: undefined,\n  hasError: false,\n  index: undefined,\n  onClick: undefined,\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,SAAS,QAAQ,OAAO;AACpD,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,cAAc,QAAQ,kBAAkB;AAEjD,eAAe,SAASC,WAAWA,CAAAC,IAAA,EAShC;EAAA,IATiC;IAClCC,QAAQ;IACRC,QAAQ;IACRC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC,WAAW;IACXC,QAAQ;IACRC;EACF,CAAC,GAAAR,IAAA;EACC,MAAM;IAAES,SAAS;IAAEC,YAAY;IAAEC;EAAW,CAAC,GAAGjB,UAAU,CAACI,cAAc,CAAC;EAE1EH,SAAS,CAAC,MAAM;IACde,YAAY,CAAC;MACXN,KAAK;MACLC,KAAK;MACLH,QAAQ;MACRI,WAAW;MACXC,QAAQ;MACRC;IACF,CAAC,CAAC;IACF,OAAO,MAAMG,UAAU,CAACT,QAAQ,CAAC;EACnC,CAAC,EAAE,CAACE,KAAK,EAAEF,QAAQ,EAAEI,WAAW,EAAEC,QAAQ,EAAEF,KAAK,EAAEK,YAAY,EAAEC,UAAU,EAAEH,OAAO,CAAC,CAAC;EAEtF,MAAMI,QAAQ,GAAGH,SAAS,KAAKP,QAAQ;EAEvC,IAAI,CAACU,QAAQ,EAAE;IACb,OAAO,IAAI;EACb;EAEA,oBACEnB,KAAA,CAAAoB,aAAA;IAAKV,SAAS,EAAEN,UAAU,CAAC,mBAAmB,EAAEM,SAAS;EAAE,GACxDF,QACE,CAAC;AAEV;AAEAF,WAAW,CAACe,SAAS,GAAG;EACtB;EACAb,QAAQ,EAAEL,SAAS,CAACmB,IAAI,CAACC,UAAU;EACnC;EACAb,SAAS,EAAEP,SAAS,CAACqB,MAAM;EAC3B;AACF;AACA;AACA;EACEf,QAAQ,EAAEN,SAAS,CAACqB,MAAM,CAACD,UAAU;EACrC;EACAZ,KAAK,EAAER,SAAS,CAACqB,MAAM,CAACD,UAAU;EAClC;EACAV,WAAW,EAAEV,SAAS,CAACqB,MAAM;EAC7B;EACAV,QAAQ,EAAEX,SAAS,CAACsB,IAAI;EACxB;AACF;AACA;AACA;EACEb,KAAK,EAAET,SAAS,CAACuB,MAAM;EACvB;AACF;AACA;AACA;EACEX,OAAO,EAAEZ,SAAS,CAACwB;AACrB,CAAC;AAEDrB,WAAW,CAACsB,YAAY,GAAG;EACzBlB,SAAS,EAAEmB,SAAS;EACpBhB,WAAW,EAAEgB,SAAS;EACtBf,QAAQ,EAAE,KAAK;EACfF,KAAK,EAAEiB,SAAS;EAChBd,OAAO,EAAEc;AACX,CAAC"}
+{"version":3,"file":"StepperStep.js","names":["React","useContext","useEffect","PropTypes","classNames","StepperContext","StepperStep","_ref","children","eventKey","className","title","index","description","hasError","onClick","_useContext","activeKey","registerStep","removeStep","isActive","createElement","propTypes","node","isRequired","string","bool","number","func","defaultProps","undefined"],"sources":["../../src/Stepper/StepperStep.jsx"],"sourcesContent":["import React, { useContext, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { StepperContext } from './StepperContext';\n\nexport default function StepperStep({\n  children,\n  eventKey,\n  className,\n  title,\n  index,\n  description,\n  hasError,\n  onClick,\n}) {\n  const { activeKey, registerStep, removeStep } = useContext(StepperContext);\n\n  useEffect(() => {\n    registerStep({\n      title,\n      index,\n      eventKey,\n      description,\n      hasError,\n      onClick,\n    });\n    return () => removeStep(eventKey);\n  }, [title, eventKey, description, hasError, index, registerStep, removeStep, onClick]);\n\n  const isActive = activeKey === eventKey;\n\n  if (!isActive) {\n    return null;\n  }\n\n  return (\n    <div className={classNames('pgn__stepper-step', className)}>\n      {children}\n    </div>\n  );\n}\n\nStepperStep.propTypes = {\n  /** Specifies the content of the `Step`. */\n  children: PropTypes.node.isRequired,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n  /**\n   * An identifier of the `Step`. When `activeKey` on the\n   * `Stepper` equals to the `eventKey`, the `Step` will be displayed.\n   */\n  eventKey: PropTypes.string.isRequired,\n  /** A text of the `Step`. */\n  title: PropTypes.string.isRequired,\n  /** A text under the `title`. */\n  description: PropTypes.string,\n  /** Informs user if this `Step` has errors. */\n  hasError: PropTypes.bool,\n  /**\n   * Position of the `Step`, only required if adding error state\n   * or conditionally rendering steps.\n   * */\n  index: PropTypes.number,\n  /**\n   * Click handler for the `Step`. Takes effect only after the `Step` has been visited, making it clickable\n   * and invoking this function on click. Should be used to provide navigation between steps.\n   */\n  onClick: PropTypes.func,\n};\n\nStepperStep.defaultProps = {\n  className: undefined,\n  description: undefined,\n  hasError: false,\n  index: undefined,\n  onClick: undefined,\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,SAAS,QAAQ,OAAO;AACpD,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,cAAc,QAAQ,kBAAkB;AAEjD,eAAe,SAASC,WAAWA,CAAAC,IAAA,EAShC;EAAA,IARDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,SAAS,GAAAH,IAAA,CAATG,SAAS;IACTC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IACLC,KAAK,GAAAL,IAAA,CAALK,KAAK;IACLC,WAAW,GAAAN,IAAA,CAAXM,WAAW;IACXC,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IACRC,OAAO,GAAAR,IAAA,CAAPQ,OAAO;EAEP,IAAAC,WAAA,GAAgDf,UAAU,CAACI,cAAc,CAAC;IAAlEY,SAAS,GAAAD,WAAA,CAATC,SAAS;IAAEC,YAAY,GAAAF,WAAA,CAAZE,YAAY;IAAEC,UAAU,GAAAH,WAAA,CAAVG,UAAU;EAE3CjB,SAAS,CAAC,YAAM;IACdgB,YAAY,CAAC;MACXP,KAAK,EAALA,KAAK;MACLC,KAAK,EAALA,KAAK;MACLH,QAAQ,EAARA,QAAQ;MACRI,WAAW,EAAXA,WAAW;MACXC,QAAQ,EAARA,QAAQ;MACRC,OAAO,EAAPA;IACF,CAAC,CAAC;IACF,OAAO;MAAA,OAAMI,UAAU,CAACV,QAAQ,CAAC;IAAA;EACnC,CAAC,EAAE,CAACE,KAAK,EAAEF,QAAQ,EAAEI,WAAW,EAAEC,QAAQ,EAAEF,KAAK,EAAEM,YAAY,EAAEC,UAAU,EAAEJ,OAAO,CAAC,CAAC;EAEtF,IAAMK,QAAQ,GAAGH,SAAS,KAAKR,QAAQ;EAEvC,IAAI,CAACW,QAAQ,EAAE;IACb,OAAO,IAAI;EACb;EAEA,oBACEpB,KAAA,CAAAqB,aAAA;IAAKX,SAAS,EAAEN,UAAU,CAAC,mBAAmB,EAAEM,SAAS;EAAE,GACxDF,QACE,CAAC;AAEV;AAEAF,WAAW,CAACgB,SAAS,GAAG;EACtB;EACAd,QAAQ,EAAEL,SAAS,CAACoB,IAAI,CAACC,UAAU;EACnC;EACAd,SAAS,EAAEP,SAAS,CAACsB,MAAM;EAC3B;AACF;AACA;AACA;EACEhB,QAAQ,EAAEN,SAAS,CAACsB,MAAM,CAACD,UAAU;EACrC;EACAb,KAAK,EAAER,SAAS,CAACsB,MAAM,CAACD,UAAU;EAClC;EACAX,WAAW,EAAEV,SAAS,CAACsB,MAAM;EAC7B;EACAX,QAAQ,EAAEX,SAAS,CAACuB,IAAI;EACxB;AACF;AACA;AACA;EACEd,KAAK,EAAET,SAAS,CAACwB,MAAM;EACvB;AACF;AACA;AACA;EACEZ,OAAO,EAAEZ,SAAS,CAACyB;AACrB,CAAC;AAEDtB,WAAW,CAACuB,YAAY,GAAG;EACzBnB,SAAS,EAAEoB,SAAS;EACpBjB,WAAW,EAAEiB,SAAS;EACtBhB,QAAQ,EAAE,KAAK;EACfF,KAAK,EAAEkB,SAAS;EAChBf,OAAO,EAAEe;AACX,CAAC"}

package/dist/Stepper/_variables.scss

@@ -0,0 +1,18 @@
+$stepper-header-bg:                                       transparent !default;
+$stepper-header-min-height:                               5.13rem !default;
+$stepper-header-padding-y:                                .75rem !default;
+$stepper-header-padding-x:                                $spacer !default;
+$stepper-header-line-bg:                                  $light !default;
+$stepper-header-line-height:                              1px !default;
+$stepper-header-step-color:                               $primary !default;
+$stepper-header-step-bg:                                  $stepper-header-bg !default;
+$stepper-header-step-border:                              none !default;
+$stepper-header-step-min-width:                           0 !default;
+$stepper-header-step-padding:                             .25rem !default;
+$stepper-header-step-list-padding-y:                      .25rem !default;
+$stepper-header-step-list-padding-x:                      0 !default;
+$stepper-header-step-list-margin:                         0 !default;
+$stepper-header-active-step-bg:                           $gray-500 !default;
+$stepper-header-step-error-bubble-color:                  $danger !default;
+$stepper-header-step-error-bubble-shadow-width:           3px !default;
+$stepper-header-step-error-description-color:             $stepper-header-step-error-bubble-color !default;

package/dist/Stepper/index.scss

@@ -1,42 +1,43 @@
+@import "variables";
+
 .pgn__stepper-header {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: var(--pgn-color-stepper-header-bg-base);
-  padding: var(--pgn-spacing-stepper-header-padding-y) var(--pgn-spacing-stepper-header-padding-x);
-  min-height: var(--pgn-size-stepper-header-height-min);
+  background: $stepper-header-bg;
+  padding: $stepper-header-padding-y $stepper-header-padding-x;
+  min-height: $stepper-header-min-height;
 
   .pgn__stepper-header-step-list {
     list-style: none;
-    // stylelint-disable-next-line max-line-length
-    padding: var(--pgn-spacing-stepper-header-step-list-padding-y) var(--pgn-spacing-stepper-header-step-list-padding-x);
+    padding: $stepper-header-step-list-padding-y $stepper-header-step-list-padding-x;
     display: flex;
     align-items: center;
-    margin: var(--pgn-spacing-stepper-header-step-list-margin);
+    margin: $stepper-header-step-list-margin;
     flex-grow: 1;
     justify-content: center;
 
     .pgn__stepper-header-line {
       display: block;
-      height: var(--pgn-typography-spacer-line-height);
-      background: var(--pgn-color-stepper-header-bg-line);
+      height: $stepper-header-line-height;
+      background: $stepper-header-line-bg;
       flex-basis: 80px;
       margin: 0 .5rem;
     }
 
     button.pgn__stepper-header-step {
-      border: var(--pgn-color-stepper-header-step-border);
-      background-color: var(--pgn-color-stepper-header-bg-base);
+      border: $stepper-header-step-border;
+      background-color: $stepper-header-step-bg;
     }
   }
 
   .pgn__stepper-header-step {
     display: flex;
     align-items: center;
-    color: var(--pgn-color-stepper-header-step-base);
+    color: $stepper-header-step-color;
     flex-shrink: 1;
-    min-width: var(--pgn-size-stepper-step-width-min);
-    padding: var(--pgn-spacing-stepper-header-step-padding);
+    min-width: $stepper-header-step-min-width;
+    padding: $stepper-header-step-padding;
 
     .pgn__bubble {
       margin-inline-end: .5rem;
@@ -55,11 +56,11 @@
     }
 
     .pgn__stepper-header-step-description {
-      font-size: var(--pgn-typography-font-size-small-x);
+      font-size: $x-small-font-size;
     }
 
     &.pgn__stepper-header-step-active ~ .pgn__stepper-header-step {
-      color: var(--pgn-color-stepper-header-step-bg-active);
+      color: $stepper-header-active-step-bg;
     }
 
     &.pgn__stepper-header-step-has-error {
@@ -67,16 +68,16 @@
         background: transparent;
         box-shadow:
           inset 0 0 0
-          var(--pgn-size-stepper-step-bubble-error-shadow-width)
-          var(--pgn-color-stepper-header-step-bubble-error);
+          $stepper-header-step-error-bubble-shadow-width
+          $stepper-header-step-error-bubble-color;
 
         * {
-          color: var(--pgn-color-stepper-header-step-bubble-error);
+          color: $stepper-header-step-error-bubble-color;
         }
       }
 
       .pgn__stepper-header-step-description {
-        color: var(--pgn-color-stepper-header-step-description-error);
+        color: $stepper-header-step-error-description-color;
       }
     }
   }

package/dist/Sticky/_variables.scss

@@ -0,0 +1,3 @@
+$sticky-offset:                       0 !default;
+$sticky-shadow-top:                   0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15) !default;
+$sticky-shadow-bottom:                0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15) !default;

package/dist/Sticky/index.js

@@ -1,50 +1,58 @@
-const _excluded = ["position", "children", "offset", "className"];
+var _excluded = ["position", "children", "offset", "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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useLayoutEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-const POSITION_VARIANTS = ['top', 'bottom'];
-const Sticky = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      position,
-      children,
-      offset,
-      className
-    } = _ref,
+var POSITION_VARIANTS = ['top', 'bottom'];
+var Sticky = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var position = _ref.position,
+    children = _ref.children,
+    offset = _ref.offset,
+    className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  const [isSticky, setIsSticky] = useState(false);
-  const defaultRef = React.useRef();
-  const resolvedRef = ref || defaultRef;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSticky = _useState2[0],
+    setIsSticky = _useState2[1];
+  var defaultRef = React.useRef();
+  var resolvedRef = ref || defaultRef;
 
   // eslint-disable-next-line consistent-return
-  useLayoutEffect(() => {
+  useLayoutEffect(function () {
     if (resolvedRef.current) {
-      const stickyElement = resolvedRef.current;
+      var stickyElement = resolvedRef.current;
       // getComputedStyle is used to get real top/bottom
       // values on the page for proper shadows display
-      const elementStyles = window.getComputedStyle(stickyElement);
-      const elementOffset = elementStyles[position || 'top'];
+      var elementStyles = window.getComputedStyle(stickyElement);
+      var elementOffset = elementStyles[position || 'top'];
       // Margin calculations according to the offset.
       // 1 pixel above/bellow + offset pixels that determines
       // when callback function is called
-      const elementWithOffset = 1 + (parseInt(elementOffset, 10) || 0);
-      const observer = new IntersectionObserver(_ref2 => {
-        let [entry] = _ref2;
+      var elementWithOffset = 1 + (parseInt(elementOffset, 10) || 0);
+      var observer = new IntersectionObserver(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 1),
+          entry = _ref3[0];
         return setIsSticky(entry.intersectionRatio < 1);
       }, {
         threshold: [1],
-        rootMargin: position === 'bottom' ? `0px 0px -${elementWithOffset}px 0px` : `-${elementWithOffset}px 0px 0px 0px`
+        rootMargin: position === 'bottom' ? "0px 0px -".concat(elementWithOffset, "px 0px") : "-".concat(elementWithOffset, "px 0px 0px 0px")
       });
       observer.observe(stickyElement);
-      return () => {
+      return function () {
         observer.unobserve(stickyElement);
       };
     }
   }, [position, resolvedRef]);
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames('pgn__sticky', `pgn__sticky-${position || 'top'}`, offset ? `pgn__sticky-offset--${offset}` : '', {
+    className: classNames('pgn__sticky', "pgn__sticky-".concat(position || 'top'), offset ? "pgn__sticky-offset--".concat(offset) : '', {
       'pgn__sticky-shadow': isSticky
     }, className),
     ref: resolvedRef

package/dist/Sticky/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useLayoutEffect","useState","PropTypes","classNames","POSITION_VARIANTS","Sticky","forwardRef","_ref","ref","position","children","offset","className","rest","_objectWithoutProperties","_excluded","isSticky","setIsSticky","defaultRef","useRef","resolvedRef","current","stickyElement","elementStyles","window","getComputedStyle","elementOffset","elementWithOffset","parseInt","observer","IntersectionObserver","_ref2","entry","intersectionRatio","threshold","rootMargin","observe","unobserve","createElement","_extends","propTypes","node","isRequired","oneOf","oneOfType","number","string","defaultProps","undefined"],"sources":["../../src/Sticky/index.jsx"],"sourcesContent":["import React, { useLayoutEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nconst POSITION_VARIANTS = [\n  'top',\n  'bottom',\n];\n\nconst Sticky = React.forwardRef(({\n  position,\n  children,\n  offset,\n  className,\n  ...rest\n}, ref) => {\n  const [isSticky, setIsSticky] = useState(false);\n  const defaultRef = React.useRef();\n  const resolvedRef = ref || defaultRef;\n\n  // eslint-disable-next-line consistent-return\n  useLayoutEffect(() => {\n    if (resolvedRef.current) {\n      const stickyElement = resolvedRef.current;\n      // getComputedStyle is used to get real top/bottom\n      // values on the page for proper shadows display\n      const elementStyles = window.getComputedStyle(stickyElement);\n      const elementOffset = elementStyles[position || 'top'];\n      // Margin calculations according to the offset.\n      // 1 pixel above/bellow + offset pixels that determines\n      // when callback function is called\n      const elementWithOffset = 1 + (parseInt(elementOffset, 10) || 0);\n      const observer = new IntersectionObserver(\n        ([entry]) => setIsSticky(entry.intersectionRatio < 1),\n        {\n          threshold: [1],\n          rootMargin: position === 'bottom'\n            ? `0px 0px -${elementWithOffset}px 0px`\n            : `-${elementWithOffset}px 0px 0px 0px`,\n        },\n      );\n      observer.observe(stickyElement);\n\n      return () => {\n        observer.unobserve(stickyElement);\n      };\n    }\n  }, [position, resolvedRef]);\n\n  return (\n    <div\n      className={classNames(\n        'pgn__sticky',\n        `pgn__sticky-${position || 'top'}`,\n        offset ? `pgn__sticky-offset--${offset}` : '',\n        { 'pgn__sticky-shadow': isSticky },\n        className,\n      )}\n      ref={resolvedRef}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\nSticky.propTypes = {\n  /** Specifies content of the component. */\n  children: PropTypes.node.isRequired,\n  /** Specifies position of the element. */\n  position: PropTypes.oneOf(POSITION_VARIANTS),\n  /**\n   * Specifies offset from top/bottom depending on the `position` property.\n   *\n   * Valid values are based on `the spacing classes`:\n   * `0, 0.5, ... 6`.\n   */\n  offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  /** Specifies an additional `className` to add to the base element. */\n  className: PropTypes.string,\n};\n\nSticky.defaultProps = {\n  position: 'top',\n  offset: undefined,\n  className: undefined,\n};\n\nexport default Sticky;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,eAAe,EAAEC,QAAQ,QAAQ,OAAO;AACxD,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,MAAMC,iBAAiB,GAAG,CACxB,KAAK,EACL,QAAQ,CACT;AAED,MAAMC,MAAM,gBAAGN,KAAK,CAACO,UAAU,CAAC,CAAAC,IAAA,EAM7BC,GAAG,KAAK;EAAA,IANsB;MAC/BC,QAAQ;MACRC,QAAQ;MACRC,MAAM;MACNC;IAEF,CAAC,GAAAL,IAAA;IADIM,IAAI,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAEP,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC;EAC/C,MAAMiB,UAAU,GAAGnB,KAAK,CAACoB,MAAM,CAAC,CAAC;EACjC,MAAMC,WAAW,GAAGZ,GAAG,IAAIU,UAAU;;EAErC;EACAlB,eAAe,CAAC,MAAM;IACpB,IAAIoB,WAAW,CAACC,OAAO,EAAE;MACvB,MAAMC,aAAa,GAAGF,WAAW,CAACC,OAAO;MACzC;MACA;MACA,MAAME,aAAa,GAAGC,MAAM,CAACC,gBAAgB,CAACH,aAAa,CAAC;MAC5D,MAAMI,aAAa,GAAGH,aAAa,CAACd,QAAQ,IAAI,KAAK,CAAC;MACtD;MACA;MACA;MACA,MAAMkB,iBAAiB,GAAG,CAAC,IAAIC,QAAQ,CAACF,aAAa,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC;MAChE,MAAMG,QAAQ,GAAG,IAAIC,oBAAoB,CACvCC,KAAA;QAAA,IAAC,CAACC,KAAK,CAAC,GAAAD,KAAA;QAAA,OAAKd,WAAW,CAACe,KAAK,CAACC,iBAAiB,GAAG,CAAC,CAAC;MAAA,GACrD;QACEC,SAAS,EAAE,CAAC,CAAC,CAAC;QACdC,UAAU,EAAE1B,QAAQ,KAAK,QAAQ,GAC5B,YAAWkB,iBAAkB,QAAO,GACpC,IAAGA,iBAAkB;MAC5B,CACF,CAAC;MACDE,QAAQ,CAACO,OAAO,CAACd,aAAa,CAAC;MAE/B,OAAO,MAAM;QACXO,QAAQ,CAACQ,SAAS,CAACf,aAAa,CAAC;MACnC,CAAC;IACH;EACF,CAAC,EAAE,CAACb,QAAQ,EAAEW,WAAW,CAAC,CAAC;EAE3B,oBACErB,KAAA,CAAAuC,aAAA,QAAAC,QAAA;IACE3B,SAAS,EAAET,UAAU,CACnB,aAAa,EACZ,eAAcM,QAAQ,IAAI,KAAM,EAAC,EAClCE,MAAM,GAAI,uBAAsBA,MAAO,EAAC,GAAG,EAAE,EAC7C;MAAE,oBAAoB,EAAEK;IAAS,CAAC,EAClCJ,SACF,CAAE;IACFJ,GAAG,EAAEY;EAAY,GACbP,IAAI,GAEPH,QACE,CAAC;AAEV,CAAC,CAAC;AAEFL,MAAM,CAACmC,SAAS,GAAG;EACjB;EACA9B,QAAQ,EAAER,SAAS,CAACuC,IAAI,CAACC,UAAU;EACnC;EACAjC,QAAQ,EAAEP,SAAS,CAACyC,KAAK,CAACvC,iBAAiB,CAAC;EAC5C;AACF;AACA;AACA;AACA;AACA;EACEO,MAAM,EAAET,SAAS,CAAC0C,SAAS,CAAC,CAAC1C,SAAS,CAAC2C,MAAM,EAAE3C,SAAS,CAAC4C,MAAM,CAAC,CAAC;EACjE;EACAlC,SAAS,EAAEV,SAAS,CAAC4C;AACvB,CAAC;AAEDzC,MAAM,CAAC0C,YAAY,GAAG;EACpBtC,QAAQ,EAAE,KAAK;EACfE,MAAM,EAAEqC,SAAS;EACjBpC,SAAS,EAAEoC;AACb,CAAC;AAED,eAAe3C,MAAM"}
+{"version":3,"file":"index.js","names":["React","useLayoutEffect","useState","PropTypes","classNames","POSITION_VARIANTS","Sticky","forwardRef","_ref","ref","position","children","offset","className","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","isSticky","setIsSticky","defaultRef","useRef","resolvedRef","current","stickyElement","elementStyles","window","getComputedStyle","elementOffset","elementWithOffset","parseInt","observer","IntersectionObserver","_ref2","_ref3","entry","intersectionRatio","threshold","rootMargin","concat","observe","unobserve","createElement","_extends","propTypes","node","isRequired","oneOf","oneOfType","number","string","defaultProps","undefined"],"sources":["../../src/Sticky/index.jsx"],"sourcesContent":["import React, { useLayoutEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nconst POSITION_VARIANTS = [\n  'top',\n  'bottom',\n];\n\nconst Sticky = React.forwardRef(({\n  position,\n  children,\n  offset,\n  className,\n  ...rest\n}, ref) => {\n  const [isSticky, setIsSticky] = useState(false);\n  const defaultRef = React.useRef();\n  const resolvedRef = ref || defaultRef;\n\n  // eslint-disable-next-line consistent-return\n  useLayoutEffect(() => {\n    if (resolvedRef.current) {\n      const stickyElement = resolvedRef.current;\n      // getComputedStyle is used to get real top/bottom\n      // values on the page for proper shadows display\n      const elementStyles = window.getComputedStyle(stickyElement);\n      const elementOffset = elementStyles[position || 'top'];\n      // Margin calculations according to the offset.\n      // 1 pixel above/bellow + offset pixels that determines\n      // when callback function is called\n      const elementWithOffset = 1 + (parseInt(elementOffset, 10) || 0);\n      const observer = new IntersectionObserver(\n        ([entry]) => setIsSticky(entry.intersectionRatio < 1),\n        {\n          threshold: [1],\n          rootMargin: position === 'bottom'\n            ? `0px 0px -${elementWithOffset}px 0px`\n            : `-${elementWithOffset}px 0px 0px 0px`,\n        },\n      );\n      observer.observe(stickyElement);\n\n      return () => {\n        observer.unobserve(stickyElement);\n      };\n    }\n  }, [position, resolvedRef]);\n\n  return (\n    <div\n      className={classNames(\n        'pgn__sticky',\n        `pgn__sticky-${position || 'top'}`,\n        offset ? `pgn__sticky-offset--${offset}` : '',\n        { 'pgn__sticky-shadow': isSticky },\n        className,\n      )}\n      ref={resolvedRef}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\nSticky.propTypes = {\n  /** Specifies content of the component. */\n  children: PropTypes.node.isRequired,\n  /** Specifies position of the element. */\n  position: PropTypes.oneOf(POSITION_VARIANTS),\n  /**\n   * Specifies offset from top/bottom depending on the `position` property.\n   *\n   * Valid values are based on `the spacing classes`:\n   * `0, 0.5, ... 6`.\n   */\n  offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  /** Specifies an additional `className` to add to the base element. */\n  className: PropTypes.string,\n};\n\nSticky.defaultProps = {\n  position: 'top',\n  offset: undefined,\n  className: undefined,\n};\n\nexport default Sticky;\n"],"mappings":"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"}

package/dist/Sticky/index.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 .pgn__sticky {
   display: flex;
   width: 100%;
@@ -5,7 +7,7 @@
 
   &.pgn__sticky-top {
     align-self: self-start;
-    top: var(--pgn-spacing-sticky-offset);
+    top: $sticky-offset;
 
     @each $level, $offset in $spacers {
       &.pgn__sticky-offset--#{$level} {
@@ -14,13 +16,13 @@
     }
 
     &.pgn__sticky-shadow {
-      box-shadow: var(--pgn-elevation-sticky-shadow-bottom);
+      box-shadow: $sticky-shadow-bottom;
     }
   }
 
   &.pgn__sticky-bottom {
     align-self: self-end;
-    bottom: var(--pgn-spacing-sticky-offset);
+    bottom: $sticky-offset;
 
     @each $level, $offset in $spacers {
       &.pgn__sticky-offset--#{$level} {
@@ -29,7 +31,7 @@
     }
 
     &.pgn__sticky-shadow {
-      box-shadow: var(--pgn-elevation-sticky-shadow-top);
+      box-shadow: $sticky-shadow-top;
     }
   }
 }

package/dist/Table/_variables.scss

@@ -0,0 +1,34 @@
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-cell-padding:          .75rem !default;
+$table-cell-padding-sm:       .3rem !default;
+
+$table-color:                 $body-color !default;
+$table-bg:                    null !default;
+$table-accent-bg:             rgba($black, .05) !default;
+$table-hover-color:           $table-color !default;
+$table-hover-bg:              rgba($black, .075) !default;
+$table-active-bg:             $table-hover-bg !default;
+
+$table-border-width:          $border-width !default;
+$table-border-color:          $border-color !default;
+
+$table-head-bg:               theme-color("gray", "background") !default;
+$table-head-color:            theme-color("gray", "text") !default;
+
+$table-dark-color:            $white !default;
+$table-dark-bg:               theme-color("gray", "hover") !default;
+$table-dark-accent-bg:        rgba($white, .05) !default;
+$table-dark-hover-color:      $table-dark-color !default;
+$table-dark-hover-bg:         rgba($white, .075) !default;
+$table-dark-border-color:     lighten($table-dark-bg, 7.5%) !default;
+$table-dark-color:            $white !default;
+
+$table-striped-order:         odd !default;
+
+$table-caption-color:         $text-muted !default;
+
+$table-bg-level:              -9 !default;
+$table-border-level:          -6 !default;