@openedx/paragon 23.0.0-alpha.3 → 23.0.0-alpha.4

package/bin/paragon-scripts.js

@@ -85,11 +85,21 @@ const COMMANDS = {
         description: 'Include only source design tokens in the build.',
         defaultValue: false,
       },
+      {
+        name: '--output-token-references',
+        description: 'Include references for tokens with aliases to other tokens in the build output.',
+        defaultValue: true,
+      },
       {
         name: '-t, --themes',
         description: 'Specify themes to include in the token build.',
         defaultValue: 'light',
       },
+      {
+        name: '-v, --verbose',
+        description: 'Enable verbose logging.',
+        defaultValue: false,
+      },
     ],
   },
   'replace-variables': {

package/dist/Annotation/index.scss

@@ -1,5 +1,21 @@
 @import "mixins";
 
+:root {
+  --pgn-elevation-annotation-box-shadow:
+    drop-shadow(
+      var(--pgn-elevation-annotation-box-shadow-1-offset-x)
+      var(--pgn-elevation-annotation-box-shadow-1-offset-y)
+      var(--pgn-elevation-annotation-box-shadow-1-blur)
+      var(--pgn-elevation-annotation-box-shadow-1-color)
+    )
+    drop-shadow(
+      var(--pgn-elevation-annotation-box-shadow-2-offset-x)
+      var(--pgn-elevation-annotation-box-shadow-2-offset-y)
+      var(--pgn-elevation-annotation-box-shadow-2-blur)
+      var(--pgn-elevation-annotation-box-shadow-2-color)
+    );
+}
+
 .pgn__annotation {
   padding: var(--pgn-spacing-annotation-padding);
   border-radius: var(--pgn-size-annotation-border-radius);

package/dist/Card/CardDeck.js

@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { Children, useMemo } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import BaseCardDeck from 'react-bootstrap/CardDeck';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import { useOverflowScrollItems } from '../OverflowScroll';
@@ -79,6 +78,5 @@ CardDeck.defaultProps = {
   hasOverflowScrollItems: false,
   hasEqualColumnHeights: true
 };
-CardDeck.Deprecated = BaseCardDeck;
 export default CardDeck;
 //# sourceMappingURL=CardDeck.js.map

package/dist/Card/CardDeck.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardDeck.js","names":["React","Children","useMemo","classNames","PropTypes","BaseCardDeck","Row","Col","useOverflowScrollItems","CardDeck","forwardRef","_ref","ref","className","children","columnSizes","hasInteractiveChildren","canScrollHorizontal","hasOverflowScrollItems","hasEqualColumnHeights","cards","map","card","createElement","_extends","overflowCardDeckItems","cardDeckChildren","tabIndex","propTypes","string","node","isRequired","shape","xs","number","sm","md","lg","xl","bool","defaultProps","undefined","Deprecated"],"sources":["../../src/Card/CardDeck.jsx"],"sourcesContent":["import React, { Children, useMemo } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport BaseCardDeck from 'react-bootstrap/CardDeck';\nimport Row from 'react-bootstrap/Row';\nimport Col from 'react-bootstrap/Col';\nimport { useOverflowScrollItems } from '../OverflowScroll';\n\nconst CardDeck = React.forwardRef(({\n  className,\n  children,\n  columnSizes,\n  hasInteractiveChildren,\n  canScrollHorizontal,\n  hasOverflowScrollItems,\n  hasEqualColumnHeights,\n}, ref) => {\n  const cards = useMemo(\n    () => Children.map(children, (card) => (\n      <Col\n        {...columnSizes}\n        className={classNames(\n          'pgn__card-deck__card-item',\n          {\n            'pgn__card__disable-equal-column-heights': !hasEqualColumnHeights,\n          },\n        )}\n      >\n        {card}\n      </Col>\n    )),\n    [children, columnSizes, hasEqualColumnHeights],\n  );\n  const overflowCardDeckItems = useOverflowScrollItems(cards);\n\n  const cardDeckChildren = useMemo(() => {\n    if (hasOverflowScrollItems) {\n      return overflowCardDeckItems;\n    }\n    return cards;\n  }, [hasOverflowScrollItems, overflowCardDeckItems, cards]);\n\n  return (\n    <div\n      className={classNames(\n        'pgn__card-deck',\n        {\n          'pgn__card-deck-has-horizontal-scroll': canScrollHorizontal,\n        },\n        className,\n      )}\n    >\n      <Row\n        className=\"pgn__card-deck-row\"\n        tabIndex={hasInteractiveChildren ? -1 : 0}\n        ref={ref}\n      >\n        {cardDeckChildren}\n      </Row>\n    </div>\n  );\n});\n\nCardDeck.propTypes = {\n  /** The class name for the CardDeck component */\n  className: PropTypes.string,\n  /** The Card components to organize */\n  children: PropTypes.node.isRequired,\n  /**\n   * An object containing the desired column size at each breakpoint, following a similar\n   * props API as ``react-bootstrap/Col``\n   */\n  columnSizes: PropTypes.shape({\n    xs: PropTypes.number,\n    sm: PropTypes.number,\n    md: PropTypes.number,\n    lg: PropTypes.number,\n    xl: PropTypes.number,\n  }),\n  /** Whether the child `Card` components are interactive/focusable. If not, a `tabindex=\"0\"` is\n   * added to be a11y-compliant */\n  hasInteractiveChildren: PropTypes.bool,\n  /** Whether the `CardDeck` supports horizontal scrolling when there are overflow children */\n  canScrollHorizontal: PropTypes.bool,\n  /** Whether the children of CardDeck should be processed by `useOverflowScrollItems` to give\n   * each child a known/stable CSS classname */\n  hasOverflowScrollItems: PropTypes.bool,\n  /** Whether to disable the default equal height cards */\n  hasEqualColumnHeights: PropTypes.bool,\n};\n\nCardDeck.defaultProps = {\n  className: undefined,\n  columnSizes: {\n    sm: 12,\n    lg: 6,\n    xl: 4,\n  },\n  hasInteractiveChildren: false,\n  canScrollHorizontal: true,\n  hasOverflowScrollItems: false,\n  hasEqualColumnHeights: true,\n};\n\nCardDeck.Deprecated = BaseCardDeck;\n\nexport default CardDeck;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CardDeck.js","names":["React","Children","useMemo","classNames","PropTypes","Row","Col","useOverflowScrollItems","CardDeck","forwardRef","_ref","ref","className","children","columnSizes","hasInteractiveChildren","canScrollHorizontal","hasOverflowScrollItems","hasEqualColumnHeights","cards","map","card","createElement","_extends","overflowCardDeckItems","cardDeckChildren","tabIndex","propTypes","string","node","isRequired","shape","xs","number","sm","md","lg","xl","bool","defaultProps","undefined"],"sources":["../../src/Card/CardDeck.jsx"],"sourcesContent":["import React, { Children, useMemo } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport Row from 'react-bootstrap/Row';\nimport Col from 'react-bootstrap/Col';\nimport { useOverflowScrollItems } from '../OverflowScroll';\n\nconst CardDeck = React.forwardRef(({\n  className,\n  children,\n  columnSizes,\n  hasInteractiveChildren,\n  canScrollHorizontal,\n  hasOverflowScrollItems,\n  hasEqualColumnHeights,\n}, ref) => {\n  const cards = useMemo(\n    () => Children.map(children, (card) => (\n      <Col\n        {...columnSizes}\n        className={classNames(\n          'pgn__card-deck__card-item',\n          {\n            'pgn__card__disable-equal-column-heights': !hasEqualColumnHeights,\n          },\n        )}\n      >\n        {card}\n      </Col>\n    )),\n    [children, columnSizes, hasEqualColumnHeights],\n  );\n  const overflowCardDeckItems = useOverflowScrollItems(cards);\n\n  const cardDeckChildren = useMemo(() => {\n    if (hasOverflowScrollItems) {\n      return overflowCardDeckItems;\n    }\n    return cards;\n  }, [hasOverflowScrollItems, overflowCardDeckItems, cards]);\n\n  return (\n    <div\n      className={classNames(\n        'pgn__card-deck',\n        {\n          'pgn__card-deck-has-horizontal-scroll': canScrollHorizontal,\n        },\n        className,\n      )}\n    >\n      <Row\n        className=\"pgn__card-deck-row\"\n        tabIndex={hasInteractiveChildren ? -1 : 0}\n        ref={ref}\n      >\n        {cardDeckChildren}\n      </Row>\n    </div>\n  );\n});\n\nCardDeck.propTypes = {\n  /** The class name for the CardDeck component */\n  className: PropTypes.string,\n  /** The Card components to organize */\n  children: PropTypes.node.isRequired,\n  /**\n   * An object containing the desired column size at each breakpoint, following a similar\n   * props API as ``react-bootstrap/Col``\n   */\n  columnSizes: PropTypes.shape({\n    xs: PropTypes.number,\n    sm: PropTypes.number,\n    md: PropTypes.number,\n    lg: PropTypes.number,\n    xl: PropTypes.number,\n  }),\n  /** Whether the child `Card` components are interactive/focusable. If not, a `tabindex=\"0\"` is\n   * added to be a11y-compliant */\n  hasInteractiveChildren: PropTypes.bool,\n  /** Whether the `CardDeck` supports horizontal scrolling when there are overflow children */\n  canScrollHorizontal: PropTypes.bool,\n  /** Whether the children of CardDeck should be processed by `useOverflowScrollItems` to give\n   * each child a known/stable CSS classname */\n  hasOverflowScrollItems: PropTypes.bool,\n  /** Whether to disable the default equal height cards */\n  hasEqualColumnHeights: PropTypes.bool,\n};\n\nCardDeck.defaultProps = {\n  className: undefined,\n  columnSizes: {\n    sm: 12,\n    lg: 6,\n    xl: 4,\n  },\n  hasInteractiveChildren: false,\n  canScrollHorizontal: true,\n  hasOverflowScrollItems: false,\n  hasEqualColumnHeights: true,\n};\n\nexport default CardDeck;\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/index.scss

@@ -136,11 +136,11 @@ a.pgn__card {
     }
 
     .pgn__card-header-title-sm {
-      font-size: var(--pgn-typography-font-size-h4);
+      font-size: var(--pgn-typography-font-size-h4-base);
     }
 
     .pgn__card-header-title-md {
-      font-size: var(--pgn-typography-font-size-h3);
+      font-size: var(--pgn-typography-font-size-h3-base);
     }
 
     %header-subtitle {
@@ -155,11 +155,11 @@ a.pgn__card {
     }
 
     .pgn__card-header-subtitle-sm {
-      font-size: var(--pgn-typography-font-size-h5);
+      font-size: var(--pgn-typography-font-size-h5-base);
     }
 
     .pgn__card-header-subtitle-md {
-      font-size: var(--pgn-typography-font-size-h4);
+      font-size: var(--pgn-typography-font-size-h4-base);
     }
 
     .pgn__card-header-actions {
@@ -271,7 +271,7 @@ a.pgn__card {
     .pgn__card-section-title {
       color: var(--pgn-color-black);
       font-weight: var(--pgn-typography-font-weight-bold);
-      font-size: var(--pgn-typography-font-size-h5);
+      font-size: var(--pgn-typography-font-size-h5-base);
       margin-bottom: var(--pgn-spacing-card-spacer-y);
     }
 
@@ -392,7 +392,7 @@ a.pgn__card {
     }
 
     .pgn__card-status__heading {
-      font-size: var(--pgn-typography-font-size-h4);
+      font-size: var(--pgn-typography-font-size-h4-base);
       color: var(--pgn-color-black);
       display: flex;
       font-weight: var(--pgn-typography-font-weight-bold);

package/dist/Carousel/index.scss

@@ -1,3 +1,26 @@
+:root {
+  --pgn-transition-carousel-base:
+    var(--pgn-transition-carousel-base-property)
+    var(--pgn-transition-carousel-base-duration)
+    var(--pgn-transition-carousel-base-timing-function)
+    var(--pgn-transition-carousel-base-delay)
+    var(--pgn-transition-carousel-base-behavior);
+
+  --pgn-transition-carousel-indicator:
+    var(--pgn-transition-carousel-indicator-property)
+    var(--pgn-transition-carousel-indicator-duration)
+    var(--pgn-transition-carousel-indicator-timing-function)
+    var(--pgn-transition-carousel-indicator-delay)
+    var(--pgn-transition-carousel-indicator-behavior);
+
+  --pgn-transition-carousel-control:
+    var(--pgn-transition-carousel-control-property)
+    var(--pgn-transition-carousel-control-duration)
+    var(--pgn-transition-carousel-control-timing-function)
+    var(--pgn-transition-carousel-control-delay)
+    var(--pgn-transition-carousel-control-behavior);
+}
+
 .carousel {
   position: relative;
 }
@@ -58,7 +81,7 @@
   .active.carousel-item-right {
     z-index: 0;
     opacity: 0;
-    transition: opacity 0s var(--pgn-transition-carousel-base);
+    transition: var(--pgn-transition-carousel-base);
   }
 }
 

package/dist/Chip/ChipIcon.d.ts

@@ -13,7 +13,7 @@ export type ChipIconProps = {
     onClick?: undefined;
     alt?: undefined;
 });
-declare function ChipIcon({ className, src, onClick, alt, variant, disabled, }: ChipIconProps): React.JSX.Element;
+declare function ChipIcon({ className, src, onClick, alt, variant, disabled, }: ChipIconProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ChipIcon {
     var propTypes: {
         className: PropTypes.Validator<string>;

package/dist/CloseButton/index.scss

@@ -1,3 +1,11 @@
+:root {
+  --pgn-elevation-close-button-text-shadow:
+    var(--pgn-elevation-close-button-text-shadow-offset-x)
+    var(--pgn-elevation-close-button-text-shadow-offset-y)
+    var(--pgn-elevation-close-button-text-shadow-blur)
+    var(--pgn-elevation-close-button-text-shadow-color);
+}
+
 .close {
   float: right;
   font-weight: var(--pgn-typography-close-button-font-weight);

package/dist/ColorPicker/index.scss

@@ -37,7 +37,7 @@
 
 .pgn__hex-label {
   font-weight: bold;
-  font-size: var(--pgn-typography-font-size-mobile-h5);
+  font-size: var(--pgn-typography-font-size-h5-mobile);
   padding: .5rem;
   margin-bottom: 0 !important;
 }

package/dist/DataTable/index.scss

@@ -1,3 +1,15 @@
+:root {
+  --pgn-elevation-data-table-box-shadow:
+    var(--pgn-elevation-data-table-box-shadow-offset-x)
+    var(--pgn-elevation-data-table-box-shadow-offset-y)
+    var(--pgn-elevation-data-table-box-shadow-blur)
+    var(--pgn-elevation-data-table-box-shadow-color);
+
+  --pgn-spacing-data-table-padding-cell:
+    var(--pgn-spacing-data-table-padding-cell-x)
+    var(--pgn-spacing-data-table-padding-cell-y);
+}
+
 .pgn__data-table-wrapper {
   font-size: var(--pgn-typography-font-size-sm);
   border-radius: var(--pgn-size-border-radius-base);

package/dist/Dropdown/dropdown-bootstrap.scss

@@ -1,3 +1,9 @@
+:root {
+  --pgn-spacing-dropdown-padding-header:
+    var(--pgn-spacing-dropdown-padding-header-y)
+    var(--pgn-spacing-dropdown-padding-header-x);
+}
+
 .dropup,
 .dropright,
 .dropdown,

package/dist/Dropzone/index.scss

@@ -1,3 +1,37 @@
+:root {
+  --pgn-elevation-dropzone-hover:
+    var(--pgn-elevation-dropzone-hover-inset)
+    var(--pgn-elevation-dropzone-hover-offset-x)
+    var(--pgn-elevation-dropzone-hover-offset-y)
+    var(--pgn-elevation-dropzone-hover-blur)
+    var(--pgn-elevation-dropzone-hover-spread)
+    var(--pgn-elevation-dropzone-hover-color);
+
+  --pgn-elevation-dropzone-focus:
+    var(--pgn-elevation-dropzone-focus-inset)
+    var(--pgn-elevation-dropzone-focus-offset-x)
+    var(--pgn-elevation-dropzone-focus-offset-y)
+    var(--pgn-elevation-dropzone-focus-blur)
+    var(--pgn-elevation-dropzone-focus-spread)
+    var(--pgn-elevation-dropzone-focus-color);
+
+  --pgn-elevation-dropzone-error:
+    var(--pgn-elevation-dropzone-error-inset)
+    var(--pgn-elevation-dropzone-error-offset-x)
+    var(--pgn-elevation-dropzone-error-offset-y)
+    var(--pgn-elevation-dropzone-error-blur)
+    var(--pgn-elevation-dropzone-error-spread)
+    var(--pgn-elevation-dropzone-error-color);
+
+  --pgn-elevation-dropzone-active:
+    var(--pgn-elevation-dropzone-active-inset)
+    var(--pgn-elevation-dropzone-active-offset-x)
+    var(--pgn-elevation-dropzone-active-offset-y)
+    var(--pgn-elevation-dropzone-active-blur)
+    var(--pgn-elevation-dropzone-active-spread)
+    var(--pgn-elevation-dropzone-active-color);
+}
+
 .pgn__dropzone {
   display: flex;
   justify-content: center;

package/dist/Form/_FormText.scss

@@ -1,5 +1,5 @@
 .pgn__form-text {
-  font-size: var(--pgn-typography-font-size-small-base);
+  font-size: var(--pgn-typography-font-size-sm);
   display: flex;
   align-items: center;
 

package/dist/Form/_bootstrap-custom-forms.scss

@@ -1,3 +1,43 @@
+:root {
+  --pgn-elevation-form-control-indicator-checked-focus:
+    var(--pgn-elevation-form-control-indicator-checked-focus-offset-x)
+    var(--pgn-elevation-form-control-indicator-checked-focus-offset-y)
+    var(--pgn-elevation-form-control-indicator-checked-focus-blur)
+    var(--pgn-elevation-form-control-indicator-checked-focus-spread)
+    var(--pgn-elevation-form-control-indicator-checked-focus-color);
+
+  --pgn-elevation-form-control-select-border-focus:
+    var(--pgn-elevation-form-control-select-border-focus-offset-x)
+    var(--pgn-elevation-form-control-select-border-focus-offset-y)
+    var(--pgn-elevation-form-control-select-border-focus-blur)
+    var(--pgn-elevation-form-control-select-border-focus-spread)
+    var(--pgn-elevation-form-control-select-border-focus-color);
+
+  --pgn-elevation-form-control-file-focus:
+    var(--pgn-elevation-form-control-file-focus-offset-x)
+    var(--pgn-elevation-form-control-file-focus-offset-y)
+    var(--pgn-elevation-form-control-file-focus-blur)
+    var(--pgn-elevation-form-control-file-focus-spread)
+    var(--pgn-elevation-form-control-file-focus-color);
+
+  --pgn-transition-form-control:
+    var(--pgn-transition-form-control-1-property)
+    var(--pgn-transition-form-control-1-duration)
+    var(--pgn-transition-form-control-1-timing-function)
+    var(--pgn-transition-form-control-1-delay)
+    var(--pgn-transition-form-control-1-behavior),
+    var(--pgn-transition-form-control-2-property)
+    var(--pgn-transition-form-control-2-duration)
+    var(--pgn-transition-form-control-2-timing-function)
+    var(--pgn-transition-form-control-2-delay)
+    var(--pgn-transition-form-control-2-behavior),
+    var(--pgn-transition-form-control-3-property)
+    var(--pgn-transition-form-control-3-duration)
+    var(--pgn-transition-form-control-3-timing-function)
+    var(--pgn-transition-form-control-3-delay)
+    var(--pgn-transition-form-control-3-behavior);
+}
+
 // Embedded icons from Open Iconic.
 // Released under MIT and copyright 2014 Waybury.
 // https://useiconic.com/open

package/dist/Form/_index.scss

@@ -5,6 +5,15 @@
 @import "FormText";
 @import "FormControlSet";
 
+:root {
+  --pgn-elevation-form-control-indicator-checked-focus:
+    var(--pgn-elevation-form-control-indicator-checked-focus-offset-x)
+    var(--pgn-elevation-form-control-indicator-checked-focus-offset-y)
+    var(--pgn-elevation-form-control-indicator-checked-focus-blur)
+    var(--pgn-elevation-form-control-indicator-checked-focus-spread)
+    var(--pgn-elevation-form-control-indicator-checked-focus-color);
+}
+
 // A form input state used by the now deprecate Fieldset and asInput
 // we can remove this when they are deleted.
 .form-control.is-invalid.is-invalid-nodanger {

package/dist/Form/_mixins.scss

@@ -1,3 +1,25 @@
+:root {
+  --pgn-elevation-form-input-focus:
+    var(--pgn-elevation-form-input-focus-offset-x)
+    var(--pgn-elevation-form-input-focus-offset-y)
+    var(--pgn-elevation-form-input-focus-blur)
+    var(--pgn-elevation-form-input-focus-spread)
+    var(--pgn-elevation-form-input-focus-color);
+
+  --pgn-spacing-form-control-select-feedback-icon-position:
+    var(--pgn-spacing-form-control-select-feedback-icon-position-position-y)
+    var(--pgn-spacing-form-control-select-feedback-icon-position-position-x)
+    var(--pgn-spacing-form-control-select-feedback-icon-position-offset-x)
+    var(--pgn-spacing-form-control-select-feedback-icon-position-offset-y);
+
+  --pgn-other-content-form-control-select-bg:
+    var(--pgn-other-content-form-control-select-bg-image)
+    var(--pgn-other-content-form-control-select-bg-position-x)
+    var(--pgn-other-content-form-control-select-bg-offset-y)
+    var(--pgn-other-content-form-control-select-bg-position-y)
+    / var(--pgn-other-content-form-control-select-bg-color); // stylelint-disable-line scss/operator-no-newline-before
+}
+
 @mixin form-control-floating-label-initial(
   $padding-x,
   $padding-y,

package/dist/IconButton/index.d.ts

@@ -43,7 +43,7 @@ interface PropsWithTooltip extends Props {
 /**
  * An icon button wrapped in overlaytrigger to display a tooltip.
  */
-declare function IconButtonWithTooltip({ tooltipPlacement, tooltipContent, ...props }: PropsWithTooltip): React.JSX.Element;
+declare function IconButtonWithTooltip({ tooltipPlacement, tooltipContent, ...props }: PropsWithTooltip): import("react/jsx-runtime").JSX.Element;
 declare namespace IconButtonWithTooltip {
     var defaultProps: {
         tooltipPlacement: string;

package/dist/IconButton/index.scss

@@ -1,5 +1,151 @@
 @import "mixins";
 
+:root {
+  --pgn-elevation-icon-button-box-shadow-primary-base:
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-primary-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-secondary-base:
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-brand-base:
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-brand-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-success-base:
+    var(--pgn-elevation-icon-button-box-shadow-success-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-success-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-warning-base:
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-warning-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-danger-base:
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-danger-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-light-base:
+    var(--pgn-elevation-icon-button-box-shadow-light-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-light-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-dark-base:
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-dark-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-black-base:
+    var(--pgn-elevation-icon-button-box-shadow-black-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-black-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-color);
+}
+
 .btn-icon {
   @include btn-icon-size(var(--pgn-size-icon-button-diameter-md));
 

package/dist/Menu/index.scss

@@ -1,3 +1,11 @@
+:root {
+  --pgn-elevation-menu-box-shadow:
+    var(--pgn-elevation-menu-box-shadow-offset-x)
+    var(--pgn-elevation-menu-box-shadow-offset-y)
+    var(--pgn-elevation-menu-box-shadow-blur)
+    var(--pgn-elevation-menu-box-shadow-color);
+}
+
 .pgn__menu {
   border-radius: var(--pgn-size-menu-base-border-radius);
   box-shadow: var(--pgn-elevation-menu-box-shadow);

package/dist/Modal/ModalDialog.js

@@ -111,8 +111,13 @@ ModalDialog.propTypes = {
    * Specifies the z-index of the modal
    */
   zIndex: PropTypes.number,
-  /** Specifies whether overflow is visible in the modal */
-  isOverflowVisible: PropTypes.bool
+  /**
+   * Specifies whether overflow content inside the modal should be visible.
+   * - `true` - content that exceeds the modal boundaries will remain visible outside the modal's main viewport,
+   * rather than being clipped or hidden.
+   * - `false` - any overflow content will be clipped to fit within the modal's dimensions.
+   */
+  isOverflowVisible: PropTypes.bool.isRequired
 };
 ModalDialog.defaultProps = {
   isOpen: false,
@@ -124,8 +129,7 @@ ModalDialog.defaultProps = {
   isFullscreenScroll: false,
   isFullscreenOnMobile: false,
   isBlocking: false,
-  zIndex: undefined,
-  isOverflowVisible: true
+  zIndex: undefined
 };
 ModalDialog.Header = ModalDialogHeader;
 ModalDialog.Title = ModalDialogTitle;

package/dist/Modal/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDialog.js","names":["React","PropTypes","classNames","useMediaQuery","ModalLayer","ModalCloseButton","ModalDialogHeader","ModalDialogTitle","ModalDialogFooter","ModalDialogBody","ModalDialogHero","Icon","IconButton","Close","MODAL_DIALOG_CLOSE_LABEL","ModalDialog","_ref","_classNames","children","title","isOpen","onClose","size","variant","hasCloseButton","closeLabel","isFullscreenScroll","className","isFullscreenOnMobile","isBlocking","zIndex","isOverflowVisible","isMobile","query","showFullScreen","createElement","role","_defineProperty","concat","as","iconAs","invertColors","src","alt","propTypes","node","isRequired","string","func","bool","oneOf","number","defaultProps","undefined","Header","Title","Footer","CloseButton","Body","Hero"],"sources":["../../src/Modal/ModalDialog.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useMediaQuery } from 'react-responsive';\nimport ModalLayer from './ModalLayer';\nimport ModalCloseButton from './ModalCloseButton';\nimport ModalDialogHeader from './ModalDialogHeader';\nimport ModalDialogTitle from './ModalDialogTitle';\nimport ModalDialogFooter from './ModalDialogFooter';\nimport ModalDialogBody from './ModalDialogBody';\nimport ModalDialogHero from './ModalDialogHero';\n\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport { Close } from '../../icons';\n\nexport const MODAL_DIALOG_CLOSE_LABEL = 'Close';\n\nfunction ModalDialog({\n  children,\n  title,\n  isOpen,\n  onClose,\n  size,\n  variant,\n  hasCloseButton,\n  closeLabel,\n  isFullscreenScroll,\n  className,\n  isFullscreenOnMobile,\n  isBlocking,\n  zIndex,\n  isOverflowVisible,\n}) {\n  const isMobile = useMediaQuery({ query: '(max-width: 767.98px)' });\n  const showFullScreen = (isFullscreenOnMobile && isMobile);\n  return (\n    <ModalLayer isOpen={isOpen} onClose={onClose} isBlocking={isBlocking} zIndex={zIndex}>\n      <div\n        role=\"dialog\"\n        aria-label={title}\n        className={classNames(\n          'pgn__modal',\n          {\n            [`pgn__modal-${showFullScreen ? 'fullscreen' : size}`]: size,\n            [`pgn__modal-${variant}`]: variant,\n            'pgn__modal-scroll-fullscreen': isFullscreenScroll,\n            'pgn__modal-visible-overflow': isOverflowVisible,\n          },\n          className,\n        )}\n      >\n        {hasCloseButton && (\n          <div className=\"pgn__modal-close-container\">\n            <ModalCloseButton\n              as={IconButton}\n              iconAs={Icon}\n              invertColors={variant === 'dark'}\n              src={Close}\n              alt={closeLabel}\n            />\n          </div>\n        )}\n        {children}\n      </div>\n    </ModalLayer>\n  );\n}\n\nModalDialog.propTypes = {\n  /**\n   *  Specifies the content of the dialog\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * The aria-label of the dialog\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * A callback to close the modal dialog\n   */\n  onClose: PropTypes.func.isRequired,\n  /**\n   * Is the modal dialog open or closed\n   */\n  isOpen: PropTypes.bool,\n  /**\n   * The close 'x' icon button in the top right of the dialog box\n   */\n  hasCloseButton: PropTypes.bool,\n  /**\n   * Sizes determine the maximum width of the dialog box\n   */\n  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'fullscreen']),\n  /**\n   * The visual style of the dialog box\n   */\n  variant: PropTypes.oneOf(['default', 'warning', 'danger', 'success', 'dark']),\n  /**\n   * The label supplied to the close icon button if one is rendered\n   */\n  closeLabel: PropTypes.string,\n  /**\n   *  Specifies class name to append to the base element\n   */\n  className: PropTypes.string,\n  /**\n   * Determines where a scrollbar should appear if a modal is too large for the\n   * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true\n   * the browser window itself receives the scrollbar.\n   */\n  isFullscreenScroll: PropTypes.bool,\n  /**\n   * To show full screen view on mobile screens\n   */\n  isFullscreenOnMobile: PropTypes.bool,\n  /**\n   * Prevent clicking on the backdrop or pressing Esc to close the modal\n   */\n  isBlocking: PropTypes.bool,\n  /**\n   * Specifies the z-index of the modal\n   */\n  zIndex: PropTypes.number,\n  /** Specifies whether overflow is visible in the modal */\n  isOverflowVisible: PropTypes.bool,\n};\n\nModalDialog.defaultProps = {\n  isOpen: false,\n  hasCloseButton: true,\n  size: 'md',\n  variant: 'default',\n  closeLabel: MODAL_DIALOG_CLOSE_LABEL,\n  className: undefined,\n  isFullscreenScroll: false,\n  isFullscreenOnMobile: false,\n  isBlocking: false,\n  zIndex: undefined,\n  isOverflowVisible: true,\n};\n\nModalDialog.Header = ModalDialogHeader;\nModalDialog.Title = ModalDialogTitle;\nModalDialog.Footer = ModalDialogFooter;\nModalDialog.CloseButton = ModalCloseButton;\nModalDialog.Body = ModalDialogBody;\nModalDialog.Hero = ModalDialogHero;\n\nexport default ModalDialog;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ModalDialog.js","names":["React","PropTypes","classNames","useMediaQuery","ModalLayer","ModalCloseButton","ModalDialogHeader","ModalDialogTitle","ModalDialogFooter","ModalDialogBody","ModalDialogHero","Icon","IconButton","Close","MODAL_DIALOG_CLOSE_LABEL","ModalDialog","_ref","_classNames","children","title","isOpen","onClose","size","variant","hasCloseButton","closeLabel","isFullscreenScroll","className","isFullscreenOnMobile","isBlocking","zIndex","isOverflowVisible","isMobile","query","showFullScreen","createElement","role","_defineProperty","concat","as","iconAs","invertColors","src","alt","propTypes","node","isRequired","string","func","bool","oneOf","number","defaultProps","undefined","Header","Title","Footer","CloseButton","Body","Hero"],"sources":["../../src/Modal/ModalDialog.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useMediaQuery } from 'react-responsive';\nimport ModalLayer from './ModalLayer';\nimport ModalCloseButton from './ModalCloseButton';\nimport ModalDialogHeader from './ModalDialogHeader';\nimport ModalDialogTitle from './ModalDialogTitle';\nimport ModalDialogFooter from './ModalDialogFooter';\nimport ModalDialogBody from './ModalDialogBody';\nimport ModalDialogHero from './ModalDialogHero';\n\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport { Close } from '../../icons';\n\nexport const MODAL_DIALOG_CLOSE_LABEL = 'Close';\n\nfunction ModalDialog({\n  children,\n  title,\n  isOpen,\n  onClose,\n  size,\n  variant,\n  hasCloseButton,\n  closeLabel,\n  isFullscreenScroll,\n  className,\n  isFullscreenOnMobile,\n  isBlocking,\n  zIndex,\n  isOverflowVisible,\n}) {\n  const isMobile = useMediaQuery({ query: '(max-width: 767.98px)' });\n  const showFullScreen = (isFullscreenOnMobile && isMobile);\n  return (\n    <ModalLayer isOpen={isOpen} onClose={onClose} isBlocking={isBlocking} zIndex={zIndex}>\n      <div\n        role=\"dialog\"\n        aria-label={title}\n        className={classNames(\n          'pgn__modal',\n          {\n            [`pgn__modal-${showFullScreen ? 'fullscreen' : size}`]: size,\n            [`pgn__modal-${variant}`]: variant,\n            'pgn__modal-scroll-fullscreen': isFullscreenScroll,\n            'pgn__modal-visible-overflow': isOverflowVisible,\n          },\n          className,\n        )}\n      >\n        {hasCloseButton && (\n          <div className=\"pgn__modal-close-container\">\n            <ModalCloseButton\n              as={IconButton}\n              iconAs={Icon}\n              invertColors={variant === 'dark'}\n              src={Close}\n              alt={closeLabel}\n            />\n          </div>\n        )}\n        {children}\n      </div>\n    </ModalLayer>\n  );\n}\n\nModalDialog.propTypes = {\n  /**\n   *  Specifies the content of the dialog\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * The aria-label of the dialog\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * A callback to close the modal dialog\n   */\n  onClose: PropTypes.func.isRequired,\n  /**\n   * Is the modal dialog open or closed\n   */\n  isOpen: PropTypes.bool,\n  /**\n   * The close 'x' icon button in the top right of the dialog box\n   */\n  hasCloseButton: PropTypes.bool,\n  /**\n   * Sizes determine the maximum width of the dialog box\n   */\n  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'fullscreen']),\n  /**\n   * The visual style of the dialog box\n   */\n  variant: PropTypes.oneOf(['default', 'warning', 'danger', 'success', 'dark']),\n  /**\n   * The label supplied to the close icon button if one is rendered\n   */\n  closeLabel: PropTypes.string,\n  /**\n   *  Specifies class name to append to the base element\n   */\n  className: PropTypes.string,\n  /**\n   * Determines where a scrollbar should appear if a modal is too large for the\n   * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true\n   * the browser window itself receives the scrollbar.\n   */\n  isFullscreenScroll: PropTypes.bool,\n  /**\n   * To show full screen view on mobile screens\n   */\n  isFullscreenOnMobile: PropTypes.bool,\n  /**\n   * Prevent clicking on the backdrop or pressing Esc to close the modal\n   */\n  isBlocking: PropTypes.bool,\n  /**\n   * Specifies the z-index of the modal\n   */\n  zIndex: PropTypes.number,\n  /**\n   * Specifies whether overflow content inside the modal should be visible.\n   * - `true` - content that exceeds the modal boundaries will remain visible outside the modal's main viewport,\n   * rather than being clipped or hidden.\n   * - `false` - any overflow content will be clipped to fit within the modal's dimensions.\n   */\n  isOverflowVisible: PropTypes.bool.isRequired,\n};\n\nModalDialog.defaultProps = {\n  isOpen: false,\n  hasCloseButton: true,\n  size: 'md',\n  variant: 'default',\n  closeLabel: MODAL_DIALOG_CLOSE_LABEL,\n  className: undefined,\n  isFullscreenScroll: false,\n  isFullscreenOnMobile: false,\n  isBlocking: false,\n  zIndex: undefined,\n};\n\nModalDialog.Header = ModalDialogHeader;\nModalDialog.Title = ModalDialogTitle;\nModalDialog.Footer = ModalDialogFooter;\nModalDialog.CloseButton = ModalCloseButton;\nModalDialog.Body = ModalDialogBody;\nModalDialog.Hero = ModalDialogHero;\n\nexport default ModalDialog;\n"],"mappings":"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","ignoreList":[]}