@openedx/paragon 22.0.0-alpha.23 → 22.0.0

package/dist/Chip/index.scss

@@ -1,103 +1,144 @@
+@import "variables";
+@import "mixins";
+
 .pgn__chip {
-  background: var(--pgn-chip-bg, var(--pgn-color-light-500));
-  border-radius: var(--pgn-size-chip-border-radius);
+  border-radius: $chip-border-radius;
   display: inline-flex;
-  margin: var(--pgn-spacing-chip-margin);
-  box-sizing: border-box;
+  justify-content: space-between;
+  align-items: center;
+  margin: $chip-margin;
+  border: 1px solid $chip-border-color;
+  padding: $chip-padding-y $chip-padding-x;
+  position: relative;
+  outline: none;
+  transition: all .3s;
 
   .pgn__chip__label {
-    font-size: var(--pgn-typography-font-size-sm);
-    padding: var(--pgn-spacing-chip-padding-y) var(--pgn-spacing-chip-padding-x);
+    font-size: $font-size-xs;
+    line-height: 1.5rem;
+    font-weight: $font-weight-bold;
+    color: $chip-label-color;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    box-sizing: border-box;
-    cursor: default;
 
-    &.p-before {
-      padding-left: var(--pgn-spacing-chip-padding-to-icon);
+    [dir="rtl"] & {
+      margin-left: $chip-icon-margin;
+    }
+  }
 
-      [dir="rtl"] & {
-        padding-left: var(--pgn-spacing-chip-padding-x);
-        padding-right: var(--pgn-spacing-chip-padding-to-icon);
-      }
+  .pgn__chip__icon-before {
+    margin-right: $chip-icon-margin;
+
+    [dir="rtl"] & {
+      margin-right: 0;
+      margin-left: .25rem;
     }
+  }
 
-    &.p-after {
-      padding-right: var(--pgn-spacing-chip-padding-to-icon);
+  .pgn__chip__icon-after {
+    margin-left: $chip-icon-margin;
 
-      [dir="rtl"] & {
-        padding-right: var(--pgn-spacing-chip-padding-x);
-        padding-left: var(--pgn-spacing-chip-padding-to-icon);
-      }
+    [dir="rtl"] & {
+      margin-left: 0;
     }
   }
 
   .pgn__chip__icon-before,
   .pgn__chip__icon-after {
-    align-items: center;
-    display: flex;
-    padding-left: var(--pgn-spacing-chip-padding-icon);
-    padding-right: var(--pgn-spacing-chip-padding-icon);
-    box-sizing: border-box;
-    cursor: default;
-
-    .pgn__icon {
-      width: var(--pgn-size-chip-icon);
-      height: var(--pgn-size-chip-icon);
+    &.btn-icon {
+      width: $chip-icon-size;
+      height: $chip-icon-size;
+    }
+  }
+
+  &.pgn__chip-light {
+    background-color: $chip-light-bg-color;
+
+    &.selected {
+      @include chip-outline(
+        $chip-light-outline-color,
+        calc($chip-light-selected-outline-distance * -1),
+        calc($chip-border-radius + $chip-outline-width),
+        $chip-light-selected-outline-distance
+      );
+
+      &:focus {
+        border: 1px solid $chip-light-selected-focus-border-color;
+      }
+    }
+
+    .pgn__chip__icon-before,
+    .pgn__chip__icon-after {
+      &.pgn__icon {
+        color: $chip-label-color;
+      }
     }
 
-    &.active:hover,
-    &.active:focus {
+    &.interactive {
       cursor: pointer;
-      background: var(--pgn-color-black);
 
-      * {
-        color: var(--pgn-color-white);
-        fill: var(--pgn-color-white);
+      @include chip-hover($dark-500, $white);
+
+      &:focus {
+        @include chip-outline(
+          $chip-light-selected-focus-border-color,
+          calc($chip-light-focus-outline-distance * -1),
+          calc($chip-border-radius + $chip-outline-width)
+        );
       }
     }
   }
 
-  .pgn__chip__icon-before {
-    border-radius: var(--pgn-size-chip-border-radius) 0 0 var(--pgn-size-chip-border-radius);
+  &.pgn__chip-dark {
+    background-color: $chip-dark-bg;
 
-    [dir="rtl"] & {
-      border-radius: 0 var(--pgn-size-chip-border-radius) var(--pgn-size-chip-border-radius) 0;
+    &.selected {
+      @include chip-outline($chip-dark-outline-color,
+      calc($chip-dark-selected-outline-distance * -1),
+      calc($chip-border-radius + $chip-outline-width),
+      $chip-dark-selected-outline-distance
+    );
+
+      &:focus {
+        border: 1px solid $chip-dark-selected-focus-border-color;
+      }
     }
-  }
 
-  .pgn__chip__icon-after {
-    border-radius: 0 var(--pgn-size-chip-border-radius) var(--pgn-size-chip-border-radius) 0;
+    .pgn__chip__label {
+      color: $chip-dark-label-color;
+    }
 
-    [dir="rtl"] & {
-      border-radius: var(--pgn-size-chip-border-radius) 0 0 var(--pgn-size-chip-border-radius);
+    .pgn__chip__icon-before,
+    .pgn__chip__icon-after {
+      &.pgn__icon {
+        color: $chip-dark-outline-color;
+      }
     }
-  }
 
-  * {
-    color: var(--pgn-chip-color, inherit);
-    fill: var(--pgn-chip-color, inherit);
+    &.interactive {
+      cursor: pointer;
+
+      @include chip-hover($white, $primary-500);
+
+      &:focus {
+        @include chip-outline(
+          $chip-dark-outline-color,
+          calc($chip-dark-focus-outline-distance * -1),
+          calc($chip-border-radius + $chip-outline-width)
+        );
+      }
+    }
   }
 
   &.disabled,
   &:disabled {
-    cursor: default;
-    opacity: var(--pgn-other-chip-opacity-disabled);
+    opacity: $chip-disable-opacity;
     pointer-events: none;
+    user-select: none;
 
     &::before {
       display: none;
     }
   }
 }
-
-.pgn__chip-light {
-  --pgn-chip-color: var(--pgn-color-chip-text-light);
-  --pgn-chip-bg: var(--pgn-color-chip-bg-light);
-}
-
-.pgn__chip-dark {
-  --pgn-chip-color: var(--pgn-color-chip-text-dark);
-  --pgn-chip-bg: var(--pgn-color-chip-bg-dark);
-}

package/dist/Chip/mixins.scss

@@ -0,0 +1,42 @@
+@mixin chip-outline($outline-color: $white, $distance-to-border: 0, $border-radius: 50%, $border-width: .125rem) {
+  &::before {
+    content: "";
+    position: absolute;
+    top: $distance-to-border;
+    right: $distance-to-border;
+    bottom: $distance-to-border;
+    left: $distance-to-border;
+    border: solid $border-width $outline-color;
+    border-radius: $border-radius;
+  }
+}
+
+@mixin chip-hover($base-color, $secondary-color) {
+  &:hover {
+    background-color: $base-color;
+    border-color: $base-color;
+
+    .pgn__chip__label {
+      color: $secondary-color;
+    }
+
+    .pgn__chip__icon-before,
+    .pgn__chip__icon-after {
+      &.pgn__icon,
+      &.btn-icon {
+        color: $secondary-color;
+      }
+
+      &.btn-icon:hover {
+        background-color: $secondary-color;
+        color: $base-color;
+      }
+
+      &.btn-icon:focus {
+        color: $secondary-color;
+        border: 2px solid $secondary-color;
+        background-color: $base-color;
+      }
+    }
+  }
+}

package/dist/ChipCarousel/_variables.scss

@@ -0,0 +1,3 @@
+$chip-carousel-controls-top-offset:    .375rem !default;
+$chip-carousel-container-padding-x:    .625rem !default;
+$chip-carousel-container-padding-y:    .313rem !default;

package/dist/ChipCarousel/index.js

@@ -1,10 +1,11 @@
-const _excluded = ["className", "items", "ariaLabel", "disableOpacityMasks", "onScrollPrevious", "onScrollNext", "canScrollHorizontal", "offset", "offsetType", "gap"];
+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", "items", "ariaLabel", "disableOpacityMasks", "onScrollPrevious", "onScrollNext", "canScrollHorizontal", "offset", "offsetType", "gap"];
 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';
@@ -22,23 +23,24 @@ import { ArrowForward, ArrowBack } from '../../icons';
 // @ts-ignore
 import messages from './messages';
 import Chip from '../Chip';
-const ChipCarousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      className,
-      items,
-      ariaLabel,
-      disableOpacityMasks,
-      onScrollPrevious,
-      onScrollNext,
-      canScrollHorizontal = false,
-      offset = 120,
-      offsetType = 'fixed',
-      gap
-    } = _ref,
+var ChipCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    items = _ref.items,
+    ariaLabel = _ref.ariaLabel,
+    disableOpacityMasks = _ref.disableOpacityMasks,
+    onScrollPrevious = _ref.onScrollPrevious,
+    onScrollNext = _ref.onScrollNext,
+    _ref$canScrollHorizon = _ref.canScrollHorizontal,
+    canScrollHorizontal = _ref$canScrollHorizon === void 0 ? false : _ref$canScrollHorizon,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 120 : _ref$offset,
+    _ref$offsetType = _ref.offsetType,
+    offsetType = _ref$offsetType === void 0 ? 'fixed' : _ref$offsetType,
+    gap = _ref.gap,
     props = _objectWithoutProperties(_ref, _excluded);
-  const intl = useIntl();
+  var intl = useIntl();
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames('pgn__chip-carousel', className, gap ? `pgn__chip-carousel-gap__${gap}` : '')
+    className: classNames('pgn__chip-carousel', className, gap ? "pgn__chip-carousel-gap__".concat(gap) : '')
   }, props, {
     ref: ref
   }), /*#__PURE__*/React.createElement(OverflowScroll, {
@@ -50,14 +52,12 @@ const ChipCarousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onScrollNext: onScrollNext,
     offset: offset,
     offsetType: offsetType
-  }, /*#__PURE__*/React.createElement(OverflowScrollContext.Consumer, null, _ref2 => {
-    let {
-      setOverflowRef,
-      isScrolledToStart,
-      isScrolledToEnd,
-      scrollToPrevious,
-      scrollToNext
-    } = _ref2;
+  }, /*#__PURE__*/React.createElement(OverflowScrollContext.Consumer, null, function (_ref2) {
+    var setOverflowRef = _ref2.setOverflowRef,
+      isScrolledToStart = _ref2.isScrolledToStart,
+      isScrolledToEnd = _ref2.isScrolledToEnd,
+      scrollToPrevious = _ref2.scrollToPrevious,
+      scrollToNext = _ref2.scrollToNext;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(React.Fragment, null, !isScrolledToStart && /*#__PURE__*/React.createElement(IconButton, {
       size: "sm",
       className: "pgn__chip-carousel__left-control",
@@ -75,10 +75,9 @@ const ChipCarousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     })), /*#__PURE__*/React.createElement("div", {
       ref: setOverflowRef,
       className: "d-flex"
-    }, /*#__PURE__*/React.createElement(OverflowScroll.Items, null, items?.map((item, id) => {
-      const {
-        children
-      } = item?.props || {};
+    }, /*#__PURE__*/React.createElement(OverflowScroll.Items, null, items === null || items === void 0 ? void 0 : items.map(function (item, id) {
+      var _ref3 = (item === null || item === void 0 ? void 0 : item.props) || {},
+        children = _ref3.children;
       if (!children) {
         return null;
       }

package/dist/ChipCarousel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","useIntl","classNames","OverflowScroll","OverflowScrollContext","IconButton","Icon","ArrowForward","ArrowBack","messages","Chip","ChipCarousel","forwardRef","_ref","ref","className","items","ariaLabel","disableOpacityMasks","onScrollPrevious","onScrollNext","canScrollHorizontal","offset","offsetType","gap","props","_objectWithoutProperties","_excluded","intl","createElement","_extends","hasInteractiveChildren","disableScroll","Consumer","_ref2","setOverflowRef","isScrolledToStart","isScrolledToEnd","scrollToPrevious","scrollToNext","Fragment","size","src","iconAs","alt","formatMessage","onClick","Items","map","item","id","children","_objectSpread","key","propTypes","string","isRequired","arrayOf","element","bool","func","oneOfType","number","oneOf","defaultProps","undefined"],"sources":["../../src/ChipCarousel/index.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useIntl } from 'react-intl';\nimport classNames from 'classnames';\n// @ts-ignore\nimport { OverflowScroll, OverflowScrollContext } from '../OverflowScroll';\n// @ts-ignore\nimport IconButton from '../IconButton';\n// @ts-ignore\nimport Icon from '../Icon';\n// @ts-ignore\nimport { ArrowForward, ArrowBack } from '../../icons';\n// @ts-ignore\nimport messages from './messages';\nimport Chip from '../Chip';\n\nexport interface OverflowScrollContextProps {\n  setOverflowRef: () => void,\n  isScrolledToStart: boolean,\n  isScrolledToEnd: boolean,\n  scrollToPrevious: () => void,\n  scrollToNext: () => void,\n}\n\nexport interface ChipCarouselProps {\n  className?: string;\n  items: Array<React.ReactElement>;\n  ariaLabel: string;\n  disableOpacityMasks?: boolean;\n  onScrollPrevious?: () => void;\n  onScrollNext?: () => void;\n  canScrollHorizontal?: boolean;\n  offset?: number | string;\n  offsetType?: 'percentage' | 'fixed';\n  gap?: number;\n}\n\nconst ChipCarousel = React.forwardRef(({\n  className,\n  items,\n  ariaLabel,\n  disableOpacityMasks,\n  onScrollPrevious,\n  onScrollNext,\n  canScrollHorizontal = false,\n  offset = 120,\n  offsetType = 'fixed',\n  gap,\n  ...props\n}: ChipCarouselProps, ref: ForwardedRef<HTMLDivElement>) => {\n  const intl = useIntl();\n\n  return (\n    <div\n      className={classNames('pgn__chip-carousel', className, gap ? `pgn__chip-carousel-gap__${gap}` : '')}\n      {...props}\n      ref={ref}\n    >\n      <OverflowScroll\n        ariaLabel={ariaLabel}\n        hasInteractiveChildren\n        disableScroll={!canScrollHorizontal}\n        disableOpacityMasks={disableOpacityMasks}\n        onScrollPrevious={onScrollPrevious}\n        onScrollNext={onScrollNext}\n        offset={offset}\n        offsetType={offsetType}\n      >\n        <OverflowScrollContext.Consumer>\n          {({\n            setOverflowRef,\n            isScrolledToStart,\n            isScrolledToEnd,\n            scrollToPrevious,\n            scrollToNext,\n          }: OverflowScrollContextProps) => (\n            <>\n              <>\n                {!isScrolledToStart && (\n                  <IconButton\n                    size=\"sm\"\n                    className=\"pgn__chip-carousel__left-control\"\n                    src={ArrowBack}\n                    iconAs={Icon}\n                    alt={intl.formatMessage(messages.scrollToPrevious)}\n                    onClick={scrollToPrevious}\n                  />\n                )}\n                {!isScrolledToEnd && (\n                  <IconButton\n                    size=\"sm\"\n                    className=\"pgn__chip-carousel__right-control\"\n                    src={ArrowForward}\n                    iconAs={Icon}\n                    alt={intl.formatMessage(messages.scrollToNext)}\n                    onClick={scrollToNext}\n                  />\n                )}\n              </>\n              <div ref={setOverflowRef} className=\"d-flex\">\n                <OverflowScroll.Items>\n                  {items?.map((item, id) => {\n                    const { children } = item?.props || {};\n                    if (!children) {\n                      return null;\n                    }\n                    // eslint-disable-next-line react/no-array-index-key\n                    return React.createElement(Chip, { ...item.props, key: id });\n                  })}\n                </OverflowScroll.Items>\n              </div>\n            </>\n          )}\n        </OverflowScrollContext.Consumer>\n      </OverflowScroll>\n    </div>\n  );\n});\n\nChipCarousel.propTypes = {\n  /** Text describing the ChipCarousel for screen readers. */\n  ariaLabel: PropTypes.string.isRequired,\n  /** Specifies class name for the ChipCarousel. */\n  className: PropTypes.string,\n  /** Specifies array of `Chip` elements to be rendered inside the carousel. */\n  // @ts-ignore\n  items: PropTypes.arrayOf(PropTypes.element).isRequired,\n  /** Whether the default opacity masks should be shown at the start/end, if applicable. */\n  disableOpacityMasks: PropTypes.bool,\n  /** Callback function for when the user scrolls to the previous element. */\n  onScrollPrevious: PropTypes.func,\n  /** Callback function for when the user scrolls to the next element. */\n  onScrollNext: PropTypes.func,\n  /** Whether users can scroll within the overflow container. */\n  canScrollHorizontal: PropTypes.bool,\n  /** A value specifying the distance the scroll should move. */\n  offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  /** Type of offset value (percentage or fixed). */\n  offsetType: PropTypes.oneOf(['percentage', 'fixed']),\n  /**\n   * Specifies inner space between children blocks.\n   *\n   * Valid values are based on `the spacing classes`:\n   * `0, 0.5, ... 6`.\n   */\n  gap: PropTypes.number,\n};\n\nChipCarousel.defaultProps = {\n  className: undefined,\n  disableOpacityMasks: undefined,\n  onScrollPrevious: undefined,\n  onScrollNext: undefined,\n  canScrollHorizontal: false,\n  offset: 120,\n  offsetType: 'fixed',\n  gap: 3,\n};\n\nexport default ChipCarousel;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","useIntl","classNames","OverflowScroll","OverflowScrollContext","IconButton","Icon","ArrowForward","ArrowBack","messages","Chip","ChipCarousel","forwardRef","_ref","ref","className","items","ariaLabel","disableOpacityMasks","onScrollPrevious","onScrollNext","_ref$canScrollHorizon","canScrollHorizontal","_ref$offset","offset","_ref$offsetType","offsetType","gap","props","_objectWithoutProperties","_excluded","intl","createElement","_extends","concat","hasInteractiveChildren","disableScroll","Consumer","_ref2","setOverflowRef","isScrolledToStart","isScrolledToEnd","scrollToPrevious","scrollToNext","Fragment","size","src","iconAs","alt","formatMessage","onClick","Items","map","item","id","_ref3","children","_objectSpread","key","propTypes","string","isRequired","arrayOf","element","bool","func","oneOfType","number","oneOf","defaultProps","undefined"],"sources":["../../src/ChipCarousel/index.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useIntl } from 'react-intl';\nimport classNames from 'classnames';\n// @ts-ignore\nimport { OverflowScroll, OverflowScrollContext } from '../OverflowScroll';\n// @ts-ignore\nimport IconButton from '../IconButton';\n// @ts-ignore\nimport Icon from '../Icon';\n// @ts-ignore\nimport { ArrowForward, ArrowBack } from '../../icons';\n// @ts-ignore\nimport messages from './messages';\nimport Chip from '../Chip';\n\nexport interface OverflowScrollContextProps {\n  setOverflowRef: () => void,\n  isScrolledToStart: boolean,\n  isScrolledToEnd: boolean,\n  scrollToPrevious: () => void,\n  scrollToNext: () => void,\n}\n\nexport interface ChipCarouselProps {\n  className?: string;\n  items: Array<React.ReactElement>;\n  ariaLabel: string;\n  disableOpacityMasks?: boolean;\n  onScrollPrevious?: () => void;\n  onScrollNext?: () => void;\n  canScrollHorizontal?: boolean;\n  offset?: number | string;\n  offsetType?: 'percentage' | 'fixed';\n  gap?: number;\n}\n\nconst ChipCarousel = React.forwardRef(({\n  className,\n  items,\n  ariaLabel,\n  disableOpacityMasks,\n  onScrollPrevious,\n  onScrollNext,\n  canScrollHorizontal = false,\n  offset = 120,\n  offsetType = 'fixed',\n  gap,\n  ...props\n}: ChipCarouselProps, ref: ForwardedRef<HTMLDivElement>) => {\n  const intl = useIntl();\n\n  return (\n    <div\n      className={classNames('pgn__chip-carousel', className, gap ? `pgn__chip-carousel-gap__${gap}` : '')}\n      {...props}\n      ref={ref}\n    >\n      <OverflowScroll\n        ariaLabel={ariaLabel}\n        hasInteractiveChildren\n        disableScroll={!canScrollHorizontal}\n        disableOpacityMasks={disableOpacityMasks}\n        onScrollPrevious={onScrollPrevious}\n        onScrollNext={onScrollNext}\n        offset={offset}\n        offsetType={offsetType}\n      >\n        <OverflowScrollContext.Consumer>\n          {({\n            setOverflowRef,\n            isScrolledToStart,\n            isScrolledToEnd,\n            scrollToPrevious,\n            scrollToNext,\n          }: OverflowScrollContextProps) => (\n            <>\n              <>\n                {!isScrolledToStart && (\n                  <IconButton\n                    size=\"sm\"\n                    className=\"pgn__chip-carousel__left-control\"\n                    src={ArrowBack}\n                    iconAs={Icon}\n                    alt={intl.formatMessage(messages.scrollToPrevious)}\n                    onClick={scrollToPrevious}\n                  />\n                )}\n                {!isScrolledToEnd && (\n                  <IconButton\n                    size=\"sm\"\n                    className=\"pgn__chip-carousel__right-control\"\n                    src={ArrowForward}\n                    iconAs={Icon}\n                    alt={intl.formatMessage(messages.scrollToNext)}\n                    onClick={scrollToNext}\n                  />\n                )}\n              </>\n              <div ref={setOverflowRef} className=\"d-flex\">\n                <OverflowScroll.Items>\n                  {items?.map((item, id) => {\n                    const { children } = item?.props || {};\n                    if (!children) {\n                      return null;\n                    }\n                    // eslint-disable-next-line react/no-array-index-key\n                    return React.createElement(Chip, { ...item.props, key: id });\n                  })}\n                </OverflowScroll.Items>\n              </div>\n            </>\n          )}\n        </OverflowScrollContext.Consumer>\n      </OverflowScroll>\n    </div>\n  );\n});\n\nChipCarousel.propTypes = {\n  /** Text describing the ChipCarousel for screen readers. */\n  ariaLabel: PropTypes.string.isRequired,\n  /** Specifies class name for the ChipCarousel. */\n  className: PropTypes.string,\n  /** Specifies array of `Chip` elements to be rendered inside the carousel. */\n  // @ts-ignore\n  items: PropTypes.arrayOf(PropTypes.element).isRequired,\n  /** Whether the default opacity masks should be shown at the start/end, if applicable. */\n  disableOpacityMasks: PropTypes.bool,\n  /** Callback function for when the user scrolls to the previous element. */\n  onScrollPrevious: PropTypes.func,\n  /** Callback function for when the user scrolls to the next element. */\n  onScrollNext: PropTypes.func,\n  /** Whether users can scroll within the overflow container. */\n  canScrollHorizontal: PropTypes.bool,\n  /** A value specifying the distance the scroll should move. */\n  offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  /** Type of offset value (percentage or fixed). */\n  offsetType: PropTypes.oneOf(['percentage', 'fixed']),\n  /**\n   * Specifies inner space between children blocks.\n   *\n   * Valid values are based on `the spacing classes`:\n   * `0, 0.5, ... 6`.\n   */\n  gap: PropTypes.number,\n};\n\nChipCarousel.defaultProps = {\n  className: undefined,\n  disableOpacityMasks: undefined,\n  onScrollPrevious: undefined,\n  onScrollNext: undefined,\n  canScrollHorizontal: false,\n  offset: 120,\n  offsetType: 'fixed',\n  gap: 3,\n};\n\nexport default ChipCarousel;\n"],"mappings":"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"}

package/dist/ChipCarousel/index.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 .pgn__chip-carousel {
   position: relative;
 
@@ -9,6 +11,7 @@
     &.pgn__chip-carousel-gap__#{$level} {
       .pgn__overflow-scroll-overflow-container {
         column-gap: $space;
+        padding: $chip-carousel-container-padding-x $chip-carousel-container-padding-y;
       }
     }
   }
@@ -17,7 +20,7 @@
   .pgn__chip-carousel__left-control {
     position: absolute;
     z-index: 2;
-    top: calc(var(--pgn-spacing-chip-carousel-controls-top-offset) * -1);
+    top: $chip-carousel-controls-top-offset;
   }
 
   .pgn__chip-carousel__right-control {

package/dist/CloseButton/_variables.scss

@@ -0,0 +1,6 @@
+// Close
+
+$close-font-size:                   $font-size-base * 1.5 !default;
+$close-font-weight:                 $font-weight-bold !default;
+$close-color:                       $black !default;
+$close-text-shadow:                 0 1px 0 $white !default;

package/dist/CloseButton/index.scss

@@ -1,31 +1,2 @@
-.close {
-  float: right;
-  font-weight: var(--pgn-typography-close-button-font-weight);
-  line-height: 1;
-  color: var(--pgn-color-close-button);
-  text-shadow: var(--pgn-elevation-close-button-text-shadow);
-  opacity: .5;
-
-  @include font-size(var(--pgn-typography-close-button-font-size));
-
-  @include hover() {
-    color: var(--pgn-color-close-button);
-    text-decoration: none;
-  }
-
-  &:not(:disabled):not(.disabled) {
-    @include hover-focus() {
-      opacity: .75;
-    }
-  }
-}
-
-button.close {
-  padding: 0;
-  background-color: transparent;
-  border: 0;
-}
-
-a.close.disabled {
-  pointer-events: none;
-}
+@import "variables";
+@import "~bootstrap/scss/close";

package/dist/Code/_variables.scss

@@ -0,0 +1,17 @@
+// Code
+
+$code-font-size:                    87.5% !default;
+$code-color:                        #E83E8C !default;
+
+$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;
+$nested-kbd-font-weight:      $font-weight-bold !default;
+
+// HTML Keyboard Input element (<kbd>) styles
+$kbd-padding-y:                     .2rem !default;
+$kbd-padding-x:                     .4rem !default;
+$kbd-font-size:                     $code-font-size !default;
+$kbd-color:                         $white !default;
+$kbd-bg:                            theme-color("gray", "hover") !default;
+
+$pre-color:                         theme-color("gray", "dark-text") !default;
+$pre-scrollable-max-height:         340px !default;

package/dist/Code/index.scss

@@ -1,47 +1,2 @@
-code {
-  color: var(--pgn-color-code-base);
-  word-wrap: break-word;
-
-  @include font-size(var(--pgn-typography-code-font-size));
-
-  a > & {
-    color: inherit;
-  }
-}
-
-kbd {
-  padding: var(--pgn-spacing-code-kbd-padding-y) var(--pgn-spacing-code-kbd-padding-x);
-  color: var(--pgn-color-code-kbd-base);
-  background-color: var(--pgn-color-code-kbd-bg);
-  box-shadow: var(--pgn-elevation-code-kbd-box-shadow);
-
-  @include font-size(var(--pgn-typography-code-kbd-font-size));
-  @include border-radius(var(--pgn-size-border-radius-sm));
-
-  kbd {
-    padding: 0;
-    font-weight: var(--pgn-typography-code-kbd-nested-font-weight);
-    box-shadow: none;
-
-    @include font-size(100%);
-  }
-}
-
-pre {
-  display: block;
-  color: var(--pgn-color-code-pre);
-
-  @include font-size(var(--pgn-typography-code-font-size));
-
-  code {
-    @include font-size(inherit);
-
-    color: inherit;
-    word-break: normal;
-  }
-}
-
-.pre-scrollable {
-  max-height: var(--pgn-size-code-pre-scrollable-max-height);
-  overflow-y: scroll;
-}
+@import "variables";
+@import "~bootstrap/scss/code";