@openedx/paragon 23.14.1 → 23.14.3

package/README.md

@@ -136,6 +136,72 @@ Note that if you are using ``@edx/frontend-platform``'s ``AppProvider`` componen
   });
 ```
 
+## Available Scripts
+
+Paragon provides a comprehensive set of npm scripts to help with development, testing, building, and maintenance tasks. Here's a detailed explanation of each available script:
+
+### Build Scripts
+
+- **`npm run build`** - Builds the entire Paragon design system using the Makefile. This compiles TypeScript, SCSS, and creates the distribution files in the `dist/` directory.
+
+- **`npm run build-docs`** - Builds the documentation website specifically. This is useful when generating a static version of the docs for deployment.
+
+- **`npm run build-types`** - Generates TypeScript declaration files (`.d.ts`). This is essential for providing type information to TypeScript consumers.
+
+### Development Scripts
+
+- **`npm start`** - Starts the documentation website development server. This is the primary way to view and interact with Paragon components during development.
+
+- **`npm run generate-component`** - Launches the component generator tool. This interactive CLI helps create new components with all the necessary files and boilerplate code.
+
+- **`npm run example:start`** - Starts the example application, which allows testing Paragon components in a micro-frontend (MFE) environment.
+
+- **`npm run example:start:with-theme`** - Starts the example application with theme support, useful for testing branded components.
+
+### Testing Scripts
+
+- **`npm run test`** - Runs the full test suite with coverage reporting using Jest.
+
+- **`npm run test:watch`** - Runs tests in watch mode, automatically re-running tests when files change.
+
+- **`npm run debug-test`** - Runs tests with Node.js inspector enabled, allowing debugging tests in Chrome DevTools.
+
+- **`npm run snapshot`** - Updates Jest snapshot files. Run this when intentional changes to component rendering should be reflected in snapshots.
+
+### Code Quality Scripts
+
+- **`npm run lint`** - Runs both ESLint (for JavaScript/TypeScript) and Stylelint (for SCSS) to check code quality and enforce coding standards.
+
+- **`npm run stylelint`** - Runs Stylelint specifically on SCSS files to ensure consistent styling conventions.
+
+- **`npm run type-check`** - Performs TypeScript type checking without emitting files.
+
+- **`npm run type-check:watch`** - Runs TypeScript type checking in watch mode, continuously monitoring for type errors during development.
+
+### Internationalization Scripts
+
+- **`npm run i18n_extract`** - Extracts internationalization strings from React components and generates a JSON file for translation services like Transifex.
+
+- **`npm run i18n_compile`** - Compiles translated messages back into the format expected by react-intl.
+
+### Documentation and Playroom Scripts
+
+- **`npm run playroom:start`** - Starts Playroom, a tool for developing and testing components in isolation with live code editing.
+
+- **`npm run playroom:build`** - Builds a static version of Playroom for deployment.
+
+### Release and Maintenance Scripts
+
+- **`npm run semantic-release`** - Runs the semantic release process, which automatically determines version bumps, creates Git tags, and publishes to npm based on commit messages.
+
+- **`npm run generate-changelog`** - Generates a changelog file based on commit history and semantic versioning.
+
+- **`npm run commit`** - Runs the commitizen CLI, which helps create properly formatted commit messages that work with semantic-release.
+
+- **`npm run prepublishOnly`** - Automatically runs before npm publish to ensure the library is built before distribution.
+
+- **`npm run prepare`** - Sets up Git hooks (via Husky) for pre-commit linting and other checks.
+
 ## Contributing
 
 The branch to target with your PR depends on the type of change you are contributing to Paragon.
@@ -163,7 +229,7 @@ If you want to test the changes with local MFE setup, you need to create a "modu
 ```javascript
 module.exports = {
   /*
-  Modules you want to use from local source code. Adding a module here means that when 
+  Modules you want to use from local source code. Adding a module here means that when
   your MFE runs its build, it'll resolve the source from peer directories of the app.
 
   moduleName: the name you use to import code from the module.
@@ -188,26 +254,26 @@ Then, when importing Paragon's core SCSS in your MFE the import needs to begin w
 When developing a new component you should generally follow three rules:
 1. The component should not have **any** hardcoded strings as it would be impossible for consumers to translate it
 2. Internationalize all default values of props that expect strings, i.e.
-   
+
    - For places where you need to display a string, and it's okay if it is a React element use ``FormattedMessage``, e.g. (see [Alert](src/Alert/index.jsx) component for a full example)
-   
+
       ```javascript
       import { FormattedMessage } from 'react-intl';
-      
-      <FormattedMessage 
+
+      <FormattedMessage
         id="pgn.Alert.closeLabel"
         defaultMessage="Dismiss"
         description="Label of a close button on Alert component"
       />
       ```
-     
+
    - For places where the display string has to be a plain JavaScript string use ``formatMessage``, this would require access to ``intl`` object from ``react-intl``, e.g.
-      
+
       - For class components use ``injectIntl`` HOC
 
           ```javascript
           import { injectIntl } from 'react-intl';
-          
+
           class MyClassComponent extends React.Component {
             render() {
               const { altText, intl } = this.props;
@@ -216,7 +282,7 @@ When developing a new component you should generally follow three rules:
                 defaultMessage: 'Close',
                 description: 'Close label for Toast component',
               });
-              
+
               return (
                 <IconButton
                   alt={intlCloseLabel}
@@ -226,15 +292,15 @@ When developing a new component you should generally follow three rules:
               )
             }
           }
-          
+
           export default injectIntl(MyClassComponent);
           ```
 
       - For functional components use ``useIntl`` hook
 
-          ```javascript 
+          ```javascript
           import { useIntl } from 'react-intl';
-    
+
           const MyFunctionComponent = ({ altText }) => {
             const intls = useIntl();
             const intlAltText = altText || intl.formatMessage({
@@ -242,7 +308,7 @@ When developing a new component you should generally follow three rules:
               defaultMessage: 'Close',
               description: 'Close label for Toast component',
             });
-    
+
             return (
               <IconButton
                 alt={intlCloseLabel}
@@ -254,7 +320,7 @@ When developing a new component you should generally follow three rules:
 
           export default MyFunctionComponent;
           ```
-      
+
    **Notes on the format above**:
    - `id` is required and must be a dot-separated string of the format `pgn.<componentName>.<subcomponentName>.<propName>`
    - The `defaultMessage` is required, and should be the English display string.

package/dist/ActionRow/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface ActionRowProps extends React.HTMLAttributes<HTMLElement> {
+    /** Specifies the base element */
+    as?: React.ElementType;
+    /** Specifies the contents of the row */
+    children: React.ReactNode;
+    /** Specifies class name to append to the base element */
+    className?: string;
+    /** Specifies whether row should be displayed horizontally */
+    isStacked?: boolean;
+}
+declare function ActionRow({ as, isStacked, children, ...props }: ActionRowProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare namespace ActionRow {
+    var Spacer: typeof ActionRowSpacer;
+}
+declare function ActionRowSpacer(): import("react/jsx-runtime").JSX.Element;
+export { ActionRowSpacer };
+export default ActionRow;

package/dist/ActionRow/index.js

@@ -1,13 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
-function ActionRow(_ref) {
-  let {
-    as,
-    isStacked,
-    children,
-    ...props
-  } = _ref;
+function ActionRow({
+  as = 'div',
+  isStacked = false,
+  children,
+  ...props
+}) {
   return /*#__PURE__*/React.createElement(as, {
     ...props,
     className: classNames(props.className, {
@@ -16,22 +14,6 @@ function ActionRow(_ref) {
     })
   }, children);
 }
-ActionRow.propTypes = {
-  /** Specifies the base element */
-  as: PropTypes.elementType,
-  /** Specifies class name to append to the base element */
-  className: PropTypes.string,
-  /** Specifies the contents of the row */
-  children: PropTypes.node,
-  /** Specifies whether row should be displayed horizontally */
-  isStacked: PropTypes.bool
-};
-ActionRow.defaultProps = {
-  as: 'div',
-  className: undefined,
-  children: null,
-  isStacked: false
-};
 function ActionRowSpacer() {
   return /*#__PURE__*/React.createElement("span", {
     className: "pgn__action-row-spacer"

package/dist/ActionRow/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","ActionRow","_ref","as","isStacked","children","props","createElement","className","propTypes","elementType","string","node","bool","defaultProps","undefined","ActionRowSpacer","Spacer"],"sources":["../../src/ActionRow/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nfunction ActionRow({\n  as,\n  isStacked,\n  children,\n  ...props\n}) {\n  return React.createElement(\n    as,\n    {\n      ...props,\n      className: classNames(props.className, {\n        'pgn__action-row': !isStacked,\n        'pgn__action-row-stacked': isStacked,\n      }),\n    },\n    children,\n  );\n}\n\nActionRow.propTypes = {\n  /** Specifies the base element */\n  as: PropTypes.elementType,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n  /** Specifies the contents of the row */\n  children: PropTypes.node,\n  /** Specifies whether row should be displayed horizontally */\n  isStacked: PropTypes.bool,\n};\n\nActionRow.defaultProps = {\n  as: 'div',\n  className: undefined,\n  children: null,\n  isStacked: false,\n};\n\nfunction ActionRowSpacer() {\n  return <span className=\"pgn__action-row-spacer\" />;\n}\n\nActionRow.Spacer = ActionRowSpacer;\n\nexport { ActionRowSpacer };\nexport default ActionRow;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,SAASA,CAAAC,IAAA,EAKf;EAAA,IALgB;IACjBC,EAAE;IACFC,SAAS;IACTC,QAAQ;IACR,GAAGC;EACL,CAAC,GAAAJ,IAAA;EACC,oBAAOJ,KAAK,CAACS,aAAa,CACxBJ,EAAE,EACF;IACE,GAAGG,KAAK;IACRE,SAAS,EAAER,UAAU,CAACM,KAAK,CAACE,SAAS,EAAE;MACrC,iBAAiB,EAAE,CAACJ,SAAS;MAC7B,yBAAyB,EAAEA;IAC7B,CAAC;EACH,CAAC,EACDC,QACF,CAAC;AACH;AAEAJ,SAAS,CAACQ,SAAS,GAAG;EACpB;EACAN,EAAE,EAAEJ,SAAS,CAACW,WAAW;EACzB;EACAF,SAAS,EAAET,SAAS,CAACY,MAAM;EAC3B;EACAN,QAAQ,EAAEN,SAAS,CAACa,IAAI;EACxB;EACAR,SAAS,EAAEL,SAAS,CAACc;AACvB,CAAC;AAEDZ,SAAS,CAACa,YAAY,GAAG;EACvBX,EAAE,EAAE,KAAK;EACTK,SAAS,EAAEO,SAAS;EACpBV,QAAQ,EAAE,IAAI;EACdD,SAAS,EAAE;AACb,CAAC;AAED,SAASY,eAAeA,CAAA,EAAG;EACzB,oBAAOlB,KAAA,CAAAS,aAAA;IAAMC,SAAS,EAAC;EAAwB,CAAE,CAAC;AACpD;AAEAP,SAAS,CAACgB,MAAM,GAAGD,eAAe;AAElC,SAASA,eAAe;AACxB,eAAef,SAAS","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","classNames","ActionRow","as","isStacked","children","props","createElement","className","ActionRowSpacer","Spacer"],"sources":["../../src/ActionRow/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\ninterface ActionRowProps extends React.HTMLAttributes<HTMLElement> {\n  /** Specifies the base element */\n  as?: React.ElementType;\n  /** Specifies the contents of the row */\n  children: React.ReactNode;\n  /** Specifies class name to append to the base element */\n  className?: string;\n  /** Specifies whether row should be displayed horizontally */\n  isStacked?: boolean;\n}\n\nfunction ActionRow({\n  as = 'div',\n  isStacked = false,\n  children,\n  ...props\n}: ActionRowProps) {\n  return React.createElement(\n    as,\n    {\n      ...props,\n      className: classNames(props.className, {\n        'pgn__action-row': !isStacked,\n        'pgn__action-row-stacked': isStacked,\n      }),\n    },\n    children,\n  );\n}\n\nfunction ActionRowSpacer() {\n  return <span className=\"pgn__action-row-spacer\" />;\n}\n\nActionRow.Spacer = ActionRowSpacer;\n\nexport { ActionRowSpacer };\nexport default ActionRow;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAanC,SAASC,SAASA,CAAC;EACjBC,EAAE,GAAG,KAAK;EACVC,SAAS,GAAG,KAAK;EACjBC,QAAQ;EACR,GAAGC;AACW,CAAC,EAAE;EACjB,oBAAON,KAAK,CAACO,aAAa,CACxBJ,EAAE,EACF;IACE,GAAGG,KAAK;IACRE,SAAS,EAAEP,UAAU,CAACK,KAAK,CAACE,SAAS,EAAE;MACrC,iBAAiB,EAAE,CAACJ,SAAS;MAC7B,yBAAyB,EAAEA;IAC7B,CAAC;EACH,CAAC,EACDC,QACF,CAAC;AACH;AAEA,SAASI,eAAeA,CAAA,EAAG;EACzB,oBAAOT,KAAA,CAAAO,aAAA;IAAMC,SAAS,EAAC;EAAwB,CAAE,CAAC;AACpD;AAEAN,SAAS,CAACQ,MAAM,GAAGD,eAAe;AAElC,SAASA,eAAe;AACxB,eAAeP,SAAS","ignoreList":[]}

package/dist/Alert/index.js

@@ -11,18 +11,17 @@ import Button from '../Button';
 // @ts-ignore for now - this needs to be converted to TypeScript
 import ActionRow from '../ActionRow';
 export const ALERT_CLOSE_LABEL_TEXT = 'Dismiss';
-const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    children,
-    icon,
-    actions,
-    dismissible = false,
-    onClose = () => {},
-    closeLabel,
-    stacked = false,
-    show = true,
-    ...props
-  } = _ref;
+const Alert = /*#__PURE__*/forwardRef(({
+  children,
+  icon,
+  actions,
+  dismissible = false,
+  onClose = () => {},
+  closeLabel,
+  stacked = false,
+  show = true,
+  ...props
+}, ref) => {
   const [isStacked, setIsStacked] = useState(stacked);
   const isExtraSmall = useMediaQuery({
     maxWidth: breakpoints.extraSmall.maxWidth
@@ -75,24 +74,22 @@ const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
 // so there seems to be no other way of providing correct default prop for base element
 const DivStyledAsH4 = divWithClassName('h4');
 DivStyledAsH4.displayName = 'DivStyledAsH4';
-function AlertHeading(_ref2) {
-  let {
-    as = DivStyledAsH4,
-    bsPrefix = 'alert-heading',
-    ...props
-  } = _ref2;
+function AlertHeading({
+  as = DivStyledAsH4,
+  bsPrefix = 'alert-heading',
+  ...props
+}) {
   return /*#__PURE__*/React.createElement(BaseAlert.Heading, {
     as,
     bsPrefix,
     ...props
   });
 }
-function AlertLink(_ref3) {
-  let {
-    as = 'a',
-    bsPrefix = 'alert-link',
-    ...props
-  } = _ref3;
+function AlertLink({
+  as = 'a',
+  bsPrefix = 'alert-link',
+  ...props
+}) {
   return /*#__PURE__*/React.createElement(BaseAlert.Link, {
     as,
     bsPrefix,

package/dist/Alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useState","forwardRef","cloneElement","classNames","Alert","BaseAlert","divWithClassName","FormattedMessage","useMediaQuery","Icon","breakpoints","Button","ActionRow","ALERT_CLOSE_LABEL_TEXT","_ref","ref","children","icon","actions","dismissible","onClose","closeLabel","stacked","show","props","isStacked","setIsStacked","isExtraSmall","maxWidth","extraSmall","actionButtonSize","cloneActionElement","Action","addtlActionProps","size","key","createElement","className","src","length","Spacer","variant","onClick","id","defaultMessage","description","map","DivStyledAsH4","displayName","AlertHeading","_ref2","as","bsPrefix","Heading","AlertLink","_ref3","Link"],"sources":["../../src/Alert/index.tsx"],"sourcesContent":["/* eslint-disable react/require-default-props */\nimport React, {\n  useCallback,\n  useEffect,\n  useState,\n  ReactNode,\n  ElementType,\n  forwardRef,\n  FC,\n  ForwardRefExoticComponent,\n  RefAttributes,\n  cloneElement,\n} from 'react';\nimport classNames from 'classnames';\nimport {\n  Alert as BaseAlert,\n  AlertProps as BaseAlertProps,\n} from 'react-bootstrap';\nimport { type TransitionComponent } from 'react-bootstrap/helpers';\nimport divWithClassName from 'react-bootstrap/divWithClassName';\nimport { FormattedMessage } from 'react-intl';\nimport { useMediaQuery } from 'react-responsive';\nimport Icon, { IconProps } from '../Icon';\nimport breakpoints from '../utils/breakpoints';\nimport Button from '../Button';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ActionRow from '../ActionRow';\n\nexport const ALERT_CLOSE_LABEL_TEXT = 'Dismiss';\n\nexport type AlertVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light';\n\nexport type BaseProps = Omit<BaseAlertProps, 'children' | 'variant' | 'closeLabel'>;\n\nexport interface AlertProps extends BaseProps {\n  /** Specifies class name to append to the base element */\n  className?: string;\n  /** Overrides underlying component base CSS class name */\n  bsPrefix?: string;\n  /** Specifies variant to use. */\n  variant?: AlertVariant;\n  /**\n   * Animate the entering and exiting of the Alert. `true` will use the `<Fade>` transition,\n   * more detailed customization is also provided.\n   */\n  transition?: boolean | TransitionComponent;\n  children?: ReactNode;\n  /** Icon that will be shown in the alert */\n  icon?: React.ComponentType<IconProps>;\n  /** Whether the alert is shown. */\n  show?: boolean;\n  /** Whether the alert is dismissible. Defaults to false. */\n  dismissible?: boolean;\n  /** Optional callback function for when the alert it dismissed. */\n  onClose?: () => void;\n  /** Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true. */\n  actions?: React.ReactElement[];\n  /** Position of the dismiss and call-to-action buttons. Defaults to `false`. */\n  stacked?: boolean;\n  /** Sets the text for alert close button, defaults to 'Dismiss'. */\n  closeLabel?: string | ReactNode;\n}\n\nexport interface AlertHeadingProps {\n  /** Specifies the base element */\n  as?: ElementType;\n  /** Overrides underlying component base CSS class name */\n  bsPrefix?: string;\n  // eslint-disable-next-line react/no-unused-prop-types\n  children?: ReactNode;\n}\n\nexport interface AlertLinkProps {\n  /** Specifies the base element */\n  as?: ElementType;\n  /** Overrides underlying component base CSS class name */\n  bsPrefix?: string;\n  // eslint-disable-next-line react/no-unused-prop-types\n  children?: ReactNode;\n  // eslint-disable-next-line react/no-unused-prop-types\n  href?: string;\n}\n\nexport interface AlertComponent extends ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>> {\n  Heading: FC<AlertHeadingProps>;\n  Link: FC<AlertLinkProps>;\n}\n\nconst Alert = forwardRef(({\n  children,\n  icon,\n  actions,\n  dismissible = false,\n  onClose = () => {},\n  closeLabel,\n  stacked = false,\n  show = true,\n  ...props\n}: AlertProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const [isStacked, setIsStacked] = useState(stacked);\n  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });\n  const actionButtonSize = 'sm';\n\n  useEffect(() => {\n    if (isExtraSmall) {\n      setIsStacked(true);\n    } else {\n      setIsStacked(stacked);\n    }\n  }, [isExtraSmall, stacked]);\n\n  const cloneActionElement = useCallback(\n    (Action: React.ReactElement) => {\n      const addtlActionProps = { size: actionButtonSize, key: Action.props.children };\n      return cloneElement(Action, addtlActionProps);\n    },\n    [],\n  );\n\n  return (\n    <BaseAlert\n      {...props}\n      className={classNames('alert-content', props.className)}\n      show={show}\n      ref={ref}\n    >\n      {icon && <Icon src={icon} className=\"alert-icon\" />}\n      <div\n        className={classNames({\n          'pgn__alert-message-wrapper': !isStacked,\n          'pgn__alert-message-wrapper-stacked': isStacked,\n        })}\n      >\n        <div className=\"alert-message-content\">\n          {children}\n        </div>\n        {(dismissible || (actions && actions.length > 0)) && (\n          <ActionRow className=\"pgn__alert-actions\">\n            <ActionRow.Spacer />\n            {dismissible && (\n              <Button\n                size={actionButtonSize}\n                variant=\"tertiary\"\n                onClick={onClose}\n              >\n                {closeLabel || (\n                  <FormattedMessage\n                    id=\"pgn.Alert.closeLabel\"\n                    defaultMessage=\"Dismiss\"\n                    description=\"Label of a close button on Alert component\"\n                  />\n                )}\n              </Button>\n            )}\n            {actions && actions.map(cloneActionElement)}\n          </ActionRow>\n        )}\n      </div>\n    </BaseAlert>\n  );\n}) as AlertComponent;\n\n// This is needed to display a default prop for Alert.Heading element\n// Copied from react-bootstrap since BaseAlert.Heading component doesn't have defaultProps,\n// so there seems to be no other way of providing correct default prop for base element\nconst DivStyledAsH4 = divWithClassName('h4');\nDivStyledAsH4.displayName = 'DivStyledAsH4';\n\nfunction AlertHeading({\n  as = DivStyledAsH4,\n  bsPrefix = 'alert-heading',\n  ...props\n}: AlertHeadingProps): JSX.Element {\n  return <BaseAlert.Heading {...{ as, bsPrefix, ...props }} />;\n}\n\nfunction AlertLink({\n  as = 'a',\n  bsPrefix = 'alert-link',\n  ...props\n}: AlertLinkProps): JSX.Element {\n  return <BaseAlert.Link {...{ as, bsPrefix, ...props }} />;\n}\n\nAlert.Heading = AlertHeading;\nAlert.Link = AlertLink;\n\nexport default Alert;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useState","forwardRef","cloneElement","classNames","Alert","BaseAlert","divWithClassName","FormattedMessage","useMediaQuery","Icon","breakpoints","Button","ActionRow","ALERT_CLOSE_LABEL_TEXT","children","icon","actions","dismissible","onClose","closeLabel","stacked","show","props","ref","isStacked","setIsStacked","isExtraSmall","maxWidth","extraSmall","actionButtonSize","cloneActionElement","Action","addtlActionProps","size","key","createElement","className","src","length","Spacer","variant","onClick","id","defaultMessage","description","map","DivStyledAsH4","displayName","AlertHeading","as","bsPrefix","Heading","AlertLink","Link"],"sources":["../../src/Alert/index.tsx"],"sourcesContent":["/* eslint-disable react/require-default-props */\nimport React, {\n  useCallback,\n  useEffect,\n  useState,\n  ReactNode,\n  ElementType,\n  forwardRef,\n  FC,\n  ForwardRefExoticComponent,\n  RefAttributes,\n  cloneElement,\n} from 'react';\nimport classNames from 'classnames';\nimport {\n  Alert as BaseAlert,\n  AlertProps as BaseAlertProps,\n} from 'react-bootstrap';\nimport { type TransitionComponent } from 'react-bootstrap/helpers';\nimport divWithClassName from 'react-bootstrap/divWithClassName';\nimport { FormattedMessage } from 'react-intl';\nimport { useMediaQuery } from 'react-responsive';\nimport Icon, { IconProps } from '../Icon';\nimport breakpoints from '../utils/breakpoints';\nimport Button from '../Button';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ActionRow from '../ActionRow';\n\nexport const ALERT_CLOSE_LABEL_TEXT = 'Dismiss';\n\nexport type AlertVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light';\n\nexport type BaseProps = Omit<BaseAlertProps, 'children' | 'variant' | 'closeLabel'>;\n\nexport interface AlertProps extends BaseProps {\n  /** Specifies class name to append to the base element */\n  className?: string;\n  /** Overrides underlying component base CSS class name */\n  bsPrefix?: string;\n  /** Specifies variant to use. */\n  variant?: AlertVariant;\n  /**\n   * Animate the entering and exiting of the Alert. `true` will use the `<Fade>` transition,\n   * more detailed customization is also provided.\n   */\n  transition?: boolean | TransitionComponent;\n  children?: ReactNode;\n  /** Icon that will be shown in the alert */\n  icon?: React.ComponentType<IconProps>;\n  /** Whether the alert is shown. */\n  show?: boolean;\n  /** Whether the alert is dismissible. Defaults to false. */\n  dismissible?: boolean;\n  /** Optional callback function for when the alert it dismissed. */\n  onClose?: () => void;\n  /** Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true. */\n  actions?: React.ReactElement[];\n  /** Position of the dismiss and call-to-action buttons. Defaults to `false`. */\n  stacked?: boolean;\n  /** Sets the text for alert close button, defaults to 'Dismiss'. */\n  closeLabel?: string | ReactNode;\n}\n\nexport interface AlertHeadingProps {\n  /** Specifies the base element */\n  as?: ElementType;\n  /** Overrides underlying component base CSS class name */\n  bsPrefix?: string;\n  // eslint-disable-next-line react/no-unused-prop-types\n  children?: ReactNode;\n}\n\nexport interface AlertLinkProps {\n  /** Specifies the base element */\n  as?: ElementType;\n  /** Overrides underlying component base CSS class name */\n  bsPrefix?: string;\n  // eslint-disable-next-line react/no-unused-prop-types\n  children?: ReactNode;\n  // eslint-disable-next-line react/no-unused-prop-types\n  href?: string;\n}\n\nexport interface AlertComponent extends ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>> {\n  Heading: FC<AlertHeadingProps>;\n  Link: FC<AlertLinkProps>;\n}\n\nconst Alert = forwardRef(({\n  children,\n  icon,\n  actions,\n  dismissible = false,\n  onClose = () => {},\n  closeLabel,\n  stacked = false,\n  show = true,\n  ...props\n}: AlertProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const [isStacked, setIsStacked] = useState(stacked);\n  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });\n  const actionButtonSize = 'sm';\n\n  useEffect(() => {\n    if (isExtraSmall) {\n      setIsStacked(true);\n    } else {\n      setIsStacked(stacked);\n    }\n  }, [isExtraSmall, stacked]);\n\n  const cloneActionElement = useCallback(\n    (Action: React.ReactElement) => {\n      const addtlActionProps = { size: actionButtonSize, key: Action.props.children };\n      return cloneElement(Action, addtlActionProps);\n    },\n    [],\n  );\n\n  return (\n    <BaseAlert\n      {...props}\n      className={classNames('alert-content', props.className)}\n      show={show}\n      ref={ref}\n    >\n      {icon && <Icon src={icon} className=\"alert-icon\" />}\n      <div\n        className={classNames({\n          'pgn__alert-message-wrapper': !isStacked,\n          'pgn__alert-message-wrapper-stacked': isStacked,\n        })}\n      >\n        <div className=\"alert-message-content\">\n          {children}\n        </div>\n        {(dismissible || (actions && actions.length > 0)) && (\n          <ActionRow className=\"pgn__alert-actions\">\n            <ActionRow.Spacer />\n            {dismissible && (\n              <Button\n                size={actionButtonSize}\n                variant=\"tertiary\"\n                onClick={onClose}\n              >\n                {closeLabel || (\n                  <FormattedMessage\n                    id=\"pgn.Alert.closeLabel\"\n                    defaultMessage=\"Dismiss\"\n                    description=\"Label of a close button on Alert component\"\n                  />\n                )}\n              </Button>\n            )}\n            {actions && actions.map(cloneActionElement)}\n          </ActionRow>\n        )}\n      </div>\n    </BaseAlert>\n  );\n}) as AlertComponent;\n\n// This is needed to display a default prop for Alert.Heading element\n// Copied from react-bootstrap since BaseAlert.Heading component doesn't have defaultProps,\n// so there seems to be no other way of providing correct default prop for base element\nconst DivStyledAsH4 = divWithClassName('h4');\nDivStyledAsH4.displayName = 'DivStyledAsH4';\n\nfunction AlertHeading({\n  as = DivStyledAsH4,\n  bsPrefix = 'alert-heading',\n  ...props\n}: AlertHeadingProps): JSX.Element {\n  return <BaseAlert.Heading {...{ as, bsPrefix, ...props }} />;\n}\n\nfunction AlertLink({\n  as = 'a',\n  bsPrefix = 'alert-link',\n  ...props\n}: AlertLinkProps): JSX.Element {\n  return <BaseAlert.Link {...{ as, bsPrefix, ...props }} />;\n}\n\nAlert.Heading = AlertHeading;\nAlert.Link = AlertLink;\n\nexport default Alert;\n"],"mappings":"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","ignoreList":[]}

package/dist/Annotation/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface AnnotationProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Specifies contents of the component. */
+    children: React.ReactNode;
+    /** Specifies class name to append to the base element. */
+    className?: string;
+    /** Specifies variant to use. */
+    variant?: 'error' | 'success' | 'warning' | 'light' | 'dark';
+    /** Specifies arrow position. */
+    arrowPlacement?: 'top' | 'right' | 'bottom' | 'left';
+}
+declare const Annotation: React.ForwardRefExoticComponent<AnnotationProps & React.RefAttributes<HTMLSpanElement>>;
+export default Annotation;

package/dist/Annotation/index.js

@@ -1,34 +1,15 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
-const Annotation = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    className,
-    variant,
-    children,
-    arrowPlacement,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/React.createElement("span", {
-    className: classNames(className, 'pgn__annotation', `pgn__annotation-${variant}-${arrowPlacement}`),
-    ref: ref,
-    ...props
-  }, children);
-});
-Annotation.defaultProps = {
-  className: undefined,
-  variant: 'success',
-  arrowPlacement: 'bottom'
-};
-Annotation.propTypes = {
-  /** Specifies contents of the component. */
-  children: PropTypes.node.isRequired,
-  /** Specifies class name to append to the base element. */
-  className: PropTypes.string,
-  /** Specifies variant to use. */
-  variant: PropTypes.oneOf(['error', 'success', 'warning', 'light', 'dark']),
-  /** Specifies arrow position. */
-  arrowPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
-};
+const Annotation = /*#__PURE__*/React.forwardRef(({
+  className,
+  variant = 'success',
+  children,
+  arrowPlacement = 'bottom',
+  ...props
+}, ref) => /*#__PURE__*/React.createElement("span", {
+  className: classNames(className, 'pgn__annotation', `pgn__annotation-${variant}-${arrowPlacement}`),
+  ref: ref,
+  ...props
+}, children));
 export default Annotation;
 //# sourceMappingURL=index.js.map

package/dist/Annotation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Annotation","forwardRef","_ref","ref","className","variant","children","arrowPlacement","props","createElement","defaultProps","undefined","propTypes","node","isRequired","string","oneOf"],"sources":["../../src/Annotation/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nconst Annotation = React.forwardRef(({\n  className,\n  variant,\n  children,\n  arrowPlacement,\n  ...props\n}, ref) => (\n  <span\n    className={classNames(\n      className,\n      'pgn__annotation',\n      `pgn__annotation-${variant}-${arrowPlacement}`,\n    )}\n    ref={ref}\n    {...props}\n  >\n    {children}\n  </span>\n));\n\nAnnotation.defaultProps = {\n  className: undefined,\n  variant: 'success',\n  arrowPlacement: 'bottom',\n};\n\nAnnotation.propTypes = {\n  /** Specifies contents of the component. */\n  children: PropTypes.node.isRequired,\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies variant to use. */\n  variant: PropTypes.oneOf(['error', 'success', 'warning', 'light', 'dark']),\n  /** Specifies arrow position. */\n  arrowPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),\n};\n\nexport default Annotation;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,MAAMC,UAAU,gBAAGH,KAAK,CAACI,UAAU,CAAC,CAAAC,IAAA,EAMjCC,GAAG;EAAA,IAN+B;IACnCC,SAAS;IACTC,OAAO;IACPC,QAAQ;IACRC,cAAc;IACd,GAAGC;EACL,CAAC,GAAAN,IAAA;EAAA,oBACCL,KAAA,CAAAY,aAAA;IACEL,SAAS,EAAEL,UAAU,CACnBK,SAAS,EACT,iBAAiB,EACjB,mBAAmBC,OAAO,IAAIE,cAAc,EAC9C,CAAE;IACFJ,GAAG,EAAEA,GAAI;IAAA,GACLK;EAAK,GAERF,QACG,CAAC;AAAA,CACR,CAAC;AAEFN,UAAU,CAACU,YAAY,GAAG;EACxBN,SAAS,EAAEO,SAAS;EACpBN,OAAO,EAAE,SAAS;EAClBE,cAAc,EAAE;AAClB,CAAC;AAEDP,UAAU,CAACY,SAAS,GAAG;EACrB;EACAN,QAAQ,EAAER,SAAS,CAACe,IAAI,CAACC,UAAU;EACnC;EACAV,SAAS,EAAEN,SAAS,CAACiB,MAAM;EAC3B;EACAV,OAAO,EAAEP,SAAS,CAACkB,KAAK,CAAC,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;EAC1E;EACAT,cAAc,EAAET,SAAS,CAACkB,KAAK,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;AACpE,CAAC;AAED,eAAehB,UAAU","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","classNames","Annotation","forwardRef","className","variant","children","arrowPlacement","props","ref","createElement"],"sources":["../../src/Annotation/index.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport classNames from 'classnames';\n\ninterface AnnotationProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Specifies contents of the component. */\n  children: React.ReactNode;\n  /** Specifies class name to append to the base element. */\n  className?: string;\n  /** Specifies variant to use. */\n  variant?: 'error' | 'success' | 'warning' | 'light' | 'dark';\n  /** Specifies arrow position. */\n  arrowPlacement?: 'top' | 'right' | 'bottom' | 'left';\n}\n\nconst Annotation = React.forwardRef(({\n  className,\n  variant = 'success',\n  children,\n  arrowPlacement = 'bottom',\n  ...props\n} : AnnotationProps, ref : ForwardedRef<HTMLSpanElement>) => (\n  <span\n    className={classNames(\n      className,\n      'pgn__annotation',\n      `pgn__annotation-${variant}-${arrowPlacement}`,\n    )}\n    ref={ref}\n    {...props}\n  >\n    {children}\n  </span>\n));\n\nexport default Annotation;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAwB,OAAO;AAC3C,OAAOC,UAAU,MAAM,YAAY;AAanC,MAAMC,UAAU,gBAAGF,KAAK,CAACG,UAAU,CAAC,CAAC;EACnCC,SAAS;EACTC,OAAO,GAAG,SAAS;EACnBC,QAAQ;EACRC,cAAc,GAAG,QAAQ;EACzB,GAAGC;AACa,CAAC,EAAEC,GAAmC,kBACtDT,KAAA,CAAAU,aAAA;EACEN,SAAS,EAAEH,UAAU,CACnBG,SAAS,EACT,iBAAiB,EACjB,mBAAmBC,OAAO,IAAIE,cAAc,EAC9C,CAAE;EACFE,GAAG,EAAEA,GAAI;EAAA,GACLD;AAAK,GAERF,QACG,CACP,CAAC;AAEF,eAAeJ,UAAU","ignoreList":[]}

package/dist/Avatar/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface AvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /** Alt text. Usually the user's name */
+    alt?: string;
+    /** Size of the avatar */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'huge';
+    /** Image src of the avatar image */
+    src?: string;
+}
+declare function Avatar({ alt, size, src, ...attrs }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export default Avatar;

package/dist/Avatar/index.js

@@ -1,14 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+// @ts-ignore
 import defaultAvatar from './default-avatar.svg';
-function Avatar(_ref) {
-  let {
-    alt,
-    size,
-    src,
-    ...attrs
-  } = _ref;
+function Avatar({
+  alt = '',
+  size = 'md',
+  src,
+  ...attrs
+}) {
   return /*#__PURE__*/React.createElement("img", {
     ...attrs,
     className: classNames('pgn__avatar', `pgn__avatar-${size}`, attrs.className),
@@ -16,18 +15,5 @@ function Avatar(_ref) {
     alt: alt
   });
 }
-Avatar.propTypes = {
-  /** Alt text. Usually the user's name */
-  alt: PropTypes.string,
-  /** Size of the avatar */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'huge']),
-  /** Image src of the avatar image */
-  src: PropTypes.string
-};
-Avatar.defaultProps = {
-  alt: '',
-  size: 'md',
-  src: undefined
-};
 export default Avatar;
 //# sourceMappingURL=index.js.map

package/dist/Avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","defaultAvatar","Avatar","_ref","alt","size","src","attrs","createElement","className","propTypes","string","oneOf","defaultProps","undefined"],"sources":["../../src/Avatar/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport defaultAvatar from './default-avatar.svg';\n\nfunction Avatar({\n  alt,\n  size,\n  src,\n  ...attrs\n}) {\n  return (\n    <img\n      {...attrs}\n      className={classNames(\n        'pgn__avatar',\n        `pgn__avatar-${size}`,\n        attrs.className,\n      )}\n      src={src || defaultAvatar}\n      alt={alt}\n    />\n  );\n}\n\nAvatar.propTypes = {\n  /** Alt text. Usually the user's name */\n  alt: PropTypes.string,\n  /** Size of the avatar */\n  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'huge']),\n  /** Image src of the avatar image */\n  src: PropTypes.string,\n};\n\nAvatar.defaultProps = {\n  alt: '',\n  size: 'md',\n  src: undefined,\n};\n\nexport default Avatar;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,sBAAsB;AAEhD,SAASC,MAAMA,CAAAC,IAAA,EAKZ;EAAA,IALa;IACdC,GAAG;IACHC,IAAI;IACJC,GAAG;IACH,GAAGC;EACL,CAAC,GAAAJ,IAAA;EACC,oBACEL,KAAA,CAAAU,aAAA;IAAA,GACMD,KAAK;IACTE,SAAS,EAAET,UAAU,CACnB,aAAa,EACb,eAAeK,IAAI,EAAE,EACrBE,KAAK,CAACE,SACR,CAAE;IACFH,GAAG,EAAEA,GAAG,IAAIL,aAAc;IAC1BG,GAAG,EAAEA;EAAI,CACV,CAAC;AAEN;AAEAF,MAAM,CAACQ,SAAS,GAAG;EACjB;EACAN,GAAG,EAAEL,SAAS,CAACY,MAAM;EACrB;EACAN,IAAI,EAAEN,SAAS,CAACa,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;EACpE;EACAN,GAAG,EAAEP,SAAS,CAACY;AACjB,CAAC;AAEDT,MAAM,CAACW,YAAY,GAAG;EACpBT,GAAG,EAAE,EAAE;EACPC,IAAI,EAAE,IAAI;EACVC,GAAG,EAAEQ;AACP,CAAC;AAED,eAAeZ,MAAM","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","classNames","defaultAvatar","Avatar","alt","size","src","attrs","createElement","className"],"sources":["../../src/Avatar/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n// @ts-ignore\nimport defaultAvatar from './default-avatar.svg';\n\nexport interface AvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** Alt text. Usually the user's name */\n  alt?: string;\n  /** Size of the avatar */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'huge';\n  /** Image src of the avatar image */\n  src?: string;\n}\n\nfunction Avatar({\n  alt = '',\n  size = 'md',\n  src,\n  ...attrs\n}: AvatarProps) {\n  return (\n    <img\n      {...attrs}\n      className={classNames(\n        'pgn__avatar',\n        `pgn__avatar-${size}`,\n        attrs.className,\n      )}\n      src={src || defaultAvatar}\n      alt={alt}\n    />\n  );\n}\n\nexport default Avatar;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC;AACA,OAAOC,aAAa,MAAM,sBAAsB;AAWhD,SAASC,MAAMA,CAAC;EACdC,GAAG,GAAG,EAAE;EACRC,IAAI,GAAG,IAAI;EACXC,GAAG;EACH,GAAGC;AACQ,CAAC,EAAE;EACd,oBACEP,KAAA,CAAAQ,aAAA;IAAA,GACMD,KAAK;IACTE,SAAS,EAAER,UAAU,CACnB,aAAa,EACb,eAAeI,IAAI,EAAE,EACrBE,KAAK,CAACE,SACR,CAAE;IACFH,GAAG,EAAEA,GAAG,IAAIJ,aAAc;IAC1BE,GAAG,EAAEA;EAAI,CACV,CAAC;AAEN;AAEA,eAAeD,MAAM","ignoreList":[]}

package/dist/AvatarButton/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface AvatarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** The button text */
+    children?: string;
+    /** A class name to append to the button */
+    className?: string;
+    /** Show the label or only the avatar */
+    showLabel?: boolean;
+    /** The button size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Image src of the avatar image */
+    src?: string;
+    /** The button style variant to use */
+    variant?: string;
+}
+declare const AvatarButton: React.ForwardRefExoticComponent<AvatarButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default AvatarButton;

package/dist/AvatarButton/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Button from '../Button';
 import Avatar from '../Avatar';
@@ -8,15 +7,15 @@ const buttonSizesToAvatarSize = {
   md: 'sm',
   lg: 'md'
 };
-const AvatarButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    className,
-    showLabel,
-    size,
-    src,
-    ...attrs
-  } = _ref;
+const AvatarButton = /*#__PURE__*/React.forwardRef(({
+  children,
+  className,
+  showLabel = true,
+  size = 'md',
+  src,
+  variant = 'tertiary',
+  ...attrs
+}, ref) => {
   const avatarSize = buttonSizesToAvatarSize[size] || 'sm';
   return /*#__PURE__*/React.createElement(Button, {
     ...attrs,
@@ -26,34 +25,13 @@ const AvatarButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       'pgn__avatar-button-hide-label': !showLabel
     }),
     size: size,
-    ref: ref
+    ref: ref,
+    variant: variant
   }, /*#__PURE__*/React.createElement(Avatar, {
     src: src,
     alt: showLabel ? '' : children,
     size: avatarSize
   }), showLabel && children);
 });
-AvatarButton.propTypes = {
-  /** The button text */
-  children: PropTypes.string,
-  /** A class name to append to the button */
-  className: PropTypes.string,
-  /** Show the label or only the avatar */
-  showLabel: PropTypes.bool,
-  /** The button size */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  /** Image src of the avatar image */
-  src: PropTypes.string,
-  /** The button style variant to use */
-  variant: PropTypes.string
-};
-AvatarButton.defaultProps = {
-  children: undefined,
-  className: undefined,
-  showLabel: true,
-  size: 'md',
-  src: undefined,
-  variant: 'tertiary'
-};
 export default AvatarButton;
 //# sourceMappingURL=index.js.map

package/dist/AvatarButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Button","Avatar","buttonSizesToAvatarSize","sm","md","lg","AvatarButton","forwardRef","_ref","ref","children","className","showLabel","size","src","attrs","avatarSize","createElement","alt","propTypes","string","bool","oneOf","variant","defaultProps","undefined"],"sources":["../../src/AvatarButton/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Button from '../Button';\nimport Avatar from '../Avatar';\n\nconst buttonSizesToAvatarSize = {\n  sm: 'xs',\n  md: 'sm',\n  lg: 'md',\n};\n\nconst AvatarButton = React.forwardRef(({\n  children,\n  className,\n  showLabel,\n  size,\n  src,\n  ...attrs\n}, ref) => {\n  const avatarSize = buttonSizesToAvatarSize[size] || 'sm';\n  return (\n    <Button\n      {...attrs}\n      className={classNames(\n        'btn-avatar', // the public class name for custom styling\n        'pgn__avatar-button-avatar',\n        `pgn__avatar-button-avatar-${size}`,\n        className,\n        { 'pgn__avatar-button-hide-label': !showLabel },\n      )}\n      size={size}\n      ref={ref}\n    >\n      <Avatar src={src} alt={showLabel ? '' : children} size={avatarSize} />\n      {showLabel && children}\n    </Button>\n  );\n});\n\nAvatarButton.propTypes = {\n  /** The button text */\n  children: PropTypes.string,\n  /** A class name to append to the button */\n  className: PropTypes.string,\n  /** Show the label or only the avatar */\n  showLabel: PropTypes.bool,\n  /** The button size */\n  size: PropTypes.oneOf(['sm', 'md', 'lg']),\n  /** Image src of the avatar image */\n  src: PropTypes.string,\n  /** The button style variant to use */\n  variant: PropTypes.string,\n};\n\nAvatarButton.defaultProps = {\n  children: undefined,\n  className: undefined,\n  showLabel: true,\n  size: 'md',\n  src: undefined,\n  variant: 'tertiary',\n};\n\nexport default AvatarButton;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,MAAM,MAAM,WAAW;AAE9B,MAAMC,uBAAuB,GAAG;EAC9BC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE;AACN,CAAC;AAED,MAAMC,YAAY,gBAAGT,KAAK,CAACU,UAAU,CAAC,CAAAC,IAAA,EAOnCC,GAAG,KAAK;EAAA,IAP4B;IACrCC,QAAQ;IACRC,SAAS;IACTC,SAAS;IACTC,IAAI;IACJC,GAAG;IACH,GAAGC;EACL,CAAC,GAAAP,IAAA;EACC,MAAMQ,UAAU,GAAGd,uBAAuB,CAACW,IAAI,CAAC,IAAI,IAAI;EACxD,oBACEhB,KAAA,CAAAoB,aAAA,CAACjB,MAAM;IAAA,GACDe,KAAK;IACTJ,SAAS,EAAEZ,UAAU,CACnB,YAAY;IAAE;IACd,2BAA2B,EAC3B,6BAA6Bc,IAAI,EAAE,EACnCF,SAAS,EACT;MAAE,+BAA+B,EAAE,CAACC;IAAU,CAChD,CAAE;IACFC,IAAI,EAAEA,IAAK;IACXJ,GAAG,EAAEA;EAAI,gBAETZ,KAAA,CAAAoB,aAAA,CAAChB,MAAM;IAACa,GAAG,EAAEA,GAAI;IAACI,GAAG,EAAEN,SAAS,GAAG,EAAE,GAAGF,QAAS;IAACG,IAAI,EAAEG;EAAW,CAAE,CAAC,EACrEJ,SAAS,IAAIF,QACR,CAAC;AAEb,CAAC,CAAC;AAEFJ,YAAY,CAACa,SAAS,GAAG;EACvB;EACAT,QAAQ,EAAEZ,SAAS,CAACsB,MAAM;EAC1B;EACAT,SAAS,EAAEb,SAAS,CAACsB,MAAM;EAC3B;EACAR,SAAS,EAAEd,SAAS,CAACuB,IAAI;EACzB;EACAR,IAAI,EAAEf,SAAS,CAACwB,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;EACzC;EACAR,GAAG,EAAEhB,SAAS,CAACsB,MAAM;EACrB;EACAG,OAAO,EAAEzB,SAAS,CAACsB;AACrB,CAAC;AAEDd,YAAY,CAACkB,YAAY,GAAG;EAC1Bd,QAAQ,EAAEe,SAAS;EACnBd,SAAS,EAAEc,SAAS;EACpBb,SAAS,EAAE,IAAI;EACfC,IAAI,EAAE,IAAI;EACVC,GAAG,EAAEW,SAAS;EACdF,OAAO,EAAE;AACX,CAAC;AAED,eAAejB,YAAY","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","classNames","Button","Avatar","buttonSizesToAvatarSize","sm","md","lg","AvatarButton","forwardRef","children","className","showLabel","size","src","variant","attrs","ref","avatarSize","createElement","alt"],"sources":["../../src/AvatarButton/index.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport classNames from 'classnames';\nimport Button from '../Button';\nimport Avatar, { AvatarProps } from '../Avatar';\n\nconst buttonSizesToAvatarSize = {\n  sm: 'xs',\n  md: 'sm',\n  lg: 'md',\n};\n\ninterface AvatarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** The button text */\n  children?: string;\n  /** A class name to append to the button */\n  className?: string;\n  /** Show the label or only the avatar */\n  showLabel?: boolean;\n  /** The button size */\n  size?: 'sm' | 'md' | 'lg';\n  /** Image src of the avatar image */\n  src?: string;\n  /** The button style variant to use */\n  variant?: string;\n}\n\nconst AvatarButton = React.forwardRef(({\n  children,\n  className,\n  showLabel = true,\n  size = 'md',\n  src,\n  variant = 'tertiary',\n  ...attrs\n}: AvatarButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {\n  const avatarSize = buttonSizesToAvatarSize[size] || 'sm';\n  return (\n    <Button\n      {...attrs}\n      className={classNames(\n        'btn-avatar', // the public class name for custom styling\n        'pgn__avatar-button-avatar',\n        `pgn__avatar-button-avatar-${size}`,\n        className,\n        { 'pgn__avatar-button-hide-label': !showLabel },\n      )}\n      size={size}\n      ref={ref}\n      variant={variant}\n    >\n      <Avatar src={src} alt={showLabel ? '' : children} size={avatarSize as AvatarProps['size']} />\n      {showLabel && children}\n    </Button>\n  );\n});\n\nexport default AvatarButton;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAwB,OAAO;AAC3C,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,MAAM,MAAuB,WAAW;AAE/C,MAAMC,uBAAuB,GAAG;EAC9BC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE;AACN,CAAC;AAiBD,MAAMC,YAAY,gBAAGR,KAAK,CAACS,UAAU,CAAC,CAAC;EACrCC,QAAQ;EACRC,SAAS;EACTC,SAAS,GAAG,IAAI;EAChBC,IAAI,GAAG,IAAI;EACXC,GAAG;EACHC,OAAO,GAAG,UAAU;EACpB,GAAGC;AACc,CAAC,EAAEC,GAAoC,KAAK;EAC7D,MAAMC,UAAU,GAAGd,uBAAuB,CAACS,IAAI,CAAC,IAAI,IAAI;EACxD,oBACEb,KAAA,CAAAmB,aAAA,CAACjB,MAAM;IAAA,GACDc,KAAK;IACTL,SAAS,EAAEV,UAAU,CACnB,YAAY;IAAE;IACd,2BAA2B,EAC3B,6BAA6BY,IAAI,EAAE,EACnCF,SAAS,EACT;MAAE,+BAA+B,EAAE,CAACC;IAAU,CAChD,CAAE;IACFC,IAAI,EAAEA,IAAK;IACXI,GAAG,EAAEA,GAAI;IACTF,OAAO,EAAEA;EAAQ,gBAEjBf,KAAA,CAAAmB,aAAA,CAAChB,MAAM;IAACW,GAAG,EAAEA,GAAI;IAACM,GAAG,EAAER,SAAS,GAAG,EAAE,GAAGF,QAAS;IAACG,IAAI,EAAEK;EAAkC,CAAE,CAAC,EAC5FN,SAAS,IAAIF,QACR,CAAC;AAEb,CAAC,CAAC;AAEF,eAAeF,YAAY","ignoreList":[]}

package/dist/Breadcrumb/BreadcrumbLink.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-export default function BreadcrumbLink(_ref) {
-  let {
-    as,
-    clickHandler,
-    linkProps
-  } = _ref;
+export default function BreadcrumbLink({
+  as,
+  clickHandler,
+  linkProps
+}) {
   const {
     label,
     url,