@openedx/paragon 22.0.0-alpha.24 → 22.0.0

package/dist/Badge/_variables.scss

@@ -0,0 +1,16 @@
+// Badges
+
+$badge-font-size:                   75% !default;
+$badge-font-weight:                 $font-weight-bold !default;
+$badge-padding-y:                   .125rem !default;
+$badge-padding-x:                   .5rem !default;
+$badge-border-radius:               .25rem !default;
+
+$badge-transition:                  none !default;
+$badge-focus-width:                 $input-btn-focus-width !default;
+
+$badge-pill-padding-x:              .6em !default;
+
+// Use a higher than normal value to ensure completely rounded edges when
+// customizing padding or font-size on labels.
+$badge-pill-border-radius:          10rem !default;

package/dist/Badge/index.js

@@ -2,10 +2,12 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import PropTypes from 'prop-types';
 import BaseBadge from 'react-bootstrap/Badge';
-const Badge = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(BaseBadge, _extends({}, props, {
-  ref: ref
-})));
-const STYLE_VARIANTS = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
+var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(BaseBadge, _extends({}, props, {
+    ref: ref
+  }));
+});
+var STYLE_VARIANTS = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
 Badge.propTypes = {
   /** Specifies element type for this component */
   as: PropTypes.elementType,

package/dist/Badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","BaseBadge","Badge","forwardRef","props","ref","createElement","_extends","STYLE_VARIANTS","propTypes","as","elementType","variant","oneOf","pill","bool","bsPrefix","string","defaultProps"],"sources":["../../src/Badge/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport BaseBadge from 'react-bootstrap/Badge';\n\nconst Badge = React.forwardRef((props, ref) => <BaseBadge {...props} ref={ref} />);\n\nconst STYLE_VARIANTS = [\n  'primary',\n  'secondary',\n  'success',\n  'danger',\n  'warning',\n  'info',\n  'light',\n  'dark',\n];\n\nBadge.propTypes = {\n  /** Specifies element type for this component */\n  as: PropTypes.elementType,\n  /** Visual style of the badge */\n  variant: PropTypes.oneOf(STYLE_VARIANTS),\n  /** Add the `pill` modifier to make badges more rounded with some additional horizontal padding */\n  pill: PropTypes.bool,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nBadge.defaultProps = {\n  as: 'span',\n  variant: 'primary',\n  pill: false,\n  bsPrefix: 'badge',\n};\n\nexport default Badge;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,SAAS,MAAM,uBAAuB;AAE7C,MAAMC,KAAK,gBAAGH,KAAK,CAACI,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,kBAAKN,KAAA,CAAAO,aAAA,CAACL,SAAS,EAAAM,QAAA,KAAKH,KAAK;EAAEC,GAAG,EAAEA;AAAI,EAAE,CAAC,CAAC;AAElF,MAAMG,cAAc,GAAG,CACrB,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,OAAO,EACP,MAAM,CACP;AAEDN,KAAK,CAACO,SAAS,GAAG;EAChB;EACAC,EAAE,EAAEV,SAAS,CAACW,WAAW;EACzB;EACAC,OAAO,EAAEZ,SAAS,CAACa,KAAK,CAACL,cAAc,CAAC;EACxC;EACAM,IAAI,EAAEd,SAAS,CAACe,IAAI;EACpB;EACAC,QAAQ,EAAEhB,SAAS,CAACiB;AACtB,CAAC;AAEDf,KAAK,CAACgB,YAAY,GAAG;EACnBR,EAAE,EAAE,MAAM;EACVE,OAAO,EAAE,SAAS;EAClBE,IAAI,EAAE,KAAK;EACXE,QAAQ,EAAE;AACZ,CAAC;AAED,eAAed,KAAK"}
+{"version":3,"file":"index.js","names":["React","PropTypes","BaseBadge","Badge","forwardRef","props","ref","createElement","_extends","STYLE_VARIANTS","propTypes","as","elementType","variant","oneOf","pill","bool","bsPrefix","string","defaultProps"],"sources":["../../src/Badge/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport BaseBadge from 'react-bootstrap/Badge';\n\nconst Badge = React.forwardRef((props, ref) => <BaseBadge {...props} ref={ref} />);\n\nconst STYLE_VARIANTS = [\n  'primary',\n  'secondary',\n  'success',\n  'danger',\n  'warning',\n  'info',\n  'light',\n  'dark',\n];\n\nBadge.propTypes = {\n  /** Specifies element type for this component */\n  as: PropTypes.elementType,\n  /** Visual style of the badge */\n  variant: PropTypes.oneOf(STYLE_VARIANTS),\n  /** Add the `pill` modifier to make badges more rounded with some additional horizontal padding */\n  pill: PropTypes.bool,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nBadge.defaultProps = {\n  as: 'span',\n  variant: 'primary',\n  pill: false,\n  bsPrefix: 'badge',\n};\n\nexport default Badge;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,SAAS,MAAM,uBAAuB;AAE7C,IAAMC,KAAK,gBAAGH,KAAK,CAACI,UAAU,CAAC,UAACC,KAAK,EAAEC,GAAG;EAAA,oBAAKN,KAAA,CAAAO,aAAA,CAACL,SAAS,EAAAM,QAAA,KAAKH,KAAK;IAAEC,GAAG,EAAEA;EAAI,EAAE,CAAC;AAAA,EAAC;AAElF,IAAMG,cAAc,GAAG,CACrB,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,OAAO,EACP,MAAM,CACP;AAEDN,KAAK,CAACO,SAAS,GAAG;EAChB;EACAC,EAAE,EAAEV,SAAS,CAACW,WAAW;EACzB;EACAC,OAAO,EAAEZ,SAAS,CAACa,KAAK,CAACL,cAAc,CAAC;EACxC;EACAM,IAAI,EAAEd,SAAS,CAACe,IAAI;EACpB;EACAC,QAAQ,EAAEhB,SAAS,CAACiB;AACtB,CAAC;AAEDf,KAAK,CAACgB,YAAY,GAAG;EACnBR,EAAE,EAAE,MAAM;EACVE,OAAO,EAAE,SAAS;EAClBE,IAAI,EAAE,KAAK;EACXE,QAAQ,EAAE;AACZ,CAAC;AAED,eAAed,KAAK"}

package/dist/Badge/index.scss

@@ -1,112 +1,2 @@
-.badge {
-  display: inline-block;
-  padding: var(--pgn-spacing-badge-padding-y) var(--pgn-spacing-badge-padding-x-base);
-  color: var(--pgn-badge-color, inherit);
-  background-color: var(--pgn-badge-bg, transparent);
-
-  @include font-size(var(--pgn-typography-badge-font-size));
-
-  font-weight: var(--pgn-typography-badge-font-weight);
-  line-height: 1;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  transition: var(--pgn-transition-badge);
-
-  @include border-radius(var(--pgn-size-badge-border-radius-base));
-
-  @at-root a#{&} {
-    &:hover,
-    &:focus {
-      text-decoration: none;
-      color: var(--pgn-badge-focus-color, inherit);
-      background-color: var(--pgn-badge-focus-bg, transparent);
-    }
-
-    &:focus,
-    &.focus {
-      outline: 0;
-      box-shadow: 0 0 0 var(--pgn-size-badge-focus-width) var(--pgn-badge-focus-box-shadow, rgba(0, 0, 0, .15));
-    }
-  }
-
-  &:empty {
-    display: none;
-  }
-}
-
-.btn .badge {
-  position: relative;
-  top: -1px;
-}
-
-.badge-pill {
-  padding-right: var(--pgn-spacing-badge-padding-x-pill);
-  padding-left: var(--pgn-spacing-badge-padding-x-pill);
-
-  @include border-radius(var(--pgn-size-badge-border-radius-pill));
-}
-
-.badge-primary {
-  --pgn-badge-color: var(--pgn-color-badge-text-primary);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-primary);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-primary);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-primary);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-primary);
-}
-
-.badge-secondary {
-  --pgn-badge-color: var(--pgn-color-badge-text-secondary);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-secondary);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-secondary);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-secondary);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-secondary);
-}
-
-.badge-success {
-  --pgn-badge-color: var(--pgn-color-badge-text-success);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-success);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-success);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-success);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-success);
-}
-
-.badge-danger {
-  --pgn-badge-color: var(--pgn-color-badge-text-danger);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-danger);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-danger);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-danger);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-danger);
-}
-
-.badge-warning {
-  --pgn-badge-color: var(--pgn-color-badge-text-warning);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-warning);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-warning);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-warning);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-warning);
-}
-
-.badge-info {
-  --pgn-badge-color: var(--pgn-color-badge-text-info);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-info);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-info);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-info);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-info);
-}
-
-.badge-light {
-  --pgn-badge-color: var(--pgn-color-badge-text-light);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-light);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-light);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-light);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-light);
-}
-
-.badge-dark {
-  --pgn-badge-color: var(--pgn-color-badge-text-dark);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-dark);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-dark);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-dark);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-dark);
-}
+@import "variables";
+@import "~bootstrap/scss/badge";

