@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/dist/Carousel/index.scss

@@ -1,2 +1,168 @@
-@import "variables";
-@import "~bootstrap/scss/carousel";
+.carousel {
+  position: relative;
+}
+
+.carousel.pointer-event {
+  touch-action: pan-y;
+}
+
+.carousel-inner {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  @include clearfix();
+}
+
+.carousel-item {
+  position: relative;
+  display: none;
+  float: left;
+  width: 100%;
+  margin-right: -100%;
+  backface-visibility: hidden;
+  transition: var(--pgn-transition-carousel-base);
+}
+
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: block;
+}
+
+.carousel-item-next:not(.carousel-item-left),
+.active.carousel-item-right {
+  transform: translateX(100%);
+}
+
+.carousel-item-prev:not(.carousel-item-right),
+.active.carousel-item-left {
+  transform: translateX(-100%);
+}
+
+.carousel-fade {
+  .carousel-item {
+    opacity: 0;
+    transition-property: opacity;
+    transform: none;
+  }
+
+  .carousel-item.active,
+  .carousel-item-next.carousel-item-left,
+  .carousel-item-prev.carousel-item-right {
+    z-index: 1;
+    opacity: 1;
+  }
+
+  .active.carousel-item-left,
+  .active.carousel-item-right {
+    z-index: 0;
+    opacity: 0;
+    transition: opacity 0s var(--pgn-transition-carousel-base);
+  }
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--pgn-size-carousel-control-width-base);
+  padding: 0;
+  color: var(--pgn-color-carousel-control-base);
+  text-align: center;
+  background: none;
+  border: 0;
+  opacity: var(--pgn-other-carousel-control-opacity-base);
+  transition: var(--pgn-transition-carousel-control);
+
+  @include hover-focus() {
+    color: var(--pgn-carousel-control-color);
+    text-decoration: none;
+    outline: 0;
+    opacity: var(--pgn-other-carousel-control-opacity-hover);
+  }
+}
+
+.carousel-control-prev {
+  left: 0;
+
+  @if $enable-gradients {
+    background-image: linear-gradient(90deg, rgba(var(--pgn-color-black), .25), rgba(var(--pgn-color-black), .001));
+  }
+}
+
+.carousel-control-next {
+  right: 0;
+
+  @if $enable-gradients {
+    background-image: linear-gradient(270deg, rgba(var(--pgn-color-black), .25), rgba(var(--pgn-color-black), .001));
+  }
+}
+
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: inline-block;
+  width: var(--pgn-size-carousel-control-width-icon);
+  height: var(--pgn-size-carousel-control-width-icon);
+  background: 50% / 100% 100% no-repeat;
+}
+
+.carousel-control-prev-icon {
+  background-image: var(--pgn-content-carousel-control-bg-prev-icon);
+}
+
+.carousel-control-next-icon {
+  background-image: var(--pgn-content-carousel-control-bg-next-icon);
+}
+
+.carousel-indicators {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 15;
+  display: flex;
+  justify-content: center;
+  padding-left: 0;
+  margin-right: var(--pgn-size-carousel-control-width-base);
+  margin-left: var(--pgn-size-carousel-control-width-base);
+  list-style: none;
+
+  li {
+    box-sizing: content-box;
+    flex: 0 1 auto;
+    width: var(--pgn-size-carousel-indicator-width);
+    height: var(--pgn-size-carousel-indicator-height-base);
+    margin-right: var(--pgn-spacing-carousel-indicator-spacer);
+    margin-left: var(--pgn-spacing-carousel-indicator-spacer);
+    text-indent: -999px;
+    cursor: pointer;
+    background-color: var(--pgn-color-carousel-indicator-active-bg);
+    background-clip: padding-box;
+    border-top: var(--pgn-size-carousel-indicator-height-area-hit) solid transparent;
+    border-bottom: var(--pgn-size-carousel-indicator-height-area-hit) solid transparent;
+    opacity: .5;
+    transition: var(--pgn-transition-carousel-indicator);
+  }
+
+  .active {
+    opacity: 1;
+  }
+}
+
+.carousel-caption {
+  position: absolute;
+  right: calc((calc(100% - var(--pgn-size-carousel-caption-width))) * .5);
+  bottom: 20px;
+  left: calc((calc(100% - var(--pgn-size-carousel-caption-width))) * .5);
+  z-index: 10;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: var(--pgn-color-carousel-caption);
+  text-align: center;
+}

