@openedx/paragon 22.0.0-alpha.24 → 22.1.0

package/README.md

@@ -1,11 +1,11 @@
 # Paragon
 
 [![Build Status](https://github.com/openedx/paragon/actions/workflows/release.yml/badge.svg)](https://github.com/openedx/paragon/actions/workflows/release.yml)
-[![npm_version](https://img.shields.io/npm/v/@edx/paragon.svg)](@edx/paragon)
+[![npm_version](https://img.shields.io/npm/v/@openedx/paragon.svg)](@openedx/paragon)
 ![status](https://img.shields.io/badge/status-Maintained-brightgreen)
 ![license](https://img.shields.io/github/license/openedx/paragon.svg)
 [![codecov](https://codecov.io/gh/edx/paragon/branch/master/graph/badge.svg?token=x1tZmNduy9)](https://codecov.io/gh/edx/paragon)
-[![NPM downloads](https://img.shields.io/npm/dw/@edx/paragon)](https://www.npmjs.com/package/@edx/paragon)
+[![NPM downloads](https://img.shields.io/npm/dw/@openedx/paragon)](https://www.npmjs.com/package/@openedx/paragon)
 
 ## Purpose
 
@@ -30,13 +30,13 @@ Paragon components require React 16 or higher. To install Paragon into your proj
 In terminal:
 
 ```
-npm i --save @edx/paragon
+npm i --save @openedx/paragon
 ```
 
 In your React project:
 
 ```
-import { ComponentName } from '@edx/paragon';
+import { ComponentName } from '@openedx/paragon';
 ```
 
 #### SCSS Foundation
@@ -47,7 +47,7 @@ Usage for Open edX and others:
 
 ```
 // ... Any custom SCSS variables should be defined here
-@import '~@edx/paragon/styles/scss/core/core.scss';
+@import '~@openedx/paragon/scss/core/core.scss';
 ```
 
 Usage on with `@edx/brand`:
@@ -57,7 +57,7 @@ Usage on with `@edx/brand`:
 ```
 @import '~@edx/brand/paragon/fonts.scss';
 @import '~@edx/brand/paragon/variables.scss';
-@import '~@edx/paragon/styles/scss/core/core.scss';
+@import '~@openedx/paragon/scss/core/core.scss';
 @import '~@edx/brand/paragon/overrides.scss';
 ```
 
@@ -69,10 +69,7 @@ The Paragon CLI (Command Line Interface) is a tool that provides various utility
 
 ### Available Commands
 
-- `paragon install-theme [theme]`: Installs the specific [brand package](https://github.com/openedx/brand-openedx).
-- `paragon build-tokens`: Build Paragon's design tokens.
-- `paragon replace-variables`: Replace SCSS variables usages or definitions to CSS variables and vice versa in `.scss` files.
-- `paragon build-scss`: Compile Paragon's core and themes SCSS into CSS.
+- `paragon install-theme [theme]`: Installs the specific @edx/brand package.
 
 Use `paragon help` to see more information.
 
@@ -84,7 +81,7 @@ Due to Paragon's dependence on ``react-intl``, that means that your whole app ne
 
 ```javascript
   import { IntlProvider } from 'react-intl';
-  import { messages as paragonMessages } from '@edx/paragon';
+  import { messages as paragonMessages } from '@openedx/paragon';
 
   ReactDOM.render(
     <IntlProvider locale={usersLocale} messages={paragonMessages[usersLocale]}>
@@ -99,7 +96,7 @@ Note that if you are using ``@edx/frontend-platform``'s ``AppProvider`` componen
 ```javascript
   import { APP_READY, subscribe, initialize } from '@edx/frontend-platform';
   import { AppProvider } from '@edx/frontend-platform/react';
-  import { messages as paragonMessages } from '@edx/paragon';
+  import { messages as paragonMessages } from '@openedx/paragon';
   import App from './App';
   // this is your app's i18n messages
   import appMessages from './i18n';
@@ -151,17 +148,17 @@ module.exports = {
   dist: The sub-directory of the source code where it puts its build artifact. Often "dist".
   */
   localModules: [
-    { moduleName: '@edx/paragon/styles/scss/core', dir: '../src/paragon', dist: 'styles/scss/core' },
-    { moduleName: '@edx/paragon/icons', dir: '../src/paragon', dist: 'icons' },
+    { moduleName: '@openedx/paragon/scss/core', dir: '../src/paragon', dist: 'scss/core' },
+    { moduleName: '@openedx/paragon/icons', dir: '../src/paragon', dist: 'icons' },
     // Note that using dist: 'dist' will require you to run 'npm build' in Paragon
     // to add local changes to the 'dist' directory, so that they can be picked up by the MFE.
     // To avoid doing that you can use dist: 'src' to get any local changes hot reloaded on save in the MFE.
-    { moduleName: '@edx/paragon', dir: '../src/paragon', dist: 'dist' },
+    { moduleName: '@openedx/paragon', dir: '../src/paragon', dist: 'dist' },
   ],
 };
 ```
 
-Then, when importing Paragon's core SCSS in your MFE the import needs to begin with a tilde `~` so that path to your local Paragon repository gets resolved correctly: `@import "~@edx/paragon/styles/scss/core";`
+Then, when importing Paragon's core SCSS in your MFE the import needs to begin with a tilde `~` so that path to your local Paragon repository gets resolved correctly: `@import "~@openedx/paragon/scss/core";`
 
 #### Internationalization
 
@@ -230,7 +227,8 @@ When developing a new component you should generally follow three rules:
                 variant="primary"
               />
             )
-          
+          }
+
           export default MyFunctionComponent;
           ```
       
@@ -478,32 +476,4 @@ The assigned maintainers for this component and other project details may be fou
 ## Reporting Security Issues
 Please do not report security issues in public. Please email security@openedx.org.
 
-We tend to prioritize security issues which impact the published `@edx/paragon` NPM library more so than the [documentation website](https://paragon-openedx.netlify.app/) or example React application.
-
-## Design Tokens
-
-Design tokens are all the values needed to build and maintain a design system — spacing, color, typography, object styles, etc. They can represent anything defined by the design: color as an RGB value, opacity as a number, spacing as a REM value. They are used instead of hard-coded values to provide flexibility and uniformity across the application.
-
-By defining style properties as tokens, we can transform the styles into various implementations compatible with different platforms or formats as our use cases expand (e.g., transforming tokens to CSS variables, CSS utility classes, etc.).
-
-### Theming with design tokens
-
-Paragon uses [style-dictionary](https://github.com/amzn/style-dictionary) to build design tokens into CSS variables that are included in the package. Read more in [design tokens README](tokens/README.md).
-
-#### Compiling CSS from design tokens for Paragon contributions (in this repo)
-1. **`npm install`.** Install dependencies, including `style-dictionary`.
-2. Make changes to design token(s).
-3. **`npm run build-scss`.** Transforms the tokens to CSS variables and CSS utility classes, and generates `core.css` and `light.css` output files.
-    - `light.css`. CSS variable definitions for colors in the light theme variant.
-    - `core.css`. Contains the majority of Paragon/Bootstrap foundational styles for layout, components, etc. Consumes CSS variables defined by `light.css`.
-4. Test changes locally (e.g., running the documentation website, the example MFE app, etc.).
-5. Ensure changes to `core.css` and `light.css` are committed & released to NPM (which also "releases" them on versioned public CDNs for NPM packages).
-6. Consuming applications would inject the `core.css` and `light.css` theme files into their applications via a mechanism similar to https://github.com/openedx/frontend-platform/pull/440 (ideally pulling from a public CDN for NPM packages, but falling back to locally installed copies, if needed).
-
-#### Compiling CSS from design tokens for `@edx/brand` theme authors (in `@edx/brand` repos)
-1. **`npm install`.** Install dependencies, including `@edx/paragon`.
-2. Create tokens that will override Paragon's default tokens (matching same JSON schema).
-3. **`npm run build-scss`.** This `@edx/brand` repo will have a new NPM script that utilizes a new CLI exported by `@edx/paragon` which exposes the `build-tokens.js` script (or possibly another if we end up needing one for the brand packages to run specifically, TBD) for `@edx/brand` consumers.
-    - The intent of running this command is to effectively deep merge the tokens defined in Paragon's default tokens with the override tokens defined by `@edx/brand`, generating its own `core.css` and `light.css` output files (exact output files still a TBD) containing CSS variable overrides based on the token overrides.
-5. Ensure any changes to the generated `core.css` and `light.css` files are committed & released to NPM (which also "releases" them on versioned public CDNs for NPM packages).
-    - _Note: It is a bit unclear still in the above linked implementation POC for `@edx/frontend-platform` how it would integrate with `@edx/brand` in this way. Open to suggestions/feedback/ideas here._
+We tend to prioritize security issues which impact the published `@openedx/paragon` NPM library more so than the [documentation website](https://paragon-openedx.netlify.app/) or example React application.

package/bin/paragon-scripts.js

@@ -2,12 +2,10 @@
 const chalk = require('chalk');
 const themeCommand = require('../lib/install-theme');
 const helpCommand = require('../lib/help');
-const buildTokensCommand = require('../lib/build-tokens');
-const replaceVariablesCommand = require('../lib/replace-variables');
-const buildScssCommand = require('../lib/build-scss');
-const { sendTrackInfo } = require('../utils');
 const versionCommand = require('../lib/version');
+const migrateToOpenEdxScopeCommand = require('../lib/migrate-to-openedx-scope');
 
+const HELP_COMMAND = 'help';
 const commandAliases = {
   '-v': 'version',
   '--version': 'version',
@@ -33,9 +31,6 @@ const COMMANDS = {
   *    {
   *      name: '--optionName',
   *      description: 'optionDescription',
-  *      choices: 'optionChoices',
-  *      defaultValue: 'optionDefaultValue',
-  *      required: true/false,
   *    },
   *    ...
   *  ],
@@ -54,118 +49,19 @@ const COMMANDS = {
       },
     ],
   },
-  'build-tokens': {
-    executor: buildTokensCommand,
-    description: 'CLI to build Paragon design tokens.',
-    options: [
-      {
-        name: '-s, --source',
-        description: 'Specify the source directory for design tokens.',
-        defaultValue: '\'\'',
-      },
-      {
-        name: '-b, --build-dir',
-        description: 'Specify the build directory for the generated tokens.',
-        defaultValue: './build/',
-      },
-      {
-        name: '--source-tokens-only',
-        description: 'Include only source design tokens in the build.',
-        defaultValue: false,
-      },
-      {
-        name: '-t, --themes',
-        description: 'Specify themes to include in the token build.',
-        defaultValue: 'light',
-      },
-    ],
-  },
-  'replace-variables': {
-    executor: replaceVariablesCommand,
-    description: 'CLI to replace SCSS variables usages or definitions to CSS variables and vice versa in .scss files.',
+  'migrate-to-openedx-scope': {
+    executor: migrateToOpenEdxScopeCommand,
+    description: 'CLI for migrate from "@edx/paragon" to "@openedx/paragon".',
     parameters: [
       {
-        name: '-p, --filePath',
-        description: 'Path to the file or directory where to replace variables.',
-        defaultValue: '\'\'',
-      },
-    ],
-    options: [
-      {
-        name: '-s, --source',
-        description: 'Type of replacement: usage or definition. If set to "definition" the command will only update SCSS variables definitions with CSS variables, if set to "usage" - all occurrences of SCSS variables will we replaced',
-        defaultValue: '\'\'',
-      },
-      {
-        name: '-t, --replacementType',
-        description: 'Type of replacement: usage or definition. If set to "definition" the command will only update SCSS variables definitions with CSS variables, if set to "usage" - all occurrences of SCSS variables will we replaced',
-        choices: '[usage|definition]',
-        defaultValue: 'definition',
-      },
-      {
-        name: '-d, --direction',
-        description: 'Map direction: css-to-scss or scss-to-css, if replacement type parameter is set to "definition" this has no effect.',
-        choices: '[scss-to-css|css-to-scss]',
-        defaultValue: 'scss-to-css',
-      },
-    ],
-  },
-  'build-scss': {
-    executor: buildScssCommand,
-    description: 'CLI to compile Paragon\'s core and themes SCSS into CSS.',
-    options: [
-      {
-        name: '--corePath',
-        description: 'Path to the theme\'s core SCSS file, defaults to Paragon\'s core.scss.',
-        defaultValue: 'styles/scss/core/core.scss',
-      },
-      {
-        name: '--themesPath',
-        description: `Path to the directory that contains themes' files. Expects directory to have following structure:
-          themes/
-            light/
-            │  ├─ index.css
-            │  ├─ other_css_files
-            dark/
-            │  ├─ index.css
-            │  ├─ other_css_files
-            some_other_custom_theme/
-            │  ├─ index.css
-            │  ├─ other_css_files
-          ...
-
-          where index.css has imported all other CSS files in the theme's subdirectory. The script will output
-          light.css, dark.css and some_other_custom_theme.css files (together with maps and minified versions).
-          You can provide any amount of themes. Default to paragon's themes.
-      `,
-        defaultValue: 'styles/css/themes',
-      },
-      {
-        name: '--outDir',
-        description: 'Specifies directory where to out resulting CSS files.',
-        defaultValue: './dist',
-      },
-      {
-        name: '--defaultThemeVariants',
-        description: `Specifies default theme variants. Defaults to a single 'light' theme variant.
-          You can provide multiple default theme variants by passing multiple values, for
-          example: \`--defaultThemeVariants light dark\`
-        `,
-        defaultValue: 'light',
+        name: 'path',
+        description: 'Path to the directory where to replace Paragon package name, default to root of the repository',
+        required: false,
       },
     ],
   },
   help: {
-    executor: (args) => helpCommand(COMMANDS, args),
-    parameters: [
-      {
-        name: 'command',
-        description: 'Specifies command name.',
-        defaultValue: '\'\'',
-        choices: '[install-theme|build-tokens|replace-variables|build-scss]',
-        required: false,
-      },
-    ],
+    executor: helpCommand,
     description: 'Displays help for available commands.',
   },
   version: {
@@ -174,14 +70,8 @@ const COMMANDS = {
   },
 };
 
-/**
- * Executes a Paragon CLI command based on the provided command-line arguments.
- *
- * @async
- * @function executeParagonCommand
- */
 (async () => {
-  const [command, ...commandArgs] = process.argv.slice(2);
+  const [command] = process.argv.slice(2);
   const resolvedCommand = commandAliases[command] || command;
   const executor = COMMANDS[resolvedCommand];
 
@@ -191,13 +81,16 @@ const COMMANDS = {
     return;
   }
 
+  if (command === HELP_COMMAND) {
+    helpCommand(COMMANDS);
+    return;
+  }
+
   try {
-    await executor.executor(commandArgs);
-    sendTrackInfo('openedx.paragon.cli-command.used', { command, status: 'success' });
+    await executor.executor();
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error(chalk.red.bold('An error occurred:', error.message));
-    sendTrackInfo('openedx.paragon.cli-command.used', { command, status: 'error', errorMsg: error.message });
     process.exit(1);
   }
 })();

package/dist/ActionRow/_index.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 .pgn__action-row {
   display: flex;
   flex-grow: 1;
@@ -9,7 +11,7 @@
   }
 
   & > * + * {
-    margin-inline-start: var(--pgn-spacing-action-row-gap-x);
+    margin-inline-start: $action-row-gap-x;
   }
 }
 
@@ -25,7 +27,7 @@
   }
 
   & > * + * {
-    margin-bottom: var(--pgn-spacing-action-row-gap-y);
+    margin-bottom: $action-row-gap-y;
   }
 }
 

package/dist/ActionRow/_variables.scss

@@ -0,0 +1,2 @@
+$action-row-gap-x:                   .5rem !default;
+$action-row-gap-y:                   .5rem !default;

package/dist/ActionRow/index.js

@@ -1,20 +1,19 @@
-const _excluded = ["as", "isStacked", "children"];
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["as", "isStacked", "children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 function ActionRow(_ref) {
-  let {
-      as,
-      isStacked,
-      children
-    } = _ref,
+  var as = _ref.as,
+    isStacked = _ref.isStacked,
+    children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(as, _objectSpread(_objectSpread({}, props), {}, {
     className: classNames(props.className, {

package/dist/ActionRow/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","ActionRow","_ref","as","isStacked","children","props","_objectWithoutProperties","_excluded","createElement","_objectSpread","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;MACjBC,EAAE;MACFC,SAAS;MACTC;IAEF,CAAC,GAAAH,IAAA;IADII,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAER,oBAAOV,KAAK,CAACW,aAAa,CACxBN,EAAE,EAAAO,aAAA,CAAAA,aAAA,KAEGJ,KAAK;IACRK,SAAS,EAAEX,UAAU,CAACM,KAAK,CAACK,SAAS,EAAE;MACrC,iBAAiB,EAAE,CAACP,SAAS;MAC7B,yBAAyB,EAAEA;IAC7B,CAAC;EAAC,IAEJC,QACF,CAAC;AACH;AAEAJ,SAAS,CAACW,SAAS,GAAG;EACpB;EACAT,EAAE,EAAEJ,SAAS,CAACc,WAAW;EACzB;EACAF,SAAS,EAAEZ,SAAS,CAACe,MAAM;EAC3B;EACAT,QAAQ,EAAEN,SAAS,CAACgB,IAAI;EACxB;EACAX,SAAS,EAAEL,SAAS,CAACiB;AACvB,CAAC;AAEDf,SAAS,CAACgB,YAAY,GAAG;EACvBd,EAAE,EAAE,KAAK;EACTQ,SAAS,EAAEO,SAAS;EACpBb,QAAQ,EAAE,IAAI;EACdD,SAAS,EAAE;AACb,CAAC;AAED,SAASe,eAAeA,CAAA,EAAG;EACzB,oBAAOrB,KAAA,CAAAW,aAAA;IAAME,SAAS,EAAC;EAAwB,CAAE,CAAC;AACpD;AAEAV,SAAS,CAACmB,MAAM,GAAGD,eAAe;AAElC,SAASA,eAAe;AACxB,eAAelB,SAAS"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","ActionRow","_ref","as","isStacked","children","props","_objectWithoutProperties","_excluded","createElement","_objectSpread","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,IAJDC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACLC,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAER,oBAAOV,KAAK,CAACW,aAAa,CACxBN,EAAE,EAAAO,aAAA,CAAAA,aAAA,KAEGJ,KAAK;IACRK,SAAS,EAAEX,UAAU,CAACM,KAAK,CAACK,SAAS,EAAE;MACrC,iBAAiB,EAAE,CAACP,SAAS;MAC7B,yBAAyB,EAAEA;IAC7B,CAAC;EAAC,IAEJC,QACF,CAAC;AACH;AAEAJ,SAAS,CAACW,SAAS,GAAG;EACpB;EACAT,EAAE,EAAEJ,SAAS,CAACc,WAAW;EACzB;EACAF,SAAS,EAAEZ,SAAS,CAACe,MAAM;EAC3B;EACAT,QAAQ,EAAEN,SAAS,CAACgB,IAAI;EACxB;EACAX,SAAS,EAAEL,SAAS,CAACiB;AACvB,CAAC;AAEDf,SAAS,CAACgB,YAAY,GAAG;EACvBd,EAAE,EAAE,KAAK;EACTQ,SAAS,EAAEO,SAAS;EACpBb,QAAQ,EAAE,IAAI;EACdD,SAAS,EAAE;AACb,CAAC;AAED,SAASe,eAAeA,CAAA,EAAG;EACzB,oBAAOrB,KAAA,CAAAW,aAAA;IAAME,SAAS,EAAC;EAAwB,CAAE,CAAC;AACpD;AAEAV,SAAS,CAACmB,MAAM,GAAGD,eAAe;AAElC,SAASA,eAAe;AACxB,eAAelB,SAAS"}

package/dist/Alert/_variables.scss

@@ -0,0 +1,24 @@
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+$alert-padding-y:                   1.5rem !default;
+$alert-padding-x:                   1.5rem !default;
+$alert-margin-bottom:               1rem !default;
+$alert-border-radius:               $border-radius !default;
+$alert-link-font-weight:            $font-weight-normal !default;
+$alert-border-width:                0 !default;
+$alert-title-color:                 #000000 !default;
+$alert-box-shadow:                  0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15) !default;
+
+$alert-bg-level:                    -10 !default;
+$alert-border-level:                -9 !default;
+$alert-color-level:                 6 !default;
+
+$alert-icon-space:                  .8rem !default;
+
+$alert-font-size:                   .875rem !default;
+$alert-line-height:                 1.5rem !default;
+$alert-content-color:               $gray-700 !default;
+
+$alert-actions-gap:                 map-get($spacers, 3);

package/dist/Alert/index.js

@@ -1,10 +1,17 @@
-const _excluded = ["children", "icon", "actions", "dismissible", "onClose", "closeLabel", "stacked"];
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["children", "icon", "actions", "dismissible", "onClose", "closeLabel", "stacked"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useCallback, useEffect, useState } from 'react';
@@ -18,32 +25,33 @@ import Icon from '../Icon';
 import breakpoints from '../utils/breakpoints';
 import Button from '../Button';
 import ActionRow from '../ActionRow';
-export const ALERT_CLOSE_LABEL_TEXT = 'Dismiss';
-const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      children,
-      icon,
-      actions,
-      dismissible,
-      onClose,
-      closeLabel,
-      stacked
-    } = _ref,
+export var ALERT_CLOSE_LABEL_TEXT = 'Dismiss';
+var Alert = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    icon = _ref.icon,
+    actions = _ref.actions,
+    dismissible = _ref.dismissible,
+    onClose = _ref.onClose,
+    closeLabel = _ref.closeLabel,
+    stacked = _ref.stacked,
     props = _objectWithoutProperties(_ref, _excluded);
-  const [isStacked, setIsStacked] = useState(stacked);
-  const isExtraSmall = useMediaQuery({
+  var _useState = useState(stacked),
+    _useState2 = _slicedToArray(_useState, 2),
+    isStacked = _useState2[0],
+    setIsStacked = _useState2[1];
+  var isExtraSmall = useMediaQuery({
     maxWidth: breakpoints.extraSmall.maxWidth
   });
-  const actionButtonSize = 'sm';
-  useEffect(() => {
+  var actionButtonSize = 'sm';
+  useEffect(function () {
     if (isExtraSmall) {
       setIsStacked(true);
     } else {
       setIsStacked(stacked);
     }
   }, [isExtraSmall, stacked]);
-  const cloneActionElement = useCallback(Action => {
-    const addtlActionProps = {
+  var cloneActionElement = useCallback(function (Action) {
+    var addtlActionProps = {
       size: actionButtonSize,
       key: Action.props.children
     };
@@ -62,7 +70,7 @@ const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     })
   }, /*#__PURE__*/React.createElement("div", {
     className: "alert-message-content"
-  }, children), (dismissible || actions?.length > 0) && /*#__PURE__*/React.createElement(ActionRow, {
+  }, children), (dismissible || (actions === null || actions === void 0 ? void 0 : actions.length) > 0) && /*#__PURE__*/React.createElement(ActionRow, {
     className: "pgn__alert-actions"
   }, /*#__PURE__*/React.createElement(ActionRow.Spacer, null), dismissible && /*#__PURE__*/React.createElement(Button, {
     size: actionButtonSize,
@@ -78,7 +86,7 @@ const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 // This is needed to display a default prop for Alert.Heading element
 // Copied from react-bootstrap since BaseAlert.Heading component doesn't have defaultProps,
 // so there seems to be no other way of providing correct default prop for base element
-const DivStyledAsH4 = divWithClassName('h4');
+var DivStyledAsH4 = divWithClassName('h4');
 DivStyledAsH4.displayName = 'DivStyledAsH4';
 function AlertHeading(props) {
   return /*#__PURE__*/React.createElement(BaseAlert.Heading, props);
@@ -86,7 +94,7 @@ function AlertHeading(props) {
 function AlertLink(props) {
   return /*#__PURE__*/React.createElement(BaseAlert.Link, props);
 }
-const commonPropTypes = {
+var commonPropTypes = {
   /** Specifies the base element */
   as: PropTypes.elementType,
   /** Overrides underlying component base CSS class name */
@@ -114,7 +122,7 @@ Alert.propTypes = _objectSpread(_objectSpread({}, BaseAlert.propTypes), {}, {
    * more detailed customization is also provided.
    */
   transition: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
-    in: PropTypes.bool,
+    "in": PropTypes.bool,
     appear: PropTypes.bool,
     children: PropTypes.node,
     onEnter: PropTypes.func,
@@ -146,7 +154,7 @@ Alert.defaultProps = _objectSpread(_objectSpread({}, BaseAlert.defaultProps), {}
   icon: undefined,
   actions: undefined,
   dismissible: false,
-  onClose: () => {},
+  onClose: function onClose() {},
   closeLabel: undefined,
   show: true,
   stacked: false

package/dist/Alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useState","PropTypes","classNames","BaseAlert","divWithClassName","FormattedMessage","useMediaQuery","Icon","breakpoints","Button","ActionRow","ALERT_CLOSE_LABEL_TEXT","Alert","forwardRef","_ref","ref","children","icon","actions","dismissible","onClose","closeLabel","stacked","props","_objectWithoutProperties","_excluded","isStacked","setIsStacked","isExtraSmall","maxWidth","extraSmall","actionButtonSize","cloneActionElement","Action","addtlActionProps","size","key","cloneElement","createElement","_extends","className","src","length","Spacer","variant","onClick","id","defaultMessage","description","map","DivStyledAsH4","displayName","AlertHeading","Heading","AlertLink","Link","commonPropTypes","as","elementType","bsPrefix","string","propTypes","defaultProps","_objectSpread","oneOf","transition","oneOfType","bool","shape","in","appear","node","onEnter","func","onEntered","onEntering","onExit","onExited","onExiting","show","arrayOf","element","undefined"],"sources":["../../src/Alert/index.jsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport BaseAlert from 'react-bootstrap/Alert';\nimport divWithClassName from 'react-bootstrap/divWithClassName';\nimport { FormattedMessage } from 'react-intl';\nimport { useMediaQuery } from 'react-responsive';\nimport Icon from '../Icon';\nimport breakpoints from '../utils/breakpoints';\nimport Button from '../Button';\nimport ActionRow from '../ActionRow';\n\nexport const ALERT_CLOSE_LABEL_TEXT = 'Dismiss';\n\nconst Alert = React.forwardRef(({\n  children,\n  icon,\n  actions,\n  dismissible,\n  onClose,\n  closeLabel,\n  stacked,\n  ...props\n}, ref) => {\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) => {\n      const addtlActionProps = { size: actionButtonSize, key: Action.props.children };\n      return React.cloneElement(Action, addtlActionProps);\n    },\n    [],\n  );\n\n  return (\n    <BaseAlert\n      {...props}\n      className={classNames('alert-content', props.className)}\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?.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});\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(props) {\n  return <BaseAlert.Heading {...props} />;\n}\nfunction AlertLink(props) {\n  return <BaseAlert.Link {...props} />;\n}\n\nconst commonPropTypes = {\n  /** Specifies the base element */\n  as: PropTypes.elementType,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nAlertLink.propTypes = commonPropTypes;\nAlertHeading.propTypes = commonPropTypes;\n\nAlertLink.defaultProps = {\n  as: 'a',\n  bsPrefix: 'alert-link',\n};\n\nAlertHeading.defaultProps = {\n  as: DivStyledAsH4,\n  bsPrefix: 'alert-heading',\n};\n\nAlert.propTypes = {\n  ...BaseAlert.propTypes,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n  /** Specifies variant to use. */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light']),\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: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({\n    in: PropTypes.bool,\n    appear: PropTypes.bool,\n    children: PropTypes.node,\n    onEnter: PropTypes.func,\n    onEntered: PropTypes.func,\n    onEntering: PropTypes.func,\n    onExit: PropTypes.func,\n    onExited: PropTypes.func,\n    onExiting: PropTypes.func,\n  })]),\n  /** Docstring for the children prop */\n  children: PropTypes.node,\n  /** Docstring for the icon prop... Icon that will be shown in the alert */\n  icon: PropTypes.func,\n  /** Whether the alert is shown. */\n  show: PropTypes.bool,\n  /** Whether the alert is dismissible. Defaults to true. */\n  dismissible: PropTypes.bool,\n  /** Optional callback function for when the alert it dismissed. */\n  onClose: PropTypes.func,\n  /** Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true. */\n  actions: PropTypes.arrayOf(PropTypes.element),\n  /** Position of the dismiss and call-to-action buttons. Defaults to ``false``. */\n  stacked: PropTypes.bool,\n  /** Sets the text for alert close button, defaults to 'Dismiss'. */\n  closeLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nAlert.defaultProps = {\n  ...BaseAlert.defaultProps,\n  children: undefined,\n  icon: undefined,\n  actions: undefined,\n  dismissible: false,\n  onClose: () => {},\n  closeLabel: undefined,\n  show: true,\n  stacked: false,\n};\n\nAlert.Heading = AlertHeading;\nAlert.Link = AlertLink;\n\nexport default Alert;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAAM,uBAAuB;AAC7C,OAAOC,gBAAgB,MAAM,kCAAkC;AAC/D,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,aAAa,QAAQ,kBAAkB;AAChD,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,WAAW,MAAM,sBAAsB;AAC9C,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,SAAS,MAAM,cAAc;AAEpC,OAAO,MAAMC,sBAAsB,GAAG,SAAS;AAE/C,MAAMC,KAAK,gBAAGf,KAAK,CAACgB,UAAU,CAAC,CAAAC,IAAA,EAS5BC,GAAG,KAAK;EAAA,IATqB;MAC9BC,QAAQ;MACRC,IAAI;MACJC,OAAO;MACPC,WAAW;MACXC,OAAO;MACPC,UAAU;MACVC;IAEF,CAAC,GAAAR,IAAA;IADIS,KAAK,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAER,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG3B,QAAQ,CAACsB,OAAO,CAAC;EACnD,MAAMM,YAAY,GAAGtB,aAAa,CAAC;IAAEuB,QAAQ,EAAErB,WAAW,CAACsB,UAAU,CAACD;EAAS,CAAC,CAAC;EACjF,MAAME,gBAAgB,GAAG,IAAI;EAE7BhC,SAAS,CAAC,MAAM;IACd,IAAI6B,YAAY,EAAE;MAChBD,YAAY,CAAC,IAAI,CAAC;IACpB,CAAC,MAAM;MACLA,YAAY,CAACL,OAAO,CAAC;IACvB;EACF,CAAC,EAAE,CAACM,YAAY,EAAEN,OAAO,CAAC,CAAC;EAE3B,MAAMU,kBAAkB,GAAGlC,WAAW,CACnCmC,MAAM,IAAK;IACV,MAAMC,gBAAgB,GAAG;MAAEC,IAAI,EAAEJ,gBAAgB;MAAEK,GAAG,EAAEH,MAAM,CAACV,KAAK,CAACP;IAAS,CAAC;IAC/E,oBAAOnB,KAAK,CAACwC,YAAY,CAACJ,MAAM,EAAEC,gBAAgB,CAAC;EACrD,CAAC,EACD,EACF,CAAC;EAED,oBACErC,KAAA,CAAAyC,aAAA,CAACnC,SAAS,EAAAoC,QAAA,KACJhB,KAAK;IACTiB,SAAS,EAAEtC,UAAU,CAAC,eAAe,EAAEqB,KAAK,CAACiB,SAAS,CAAE;IACxDzB,GAAG,EAAEA;EAAI,IAERE,IAAI,iBAAIpB,KAAA,CAAAyC,aAAA,CAAC/B,IAAI;IAACkC,GAAG,EAAExB,IAAK;IAACuB,SAAS,EAAC;EAAY,CAAE,CAAC,eACnD3C,KAAA,CAAAyC,aAAA;IACEE,SAAS,EAAEtC,UAAU,CAAC;MACpB,4BAA4B,EAAE,CAACwB,SAAS;MACxC,oCAAoC,EAAEA;IACxC,CAAC;EAAE,gBAEH7B,KAAA,CAAAyC,aAAA;IAAKE,SAAS,EAAC;EAAuB,GACnCxB,QACE,CAAC,EACL,CAACG,WAAW,IAAID,OAAO,EAAEwB,MAAM,GAAG,CAAC,kBAClC7C,KAAA,CAAAyC,aAAA,CAAC5B,SAAS;IAAC8B,SAAS,EAAC;EAAoB,gBACvC3C,KAAA,CAAAyC,aAAA,CAAC5B,SAAS,CAACiC,MAAM,MAAE,CAAC,EACnBxB,WAAW,iBACVtB,KAAA,CAAAyC,aAAA,CAAC7B,MAAM;IACL0B,IAAI,EAAEJ,gBAAiB;IACvBa,OAAO,EAAC,UAAU;IAClBC,OAAO,EAAEzB;EAAQ,GAEhBC,UAAU,iBACTxB,KAAA,CAAAyC,aAAA,CAACjC,gBAAgB;IACfyC,EAAE,EAAC,sBAAsB;IACzBC,cAAc,EAAC,SAAS;IACxBC,WAAW,EAAC;EAA4C,CACzD,CAEG,CACT,EACA9B,OAAO,IAAIA,OAAO,CAAC+B,GAAG,CAACjB,kBAAkB,CACjC,CAEV,CACI,CAAC;AAEhB,CAAC,CAAC;;AAEF;AACA;AACA;AACA,MAAMkB,aAAa,GAAG9C,gBAAgB,CAAC,IAAI,CAAC;AAC5C8C,aAAa,CAACC,WAAW,GAAG,eAAe;AAE3C,SAASC,YAAYA,CAAC7B,KAAK,EAAE;EAC3B,oBAAO1B,KAAA,CAAAyC,aAAA,CAACnC,SAAS,CAACkD,OAAO,EAAK9B,KAAQ,CAAC;AACzC;AACA,SAAS+B,SAASA,CAAC/B,KAAK,EAAE;EACxB,oBAAO1B,KAAA,CAAAyC,aAAA,CAACnC,SAAS,CAACoD,IAAI,EAAKhC,KAAQ,CAAC;AACtC;AAEA,MAAMiC,eAAe,GAAG;EACtB;EACAC,EAAE,EAAExD,SAAS,CAACyD,WAAW;EACzB;EACAC,QAAQ,EAAE1D,SAAS,CAAC2D;AACtB,CAAC;AAEDN,SAAS,CAACO,SAAS,GAAGL,eAAe;AACrCJ,YAAY,CAACS,SAAS,GAAGL,eAAe;AAExCF,SAAS,CAACQ,YAAY,GAAG;EACvBL,EAAE,EAAE,GAAG;EACPE,QAAQ,EAAE;AACZ,CAAC;AAEDP,YAAY,CAACU,YAAY,GAAG;EAC1BL,EAAE,EAAEP,aAAa;EACjBS,QAAQ,EAAE;AACZ,CAAC;AAED/C,KAAK,CAACiD,SAAS,GAAAE,aAAA,CAAAA,aAAA,KACV5D,SAAS,CAAC0D,SAAS;EACtB;EACArB,SAAS,EAAEvC,SAAS,CAAC2D,MAAM;EAC3B;EACAD,QAAQ,EAAE1D,SAAS,CAAC2D,MAAM;EAC1B;EACAhB,OAAO,EAAE3C,SAAS,CAAC+D,KAAK,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;EAC3G;AACF;AACA;AACA;EACEC,UAAU,EAAEhE,SAAS,CAACiE,SAAS,CAAC,CAACjE,SAAS,CAACkE,IAAI,EAAElE,SAAS,CAACmE,KAAK,CAAC;IAC/DC,EAAE,EAAEpE,SAAS,CAACkE,IAAI;IAClBG,MAAM,EAAErE,SAAS,CAACkE,IAAI;IACtBnD,QAAQ,EAAEf,SAAS,CAACsE,IAAI;IACxBC,OAAO,EAAEvE,SAAS,CAACwE,IAAI;IACvBC,SAAS,EAAEzE,SAAS,CAACwE,IAAI;IACzBE,UAAU,EAAE1E,SAAS,CAACwE,IAAI;IAC1BG,MAAM,EAAE3E,SAAS,CAACwE,IAAI;IACtBI,QAAQ,EAAE5E,SAAS,CAACwE,IAAI;IACxBK,SAAS,EAAE7E,SAAS,CAACwE;EACvB,CAAC,CAAC,CAAC,CAAC;EACJ;EACAzD,QAAQ,EAAEf,SAAS,CAACsE,IAAI;EACxB;EACAtD,IAAI,EAAEhB,SAAS,CAACwE,IAAI;EACpB;EACAM,IAAI,EAAE9E,SAAS,CAACkE,IAAI;EACpB;EACAhD,WAAW,EAAElB,SAAS,CAACkE,IAAI;EAC3B;EACA/C,OAAO,EAAEnB,SAAS,CAACwE,IAAI;EACvB;EACAvD,OAAO,EAAEjB,SAAS,CAAC+E,OAAO,CAAC/E,SAAS,CAACgF,OAAO,CAAC;EAC7C;EACA3D,OAAO,EAAErB,SAAS,CAACkE,IAAI;EACvB;EACA9C,UAAU,EAAEpB,SAAS,CAACiE,SAAS,CAAC,CAACjE,SAAS,CAAC2D,MAAM,EAAE3D,SAAS,CAACgF,OAAO,CAAC;AAAC,EACvE;AAEDrE,KAAK,CAACkD,YAAY,GAAAC,aAAA,CAAAA,aAAA,KACb5D,SAAS,CAAC2D,YAAY;EACzB9C,QAAQ,EAAEkE,SAAS;EACnBjE,IAAI,EAAEiE,SAAS;EACfhE,OAAO,EAAEgE,SAAS;EAClB/D,WAAW,EAAE,KAAK;EAClBC,OAAO,EAAEA,CAAA,KAAM,CAAC,CAAC;EACjBC,UAAU,EAAE6D,SAAS;EACrBH,IAAI,EAAE,IAAI;EACVzD,OAAO,EAAE;AAAK,EACf;AAEDV,KAAK,CAACyC,OAAO,GAAGD,YAAY;AAC5BxC,KAAK,CAAC2C,IAAI,GAAGD,SAAS;AAEtB,eAAe1C,KAAK"}
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useState","PropTypes","classNames","BaseAlert","divWithClassName","FormattedMessage","useMediaQuery","Icon","breakpoints","Button","ActionRow","ALERT_CLOSE_LABEL_TEXT","Alert","forwardRef","_ref","ref","children","icon","actions","dismissible","onClose","closeLabel","stacked","props","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","isStacked","setIsStacked","isExtraSmall","maxWidth","extraSmall","actionButtonSize","cloneActionElement","Action","addtlActionProps","size","key","cloneElement","createElement","_extends","className","src","length","Spacer","variant","onClick","id","defaultMessage","description","map","DivStyledAsH4","displayName","AlertHeading","Heading","AlertLink","Link","commonPropTypes","as","elementType","bsPrefix","string","propTypes","defaultProps","_objectSpread","oneOf","transition","oneOfType","bool","shape","appear","node","onEnter","func","onEntered","onEntering","onExit","onExited","onExiting","show","arrayOf","element","undefined"],"sources":["../../src/Alert/index.jsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport BaseAlert from 'react-bootstrap/Alert';\nimport divWithClassName from 'react-bootstrap/divWithClassName';\nimport { FormattedMessage } from 'react-intl';\nimport { useMediaQuery } from 'react-responsive';\nimport Icon from '../Icon';\nimport breakpoints from '../utils/breakpoints';\nimport Button from '../Button';\nimport ActionRow from '../ActionRow';\n\nexport const ALERT_CLOSE_LABEL_TEXT = 'Dismiss';\n\nconst Alert = React.forwardRef(({\n  children,\n  icon,\n  actions,\n  dismissible,\n  onClose,\n  closeLabel,\n  stacked,\n  ...props\n}, ref) => {\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) => {\n      const addtlActionProps = { size: actionButtonSize, key: Action.props.children };\n      return React.cloneElement(Action, addtlActionProps);\n    },\n    [],\n  );\n\n  return (\n    <BaseAlert\n      {...props}\n      className={classNames('alert-content', props.className)}\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?.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});\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(props) {\n  return <BaseAlert.Heading {...props} />;\n}\nfunction AlertLink(props) {\n  return <BaseAlert.Link {...props} />;\n}\n\nconst commonPropTypes = {\n  /** Specifies the base element */\n  as: PropTypes.elementType,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nAlertLink.propTypes = commonPropTypes;\nAlertHeading.propTypes = commonPropTypes;\n\nAlertLink.defaultProps = {\n  as: 'a',\n  bsPrefix: 'alert-link',\n};\n\nAlertHeading.defaultProps = {\n  as: DivStyledAsH4,\n  bsPrefix: 'alert-heading',\n};\n\nAlert.propTypes = {\n  ...BaseAlert.propTypes,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n  /** Specifies variant to use. */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light']),\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: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({\n    in: PropTypes.bool,\n    appear: PropTypes.bool,\n    children: PropTypes.node,\n    onEnter: PropTypes.func,\n    onEntered: PropTypes.func,\n    onEntering: PropTypes.func,\n    onExit: PropTypes.func,\n    onExited: PropTypes.func,\n    onExiting: PropTypes.func,\n  })]),\n  /** Docstring for the children prop */\n  children: PropTypes.node,\n  /** Docstring for the icon prop... Icon that will be shown in the alert */\n  icon: PropTypes.func,\n  /** Whether the alert is shown. */\n  show: PropTypes.bool,\n  /** Whether the alert is dismissible. Defaults to true. */\n  dismissible: PropTypes.bool,\n  /** Optional callback function for when the alert it dismissed. */\n  onClose: PropTypes.func,\n  /** Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true. */\n  actions: PropTypes.arrayOf(PropTypes.element),\n  /** Position of the dismiss and call-to-action buttons. Defaults to ``false``. */\n  stacked: PropTypes.bool,\n  /** Sets the text for alert close button, defaults to 'Dismiss'. */\n  closeLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nAlert.defaultProps = {\n  ...BaseAlert.defaultProps,\n  children: undefined,\n  icon: undefined,\n  actions: undefined,\n  dismissible: false,\n  onClose: () => {},\n  closeLabel: undefined,\n  show: true,\n  stacked: false,\n};\n\nAlert.Heading = AlertHeading;\nAlert.Link = AlertLink;\n\nexport default Alert;\n"],"mappings":"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"}