package/dist/Breadcrumb/BreadcrumbLink.js

@@ -1,27 +1,24 @@
-const _excluded = ["label", "url", "className"];
+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 = ["label", "url", "className"];
 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';
 export default function BreadcrumbLink(_ref) {
-  let {
-    as,
-    clickHandler,
-    linkProps
-  } = _ref;
-  const {
-      label,
-      url,
-      className
-    } = linkProps,
+  var as = _ref.as,
+    clickHandler = _ref.clickHandler,
+    linkProps = _ref.linkProps;
+  var label = linkProps.label,
+    url = linkProps.url,
+    className = linkProps.className,
     props = _objectWithoutProperties(linkProps, _excluded);
-  const addtlProps = {};
+  var addtlProps = {};
   if (as === 'a' && url) {
     // eslint-disable-next-line no-console
     console.warn('[Deprecated]: using "url" parameter to specify link\'s destination in Breadcrumb component is ' + 'deprecated. Please use "href" instead when rendering links as anchor tag.');

package/dist/Breadcrumb/BreadcrumbLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbLink.js","names":["React","PropTypes","classNames","BreadcrumbLink","_ref","as","clickHandler","linkProps","label","url","className","props","_objectWithoutProperties","_excluded","addtlProps","console","warn","href","onClick","createElement","_objectSpread","propTypes","elementType","isRequired","func","shape","string","defaultProps","undefined"],"sources":["../../src/Breadcrumb/BreadcrumbLink.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nexport default function BreadcrumbLink({ as, clickHandler, linkProps }) {\n  const {\n    label,\n    url,\n    className,\n    ...props\n  } = linkProps;\n  const addtlProps = {};\n\n  if (as === 'a' && url) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      '[Deprecated]: using \"url\" parameter to specify link\\'s destination in Breadcrumb component is '\n      + 'deprecated. Please use \"href\" instead when rendering links as anchor tag.',\n    );\n    addtlProps.href = url;\n  }\n\n  if (clickHandler) {\n    addtlProps.onClick = clickHandler;\n  }\n\n  return React.createElement(\n    as,\n    {\n      ...props,\n      ...addtlProps,\n      className: classNames('link-muted', className),\n    },\n    label,\n  );\n}\n\nBreadcrumbLink.propTypes = {\n  as: PropTypes.elementType.isRequired,\n  clickHandler: PropTypes.func,\n  linkProps: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    url: PropTypes.string,\n    className: PropTypes.string,\n  }).isRequired,\n};\n\nBreadcrumbLink.defaultProps = {\n  clickHandler: undefined,\n};\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,eAAe,SAASC,cAAcA,CAAAC,IAAA,EAAkC;EAAA,IAAjC;IAAEC,EAAE;IAAEC,YAAY;IAAEC;EAAU,CAAC,GAAAH,IAAA;EACpE,MAAM;MACJI,KAAK;MACLC,GAAG;MACHC;IAEF,CAAC,GAAGH,SAAS;IADRI,KAAK,GAAAC,wBAAA,CACNL,SAAS,EAAAM,SAAA;EACb,MAAMC,UAAU,GAAG,CAAC,CAAC;EAErB,IAAIT,EAAE,KAAK,GAAG,IAAII,GAAG,EAAE;IACrB;IACAM,OAAO,CAACC,IAAI,CACV,gGAAgG,GAC9F,2EACJ,CAAC;IACDF,UAAU,CAACG,IAAI,GAAGR,GAAG;EACvB;EAEA,IAAIH,YAAY,EAAE;IAChBQ,UAAU,CAACI,OAAO,GAAGZ,YAAY;EACnC;EAEA,oBAAON,KAAK,CAACmB,aAAa,CACxBd,EAAE,EAAAe,aAAA,CAAAA,aAAA,CAAAA,aAAA,KAEGT,KAAK,GACLG,UAAU;IACbJ,SAAS,EAAER,UAAU,CAAC,YAAY,EAAEQ,SAAS;EAAC,IAEhDF,KACF,CAAC;AACH;AAEAL,cAAc,CAACkB,SAAS,GAAG;EACzBhB,EAAE,EAAEJ,SAAS,CAACqB,WAAW,CAACC,UAAU;EACpCjB,YAAY,EAAEL,SAAS,CAACuB,IAAI;EAC5BjB,SAAS,EAAEN,SAAS,CAACwB,KAAK,CAAC;IACzBjB,KAAK,EAAEP,SAAS,CAACyB,MAAM,CAACH,UAAU;IAClCd,GAAG,EAAER,SAAS,CAACyB,MAAM;IACrBhB,SAAS,EAAET,SAAS,CAACyB;EACvB,CAAC,CAAC,CAACH;AACL,CAAC;AAEDpB,cAAc,CAACwB,YAAY,GAAG;EAC5BrB,YAAY,EAAEsB;AAChB,CAAC"}
+{"version":3,"file":"BreadcrumbLink.js","names":["React","PropTypes","classNames","BreadcrumbLink","_ref","as","clickHandler","linkProps","label","url","className","props","_objectWithoutProperties","_excluded","addtlProps","console","warn","href","onClick","createElement","_objectSpread","propTypes","elementType","isRequired","func","shape","string","defaultProps","undefined"],"sources":["../../src/Breadcrumb/BreadcrumbLink.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nexport default function BreadcrumbLink({ as, clickHandler, linkProps }) {\n  const {\n    label,\n    url,\n    className,\n    ...props\n  } = linkProps;\n  const addtlProps = {};\n\n  if (as === 'a' && url) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      '[Deprecated]: using \"url\" parameter to specify link\\'s destination in Breadcrumb component is '\n      + 'deprecated. Please use \"href\" instead when rendering links as anchor tag.',\n    );\n    addtlProps.href = url;\n  }\n\n  if (clickHandler) {\n    addtlProps.onClick = clickHandler;\n  }\n\n  return React.createElement(\n    as,\n    {\n      ...props,\n      ...addtlProps,\n      className: classNames('link-muted', className),\n    },\n    label,\n  );\n}\n\nBreadcrumbLink.propTypes = {\n  as: PropTypes.elementType.isRequired,\n  clickHandler: PropTypes.func,\n  linkProps: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    url: PropTypes.string,\n    className: PropTypes.string,\n  }).isRequired,\n};\n\nBreadcrumbLink.defaultProps = {\n  clickHandler: undefined,\n};\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,eAAe,SAASC,cAAcA,CAAAC,IAAA,EAAkC;EAAA,IAA/BC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IAAEC,YAAY,GAAAF,IAAA,CAAZE,YAAY;IAAEC,SAAS,GAAAH,IAAA,CAATG,SAAS;EAClE,IACEC,KAAK,GAIHD,SAAS,CAJXC,KAAK;IACLC,GAAG,GAGDF,SAAS,CAHXE,GAAG;IACHC,SAAS,GAEPH,SAAS,CAFXG,SAAS;IACNC,KAAK,GAAAC,wBAAA,CACNL,SAAS,EAAAM,SAAA;EACb,IAAMC,UAAU,GAAG,CAAC,CAAC;EAErB,IAAIT,EAAE,KAAK,GAAG,IAAII,GAAG,EAAE;IACrB;IACAM,OAAO,CAACC,IAAI,CACV,gGAAgG,GAC9F,2EACJ,CAAC;IACDF,UAAU,CAACG,IAAI,GAAGR,GAAG;EACvB;EAEA,IAAIH,YAAY,EAAE;IAChBQ,UAAU,CAACI,OAAO,GAAGZ,YAAY;EACnC;EAEA,oBAAON,KAAK,CAACmB,aAAa,CACxBd,EAAE,EAAAe,aAAA,CAAAA,aAAA,CAAAA,aAAA,KAEGT,KAAK,GACLG,UAAU;IACbJ,SAAS,EAAER,UAAU,CAAC,YAAY,EAAEQ,SAAS;EAAC,IAEhDF,KACF,CAAC;AACH;AAEAL,cAAc,CAACkB,SAAS,GAAG;EACzBhB,EAAE,EAAEJ,SAAS,CAACqB,WAAW,CAACC,UAAU;EACpCjB,YAAY,EAAEL,SAAS,CAACuB,IAAI;EAC5BjB,SAAS,EAAEN,SAAS,CAACwB,KAAK,CAAC;IACzBjB,KAAK,EAAEP,SAAS,CAACyB,MAAM,CAACH,UAAU;IAClCd,GAAG,EAAER,SAAS,CAACyB,MAAM;IACrBhB,SAAS,EAAET,SAAS,CAACyB;EACvB,CAAC,CAAC,CAACH;AACL,CAAC;AAEDpB,cAAc,CAACwB,YAAY,GAAG;EAC5BrB,YAAY,EAAEsB;AAChB,CAAC"}

package/dist/Breadcrumb/_variables.scss

@@ -0,0 +1,27 @@
+// Breadcrumbs
+
+$breadcrumb-font-size:              null !default;
+
+$breadcrumb-padding-y:              .75rem !default;
+$breadcrumb-padding-x:              1rem !default;
+$breadcrumb-item-padding:           .5rem !default;
+
+$breadcrumb-margin-bottom:          1rem !default;
+$breadcrumb-margin-left:           .5rem !default;
+
+$breadcrumb-border-focus-axis-x:    .25rem !default;
+$breadcrumb-border-focus-axis-y:    .5rem !default;
+
+$breadcrumb-border-focus-width:     .0625rem !default;
+
+$breadcrumb-bg:                     $gray-200 !default;
+$breadcrumb-divider-color:          $gray-600 !default;
+$breadcrumb-active-color:           $gray-500 !default;
+$breadcrumb-inverse-active:         $light-500 !default;
+$breadcrumb-inverse-spacer:         $light-700 !default;
+$breadcrumb-color:                  $primary-500 !default;
+$breadcrumb-inverse-color:          $white !default;
+$breadcrumb-divider:                "/" !default;
+
+$breadcrumb-border-radius:          $border-radius !default;
+$breadcrumb-focus-border-radius:          .125rem !default;

package/dist/Breadcrumb/index.js

@@ -1,4 +1,4 @@
-const _excluded = ["links", "activeLabel", "spacer", "clickHandler", "variant", "isMobile", "ariaLabel", "linkAs"];
+var _excluded = ["links", "activeLabel", "spacer", "clickHandler", "variant", "isMobile", "ariaLabel", "linkAs"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -9,41 +9,41 @@ import BreadcrumbLink from './BreadcrumbLink';
 import { ChevronRight } from '../../icons';
 import Icon from '../Icon';
 function Breadcrumb(_ref) {
-  let {
-      links,
-      activeLabel,
-      spacer,
-      clickHandler,
-      variant,
-      isMobile,
-      ariaLabel,
-      linkAs
-    } = _ref,
+  var links = _ref.links,
+    activeLabel = _ref.activeLabel,
+    spacer = _ref.spacer,
+    clickHandler = _ref.clickHandler,
+    variant = _ref.variant,
+    isMobile = _ref.isMobile,
+    ariaLabel = _ref.ariaLabel,
+    linkAs = _ref.linkAs,
     props = _objectWithoutProperties(_ref, _excluded);
-  const linkCount = links.length;
-  const displayLinks = isMobile ? [links[linkCount - 1]] : links;
+  var linkCount = links.length;
+  var displayLinks = isMobile ? [links[linkCount - 1]] : links;
   return /*#__PURE__*/React.createElement("nav", _extends({
     "aria-label": ariaLabel,
-    className: classNames('pgn__breadcrumb', `pgn__breadcrumb-${variant}`)
+    className: classNames('pgn__breadcrumb', "pgn__breadcrumb-".concat(variant))
   }, props), /*#__PURE__*/React.createElement("ol", {
     className: classNames('list-inline', {
       'is-mobile': isMobile
     })
-  }, displayLinks.map((link, i) => /*#__PURE__*/React.createElement(React.Fragment, {
-    key: link.label
-  }, /*#__PURE__*/React.createElement("li", {
-    className: classNames('list-inline-item')
-  }, /*#__PURE__*/React.createElement(BreadcrumbLink, {
-    as: linkAs,
-    clickHandler: clickHandler,
-    linkProps: link
-  })), (activeLabel || i + 1 < linkCount) && /*#__PURE__*/React.createElement("li", {
-    className: "list-inline-item",
-    role: "presentation"
-  }, spacer || /*#__PURE__*/React.createElement(Icon, {
-    src: ChevronRight,
-    id: `spacer-${i}`
-  })))), !isMobile && activeLabel && /*#__PURE__*/React.createElement("li", {
+  }, displayLinks.map(function (link, i) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: link.label
+    }, /*#__PURE__*/React.createElement("li", {
+      className: classNames('list-inline-item')
+    }, /*#__PURE__*/React.createElement(BreadcrumbLink, {
+      as: linkAs,
+      clickHandler: clickHandler,
+      linkProps: link
+    })), (activeLabel || i + 1 < linkCount) && /*#__PURE__*/React.createElement("li", {
+      className: "list-inline-item",
+      role: "presentation"
+    }, spacer || /*#__PURE__*/React.createElement(Icon, {
+      src: ChevronRight,
+      id: "spacer-".concat(i)
+    })));
+  }), !isMobile && activeLabel && /*#__PURE__*/React.createElement("li", {
     className: "list-inline-item active",
     key: "active",
     "aria-current": "page"

package/dist/Breadcrumb/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","BreadcrumbLink","ChevronRight","Icon","Breadcrumb","_ref","links","activeLabel","spacer","clickHandler","variant","isMobile","ariaLabel","linkAs","props","_objectWithoutProperties","_excluded","linkCount","length","displayLinks","createElement","_extends","className","map","link","i","Fragment","key","label","as","linkProps","role","src","id","propTypes","arrayOf","shape","string","isRequired","element","func","oneOf","bool","elementType","defaultProps","undefined"],"sources":["../../src/Breadcrumb/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport BreadcrumbLink from './BreadcrumbLink';\nimport { ChevronRight } from '../../icons';\nimport Icon from '../Icon';\n\nfunction Breadcrumb({\n  links, activeLabel, spacer, clickHandler,\n  variant, isMobile, ariaLabel, linkAs, ...props\n}) {\n  const linkCount = links.length;\n  const displayLinks = isMobile ? [links[linkCount - 1]] : links;\n\n  return (\n    <nav\n      aria-label={ariaLabel}\n      className={classNames('pgn__breadcrumb', `pgn__breadcrumb-${variant}`)}\n      {...props}\n    >\n      <ol className={classNames('list-inline', { 'is-mobile': isMobile })}>\n        {displayLinks.map((link, i) => (\n          <React.Fragment key={link.label}>\n            <li className={classNames('list-inline-item')}>\n              <BreadcrumbLink as={linkAs} clickHandler={clickHandler} linkProps={link} />\n            </li>\n            {(activeLabel || ((i + 1) < linkCount))\n              && (\n              <li className=\"list-inline-item\" role=\"presentation\">\n                {spacer || <Icon src={ChevronRight} id={`spacer-${i}`} />}\n              </li>\n              )}\n          </React.Fragment>\n        ))}\n        {!isMobile && activeLabel && <li className=\"list-inline-item active\" key=\"active\" aria-current=\"page\">{activeLabel}</li>}\n      </ol>\n    </nav>\n  );\n}\n\nBreadcrumb.propTypes = {\n  /** An array of objects describing links to be rendered. The contents of an object depend on the value of `linkAs`\n   * prop as these objects will get passed down as props to the underlying component defined by `linkAs` prop.\n   */\n  links: PropTypes.arrayOf(PropTypes.shape({\n    label: PropTypes.string,\n  })).isRequired,\n  /** allows to add a label that is not a link to the end of the breadcrumb. */\n  activeLabel: PropTypes.string,\n  /** label of the element */\n  ariaLabel: PropTypes.string,\n  /** allows to add a custom element between the breadcrumb items.\n   * Defaults to `>` rendered using the `Icon` component. */\n  spacer: PropTypes.element,\n  /** allows to add a custom function to be called `onClick` of a breadcrumb link.\n   * The use case for this is for adding custom analytics to the component. */\n  clickHandler: PropTypes.func,\n  /** The `Breadcrumbs` style variant to use. */\n  variant: PropTypes.oneOf(['light', 'dark']),\n  /** The `Breadcrumbs` mobile variant view. */\n  isMobile: PropTypes.bool,\n  /** Specifies the base element to use when rendering links, you should generally use either plain 'a' or\n   * [react-router's Link](https://reactrouter.com/en/main/components/link).\n   */\n  linkAs: PropTypes.elementType,\n};\n\nBreadcrumb.defaultProps = {\n  activeLabel: undefined,\n  ariaLabel: 'breadcrumb',\n  spacer: undefined,\n  clickHandler: undefined,\n  variant: 'light',\n  isMobile: false,\n  linkAs: 'a',\n};\n\nexport default Breadcrumb;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","BreadcrumbLink","ChevronRight","Icon","Breadcrumb","_ref","links","activeLabel","spacer","clickHandler","variant","isMobile","ariaLabel","linkAs","props","_objectWithoutProperties","_excluded","linkCount","length","displayLinks","createElement","_extends","className","concat","map","link","i","Fragment","key","label","as","linkProps","role","src","id","propTypes","arrayOf","shape","string","isRequired","element","func","oneOf","bool","elementType","defaultProps","undefined"],"sources":["../../src/Breadcrumb/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport BreadcrumbLink from './BreadcrumbLink';\nimport { ChevronRight } from '../../icons';\nimport Icon from '../Icon';\n\nfunction Breadcrumb({\n  links, activeLabel, spacer, clickHandler,\n  variant, isMobile, ariaLabel, linkAs, ...props\n}) {\n  const linkCount = links.length;\n  const displayLinks = isMobile ? [links[linkCount - 1]] : links;\n\n  return (\n    <nav\n      aria-label={ariaLabel}\n      className={classNames('pgn__breadcrumb', `pgn__breadcrumb-${variant}`)}\n      {...props}\n    >\n      <ol className={classNames('list-inline', { 'is-mobile': isMobile })}>\n        {displayLinks.map((link, i) => (\n          <React.Fragment key={link.label}>\n            <li className={classNames('list-inline-item')}>\n              <BreadcrumbLink as={linkAs} clickHandler={clickHandler} linkProps={link} />\n            </li>\n            {(activeLabel || ((i + 1) < linkCount))\n              && (\n              <li className=\"list-inline-item\" role=\"presentation\">\n                {spacer || <Icon src={ChevronRight} id={`spacer-${i}`} />}\n              </li>\n              )}\n          </React.Fragment>\n        ))}\n        {!isMobile && activeLabel && <li className=\"list-inline-item active\" key=\"active\" aria-current=\"page\">{activeLabel}</li>}\n      </ol>\n    </nav>\n  );\n}\n\nBreadcrumb.propTypes = {\n  /** An array of objects describing links to be rendered. The contents of an object depend on the value of `linkAs`\n   * prop as these objects will get passed down as props to the underlying component defined by `linkAs` prop.\n   */\n  links: PropTypes.arrayOf(PropTypes.shape({\n    label: PropTypes.string,\n  })).isRequired,\n  /** allows to add a label that is not a link to the end of the breadcrumb. */\n  activeLabel: PropTypes.string,\n  /** label of the element */\n  ariaLabel: PropTypes.string,\n  /** allows to add a custom element between the breadcrumb items.\n   * Defaults to `>` rendered using the `Icon` component. */\n  spacer: PropTypes.element,\n  /** allows to add a custom function to be called `onClick` of a breadcrumb link.\n   * The use case for this is for adding custom analytics to the component. */\n  clickHandler: PropTypes.func,\n  /** The `Breadcrumbs` style variant to use. */\n  variant: PropTypes.oneOf(['light', 'dark']),\n  /** The `Breadcrumbs` mobile variant view. */\n  isMobile: PropTypes.bool,\n  /** Specifies the base element to use when rendering links, you should generally use either plain 'a' or\n   * [react-router's Link](https://reactrouter.com/en/main/components/link).\n   */\n  linkAs: PropTypes.elementType,\n};\n\nBreadcrumb.defaultProps = {\n  activeLabel: undefined,\n  ariaLabel: 'breadcrumb',\n  spacer: undefined,\n  clickHandler: undefined,\n  variant: 'light',\n  isMobile: false,\n  linkAs: 'a',\n};\n\nexport default Breadcrumb;\n"],"mappings":"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"}

package/dist/Breadcrumb/index.scss

@@ -1,11 +1,13 @@
+@import "variables";
+
 .pgn__breadcrumb {
   .list-inline-item {
     &.active {
-      color: var(--pgn-color-breadcrumb-active);
+      color: $breadcrumb-active-color;
     }
 
     a.link-muted {
-      color: var(--pgn-color-breadcrumb-base);
+      color: $breadcrumb-color;
 
       &:focus {
         position: relative;
@@ -17,18 +19,18 @@
       &:focus::before {
         content: "";
         position: absolute;
-        top: calc(var(--pgn-size-breadcrumb-border-axis-y-focus) * -1);
-        right: calc(var(--pgn-size-breadcrumb-border-axis-x-focus) * -1);
-        bottom: calc(var(--pgn-size-breadcrumb-border-axis-y-focus) * -1);
-        left: calc(var(--pgn-size-breadcrumb-border-axis-x-focus) * -1);
-        border: var(--pgn-size-breadcrumb-border-width-focus) solid var(--pgn-color-breadcrumb-base);
-        border-radius: var(--pgn-size-breadcrumb-border-radius-focus);
+        top: -$breadcrumb-border-focus-axis-y;
+        right: -$breadcrumb-border-focus-axis-x;
+        bottom: -$breadcrumb-border-focus-axis-y;
+        left: -$breadcrumb-border-focus-axis-x;
+        border: $breadcrumb-border-focus-width solid $breadcrumb-color;
+        border-radius: $breadcrumb-focus-border-radius;
       }
     }
 
     [dir="rtl"] & {
       margin-right: 0;
-      margin-left: var(--pgn-spacing-breadcrumb-margin-left);
+      margin-left: $breadcrumb-margin-left;
     }
 
     .pgn__icon {
@@ -41,21 +43,21 @@
   &-dark {
     .list-inline-item {
       &.active {
-        color: var(--pgn-color-breadcrumb-inverse-active);
+        color: $breadcrumb-inverse-active;
       }
 
       a.link-muted {
-        color: var(--pgn-color-breadcrumb-inverse-base);
+        color: $breadcrumb-inverse-color;
 
         &:focus::before {
-          border: var(--pgn-size-breadcrumb-border-width-focus) solid var(--pgn-color-breadcrumb-inverse-base);
+          border: $breadcrumb-border-focus-width solid $breadcrumb-inverse-color;
         }
       }
     }
 
     .pgn__icon,
     .custom-spacer {
-      color: var(--pgn-color-breadcrumb-inverse-spacer);
+      color: $breadcrumb-inverse-spacer;
     }
   }
 
@@ -69,7 +71,7 @@
 
       .list-inline-item:not(:last-child) {
         margin-right: 0;
-        margin-left: var(--pgn-spacing-breadcrumb-margin-left);
+        margin-left: $breadcrumb-margin-left;
       }
 
       .pgn__icon {

package/dist/Bubble/_variables.scss

@@ -0,0 +1,8 @@
+$bubble-variants: (
+  "success":    ( "background-color": $success, "color": $white ),
+  "warning":    ( "background-color": $warning, "color": $white ),
+  "error":      ( "background-color": $danger, "color": $white ),
+  "primary":    ( "background-color": $primary, "color": $white ),
+) !default;
+$bubble-expandable-padding-x:              .25rem !default;
+$bubble-expandable-padding-y:              0 !default;

package/dist/Bubble/index.js

@@ -1,25 +1,23 @@
-const _excluded = ["variant", "className", "children", "disabled", "expandable"];
+var _excluded = ["variant", "className", "children", "disabled", "expandable"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-const STYLE_VARIANTS = ['primary', 'success', 'error', 'warning'];
-const Bubble = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      variant,
-      className,
-      children,
-      disabled,
-      expandable
-    } = _ref,
+var STYLE_VARIANTS = ['primary', 'success', 'error', 'warning'];
+var Bubble = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var variant = _ref.variant,
+    className = _ref.className,
+    children = _ref.children,
+    disabled = _ref.disabled,
+    expandable = _ref.expandable,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
-    className: classNames('pgn__bubble', `pgn__bubble-${variant}`, className, {
-      disabled,
-      expandable
+    className: classNames('pgn__bubble', "pgn__bubble-".concat(variant), className, {
+      disabled: disabled,
+      expandable: expandable
     })
   }, props), children);
 });

package/dist/Bubble/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","STYLE_VARIANTS","Bubble","forwardRef","_ref","ref","variant","className","children","disabled","expandable","props","_objectWithoutProperties","_excluded","createElement","_extends","propTypes","node","oneOf","bool","string","defaultProps","undefined"],"sources":["../../src/Bubble/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nconst STYLE_VARIANTS = ['primary', 'success', 'error', 'warning'] as const;\n\nexport type BubbleVariant = typeof STYLE_VARIANTS[number];\n\nexport interface BubbleProps {\n  children: React.ReactNode;\n  variant?: BubbleVariant;\n  disabled?: boolean;\n  className?: string;\n  expandable?: boolean;\n}\n\nconst Bubble = React.forwardRef<HTMLDivElement, BubbleProps>(({\n  variant,\n  className,\n  children,\n  disabled,\n  expandable,\n  ...props\n}, ref) => (\n  <div\n    ref={ref}\n    className={classNames(\n      'pgn__bubble',\n      `pgn__bubble-${variant}`,\n      className,\n      { disabled, expandable },\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n));\n\nBubble.propTypes = {\n  /** Specifies contents of the component. */\n  children: PropTypes.node,\n  /** The `Bubble` style variant to use. */\n  variant: PropTypes.oneOf(STYLE_VARIANTS),\n  /** Activates disabled variant. */\n  disabled: PropTypes.bool,\n  /** A class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies whether to add padding to the `Bubble` or not. */\n  expandable: PropTypes.bool,\n};\n\nBubble.defaultProps = {\n  children: null,\n  variant: 'primary',\n  disabled: false,\n  className: undefined,\n  expandable: false,\n};\n\nexport default Bubble;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,MAAMC,cAAc,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAU;AAY1E,MAAMC,MAAM,gBAAGJ,KAAK,CAACK,UAAU,CAA8B,CAAAC,IAAA,EAO1DC,GAAG;EAAA,IAPwD;MAC5DC,OAAO;MACPC,SAAS;MACTC,QAAQ;MACRC,QAAQ;MACRC;IAEF,CAAC,GAAAN,IAAA;IADIO,KAAK,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAAA,oBAERf,KAAA,CAAAgB,aAAA,QAAAC,QAAA;IACEV,GAAG,EAAEA,GAAI;IACTE,SAAS,EAAEP,UAAU,CACnB,aAAa,EACZ,eAAcM,OAAQ,EAAC,EACxBC,SAAS,EACT;MAAEE,QAAQ;MAAEC;IAAW,CACzB;EAAE,GACEC,KAAK,GAERH,QACE,CAAC;AAAA,CACP,CAAC;AAEFN,MAAM,CAACc,SAAS,GAAG;EACjB;EACAR,QAAQ,EAAET,SAAS,CAACkB,IAAI;EACxB;EACAX,OAAO,EAAEP,SAAS,CAACmB,KAAK,CAACjB,cAAc,CAAC;EACxC;EACAQ,QAAQ,EAAEV,SAAS,CAACoB,IAAI;EACxB;EACAZ,SAAS,EAAER,SAAS,CAACqB,MAAM;EAC3B;EACAV,UAAU,EAAEX,SAAS,CAACoB;AACxB,CAAC;AAEDjB,MAAM,CAACmB,YAAY,GAAG;EACpBb,QAAQ,EAAE,IAAI;EACdF,OAAO,EAAE,SAAS;EAClBG,QAAQ,EAAE,KAAK;EACfF,SAAS,EAAEe,SAAS;EACpBZ,UAAU,EAAE;AACd,CAAC;AAED,eAAeR,MAAM"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","STYLE_VARIANTS","Bubble","forwardRef","_ref","ref","variant","className","children","disabled","expandable","props","_objectWithoutProperties","_excluded","createElement","_extends","concat","propTypes","node","oneOf","bool","string","defaultProps","undefined"],"sources":["../../src/Bubble/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nconst STYLE_VARIANTS = ['primary', 'success', 'error', 'warning'] as const;\n\nexport type BubbleVariant = typeof STYLE_VARIANTS[number];\n\nexport interface BubbleProps {\n  children: React.ReactNode;\n  variant?: BubbleVariant;\n  disabled?: boolean;\n  className?: string;\n  expandable?: boolean;\n}\n\nconst Bubble = React.forwardRef<HTMLDivElement, BubbleProps>(({\n  variant,\n  className,\n  children,\n  disabled,\n  expandable,\n  ...props\n}, ref) => (\n  <div\n    ref={ref}\n    className={classNames(\n      'pgn__bubble',\n      `pgn__bubble-${variant}`,\n      className,\n      { disabled, expandable },\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n));\n\nBubble.propTypes = {\n  /** Specifies contents of the component. */\n  children: PropTypes.node,\n  /** The `Bubble` style variant to use. */\n  variant: PropTypes.oneOf(STYLE_VARIANTS),\n  /** Activates disabled variant. */\n  disabled: PropTypes.bool,\n  /** A class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies whether to add padding to the `Bubble` or not. */\n  expandable: PropTypes.bool,\n};\n\nBubble.defaultProps = {\n  children: null,\n  variant: 'primary',\n  disabled: false,\n  className: undefined,\n  expandable: false,\n};\n\nexport default Bubble;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,IAAMC,cAAc,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAU;AAY1E,IAAMC,MAAM,gBAAGJ,KAAK,CAACK,UAAU,CAA8B,UAAAC,IAAA,EAO1DC,GAAG;EAAA,IANJC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IACPC,SAAS,GAAAH,IAAA,CAATG,SAAS;IACTC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACRC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,UAAU,GAAAN,IAAA,CAAVM,UAAU;IACPC,KAAK,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAAA,oBAERf,KAAA,CAAAgB,aAAA,QAAAC,QAAA;IACEV,GAAG,EAAEA,GAAI;IACTE,SAAS,EAAEP,UAAU,CACnB,aAAa,iBAAAgB,MAAA,CACEV,OAAO,GACtBC,SAAS,EACT;MAAEE,QAAQ,EAARA,QAAQ;MAAEC,UAAU,EAAVA;IAAW,CACzB;EAAE,GACEC,KAAK,GAERH,QACE,CAAC;AAAA,CACP,CAAC;AAEFN,MAAM,CAACe,SAAS,GAAG;EACjB;EACAT,QAAQ,EAAET,SAAS,CAACmB,IAAI;EACxB;EACAZ,OAAO,EAAEP,SAAS,CAACoB,KAAK,CAAClB,cAAc,CAAC;EACxC;EACAQ,QAAQ,EAAEV,SAAS,CAACqB,IAAI;EACxB;EACAb,SAAS,EAAER,SAAS,CAACsB,MAAM;EAC3B;EACAX,UAAU,EAAEX,SAAS,CAACqB;AACxB,CAAC;AAEDlB,MAAM,CAACoB,YAAY,GAAG;EACpBd,QAAQ,EAAE,IAAI;EACdF,OAAO,EAAE,SAAS;EAClBG,QAAQ,EAAE,KAAK;EACfF,SAAS,EAAEgB,SAAS;EACpBb,UAAU,EAAE;AACd,CAAC;AAED,eAAeR,MAAM"}

package/dist/Bubble/index.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 .pgn__bubble {
   line-height: normal;
   min-height: 1.5rem;
@@ -6,36 +8,21 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--pgn-typography-font-size-xs);
-  color: var(--pgn-bubble-color, inherit);
-  background-color: var(--pgn-bubble-bg, transparent);
+  font-size: $font-size-xs;
+
+  @each $name, $colors in $bubble-variants {
+    &.pgn__bubble-#{$name} {
+      background-color: map-get($colors, "background-color");
+      color: map-get($colors, "color");
+    }
+  }
 
   &:disabled,
   &.disabled {
-    background: var(--pgn-color-gray-500);
+    background: $gray-500;
   }
 
   &.expandable {
-    padding: var(--pgn-spacing-bubble-expandable-padding-y) var(--pgn-spacing-bubble-expandable-padding-x);
+    padding: $bubble-expandable-padding-y $bubble-expandable-padding-x;
   }
 }
-
-.pgn__bubble-primary {
-  --pgn-bubble-color: var(--pgn-color-bubble-text-primary);
-  --pgn-bubble-bg: var(--pgn-color-bubble-bg-primary);
-}
-
-.pgn__bubble-success {
-  --pgn-bubble-color: var(--pgn-color-bubble-text-success);
-  --pgn-bubble-bg: var(--pgn-color-bubble-bg-success);
-}
-
-.pgn__bubble-warning {
-  --pgn-bubble-color: var(--pgn-color-bubble-text-warning);
-  --pgn-bubble-bg: var(--pgn-color-bubble-bg-warning);
-}
-
-.pgn__bubble-error {
-  --pgn-bubble-color: var(--pgn-color-bubble-text-error);
-  --pgn-bubble-bg: var(--pgn-color-bubble-bg-error);
-}

package/dist/Button/_variables.scss

@@ -0,0 +1,52 @@
+$btn-padding-y:               $input-btn-padding-y !default;
+$btn-padding-x:               $input-btn-padding-x !default;
+$btn-font-family:             $input-btn-font-family !default;
+$btn-font-size:               $input-btn-font-size !default;
+$btn-line-height:             $input-btn-line-height !default;
+
+$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
+$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
+$btn-font-size-sm:            $input-btn-font-size-sm !default;
+$btn-line-height-sm:          $input-btn-line-height-sm !default;
+
+$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
+$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
+$btn-font-size-lg:            $input-btn-font-size-lg !default;
+$btn-line-height-lg:          $input-btn-line-height-lg !default;
+
+$btn-border-width:            $input-btn-border-width !default;
+
+$btn-font-weight:             $font-weight-normal !default;
+$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
+$btn-focus-width:             2px !default;
+$btn-focus-gap:               $btn-focus-width !default;
+$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
+$btn-disabled-opacity:        .65 !default;
+$btn-active-box-shadow:       none;
+
+$btn-tertiary-color:          $gray-700 !default;
+$btn-tertiary-bg:             transparent !default;
+$btn-tertiary-hover-bg:       $light-500 !default;
+$btn-tertiary-active-bg:      $light-500 !default;
+$btn-inverse-tertiary-color:          $white !default;
+$btn-inverse-tertiary-bg:             transparent !default;
+$btn-inverse-tertiary-hover-bg:       rgba(255, 255, 255, .1) !default;
+$btn-inverse-tertiary-active-bg:      rgba(255, 255, 255, .1) !default;
+
+$btn-link-disabled-color:     theme-color("gray", "light-text") !default;
+
+$btn-block-spacing-y:         .5rem !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius:           $border-radius !default;
+$btn-border-radius-lg:        $border-radius-lg !default;
+$btn-border-radius-sm:        $border-radius-sm !default;
+
+$btn-transition: null;
+
+$btn-focus-border-gap: $btn-focus-width + $btn-focus-gap !default;
+$btn-focus-distance-to-border: $btn-focus-border-gap + $btn-border-width !default;
+
+$btn-focus-border-radius: calc(#{$btn-border-radius} + #{$btn-focus-border-gap}) !default;
+$btn-focus-border-radius-lg: $btn-focus-border-radius !default;
+$btn-focus-border-radius-sm: $btn-border-radius !default;