package/dist/Chip/ChipIcon.d.ts

@@ -2,13 +2,13 @@ import React, { KeyboardEventHandler, MouseEventHandler } from 'react';
 import PropTypes from 'prop-types';
 export interface ChipIconProps {
     className: string;
-    src: React.ComponentType;
+    src: React.ReactElement | Function;
     onClick?: KeyboardEventHandler & MouseEventHandler;
     alt?: string;
     variant: string;
     disabled?: boolean;
 }
-declare function ChipIcon({ className, src, onClick, alt, variant, disabled, }: ChipIconProps): React.JSX.Element;
+declare function ChipIcon({ className, src, onClick, alt, variant, disabled, }: ChipIconProps): JSX.Element;
 declare namespace ChipIcon {
     var propTypes: {
         className: PropTypes.Validator<string>;

package/dist/Chip/ChipIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipIcon.js","names":["React","PropTypes","Icon","IconButton","STYLE_VARIANTS","ChipIcon","_ref","className","src","onClick","alt","variant","disabled","createElement","iconAs","invertColors","DARK","tabIndex","size","propTypes","string","isRequired","oneOfType","element","func","bool","defaultProps","undefined","LIGHT"],"sources":["../../src/Chip/ChipIcon.tsx"],"sourcesContent":["import React, { KeyboardEventHandler, MouseEventHandler } from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '../Icon';\n// @ts-ignore\nimport IconButton from '../IconButton';\n// @ts-ignore\nimport { STYLE_VARIANTS } from './constants';\n\nexport interface ChipIconProps {\n  className: string,\n  src: React.ComponentType,\n  onClick?: KeyboardEventHandler & MouseEventHandler,\n  alt?: string,\n  variant: string,\n  disabled?: boolean,\n}\n\nfunction ChipIcon({\n  className, src, onClick, alt, variant, disabled,\n}: ChipIconProps) {\n  if (onClick) {\n    return (\n      <IconButton\n        className={className}\n        src={src}\n        onClick={onClick}\n        iconAs={Icon}\n        alt={alt}\n        invertColors={variant === STYLE_VARIANTS.DARK}\n        tabIndex={disabled ? -1 : 0}\n      />\n    );\n  }\n\n  return <Icon src={src} className={className} size=\"sm\" />;\n}\n\nChipIcon.propTypes = {\n  className: PropTypes.string.isRequired,\n  src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,\n  onClick: PropTypes.func,\n  alt: PropTypes.string,\n  variant: PropTypes.string,\n  disabled: PropTypes.bool,\n};\n\nChipIcon.defaultProps = {\n  onClick: undefined,\n  alt: undefined,\n  variant: STYLE_VARIANTS.LIGHT,\n  disabled: false,\n};\n\nexport default ChipIcon;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAmD,OAAO;AACtE,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,MAAM,SAAS;AAC1B;AACA,OAAOC,UAAU,MAAM,eAAe;AACtC;AACA,SAASC,cAAc,QAAQ,aAAa;AAW5C,SAASC,QAAQA,CAAAC,IAAA,EAEC;EAAA,IADhBC,SAAS,GAAAD,IAAA,CAATC,SAAS;IAAEC,GAAG,GAAAF,IAAA,CAAHE,GAAG;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IAAEC,GAAG,GAAAJ,IAAA,CAAHI,GAAG;IAAEC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IAAEC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;EAE/C,IAAIH,OAAO,EAAE;IACX,oBACET,KAAA,CAAAa,aAAA,CAACV,UAAU;MACTI,SAAS,EAAEA,SAAU;MACrBC,GAAG,EAAEA,GAAI;MACTC,OAAO,EAAEA,OAAQ;MACjBK,MAAM,EAAEZ,IAAK;MACbQ,GAAG,EAAEA,GAAI;MACTK,YAAY,EAAEJ,OAAO,KAAKP,cAAc,CAACY,IAAK;MAC9CC,QAAQ,EAAEL,QAAQ,GAAG,CAAC,CAAC,GAAG;IAAE,CAC7B,CAAC;EAEN;EAEA,oBAAOZ,KAAA,CAAAa,aAAA,CAACX,IAAI;IAACM,GAAG,EAAEA,GAAI;IAACD,SAAS,EAAEA,SAAU;IAACW,IAAI,EAAC;EAAI,CAAE,CAAC;AAC3D;AAEAb,QAAQ,CAACc,SAAS,GAAG;EACnBZ,SAAS,EAAEN,SAAS,CAACmB,MAAM,CAACC,UAAU;EACtCb,GAAG,EAAEP,SAAS,CAACqB,SAAS,CAAC,CAACrB,SAAS,CAACsB,OAAO,EAAEtB,SAAS,CAACuB,IAAI,CAAC,CAAC,CAACH,UAAU;EACxEZ,OAAO,EAAER,SAAS,CAACuB,IAAI;EACvBd,GAAG,EAAET,SAAS,CAACmB,MAAM;EACrBT,OAAO,EAAEV,SAAS,CAACmB,MAAM;EACzBR,QAAQ,EAAEX,SAAS,CAACwB;AACtB,CAAC;AAEDpB,QAAQ,CAACqB,YAAY,GAAG;EACtBjB,OAAO,EAAEkB,SAAS;EAClBjB,GAAG,EAAEiB,SAAS;EACdhB,OAAO,EAAEP,cAAc,CAACwB,KAAK;EAC7BhB,QAAQ,EAAE;AACZ,CAAC;AAED,eAAeP,QAAQ","ignoreList":[]}
+{"version":3,"file":"ChipIcon.js","names":["React","PropTypes","Icon","IconButton","STYLE_VARIANTS","ChipIcon","_ref","className","src","onClick","alt","variant","disabled","createElement","iconAs","invertColors","DARK","tabIndex","size","propTypes","string","isRequired","oneOfType","element","func","bool","defaultProps","undefined","LIGHT"],"sources":["../../src/Chip/ChipIcon.tsx"],"sourcesContent":["import React, { KeyboardEventHandler, MouseEventHandler } from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '../Icon';\n// @ts-ignore\nimport IconButton from '../IconButton';\n// @ts-ignore\nimport { STYLE_VARIANTS } from './constants';\n\nexport interface ChipIconProps {\n  className: string,\n  src: React.ReactElement | Function,\n  onClick?: KeyboardEventHandler & MouseEventHandler,\n  alt?: string,\n  variant: string,\n  disabled?: boolean,\n}\n\nfunction ChipIcon({\n  className, src, onClick, alt, variant, disabled,\n}: ChipIconProps) {\n  if (onClick) {\n    return (\n      <IconButton\n        className={className}\n        src={src}\n        onClick={onClick}\n        iconAs={Icon}\n        alt={alt}\n        invertColors={variant === STYLE_VARIANTS.DARK}\n        tabIndex={disabled ? -1 : 0}\n      />\n    );\n  }\n\n  return <Icon src={src} className={className} size=\"sm\" />;\n}\n\nChipIcon.propTypes = {\n  className: PropTypes.string.isRequired,\n  src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,\n  onClick: PropTypes.func,\n  alt: PropTypes.string,\n  variant: PropTypes.string,\n  disabled: PropTypes.bool,\n};\n\nChipIcon.defaultProps = {\n  onClick: undefined,\n  alt: undefined,\n  variant: STYLE_VARIANTS.LIGHT,\n  disabled: false,\n};\n\nexport default ChipIcon;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAmD,OAAO;AACtE,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,MAAM,SAAS;AAC1B;AACA,OAAOC,UAAU,MAAM,eAAe;AACtC;AACA,SAASC,cAAc,QAAQ,aAAa;AAW5C,SAASC,QAAQA,CAAAC,IAAA,EAEC;EAAA,IADhBC,SAAS,GAAAD,IAAA,CAATC,SAAS;IAAEC,GAAG,GAAAF,IAAA,CAAHE,GAAG;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IAAEC,GAAG,GAAAJ,IAAA,CAAHI,GAAG;IAAEC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IAAEC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;EAE/C,IAAIH,OAAO,EAAE;IACX,oBACET,KAAA,CAAAa,aAAA,CAACV,UAAU;MACTI,SAAS,EAAEA,SAAU;MACrBC,GAAG,EAAEA,GAAI;MACTC,OAAO,EAAEA,OAAQ;MACjBK,MAAM,EAAEZ,IAAK;MACbQ,GAAG,EAAEA,GAAI;MACTK,YAAY,EAAEJ,OAAO,KAAKP,cAAc,CAACY,IAAK;MAC9CC,QAAQ,EAAEL,QAAQ,GAAG,CAAC,CAAC,GAAG;IAAE,CAC7B,CAAC;EAEN;EAEA,oBAAOZ,KAAA,CAAAa,aAAA,CAACX,IAAI;IAACM,GAAG,EAAEA,GAAI;IAACD,SAAS,EAAEA,SAAU;IAACW,IAAI,EAAC;EAAI,CAAE,CAAC;AAC3D;AAEAb,QAAQ,CAACc,SAAS,GAAG;EACnBZ,SAAS,EAAEN,SAAS,CAACmB,MAAM,CAACC,UAAU;EACtCb,GAAG,EAAEP,SAAS,CAACqB,SAAS,CAAC,CAACrB,SAAS,CAACsB,OAAO,EAAEtB,SAAS,CAACuB,IAAI,CAAC,CAAC,CAACH,UAAU;EACxEZ,OAAO,EAAER,SAAS,CAACuB,IAAI;EACvBd,GAAG,EAAET,SAAS,CAACmB,MAAM;EACrBT,OAAO,EAAEV,SAAS,CAACmB,MAAM;EACzBR,QAAQ,EAAEX,SAAS,CAACwB;AACtB,CAAC;AAEDpB,QAAQ,CAACqB,YAAY,GAAG;EACtBjB,OAAO,EAAEkB,SAAS;EAClBjB,GAAG,EAAEiB,SAAS;EACdhB,OAAO,EAAEP,cAAc,CAACwB,KAAK;EAC7BhB,QAAQ,EAAE;AACZ,CAAC;AAED,eAAeP,QAAQ","ignoreList":[]}

package/dist/Chip/index.d.ts

@@ -5,9 +5,9 @@ export interface IChip {
     onClick?: KeyboardEventHandler & MouseEventHandler;
     className?: string;
     variant?: string;
-    iconBefore?: React.ComponentType;
+    iconBefore?: React.ReactElement | Function;
     iconBeforeAlt?: string;
-    iconAfter?: React.ComponentType;
+    iconAfter?: React.ReactElement | Function;
     iconAfterAlt?: string;
     onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler;
     onIconAfterClick?: KeyboardEventHandler & MouseEventHandler;

package/dist/Chip/index.js

@@ -79,7 +79,7 @@ Chip.propTypes = {
    *
    * `import { Check } from '@openedx/paragon/icons';`
    */
-  iconBefore: PropTypes.elementType,
+  iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
   /** Specifies icon alt text. */
   iconBeforeAlt: requiredWhen(PropTypes.string, ['iconBefore', 'onIconBeforeClick']),
   /** A click handler for the `Chip` icon before. */
@@ -90,7 +90,7 @@ Chip.propTypes = {
    *
    * `import { Check } from '@openedx/paragon/icons';`
    */
-  iconAfter: PropTypes.elementType,
+  iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
   /** Specifies icon alt text. */
   iconAfterAlt: requiredWhen(PropTypes.string, ['iconAfter', 'onIconAfterClick']),
   /** A click handler for the `Chip` icon after. */

package/dist/Chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","requiredWhen","STYLE_VARIANTS","ChipIcon","CHIP_PGN_CLASS","Chip","forwardRef","_ref","ref","children","className","variant","iconBefore","iconBeforeAlt","iconAfter","iconAfterAlt","onIconBeforeClick","onIconAfterClick","disabled","isSelected","onClick","props","_objectWithoutProperties","_excluded","hasInteractiveIcons","isChipInteractive","interactionProps","onKeyPress","tabIndex","role","createElement","_extends","concat","selected","interactive","src","alt","propTypes","node","isRequired","string","oneOf","bool","func","elementType","defaultProps","undefined","LIGHT"],"sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react';\nimport PropTypes, { type Requireable } from 'prop-types';\nimport classNames from 'classnames';\n// @ts-ignore\nimport { requiredWhen } from '../utils/propTypes';\n// @ts-ignore\nimport { STYLE_VARIANTS } from './constants';\n// @ts-ignore\nimport ChipIcon from './ChipIcon';\n\nexport const CHIP_PGN_CLASS = 'pgn__chip';\n\nexport interface IChip {\n  children: React.ReactNode,\n  onClick?: KeyboardEventHandler & MouseEventHandler,\n  className?: string,\n  variant?: string,\n  iconBefore?: React.ComponentType,\n  iconBeforeAlt?: string,\n  iconAfter?: React.ComponentType,\n  iconAfterAlt?: string,\n  onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler,\n  onIconAfterClick?: KeyboardEventHandler & MouseEventHandler,\n  disabled?: boolean,\n  isSelected?: boolean,\n}\n\nconst Chip = React.forwardRef(({\n  children,\n  className,\n  variant,\n  iconBefore,\n  iconBeforeAlt,\n  iconAfter,\n  iconAfterAlt,\n  onIconBeforeClick,\n  onIconAfterClick,\n  disabled,\n  isSelected,\n  onClick,\n  ...props\n}: IChip, ref: ForwardedRef<HTMLDivElement>) => {\n  const hasInteractiveIcons = !!(onIconBeforeClick || onIconAfterClick);\n  const isChipInteractive = !hasInteractiveIcons && !!onClick;\n\n  const interactionProps = isChipInteractive ? {\n    onClick,\n    onKeyPress: onClick,\n    tabIndex: 0,\n    role: 'button',\n  } : {};\n\n  return (\n    <div\n      className={classNames(\n        CHIP_PGN_CLASS,\n        `pgn__chip-${variant}`,\n        className,\n        { disabled, selected: isSelected, interactive: isChipInteractive },\n      )}\n      ref={ref}\n      {...interactionProps}\n      {...props}\n    >\n      {iconBefore && (\n        <ChipIcon\n          className={`${CHIP_PGN_CLASS}__icon-before`}\n          src={iconBefore}\n          onClick={onIconBeforeClick}\n          alt={iconBeforeAlt}\n          variant={variant}\n          disabled={disabled}\n        />\n      )}\n      <div\n        className={classNames(`${CHIP_PGN_CLASS}__label`, {\n          'p-before': iconBefore,\n          'p-after': iconAfter,\n        })}\n      >\n        {children}\n      </div>\n      {iconAfter && (\n        <ChipIcon\n          className={`${CHIP_PGN_CLASS}__icon-after`}\n          src={iconAfter}\n          onClick={onIconAfterClick}\n          alt={iconAfterAlt}\n          variant={variant}\n          disabled={disabled}\n        />\n      )}\n    </div>\n  );\n});\n\nChip.propTypes = {\n  /** Specifies the content of the `Chip`. */\n  children: PropTypes.node.isRequired,\n  /** Specifies an additional `className` to add to the base element. */\n  className: PropTypes.string,\n  /** The `Chip` style variant to use. */\n  variant: PropTypes.oneOf(['light', 'dark']),\n  /** Disables the `Chip`. */\n  disabled: PropTypes.bool,\n  /** Click handler for the whole Chip, has effect only when Chip does not have any interactive icons. */\n  onClick: PropTypes.func,\n  /**\n   * An icon component to render before the content.\n   * Example import of a Paragon icon component:\n   *\n   * `import { Check } from '@openedx/paragon/icons';`\n   */\n  iconBefore: PropTypes.elementType as Requireable<React.ComponentType>,\n  /** Specifies icon alt text. */\n  iconBeforeAlt: requiredWhen(PropTypes.string, ['iconBefore', 'onIconBeforeClick']),\n  /** A click handler for the `Chip` icon before. */\n  onIconBeforeClick: PropTypes.func,\n  /**\n   * An icon component to render before after the content.\n   * Example import of a Paragon icon component:\n   *\n   * `import { Check } from '@openedx/paragon/icons';`\n   */\n  iconAfter: PropTypes.elementType as Requireable<React.ComponentType>,\n  /** Specifies icon alt text. */\n  iconAfterAlt: requiredWhen(PropTypes.string, ['iconAfter', 'onIconAfterClick']),\n  /** A click handler for the `Chip` icon after. */\n  onIconAfterClick: PropTypes.func,\n  /** Indicates if `Chip` has been selected. */\n  isSelected: PropTypes.bool,\n};\n\nChip.defaultProps = {\n  className: undefined,\n  variant: STYLE_VARIANTS.LIGHT,\n  disabled: false,\n  onClick: undefined,\n  iconBefore: undefined,\n  iconAfter: undefined,\n  onIconBeforeClick: undefined,\n  onIconAfterClick: undefined,\n  isSelected: false,\n  iconAfterAlt: undefined,\n  iconBeforeAlt: undefined,\n};\n\nexport default Chip;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","requiredWhen","STYLE_VARIANTS","ChipIcon","CHIP_PGN_CLASS","Chip","forwardRef","_ref","ref","children","className","variant","iconBefore","iconBeforeAlt","iconAfter","iconAfterAlt","onIconBeforeClick","onIconAfterClick","disabled","isSelected","onClick","props","_objectWithoutProperties","_excluded","hasInteractiveIcons","isChipInteractive","interactionProps","onKeyPress","tabIndex","role","createElement","_extends","concat","selected","interactive","src","alt","propTypes","node","isRequired","string","oneOf","bool","func","oneOfType","element","defaultProps","undefined","LIGHT"],"sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n// @ts-ignore\nimport { requiredWhen } from '../utils/propTypes';\n// @ts-ignore\nimport { STYLE_VARIANTS } from './constants';\n// @ts-ignore\nimport ChipIcon from './ChipIcon';\n\nexport const CHIP_PGN_CLASS = 'pgn__chip';\n\nexport interface IChip {\n  children: React.ReactNode,\n  onClick?: KeyboardEventHandler & MouseEventHandler,\n  className?: string,\n  variant?: string,\n  iconBefore?: React.ReactElement | Function,\n  iconBeforeAlt?: string,\n  iconAfter?: React.ReactElement | Function,\n  iconAfterAlt?: string,\n  onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler,\n  onIconAfterClick?: KeyboardEventHandler & MouseEventHandler,\n  disabled?: boolean,\n  isSelected?: boolean,\n}\n\nconst Chip = React.forwardRef(({\n  children,\n  className,\n  variant,\n  iconBefore,\n  iconBeforeAlt,\n  iconAfter,\n  iconAfterAlt,\n  onIconBeforeClick,\n  onIconAfterClick,\n  disabled,\n  isSelected,\n  onClick,\n  ...props\n}: IChip, ref: ForwardedRef<HTMLDivElement>) => {\n  const hasInteractiveIcons = !!(onIconBeforeClick || onIconAfterClick);\n  const isChipInteractive = !hasInteractiveIcons && !!onClick;\n\n  const interactionProps = isChipInteractive ? {\n    onClick,\n    onKeyPress: onClick,\n    tabIndex: 0,\n    role: 'button',\n  } : {};\n\n  return (\n    <div\n      className={classNames(\n        CHIP_PGN_CLASS,\n        `pgn__chip-${variant}`,\n        className,\n        { disabled, selected: isSelected, interactive: isChipInteractive },\n      )}\n      ref={ref}\n      {...interactionProps}\n      {...props}\n    >\n      {iconBefore && (\n        <ChipIcon\n          className={`${CHIP_PGN_CLASS}__icon-before`}\n          src={iconBefore}\n          onClick={onIconBeforeClick}\n          alt={iconBeforeAlt}\n          variant={variant}\n          disabled={disabled}\n        />\n      )}\n      <div\n        className={classNames(`${CHIP_PGN_CLASS}__label`, {\n          'p-before': iconBefore,\n          'p-after': iconAfter,\n        })}\n      >\n        {children}\n      </div>\n      {iconAfter && (\n        <ChipIcon\n          className={`${CHIP_PGN_CLASS}__icon-after`}\n          src={iconAfter}\n          onClick={onIconAfterClick}\n          alt={iconAfterAlt}\n          variant={variant}\n          disabled={disabled}\n        />\n      )}\n    </div>\n  );\n});\n\nChip.propTypes = {\n  /** Specifies the content of the `Chip`. */\n  children: PropTypes.node.isRequired,\n  /** Specifies an additional `className` to add to the base element. */\n  className: PropTypes.string,\n  /** The `Chip` style variant to use. */\n  variant: PropTypes.oneOf(['light', 'dark']),\n  /** Disables the `Chip`. */\n  disabled: PropTypes.bool,\n  /** Click handler for the whole Chip, has effect only when Chip does not have any interactive icons. */\n  onClick: PropTypes.func,\n  /**\n   * An icon component to render before the content.\n   * Example import of a Paragon icon component:\n   *\n   * `import { Check } from '@openedx/paragon/icons';`\n   */\n  iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n  /** Specifies icon alt text. */\n  iconBeforeAlt: requiredWhen(PropTypes.string, ['iconBefore', 'onIconBeforeClick']),\n  /** A click handler for the `Chip` icon before. */\n  onIconBeforeClick: PropTypes.func,\n  /**\n   * An icon component to render before after the content.\n   * Example import of a Paragon icon component:\n   *\n   * `import { Check } from '@openedx/paragon/icons';`\n   */\n  iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n  /** Specifies icon alt text. */\n  iconAfterAlt: requiredWhen(PropTypes.string, ['iconAfter', 'onIconAfterClick']),\n  /** A click handler for the `Chip` icon after. */\n  onIconAfterClick: PropTypes.func,\n  /** Indicates if `Chip` has been selected. */\n  isSelected: PropTypes.bool,\n};\n\nChip.defaultProps = {\n  className: undefined,\n  variant: STYLE_VARIANTS.LIGHT,\n  disabled: false,\n  onClick: undefined,\n  iconBefore: undefined,\n  iconAfter: undefined,\n  onIconBeforeClick: undefined,\n  onIconAfterClick: undefined,\n  isSelected: false,\n  iconAfterAlt: undefined,\n  iconBeforeAlt: undefined,\n};\n\nexport default Chip;\n"],"mappings":"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","ignoreList":[]}

package/dist/Chip/index.scss

@@ -1,34 +1,33 @@
-@import "variables";
 @import "mixins";
 
 .pgn__chip {
-  border-radius: $chip-border-radius;
+  border-radius: var(--pgn-size-chip-border-radius);
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
-  margin: $chip-margin;
-  border: 1px solid $chip-border-color;
-  padding: $chip-padding-y $chip-padding-x;
+  margin: var(--pgn-spacing-chip-margin-base);
+  border: 1px solid var(--pgn-color-chip-border-base);
+  padding: var(--pgn-spacing-chip-padding-y) var(--pgn-spacing-chip-padding-x);
   position: relative;
   outline: none;
   transition: all .3s;
 
   .pgn__chip__label {
-    font-size: $font-size-xs;
+    font-size: var(--pgn-typography-font-size-xs);
     line-height: 1.5rem;
-    font-weight: $font-weight-bold;
-    color: $chip-label-color;
+    font-weight: var(--pgn-typography-font-weight-bold);
+    color: var(--pgn-color-chip-label-base);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 
     [dir="rtl"] & {
-      margin-left: $chip-icon-margin;
+      margin-left: var(--pgn-spacing-chip-margin-icon);
     }
   }
 
   .pgn__chip__icon-before {
-    margin-right: $chip-icon-margin;
+    margin-right: var(--pgn-spacing-chip-margin-icon);
 
     [dir="rtl"] & {
       margin-right: 0;
@@ -37,7 +36,7 @@
   }
 
   .pgn__chip__icon-after {
-    margin-left: $chip-icon-margin;
+    margin-left: var(--pgn-spacing-chip-margin-icon);
 
     [dir="rtl"] & {
       margin-left: 0;
@@ -47,85 +46,86 @@
   .pgn__chip__icon-before,
   .pgn__chip__icon-after {
     &.btn-icon {
-      width: $chip-icon-size;
-      height: $chip-icon-size;
+      width: var(--pgn-size-chip-icon);
+      height: var(--pgn-size-chip-icon);
     }
   }
 
   &.pgn__chip-light {
-    background-color: $chip-light-bg-color;
+    background-color: var(--pgn-color-chip-bg-light);
 
     &.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
+        var(--pgn-color-chip-outline-light),
+        calc(var(--pgn-spacing-chip-outline-selected-distance-light) * -1),
+        calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width)),
+        var(--pgn-spacing-chip-outline-selected-distance-light)
       );
 
       &:focus {
-        border: 1px solid $chip-light-selected-focus-border-color;
+        border: 1px solid var(--pgn-color-chip-border-focus-selected-light);
       }
     }
 
     .pgn__chip__icon-before,
     .pgn__chip__icon-after {
       &.pgn__icon {
-        color: $chip-label-color;
+        color: var(--pgn-color-chip-label-base);
       }
     }
 
     &.interactive {
       cursor: pointer;
 
-      @include chip-hover($dark-500, $white);
+      @include chip-hover(var(--pgn-color-dark-500), var(--pgn-color-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)
+          var(--pgn-color-chip-border-focus-selected-light),
+          calc(var(--pgn-spacing-chip-outline-focus-distance-light) * -1),
+          calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width))
         );
       }
     }
   }
 
   &.pgn__chip-dark {
-    background-color: $chip-dark-bg;
+    background-color: var(--pgn-color-chip-bg-dark);
 
     &.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
-    );
+      @include chip-outline(
+        var(--pgn-color-chip-outline-dark),
+        calc(var(--pgn-spacing-chip-outline-selected-distance-dark) * -1),
+        calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width)),
+        var(--pgn-spacing-chip-outline-selected-distance-dark)
+      );
 
       &:focus {
-        border: 1px solid $chip-dark-selected-focus-border-color;
+        border: 1px solid var(--pgn-color-chip-border-focus-selected-dark);
       }
     }
 
     .pgn__chip__label {
-      color: $chip-dark-label-color;
+      color: var(--pgn-color-chip-label-dark);
     }
 
     .pgn__chip__icon-before,
     .pgn__chip__icon-after {
       &.pgn__icon {
-        color: $chip-dark-outline-color;
+        color: var(--pgn-color-chip-outline-dark);
       }
     }
 
     &.interactive {
       cursor: pointer;
 
-      @include chip-hover($white, $primary-500);
+      @include chip-hover(var(--pgn-color-white), var(--pgn-color-primary-500));
 
       &:focus {
         @include chip-outline(
-          $chip-dark-outline-color,
-          calc($chip-dark-focus-outline-distance * -1),
-          calc($chip-border-radius + $chip-outline-width)
+          var(--pgn-color-chip-outline-dark),
+          calc(var(--pgn-spacing-chip-outline-focus-distance-dark) * -1),
+          calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width))
         );
       }
     }
@@ -133,7 +133,7 @@
 
   &.disabled,
   &:disabled {
-    opacity: $chip-disable-opacity;
+    opacity: var(--pgn-other-chip-opacity-disabled);
     pointer-events: none;
     user-select: none;
 
@@ -142,3 +142,13 @@
     }
   }
 }
+
+.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

@@ -1,4 +1,9 @@
-@mixin chip-outline($outline-color: $white, $distance-to-border: 0, $border-radius: 50%, $border-width: .125rem) {
+@mixin chip-outline(
+  $outline-color: var(--pgn-color-white),
+  $distance-to-border: 0,
+  $outline-border-radius: 50%,
+  $outline-border-width: .125rem
+) {
   &::before {
     content: "";
     position: absolute;
@@ -6,8 +11,8 @@
     right: $distance-to-border;
     bottom: $distance-to-border;
     left: $distance-to-border;
-    border: solid $border-width $outline-color;
-    border-radius: $border-radius;
+    border: solid $outline-border-width $outline-color;
+    border-radius: $outline-border-radius;
   }
 }
 

package/dist/ChipCarousel/index.scss

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

package/dist/CloseButton/index.scss

@@ -1,2 +1,31 @@
-@import "variables";
-@import "~bootstrap/scss/close";
+.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;
+}

package/dist/Code/index.scss

@@ -1,2 +1,47 @@
-@import "variables";
-@import "~bootstrap/scss/code";
+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;
+}