@openedx/paragon 21.12.3 → 21.13.1

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/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/scss/core/core.scss';
+@import '~@openedx/paragon/scss/core/core.scss';
 @import '~@edx/brand/paragon/overrides.scss';
 ```
 
@@ -81,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]}>
@@ -96,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';
@@ -148,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/scss/core', dir: '../src/paragon', dist: '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/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
 
@@ -227,7 +227,8 @@ When developing a new component you should generally follow three rules:
                 variant="primary"
               />
             )
-          
+          }
+
           export default MyFunctionComponent;
           ```
       
@@ -475,4 +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.
+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

@@ -3,6 +3,7 @@ const chalk = require('chalk');
 const themeCommand = require('../lib/install-theme');
 const helpCommand = require('../lib/help');
 const versionCommand = require('../lib/version');
+const migrateToOpenEdxScopeCommand = require('../lib/migrate-to-openedx-scope');
 
 const HELP_COMMAND = 'help';
 const commandAliases = {
@@ -48,6 +49,17 @@ const COMMANDS = {
       },
     ],
   },
+  'migrate-to-openedx-scope': {
+    executor: migrateToOpenEdxScopeCommand,
+    description: 'CLI for migrate from "@edx/paragon" to "@openedx/paragon".',
+    parameters: [
+      {
+        name: 'path',
+        description: 'Path to the directory where to replace Paragon package name, default to root of the repository',
+        required: false,
+      },
+    ],
+  },
   help: {
     executor: helpCommand,
     description: 'Displays help for available commands.',

package/dist/Button/index.js

@@ -59,10 +59,10 @@ Button.propTypes = _objectSpread(_objectSpread({}, Button.propTypes), {}, {
    * */
   variant: PropTypes.string,
   /** An icon component to render.
-  * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';` */
+  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
   iconBefore: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
   /** An icon component to render.
-  * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';` */
+  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
   iconAfter: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node])
 });
 Button.defaultProps = _objectSpread(_objectSpread({}, Button.defaultProps), {}, {

package/dist/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","BaseButton","BaseButtonGroup","BaseButtonToolbar","ButtonDeprecated","Icon","Button","forwardRef","_ref","ref","children","iconAfter","iconBefore","props","_objectWithoutProperties","_excluded","createElement","_extends","className","size","src","propTypes","_objectSpread","string","disabled","bool","node","isRequired","onClick","func","onKeyDown","type","variant","oneOfType","elementType","defaultProps","undefined","Deprecated","ButtonGroup","ButtonToolbar","as","role","oneOf","toggle","vertical","bsPrefix"],"sources":["../../src/Button/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport BaseButton from 'react-bootstrap/Button';\nimport BaseButtonGroup from 'react-bootstrap/ButtonGroup';\nimport BaseButtonToolbar from 'react-bootstrap/ButtonToolbar';\nimport ButtonDeprecated from './deprecated';\n\nimport Icon from '../Icon';\n\nconst Button = React.forwardRef(({\n  children,\n  iconAfter,\n  iconBefore,\n  ...props\n}, ref) => (\n  <BaseButton\n    {...props}\n    className={classNames(props.className)}\n    ref={ref}\n  >\n    {iconBefore && <Icon className=\"btn-icon-before\" size={props.size} src={iconBefore} />}\n    {children}\n    {iconAfter && <Icon className=\"btn-icon-after\" size={props.size} src={iconAfter} />}\n  </BaseButton>\n));\n\nButton.propTypes = {\n  ...Button.propTypes,\n  /** Specifies class name to apply to the button */\n  className: PropTypes.string,\n  /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */\n  disabled: PropTypes.bool,\n  /** Specifies the text that is displayed within the button. */\n  children: PropTypes.node.isRequired,\n  /** A function that would specify what the button should do when the `onClick` event is triggered.\n   * For example, the button could launch a `Modal`. The default is an empty function. */\n  onClick: PropTypes.func,\n  /** A function that would specify what the button should do when the `onKeyDown` event is triggered.\n   * For example, this could handle using the `Escape` key to trigger the button's action.\n   * The default is an empty function. */\n  onKeyDown: PropTypes.func,\n  /** Used to set the `type` attribute on the `button` tag.  The default type is `button`. */\n  type: PropTypes.string,\n  /** Specifies variant to use.\n   * Can be on of the base variants: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `dark`,\n   * `light`, `link`\n   *\n   * as well as one of the customized variants (= base variant prefixed with `inverse-`, `outline-`\n   * or `inverse-outline-`)\n   * */\n  variant: PropTypes.string,\n  /** An icon component to render.\n  * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';` */\n  iconBefore: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n  /** An icon component to render.\n  * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';` */\n  iconAfter: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n};\n\nButton.defaultProps = {\n  ...Button.defaultProps,\n  children: undefined,\n  className: undefined,\n  iconBefore: undefined,\n  iconAfter: undefined,\n  disabled: false,\n};\n\nButton.Deprecated = ButtonDeprecated;\n\nfunction ButtonGroup(props) {\n  return <BaseButtonGroup {...props} />;\n}\nfunction ButtonToolbar(props) {\n  return <BaseButtonToolbar {...props} />;\n}\n\nButtonGroup.propTypes = {\n  /** Specifies element type for this component. */\n  as: PropTypes.elementType,\n  /** An ARIA role describing the button group. */\n  role: PropTypes.string,\n  /** Specifies the size for all Buttons in the group. */\n  size: PropTypes.oneOf(['sm', 'md', 'lg']),\n  /** Display as a button toggle group. */\n  toggle: PropTypes.bool,\n  /** Specifies if the set of Buttons should appear vertically stacked. */\n  vertical: PropTypes.bool,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nButtonGroup.defaultProps = {\n  as: 'div',\n  role: 'group',\n  toggle: false,\n  vertical: false,\n  bsPrefix: 'btn-group',\n  size: 'md',\n};\n\nButtonToolbar.propTypes = {\n  /** An ARIA role describing the button group. */\n  role: PropTypes.string,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nButtonToolbar.defaultProps = {\n  role: 'toolbar',\n  bsPrefix: 'btn-toolbar',\n};\n\nexport default Button;\nexport { ButtonGroup, ButtonToolbar };\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,OAAOC,eAAe,MAAM,6BAA6B;AACzD,OAAOC,iBAAiB,MAAM,+BAA+B;AAC7D,OAAOC,gBAAgB,MAAM,cAAc;AAE3C,OAAOC,IAAI,MAAM,SAAS;AAE1B,IAAMC,MAAM,gBAAGR,KAAK,CAACS,UAAU,CAAC,UAAAC,IAAA,EAK7BC,GAAG;EAAA,IAJJC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,SAAS,GAAAH,IAAA,CAATG,SAAS;IACTC,UAAU,GAAAJ,IAAA,CAAVI,UAAU;IACPC,KAAK,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA;EAAA,oBAERjB,KAAA,CAAAkB,aAAA,CAACf,UAAU,EAAAgB,QAAA,KACLJ,KAAK;IACTK,SAAS,EAAElB,UAAU,CAACa,KAAK,CAACK,SAAS,CAAE;IACvCT,GAAG,EAAEA;EAAI,IAERG,UAAU,iBAAId,KAAA,CAAAkB,aAAA,CAACX,IAAI;IAACa,SAAS,EAAC,iBAAiB;IAACC,IAAI,EAAEN,KAAK,CAACM,IAAK;IAACC,GAAG,EAAER;EAAW,CAAE,CAAC,EACrFF,QAAQ,EACRC,SAAS,iBAAIb,KAAA,CAAAkB,aAAA,CAACX,IAAI;IAACa,SAAS,EAAC,gBAAgB;IAACC,IAAI,EAAEN,KAAK,CAACM,IAAK;IAACC,GAAG,EAAET;EAAU,CAAE,CACxE,CAAC;AAAA,CACd,CAAC;AAEFL,MAAM,CAACe,SAAS,GAAAC,aAAA,CAAAA,aAAA,KACXhB,MAAM,CAACe,SAAS;EACnB;EACAH,SAAS,EAAEnB,SAAS,CAACwB,MAAM;EAC3B;EACAC,QAAQ,EAAEzB,SAAS,CAAC0B,IAAI;EACxB;EACAf,QAAQ,EAAEX,SAAS,CAAC2B,IAAI,CAACC,UAAU;EACnC;AACF;EACEC,OAAO,EAAE7B,SAAS,CAAC8B,IAAI;EACvB;AACF;AACA;EACEC,SAAS,EAAE/B,SAAS,CAAC8B,IAAI;EACzB;EACAE,IAAI,EAAEhC,SAAS,CAACwB,MAAM;EACtB;AACF;AACA;AACA;AACA;AACA;AACA;EACES,OAAO,EAAEjC,SAAS,CAACwB,MAAM;EACzB;AACF;EACEX,UAAU,EAAEb,SAAS,CAACkC,SAAS,CAAC,CAAClC,SAAS,CAACmC,WAAW,EAAEnC,SAAS,CAAC2B,IAAI,CAAC,CAAC;EACxE;AACF;EACEf,SAAS,EAAEZ,SAAS,CAACkC,SAAS,CAAC,CAAClC,SAAS,CAACmC,WAAW,EAAEnC,SAAS,CAAC2B,IAAI,CAAC;AAAC,EACxE;AAEDpB,MAAM,CAAC6B,YAAY,GAAAb,aAAA,CAAAA,aAAA,KACdhB,MAAM,CAAC6B,YAAY;EACtBzB,QAAQ,EAAE0B,SAAS;EACnBlB,SAAS,EAAEkB,SAAS;EACpBxB,UAAU,EAAEwB,SAAS;EACrBzB,SAAS,EAAEyB,SAAS;EACpBZ,QAAQ,EAAE;AAAK,EAChB;AAEDlB,MAAM,CAAC+B,UAAU,GAAGjC,gBAAgB;AAEpC,SAASkC,WAAWA,CAACzB,KAAK,EAAE;EAC1B,oBAAOf,KAAA,CAAAkB,aAAA,CAACd,eAAe,EAAKW,KAAQ,CAAC;AACvC;AACA,SAAS0B,aAAaA,CAAC1B,KAAK,EAAE;EAC5B,oBAAOf,KAAA,CAAAkB,aAAA,CAACb,iBAAiB,EAAKU,KAAQ,CAAC;AACzC;AAEAyB,WAAW,CAACjB,SAAS,GAAG;EACtB;EACAmB,EAAE,EAAEzC,SAAS,CAACmC,WAAW;EACzB;EACAO,IAAI,EAAE1C,SAAS,CAACwB,MAAM;EACtB;EACAJ,IAAI,EAAEpB,SAAS,CAAC2C,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;EACzC;EACAC,MAAM,EAAE5C,SAAS,CAAC0B,IAAI;EACtB;EACAmB,QAAQ,EAAE7C,SAAS,CAAC0B,IAAI;EACxB;EACAoB,QAAQ,EAAE9C,SAAS,CAACwB;AACtB,CAAC;AAEDe,WAAW,CAACH,YAAY,GAAG;EACzBK,EAAE,EAAE,KAAK;EACTC,IAAI,EAAE,OAAO;EACbE,MAAM,EAAE,KAAK;EACbC,QAAQ,EAAE,KAAK;EACfC,QAAQ,EAAE,WAAW;EACrB1B,IAAI,EAAE;AACR,CAAC;AAEDoB,aAAa,CAAClB,SAAS,GAAG;EACxB;EACAoB,IAAI,EAAE1C,SAAS,CAACwB,MAAM;EACtB;EACAsB,QAAQ,EAAE9C,SAAS,CAACwB;AACtB,CAAC;AAEDgB,aAAa,CAACJ,YAAY,GAAG;EAC3BM,IAAI,EAAE,SAAS;EACfI,QAAQ,EAAE;AACZ,CAAC;AAED,eAAevC,MAAM;AACrB,SAASgC,WAAW,EAAEC,aAAa"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","BaseButton","BaseButtonGroup","BaseButtonToolbar","ButtonDeprecated","Icon","Button","forwardRef","_ref","ref","children","iconAfter","iconBefore","props","_objectWithoutProperties","_excluded","createElement","_extends","className","size","src","propTypes","_objectSpread","string","disabled","bool","node","isRequired","onClick","func","onKeyDown","type","variant","oneOfType","elementType","defaultProps","undefined","Deprecated","ButtonGroup","ButtonToolbar","as","role","oneOf","toggle","vertical","bsPrefix"],"sources":["../../src/Button/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport BaseButton from 'react-bootstrap/Button';\nimport BaseButtonGroup from 'react-bootstrap/ButtonGroup';\nimport BaseButtonToolbar from 'react-bootstrap/ButtonToolbar';\nimport ButtonDeprecated from './deprecated';\n\nimport Icon from '../Icon';\n\nconst Button = React.forwardRef(({\n  children,\n  iconAfter,\n  iconBefore,\n  ...props\n}, ref) => (\n  <BaseButton\n    {...props}\n    className={classNames(props.className)}\n    ref={ref}\n  >\n    {iconBefore && <Icon className=\"btn-icon-before\" size={props.size} src={iconBefore} />}\n    {children}\n    {iconAfter && <Icon className=\"btn-icon-after\" size={props.size} src={iconAfter} />}\n  </BaseButton>\n));\n\nButton.propTypes = {\n  ...Button.propTypes,\n  /** Specifies class name to apply to the button */\n  className: PropTypes.string,\n  /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */\n  disabled: PropTypes.bool,\n  /** Specifies the text that is displayed within the button. */\n  children: PropTypes.node.isRequired,\n  /** A function that would specify what the button should do when the `onClick` event is triggered.\n   * For example, the button could launch a `Modal`. The default is an empty function. */\n  onClick: PropTypes.func,\n  /** A function that would specify what the button should do when the `onKeyDown` event is triggered.\n   * For example, this could handle using the `Escape` key to trigger the button's action.\n   * The default is an empty function. */\n  onKeyDown: PropTypes.func,\n  /** Used to set the `type` attribute on the `button` tag.  The default type is `button`. */\n  type: PropTypes.string,\n  /** Specifies variant to use.\n   * Can be on of the base variants: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `dark`,\n   * `light`, `link`\n   *\n   * as well as one of the customized variants (= base variant prefixed with `inverse-`, `outline-`\n   * or `inverse-outline-`)\n   * */\n  variant: PropTypes.string,\n  /** An icon component to render.\n  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */\n  iconBefore: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n  /** An icon component to render.\n  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */\n  iconAfter: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n};\n\nButton.defaultProps = {\n  ...Button.defaultProps,\n  children: undefined,\n  className: undefined,\n  iconBefore: undefined,\n  iconAfter: undefined,\n  disabled: false,\n};\n\nButton.Deprecated = ButtonDeprecated;\n\nfunction ButtonGroup(props) {\n  return <BaseButtonGroup {...props} />;\n}\nfunction ButtonToolbar(props) {\n  return <BaseButtonToolbar {...props} />;\n}\n\nButtonGroup.propTypes = {\n  /** Specifies element type for this component. */\n  as: PropTypes.elementType,\n  /** An ARIA role describing the button group. */\n  role: PropTypes.string,\n  /** Specifies the size for all Buttons in the group. */\n  size: PropTypes.oneOf(['sm', 'md', 'lg']),\n  /** Display as a button toggle group. */\n  toggle: PropTypes.bool,\n  /** Specifies if the set of Buttons should appear vertically stacked. */\n  vertical: PropTypes.bool,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nButtonGroup.defaultProps = {\n  as: 'div',\n  role: 'group',\n  toggle: false,\n  vertical: false,\n  bsPrefix: 'btn-group',\n  size: 'md',\n};\n\nButtonToolbar.propTypes = {\n  /** An ARIA role describing the button group. */\n  role: PropTypes.string,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nButtonToolbar.defaultProps = {\n  role: 'toolbar',\n  bsPrefix: 'btn-toolbar',\n};\n\nexport default Button;\nexport { ButtonGroup, ButtonToolbar };\n"],"mappings":"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"}

package/dist/Chip/index.js

@@ -59,7 +59,7 @@ Chip.propTypes = {
    * An icon component to render before the content.
    * Example import of a Paragon icon component:
    *
-   * `import { Check } from '@edx/paragon/icons';`
+   * `import { Check } from '@openedx/paragon/icons';`
    */
   iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
   /** A click handler for the `Chip` icon before. */
@@ -68,7 +68,7 @@ Chip.propTypes = {
    * An icon component to render before after the content.
    * Example import of a Paragon icon component:
    *
-   * `import { Check } from '@edx/paragon/icons';`
+   * `import { Check } from '@openedx/paragon/icons';`
    */
   iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
   /** A click handler for the `Chip` icon after. */

package/dist/Chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Icon","STYLE_VARIANTS","CHIP_PGN_CLASS","Chip","forwardRef","_ref","ref","children","className","variant","iconBefore","iconAfter","onIconBeforeClick","onIconAfterClick","disabled","props","_objectWithoutProperties","_excluded","createElement","_extends","concat","src","active","role","onClick","onKeyPress","tabIndex","propTypes","node","isRequired","string","oneOf","bool","oneOfType","element","func","defaultProps","undefined"],"sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n// @ts-ignore\nimport Icon from '../Icon';\n\nconst STYLE_VARIANTS = [\n  'light',\n  'dark',\n];\n\nexport interface IChip {\n  children: React.ReactNode,\n  className?: string,\n  variant?: string,\n  iconBefore?: React.ReactElement | Function,\n  iconAfter?: React.ReactElement | Function,\n  onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler,\n  onIconAfterClick?: KeyboardEventHandler & MouseEventHandler,\n  disabled?: boolean,\n}\n\nexport const CHIP_PGN_CLASS = 'pgn__chip';\n\nconst Chip = React.forwardRef(({\n  children,\n  className,\n  variant,\n  iconBefore,\n  iconAfter,\n  onIconBeforeClick,\n  onIconAfterClick,\n  disabled,\n  ...props\n}: IChip, ref: ForwardedRef<HTMLDivElement>) => (\n  <div\n    className={classNames(\n      CHIP_PGN_CLASS,\n      `pgn__chip-${variant}`,\n      className,\n      { disabled },\n    )}\n    ref={ref}\n    {...props}\n  >\n    {iconBefore && (\n      <div\n        className={classNames('pgn__chip__icon-before')}\n      >\n        <Icon src={iconBefore} />\n      </div>\n    )}\n    <div\n      className={classNames('pgn__chip__label', {\n        'p-before': iconBefore,\n        'p-after': iconAfter,\n      })}\n    >\n      {children}\n    </div>\n    {iconAfter && (\n      <div\n        className={classNames('pgn__chip__icon-after', { active: onIconAfterClick })}\n        role=\"button\"\n        onClick={onIconAfterClick}\n        onKeyPress={onIconAfterClick}\n        tabIndex={disabled ? -1 : 0}\n        data-testid=\"icon-after\"\n      >\n        <Icon src={iconAfter} />\n      </div>\n    )}\n  </div>\n));\n\nChip.propTypes = {\n  /** Specifies the content of the `Chip`. */\n  children: PropTypes.node.isRequired,\n  /** Specifies an additional `className` to add to the base element. */\n  className: PropTypes.string,\n  /** The `Chip` style variant to use. */\n  variant: PropTypes.oneOf(STYLE_VARIANTS),\n  /** Disables the `Chip`. */\n  disabled: PropTypes.bool,\n  /**\n   * An icon component to render before the content.\n   * Example import of a Paragon icon component:\n   *\n   * `import { Check } from '@edx/paragon/icons';`\n   */\n  iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n  /** A click handler for the `Chip` icon before. */\n  onIconBeforeClick: PropTypes.func,\n  /**\n   * An icon component to render before after the content.\n   * Example import of a Paragon icon component:\n   *\n   * `import { Check } from '@edx/paragon/icons';`\n   */\n  iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n  /** A click handler for the `Chip` icon after. */\n  onIconAfterClick: PropTypes.func,\n};\n\nChip.defaultProps = {\n  className: undefined,\n  variant: 'light',\n  disabled: false,\n  iconBefore: undefined,\n  iconAfter: undefined,\n  onIconBeforeClick: undefined,\n  onIconAfterClick: undefined,\n};\n\nexport default Chip;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Icon","STYLE_VARIANTS","CHIP_PGN_CLASS","Chip","forwardRef","_ref","ref","children","className","variant","iconBefore","iconAfter","onIconBeforeClick","onIconAfterClick","disabled","props","_objectWithoutProperties","_excluded","createElement","_extends","concat","src","active","role","onClick","onKeyPress","tabIndex","propTypes","node","isRequired","string","oneOf","bool","oneOfType","element","func","defaultProps","undefined"],"sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n// @ts-ignore\nimport Icon from '../Icon';\n\nconst STYLE_VARIANTS = [\n  'light',\n  'dark',\n];\n\nexport interface IChip {\n  children: React.ReactNode,\n  className?: string,\n  variant?: string,\n  iconBefore?: React.ReactElement | Function,\n  iconAfter?: React.ReactElement | Function,\n  onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler,\n  onIconAfterClick?: KeyboardEventHandler & MouseEventHandler,\n  disabled?: boolean,\n}\n\nexport const CHIP_PGN_CLASS = 'pgn__chip';\n\nconst Chip = React.forwardRef(({\n  children,\n  className,\n  variant,\n  iconBefore,\n  iconAfter,\n  onIconBeforeClick,\n  onIconAfterClick,\n  disabled,\n  ...props\n}: IChip, ref: ForwardedRef<HTMLDivElement>) => (\n  <div\n    className={classNames(\n      CHIP_PGN_CLASS,\n      `pgn__chip-${variant}`,\n      className,\n      { disabled },\n    )}\n    ref={ref}\n    {...props}\n  >\n    {iconBefore && (\n      <div\n        className={classNames('pgn__chip__icon-before')}\n      >\n        <Icon src={iconBefore} />\n      </div>\n    )}\n    <div\n      className={classNames('pgn__chip__label', {\n        'p-before': iconBefore,\n        'p-after': iconAfter,\n      })}\n    >\n      {children}\n    </div>\n    {iconAfter && (\n      <div\n        className={classNames('pgn__chip__icon-after', { active: onIconAfterClick })}\n        role=\"button\"\n        onClick={onIconAfterClick}\n        onKeyPress={onIconAfterClick}\n        tabIndex={disabled ? -1 : 0}\n        data-testid=\"icon-after\"\n      >\n        <Icon src={iconAfter} />\n      </div>\n    )}\n  </div>\n));\n\nChip.propTypes = {\n  /** Specifies the content of the `Chip`. */\n  children: PropTypes.node.isRequired,\n  /** Specifies an additional `className` to add to the base element. */\n  className: PropTypes.string,\n  /** The `Chip` style variant to use. */\n  variant: PropTypes.oneOf(STYLE_VARIANTS),\n  /** Disables the `Chip`. */\n  disabled: PropTypes.bool,\n  /**\n   * An icon component to render before the content.\n   * Example import of a Paragon icon component:\n   *\n   * `import { Check } from '@openedx/paragon/icons';`\n   */\n  iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n  /** A click handler for the `Chip` icon before. */\n  onIconBeforeClick: PropTypes.func,\n  /**\n   * An icon component to render before after the content.\n   * Example import of a Paragon icon component:\n   *\n   * `import { Check } from '@openedx/paragon/icons';`\n   */\n  iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n  /** A click handler for the `Chip` icon after. */\n  onIconAfterClick: PropTypes.func,\n};\n\nChip.defaultProps = {\n  className: undefined,\n  variant: 'light',\n  disabled: false,\n  iconBefore: undefined,\n  iconAfter: undefined,\n  onIconBeforeClick: undefined,\n  onIconAfterClick: undefined,\n};\n\nexport default Chip;\n"],"mappings":"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"}

package/dist/DataTable/filters/TextFilter.js

@@ -1,7 +1,6 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import Form, { FormLabel } from '../../Form';
-import Input from '../../Input';
+import Form from '../../Form';
 import { newId } from '../../utils';
 var formatHeaderForLabel = function formatHeaderForLabel(header) {
   if (typeof header === 'function') {
@@ -21,11 +20,11 @@ function TextFilter(_ref) {
   var ariaLabel = useRef(newId("text-filter-label-".concat(getHeaderProps().key, "-")));
   var formattedHeader = formatHeaderForLabel(Header);
   var inputText = /*#__PURE__*/React.isValidElement(formattedHeader) ? formattedHeader : "Search ".concat(formattedHeader);
-  return /*#__PURE__*/React.createElement(Form.Group, null, /*#__PURE__*/React.createElement(FormLabel, {
-    id: ariaLabel.current,
+  return /*#__PURE__*/React.createElement(Form.Group, {
+    controlId: ariaLabel.current
+  }, /*#__PURE__*/React.createElement(Form.Label, {
     className: "sr-only"
-  }, inputText), /*#__PURE__*/React.createElement(Input, {
-    "aria-labelledby": ariaLabel.current,
+  }, inputText), /*#__PURE__*/React.createElement(Form.Control, {
     value: filterValue || '',
     type: "text",
     onChange: function onChange(e) {

package/dist/DataTable/filters/TextFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextFilter.js","names":["React","useRef","PropTypes","Form","FormLabel","Input","newId","formatHeaderForLabel","header","toLowerCase","TextFilter","_ref","_ref$column","column","filterValue","setFilter","Header","getHeaderProps","ariaLabel","concat","key","formattedHeader","inputText","isValidElement","createElement","Group","id","current","className","value","type","onChange","e","target","undefined","placeholder","propTypes","shape","func","isRequired","oneOfType","elementType","node","string"],"sources":["../../../src/DataTable/filters/TextFilter.jsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport Form, { FormLabel } from '../../Form';\nimport Input from '../../Input';\nimport { newId } from '../../utils';\n\nconst formatHeaderForLabel = (header) => {\n  if (typeof header === 'function') {\n    return header();\n  }\n  if (typeof header === 'string') {\n    return header.toLowerCase();\n  }\n  return header;\n};\n\nfunction TextFilter({\n  column: {\n    filterValue, setFilter, Header, getHeaderProps,\n  },\n}) {\n  const ariaLabel = useRef(newId(`text-filter-label-${getHeaderProps().key}-`));\n  const formattedHeader = formatHeaderForLabel(Header);\n  const inputText = React.isValidElement(formattedHeader) ? formattedHeader : `Search ${formattedHeader}`;\n  return (\n    <Form.Group>\n      <FormLabel id={ariaLabel.current} className=\"sr-only\">{inputText}</FormLabel>\n      <Input\n        aria-labelledby={ariaLabel.current}\n        value={filterValue || ''}\n        type=\"text\"\n        onChange={e => {\n          setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely\n        }}\n        placeholder={inputText}\n      />\n    </Form.Group>\n  );\n}\n\nTextFilter.propTypes = {\n  /**\n   * Specifies a column object.\n   *\n   * `setFilter`: Function to set the filter value.\n   *\n   * `Header`: Column header used for labels and placeholders.\n   *\n   * `getHeaderProps`: Generates a key unique to the column being filtered.\n   *\n   * `filterValue`: Value for the filter input.\n   */\n  column: PropTypes.shape({\n    setFilter: PropTypes.func.isRequired,\n    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,\n    getHeaderProps: PropTypes.func.isRequired,\n    filterValue: PropTypes.string,\n  }).isRequired,\n};\n\nexport default TextFilter;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,IAAIC,SAAS,QAAQ,YAAY;AAC5C,OAAOC,KAAK,MAAM,aAAa;AAC/B,SAASC,KAAK,QAAQ,aAAa;AAEnC,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAIC,MAAM,EAAK;EACvC,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;IAChC,OAAOA,MAAM,CAAC,CAAC;EACjB;EACA,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;IAC9B,OAAOA,MAAM,CAACC,WAAW,CAAC,CAAC;EAC7B;EACA,OAAOD,MAAM;AACf,CAAC;AAED,SAASE,UAAUA,CAAAC,IAAA,EAIhB;EAAA,IAAAC,WAAA,GAAAD,IAAA,CAHDE,MAAM;IACJC,WAAW,GAAAF,WAAA,CAAXE,WAAW;IAAEC,SAAS,GAAAH,WAAA,CAATG,SAAS;IAAEC,MAAM,GAAAJ,WAAA,CAANI,MAAM;IAAEC,cAAc,GAAAL,WAAA,CAAdK,cAAc;EAGhD,IAAMC,SAAS,GAAGjB,MAAM,CAACK,KAAK,sBAAAa,MAAA,CAAsBF,cAAc,CAAC,CAAC,CAACG,GAAG,MAAG,CAAC,CAAC;EAC7E,IAAMC,eAAe,GAAGd,oBAAoB,CAACS,MAAM,CAAC;EACpD,IAAMM,SAAS,GAAG,aAAAtB,KAAK,CAACuB,cAAc,CAACF,eAAe,CAAC,GAAGA,eAAe,aAAAF,MAAA,CAAaE,eAAe,CAAE;EACvG,oBACErB,KAAA,CAAAwB,aAAA,CAACrB,IAAI,CAACsB,KAAK,qBACTzB,KAAA,CAAAwB,aAAA,CAACpB,SAAS;IAACsB,EAAE,EAAER,SAAS,CAACS,OAAQ;IAACC,SAAS,EAAC;EAAS,GAAEN,SAAqB,CAAC,eAC7EtB,KAAA,CAAAwB,aAAA,CAACnB,KAAK;IACJ,mBAAiBa,SAAS,CAACS,OAAQ;IACnCE,KAAK,EAAEf,WAAW,IAAI,EAAG;IACzBgB,IAAI,EAAC,MAAM;IACXC,QAAQ,EAAE,SAAAA,SAAAC,CAAC,EAAI;MACbjB,SAAS,CAACiB,CAAC,CAACC,MAAM,CAACJ,KAAK,IAAIK,SAAS,CAAC,CAAC,CAAC;IAC1C,CAAE;;IACFC,WAAW,EAAEb;EAAU,CACxB,CACS,CAAC;AAEjB;AAEAZ,UAAU,CAAC0B,SAAS,GAAG;EACrB;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEvB,MAAM,EAAEX,SAAS,CAACmC,KAAK,CAAC;IACtBtB,SAAS,EAAEb,SAAS,CAACoC,IAAI,CAACC,UAAU;IACpCvB,MAAM,EAAEd,SAAS,CAACsC,SAAS,CAAC,CAACtC,SAAS,CAACuC,WAAW,EAAEvC,SAAS,CAACwC,IAAI,CAAC,CAAC,CAACH,UAAU;IAC/EtB,cAAc,EAAEf,SAAS,CAACoC,IAAI,CAACC,UAAU;IACzCzB,WAAW,EAAEZ,SAAS,CAACyC;EACzB,CAAC,CAAC,CAACJ;AACL,CAAC;AAED,eAAe7B,UAAU"}
+{"version":3,"file":"TextFilter.js","names":["React","useRef","PropTypes","Form","newId","formatHeaderForLabel","header","toLowerCase","TextFilter","_ref","_ref$column","column","filterValue","setFilter","Header","getHeaderProps","ariaLabel","concat","key","formattedHeader","inputText","isValidElement","createElement","Group","controlId","current","Label","className","Control","value","type","onChange","e","target","undefined","placeholder","propTypes","shape","func","isRequired","oneOfType","elementType","node","string"],"sources":["../../../src/DataTable/filters/TextFilter.jsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport Form from '../../Form';\nimport { newId } from '../../utils';\n\nconst formatHeaderForLabel = (header) => {\n  if (typeof header === 'function') {\n    return header();\n  }\n  if (typeof header === 'string') {\n    return header.toLowerCase();\n  }\n  return header;\n};\n\nfunction TextFilter({\n  column: {\n    filterValue, setFilter, Header, getHeaderProps,\n  },\n}) {\n  const ariaLabel = useRef(newId(`text-filter-label-${getHeaderProps().key}-`));\n  const formattedHeader = formatHeaderForLabel(Header);\n  const inputText = React.isValidElement(formattedHeader) ? formattedHeader : `Search ${formattedHeader}`;\n  return (\n    <Form.Group controlId={ariaLabel.current}>\n      <Form.Label className=\"sr-only\">{inputText}</Form.Label>\n      <Form.Control\n        value={filterValue || ''}\n        type=\"text\"\n        onChange={e => {\n          setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely\n        }}\n        placeholder={inputText}\n      />\n    </Form.Group>\n  );\n}\n\nTextFilter.propTypes = {\n  /**\n   * Specifies a column object.\n   *\n   * `setFilter`: Function to set the filter value.\n   *\n   * `Header`: Column header used for labels and placeholders.\n   *\n   * `getHeaderProps`: Generates a key unique to the column being filtered.\n   *\n   * `filterValue`: Value for the filter input.\n   */\n  column: PropTypes.shape({\n    setFilter: PropTypes.func.isRequired,\n    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,\n    getHeaderProps: PropTypes.func.isRequired,\n    filterValue: PropTypes.string,\n  }).isRequired,\n};\n\nexport default TextFilter;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,MAAM,YAAY;AAC7B,SAASC,KAAK,QAAQ,aAAa;AAEnC,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAIC,MAAM,EAAK;EACvC,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;IAChC,OAAOA,MAAM,CAAC,CAAC;EACjB;EACA,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;IAC9B,OAAOA,MAAM,CAACC,WAAW,CAAC,CAAC;EAC7B;EACA,OAAOD,MAAM;AACf,CAAC;AAED,SAASE,UAAUA,CAAAC,IAAA,EAIhB;EAAA,IAAAC,WAAA,GAAAD,IAAA,CAHDE,MAAM;IACJC,WAAW,GAAAF,WAAA,CAAXE,WAAW;IAAEC,SAAS,GAAAH,WAAA,CAATG,SAAS;IAAEC,MAAM,GAAAJ,WAAA,CAANI,MAAM;IAAEC,cAAc,GAAAL,WAAA,CAAdK,cAAc;EAGhD,IAAMC,SAAS,GAAGf,MAAM,CAACG,KAAK,sBAAAa,MAAA,CAAsBF,cAAc,CAAC,CAAC,CAACG,GAAG,MAAG,CAAC,CAAC;EAC7E,IAAMC,eAAe,GAAGd,oBAAoB,CAACS,MAAM,CAAC;EACpD,IAAMM,SAAS,GAAG,aAAApB,KAAK,CAACqB,cAAc,CAACF,eAAe,CAAC,GAAGA,eAAe,aAAAF,MAAA,CAAaE,eAAe,CAAE;EACvG,oBACEnB,KAAA,CAAAsB,aAAA,CAACnB,IAAI,CAACoB,KAAK;IAACC,SAAS,EAAER,SAAS,CAACS;EAAQ,gBACvCzB,KAAA,CAAAsB,aAAA,CAACnB,IAAI,CAACuB,KAAK;IAACC,SAAS,EAAC;EAAS,GAAEP,SAAsB,CAAC,eACxDpB,KAAA,CAAAsB,aAAA,CAACnB,IAAI,CAACyB,OAAO;IACXC,KAAK,EAAEjB,WAAW,IAAI,EAAG;IACzBkB,IAAI,EAAC,MAAM;IACXC,QAAQ,EAAE,SAAAA,SAAAC,CAAC,EAAI;MACbnB,SAAS,CAACmB,CAAC,CAACC,MAAM,CAACJ,KAAK,IAAIK,SAAS,CAAC,CAAC,CAAC;IAC1C,CAAE;;IACFC,WAAW,EAAEf;EAAU,CACxB,CACS,CAAC;AAEjB;AAEAZ,UAAU,CAAC4B,SAAS,GAAG;EACrB;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEzB,MAAM,EAAET,SAAS,CAACmC,KAAK,CAAC;IACtBxB,SAAS,EAAEX,SAAS,CAACoC,IAAI,CAACC,UAAU;IACpCzB,MAAM,EAAEZ,SAAS,CAACsC,SAAS,CAAC,CAACtC,SAAS,CAACuC,WAAW,EAAEvC,SAAS,CAACwC,IAAI,CAAC,CAAC,CAACH,UAAU;IAC/ExB,cAAc,EAAEb,SAAS,CAACoC,IAAI,CAACC,UAAU;IACzC3B,WAAW,EAAEV,SAAS,CAACyC;EACzB,CAAC,CAAC,CAACJ;AACL,CAAC;AAED,eAAe/B,UAAU"}

package/dist/Icon/index.js

@@ -59,7 +59,7 @@ function Icon(_ref) {
 Icon.propTypes = {
   /**
    * An icon component to render.
-   * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';`
+   * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';`
    */
   src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
   /** HTML element attributes to pass through to the underlying svg element */

package/dist/Icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","newId","withDeprecatedProps","DeprTypes","Icon","_ref","Component","src","id","className","hidden","screenReaderText","svgAttrs","size","attrs","_objectWithoutProperties","_excluded","hasAriaLabel","mergedSvgProps","_objectSpread","undefined","createElement","_extends","_defineProperty","concat","role","focusable","Fragment","propTypes","oneOfType","element","elementType","shape","string","oneOf","bool","defaultProps","deprType","FORMAT","expect","value","transform","Array","isArray","join","message"],"sources":["../../src/Icon/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport newId from '../utils/newId';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\n/**\n * An svg with an \"img\" role must satisfy the following a11y requirements\n * - It needs a text alternative in the form of aria-label, aria-labelledby, or screen-reader only text.\n * - If no label is desired, aria-label will be set to an empty string and aria-hidden to \"true\".\n * - focusable is set to false on the svg in all cases as a workaround for an ie11 bug\n */\n\nfunction Icon({\n  src: Component,\n  id,\n  className,\n  hidden,\n  screenReaderText,\n  svgAttrs,\n  size,\n  ...attrs\n}) {\n  if (Component) {\n    // If no aria label is specified, hide this icon from screenreaders\n    const hasAriaLabel = svgAttrs['aria-label'] || svgAttrs['aria-labelledby'];\n\n    const mergedSvgProps = { ...svgAttrs };\n\n    if (!hasAriaLabel) {\n      mergedSvgProps['aria-label'] = undefined;\n      mergedSvgProps['aria-hidden'] = true;\n    }\n\n    return (\n      <span\n        className={classNames('pgn__icon', { [`pgn__icon__${size}`]: !!size }, className)}\n        id={id}\n        {...attrs}\n      >\n        <Component\n          role=\"img\"\n          focusable={false}\n          {...mergedSvgProps}\n        />\n        {screenReaderText && (\n          <span className=\"sr-only\">\n            {screenReaderText}\n          </span>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <>\n      <span\n        id={id || newId('Icon')}\n        className={className}\n        aria-hidden={hidden}\n      />\n      {screenReaderText && (\n        <span className=\"sr-only\">\n          {screenReaderText}\n        </span>\n      )}\n    </>\n  );\n}\n\nIcon.propTypes = {\n  /**\n   * An icon component to render.\n   * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';`\n   */\n  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),\n  /** HTML element attributes to pass through to the underlying svg element */\n  svgAttrs: PropTypes.shape({\n    'aria-label': PropTypes.string,\n    'aria-labelledby': PropTypes.string,\n  }),\n  /**\n   * the `id` property of the Icon element, by default this value is generated\n   * with the `newId` function with the `prefix` of `Icon`.\n   */\n  id: PropTypes.string,\n  /** The size of the icon. */\n  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),\n  /** A class name that will define what the Icon looks like. */\n  className: PropTypes.string,\n  /**\n   * a boolean that determines the value of `aria-hidden` attribute on the Icon span,\n   * this value is `true` by default.\n   */\n  hidden: PropTypes.bool,\n  /**\n   * a string or an element that will be used on a secondary span leveraging the `sr-only` style\n   * for screenreader only text, this value is `undefined` by default. This value is recommended for use unless\n   * the Icon is being used in a way that is purely decorative or provides no additional context for screen\n   * reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.\n   */\n  screenReaderText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nIcon.defaultProps = {\n  src: null,\n  svgAttrs: {},\n  id: undefined,\n  hidden: true,\n  screenReaderText: undefined,\n  size: undefined,\n  className: undefined,\n};\n\nexport default withDeprecatedProps(Icon, 'Icon', {\n  className: {\n    deprType: DeprTypes.FORMAT,\n    expect: value => typeof value === 'string',\n    transform: value => (Array.isArray(value) ? value.join(' ') : value),\n    message: 'It should be a string.',\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","newId","withDeprecatedProps","DeprTypes","Icon","_ref","Component","src","id","className","hidden","screenReaderText","svgAttrs","size","attrs","_objectWithoutProperties","_excluded","hasAriaLabel","mergedSvgProps","_objectSpread","undefined","createElement","_extends","_defineProperty","concat","role","focusable","Fragment","propTypes","oneOfType","element","elementType","shape","string","oneOf","bool","defaultProps","deprType","FORMAT","expect","value","transform","Array","isArray","join","message"],"sources":["../../src/Icon/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport newId from '../utils/newId';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\n/**\n * An svg with an \"img\" role must satisfy the following a11y requirements\n * - It needs a text alternative in the form of aria-label, aria-labelledby, or screen-reader only text.\n * - If no label is desired, aria-label will be set to an empty string and aria-hidden to \"true\".\n * - focusable is set to false on the svg in all cases as a workaround for an ie11 bug\n */\n\nfunction Icon({\n  src: Component,\n  id,\n  className,\n  hidden,\n  screenReaderText,\n  svgAttrs,\n  size,\n  ...attrs\n}) {\n  if (Component) {\n    // If no aria label is specified, hide this icon from screenreaders\n    const hasAriaLabel = svgAttrs['aria-label'] || svgAttrs['aria-labelledby'];\n\n    const mergedSvgProps = { ...svgAttrs };\n\n    if (!hasAriaLabel) {\n      mergedSvgProps['aria-label'] = undefined;\n      mergedSvgProps['aria-hidden'] = true;\n    }\n\n    return (\n      <span\n        className={classNames('pgn__icon', { [`pgn__icon__${size}`]: !!size }, className)}\n        id={id}\n        {...attrs}\n      >\n        <Component\n          role=\"img\"\n          focusable={false}\n          {...mergedSvgProps}\n        />\n        {screenReaderText && (\n          <span className=\"sr-only\">\n            {screenReaderText}\n          </span>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <>\n      <span\n        id={id || newId('Icon')}\n        className={className}\n        aria-hidden={hidden}\n      />\n      {screenReaderText && (\n        <span className=\"sr-only\">\n          {screenReaderText}\n        </span>\n      )}\n    </>\n  );\n}\n\nIcon.propTypes = {\n  /**\n   * An icon component to render.\n   * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';`\n   */\n  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),\n  /** HTML element attributes to pass through to the underlying svg element */\n  svgAttrs: PropTypes.shape({\n    'aria-label': PropTypes.string,\n    'aria-labelledby': PropTypes.string,\n  }),\n  /**\n   * the `id` property of the Icon element, by default this value is generated\n   * with the `newId` function with the `prefix` of `Icon`.\n   */\n  id: PropTypes.string,\n  /** The size of the icon. */\n  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),\n  /** A class name that will define what the Icon looks like. */\n  className: PropTypes.string,\n  /**\n   * a boolean that determines the value of `aria-hidden` attribute on the Icon span,\n   * this value is `true` by default.\n   */\n  hidden: PropTypes.bool,\n  /**\n   * a string or an element that will be used on a secondary span leveraging the `sr-only` style\n   * for screenreader only text, this value is `undefined` by default. This value is recommended for use unless\n   * the Icon is being used in a way that is purely decorative or provides no additional context for screen\n   * reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.\n   */\n  screenReaderText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nIcon.defaultProps = {\n  src: null,\n  svgAttrs: {},\n  id: undefined,\n  hidden: true,\n  screenReaderText: undefined,\n  size: undefined,\n  className: undefined,\n};\n\nexport default withDeprecatedProps(Icon, 'Icon', {\n  className: {\n    deprType: DeprTypes.FORMAT,\n    expect: value => typeof value === 'string',\n    transform: value => (Array.isArray(value) ? value.join(' ') : value),\n    message: 'It should be a string.',\n  },\n});\n"],"mappings":"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"}

package/dist/IconButton/index.js

@@ -67,7 +67,7 @@ IconButton.propTypes = {
    *  but is going to be deprecated soon, please use Paragon's icons instead. */
   iconAs: PropTypes.elementType,
   /** An icon component to render. Example import of a Paragon icon component:
-   * `import { Check } from '@edx/paragon/dist/icon';`
+   * `import { Check } from '@openedx/paragon/dist/icon';`
    * */
   src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
   /** Alt text for your icon. For best practice, avoid using alt text to describe

package/dist/IconButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","FontAwesomeIcon","OverlayTrigger","Tooltip","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","attrs","_objectWithoutProperties","_excluded","invert","activeStyle","concat","process","env","NODE_ENV","console","msg","warn","IconComponent","createElement","_extends","_defineProperty","type","defaultProps","undefined","propTypes","string","elementType","oneOfType","element","isRequired","bool","shape","prefix","iconName","array","func","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","_excluded2","placement","overlay","id","node"],"sources":["../../src/IconButton/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\n\nconst IconButton = React.forwardRef(({\n  className,\n  alt,\n  invertColors,\n  icon,\n  src,\n  iconClassNames,\n  onClick,\n  size,\n  variant,\n  iconAs,\n  isActive,\n  ...attrs\n}, ref) => {\n  const invert = invertColors ? 'inverse-' : '';\n  const activeStyle = isActive ? `${variant}-` : '';\n  if (!iconAs && process.env.NODE_ENV === 'development' && console) {\n    const msg = '[Deprecated] IconButton: you have not provided a value for iconAs prop and '\n      + 'are using a default one - FontAwesomeIcon, the default value is going to be changed soon '\n      + 'as Paragon is moving away from FontAwesome, please use Paragon\\'s icons instead.';\n    // eslint-disable-next-line no-console\n    console.warn(msg);\n  }\n  const IconComponent = iconAs || FontAwesomeIcon;\n  return (\n    <button\n      aria-label={alt}\n      className={classNames(\n        'btn-icon',\n        `btn-icon-${invert}${variant}`,\n        `btn-icon-${size}`,\n        {\n          [`btn-icon-${invert}${activeStyle}active`]: isActive,\n        },\n        className,\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref}\n      {...attrs}\n    >\n      <span className=\"btn-icon__icon-container\">\n        <IconComponent\n          className={classNames('btn-icon__icon', iconClassNames)}\n          icon={icon}\n          src={src}\n        />\n      </span>\n    </button>\n  );\n});\n\nIconButton.defaultProps = {\n  iconAs: undefined,\n  src: null,\n  icon: undefined,\n  iconClassNames: undefined,\n  className: undefined,\n  invertColors: false,\n  variant: 'primary',\n  size: 'md',\n  onClick: () => {},\n  isActive: false,\n};\n\nIconButton.propTypes = {\n  /** A custom class name. */\n  className: PropTypes.string,\n  /** Component that renders the icon, currently defaults to `FontAwesomeIcon`,\n   *  but is going to be deprecated soon, please use Paragon's icons instead. */\n  iconAs: PropTypes.elementType,\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@edx/paragon/dist/icon';`\n   * */\n  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: PropTypes.string.isRequired,\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n  /** Accepts a React fontawesome icon. */\n  icon: PropTypes.shape({\n    prefix: PropTypes.string,\n    iconName: PropTypes.string,\n    // eslint-disable-next-line react/forbid-prop-types\n    icon: PropTypes.array,\n  }),\n  /** Extra class names that will be added to the icon */\n  iconClassNames: PropTypes.string,\n  /** Click handler for the button */\n  onClick: PropTypes.func,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** size of button to render */\n  size: PropTypes.oneOf(['sm', 'md', 'inline']),\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive: PropTypes.bool,\n};\n\n/**\n *\n * @param { object } args Arguments\n * @param { string } args.tooltipPlacement choose from https://popper.js.org/docs/v2/constructors/#options\n * @param { React.Component } args.tooltipContent any content to pass to tooltip content area\n * @returns { IconButton } a button wrapped in overlaytrigger\n */\nfunction IconButtonWithTooltip({\n  tooltipPlacement, tooltipContent, variant, invertColors, ...props\n}) {\n  const invert = invertColors ? 'inverse-' : '';\n  return (\n    <OverlayTrigger\n      placement={tooltipPlacement}\n      overlay={(\n        <Tooltip\n          id={`iconbutton-tooltip-${tooltipPlacement}`}\n          variant={invert ? 'light' : ''}\n        >\n          {tooltipContent}\n        </Tooltip>\n      )}\n    >\n      <IconButton variant={variant} invertColors={invertColors} {...props} />\n    </OverlayTrigger>\n  );\n}\n\nIconButtonWithTooltip.defaultProps = {\n  tooltipPlacement: 'top',\n  variant: 'primary',\n  invertColors: false,\n};\n\nIconButtonWithTooltip.propTypes = {\n  /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */\n  tooltipPlacement: PropTypes.string,\n  /** any valid JSX or text to be rendered as tooltip contents */\n  tooltipContent: PropTypes.node.isRequired,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n};\n\nIconButton.IconButtonWithTooltip = IconButtonWithTooltip;\n\nexport default IconButton;\nexport { IconButtonWithTooltip };\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","FontAwesomeIcon","OverlayTrigger","Tooltip","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","attrs","_objectWithoutProperties","_excluded","invert","activeStyle","concat","process","env","NODE_ENV","console","msg","warn","IconComponent","createElement","_extends","_defineProperty","type","defaultProps","undefined","propTypes","string","elementType","oneOfType","element","isRequired","bool","shape","prefix","iconName","array","func","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","_excluded2","placement","overlay","id","node"],"sources":["../../src/IconButton/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\n\nconst IconButton = React.forwardRef(({\n  className,\n  alt,\n  invertColors,\n  icon,\n  src,\n  iconClassNames,\n  onClick,\n  size,\n  variant,\n  iconAs,\n  isActive,\n  ...attrs\n}, ref) => {\n  const invert = invertColors ? 'inverse-' : '';\n  const activeStyle = isActive ? `${variant}-` : '';\n  if (!iconAs && process.env.NODE_ENV === 'development' && console) {\n    const msg = '[Deprecated] IconButton: you have not provided a value for iconAs prop and '\n      + 'are using a default one - FontAwesomeIcon, the default value is going to be changed soon '\n      + 'as Paragon is moving away from FontAwesome, please use Paragon\\'s icons instead.';\n    // eslint-disable-next-line no-console\n    console.warn(msg);\n  }\n  const IconComponent = iconAs || FontAwesomeIcon;\n  return (\n    <button\n      aria-label={alt}\n      className={classNames(\n        'btn-icon',\n        `btn-icon-${invert}${variant}`,\n        `btn-icon-${size}`,\n        {\n          [`btn-icon-${invert}${activeStyle}active`]: isActive,\n        },\n        className,\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref}\n      {...attrs}\n    >\n      <span className=\"btn-icon__icon-container\">\n        <IconComponent\n          className={classNames('btn-icon__icon', iconClassNames)}\n          icon={icon}\n          src={src}\n        />\n      </span>\n    </button>\n  );\n});\n\nIconButton.defaultProps = {\n  iconAs: undefined,\n  src: null,\n  icon: undefined,\n  iconClassNames: undefined,\n  className: undefined,\n  invertColors: false,\n  variant: 'primary',\n  size: 'md',\n  onClick: () => {},\n  isActive: false,\n};\n\nIconButton.propTypes = {\n  /** A custom class name. */\n  className: PropTypes.string,\n  /** Component that renders the icon, currently defaults to `FontAwesomeIcon`,\n   *  but is going to be deprecated soon, please use Paragon's icons instead. */\n  iconAs: PropTypes.elementType,\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/dist/icon';`\n   * */\n  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: PropTypes.string.isRequired,\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n  /** Accepts a React fontawesome icon. */\n  icon: PropTypes.shape({\n    prefix: PropTypes.string,\n    iconName: PropTypes.string,\n    // eslint-disable-next-line react/forbid-prop-types\n    icon: PropTypes.array,\n  }),\n  /** Extra class names that will be added to the icon */\n  iconClassNames: PropTypes.string,\n  /** Click handler for the button */\n  onClick: PropTypes.func,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** size of button to render */\n  size: PropTypes.oneOf(['sm', 'md', 'inline']),\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive: PropTypes.bool,\n};\n\n/**\n *\n * @param { object } args Arguments\n * @param { string } args.tooltipPlacement choose from https://popper.js.org/docs/v2/constructors/#options\n * @param { React.Component } args.tooltipContent any content to pass to tooltip content area\n * @returns { IconButton } a button wrapped in overlaytrigger\n */\nfunction IconButtonWithTooltip({\n  tooltipPlacement, tooltipContent, variant, invertColors, ...props\n}) {\n  const invert = invertColors ? 'inverse-' : '';\n  return (\n    <OverlayTrigger\n      placement={tooltipPlacement}\n      overlay={(\n        <Tooltip\n          id={`iconbutton-tooltip-${tooltipPlacement}`}\n          variant={invert ? 'light' : ''}\n        >\n          {tooltipContent}\n        </Tooltip>\n      )}\n    >\n      <IconButton variant={variant} invertColors={invertColors} {...props} />\n    </OverlayTrigger>\n  );\n}\n\nIconButtonWithTooltip.defaultProps = {\n  tooltipPlacement: 'top',\n  variant: 'primary',\n  invertColors: false,\n};\n\nIconButtonWithTooltip.propTypes = {\n  /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */\n  tooltipPlacement: PropTypes.string,\n  /** any valid JSX or text to be rendered as tooltip contents */\n  tooltipContent: PropTypes.node.isRequired,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n};\n\nIconButton.IconButtonWithTooltip = IconButtonWithTooltip;\n\nexport default IconButton;\nexport { IconButtonWithTooltip };\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,cAAc,QAAQ,YAAY;AAC3C,OAAOC,OAAO,MAAM,YAAY;AAEhC,IAAMC,UAAU,gBAAGN,KAAK,CAACO,UAAU,CAAC,UAAAC,IAAA,EAajCC,GAAG,EAAK;EAAA,IAZTC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,GAAG,GAAAH,IAAA,CAAHG,GAAG;IACHC,YAAY,GAAAJ,IAAA,CAAZI,YAAY;IACZC,IAAI,GAAAL,IAAA,CAAJK,IAAI;IACJC,GAAG,GAAAN,IAAA,CAAHM,GAAG;IACHC,cAAc,GAAAP,IAAA,CAAdO,cAAc;IACdC,OAAO,GAAAR,IAAA,CAAPQ,OAAO;IACPC,IAAI,GAAAT,IAAA,CAAJS,IAAI;IACJC,OAAO,GAAAV,IAAA,CAAPU,OAAO;IACPC,MAAM,GAAAX,IAAA,CAANW,MAAM;IACNC,QAAQ,GAAAZ,IAAA,CAARY,QAAQ;IACLC,KAAK,GAAAC,wBAAA,CAAAd,IAAA,EAAAe,SAAA;EAER,IAAMC,MAAM,GAAGZ,YAAY,GAAG,UAAU,GAAG,EAAE;EAC7C,IAAMa,WAAW,GAAGL,QAAQ,MAAAM,MAAA,CAAMR,OAAO,SAAM,EAAE;EACjD,IAAI,CAACC,MAAM,IAAIQ,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,IAAIC,OAAO,EAAE;IAChE,IAAMC,GAAG,GAAG,6EAA6E,GACrF,2FAA2F,GAC3F,kFAAkF;IACtF;IACAD,OAAO,CAACE,IAAI,CAACD,GAAG,CAAC;EACnB;EACA,IAAME,aAAa,GAAGd,MAAM,IAAIhB,eAAe;EAC/C,oBACEH,KAAA,CAAAkC,aAAA,WAAAC,QAAA;IACE,cAAYxB,GAAI;IAChBD,SAAS,EAAER,UAAU,CACnB,UAAU,cAAAwB,MAAA,CACEF,MAAM,EAAAE,MAAA,CAAGR,OAAO,eAAAQ,MAAA,CAChBT,IAAI,GAAAmB,eAAA,iBAAAV,MAAA,CAEDF,MAAM,EAAAE,MAAA,CAAGD,WAAW,aAAWL,QAAQ,GAEtDV,SACF,CAAE;IACFM,OAAO,EAAEA,OAAQ;IACjBqB,IAAI,EAAC,QAAQ;IACb5B,GAAG,EAAEA;EAAI,GACLY,KAAK,gBAETrB,KAAA,CAAAkC,aAAA;IAAMxB,SAAS,EAAC;EAA0B,gBACxCV,KAAA,CAAAkC,aAAA,CAACD,aAAa;IACZvB,SAAS,EAAER,UAAU,CAAC,gBAAgB,EAAEa,cAAc,CAAE;IACxDF,IAAI,EAAEA,IAAK;IACXC,GAAG,EAAEA;EAAI,CACV,CACG,CACA,CAAC;AAEb,CAAC,CAAC;AAEFR,UAAU,CAACgC,YAAY,GAAG;EACxBnB,MAAM,EAAEoB,SAAS;EACjBzB,GAAG,EAAE,IAAI;EACTD,IAAI,EAAE0B,SAAS;EACfxB,cAAc,EAAEwB,SAAS;EACzB7B,SAAS,EAAE6B,SAAS;EACpB3B,YAAY,EAAE,KAAK;EACnBM,OAAO,EAAE,SAAS;EAClBD,IAAI,EAAE,IAAI;EACVD,OAAO,EAAE,SAAAA,QAAA,EAAM,CAAC,CAAC;EACjBI,QAAQ,EAAE;AACZ,CAAC;AAEDd,UAAU,CAACkC,SAAS,GAAG;EACrB;EACA9B,SAAS,EAAET,SAAS,CAACwC,MAAM;EAC3B;AACF;EACEtB,MAAM,EAAElB,SAAS,CAACyC,WAAW;EAC7B;AACF;AACA;EACE5B,GAAG,EAAEb,SAAS,CAAC0C,SAAS,CAAC,CAAC1C,SAAS,CAAC2C,OAAO,EAAE3C,SAAS,CAACyC,WAAW,CAAC,CAAC;EACpE;AACF;AACA;EACE/B,GAAG,EAAEV,SAAS,CAACwC,MAAM,CAACI,UAAU;EAChC;EACAjC,YAAY,EAAEX,SAAS,CAAC6C,IAAI;EAC5B;EACAjC,IAAI,EAAEZ,SAAS,CAAC8C,KAAK,CAAC;IACpBC,MAAM,EAAE/C,SAAS,CAACwC,MAAM;IACxBQ,QAAQ,EAAEhD,SAAS,CAACwC,MAAM;IAC1B;IACA5B,IAAI,EAAEZ,SAAS,CAACiD;EAClB,CAAC,CAAC;EACF;EACAnC,cAAc,EAAEd,SAAS,CAACwC,MAAM;EAChC;EACAzB,OAAO,EAAEf,SAAS,CAACkD,IAAI;EACvB;EACAjC,OAAO,EAAEjB,SAAS,CAACmD,KAAK,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;EACrH;EACAnC,IAAI,EAAEhB,SAAS,CAACmD,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;EAC7C;EACAhC,QAAQ,EAAEnB,SAAS,CAAC6C;AACtB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASO,qBAAqBA,CAAAC,KAAA,EAE3B;EAAA,IADDC,gBAAgB,GAAAD,KAAA,CAAhBC,gBAAgB;IAAEC,cAAc,GAAAF,KAAA,CAAdE,cAAc;IAAEtC,OAAO,GAAAoC,KAAA,CAAPpC,OAAO;IAAEN,YAAY,GAAA0C,KAAA,CAAZ1C,YAAY;IAAK6C,KAAK,GAAAnC,wBAAA,CAAAgC,KAAA,EAAAI,UAAA;EAEjE,IAAMlC,MAAM,GAAGZ,YAAY,GAAG,UAAU,GAAG,EAAE;EAC7C,oBACEZ,KAAA,CAAAkC,aAAA,CAAC9B,cAAc;IACbuD,SAAS,EAAEJ,gBAAiB;IAC5BK,OAAO,eACL5D,KAAA,CAAAkC,aAAA,CAAC7B,OAAO;MACNwD,EAAE,wBAAAnC,MAAA,CAAwB6B,gBAAgB,CAAG;MAC7CrC,OAAO,EAAEM,MAAM,GAAG,OAAO,GAAG;IAAG,GAE9BgC,cACM;EACT,gBAEFxD,KAAA,CAAAkC,aAAA,CAAC5B,UAAU,EAAA6B,QAAA;IAACjB,OAAO,EAAEA,OAAQ;IAACN,YAAY,EAAEA;EAAa,GAAK6C,KAAK,CAAG,CACxD,CAAC;AAErB;AAEAJ,qBAAqB,CAACf,YAAY,GAAG;EACnCiB,gBAAgB,EAAE,KAAK;EACvBrC,OAAO,EAAE,SAAS;EAClBN,YAAY,EAAE;AAChB,CAAC;AAEDyC,qBAAqB,CAACb,SAAS,GAAG;EAChC;EACAe,gBAAgB,EAAEtD,SAAS,CAACwC,MAAM;EAClC;EACAe,cAAc,EAAEvD,SAAS,CAAC6D,IAAI,CAACjB,UAAU;EACzC;EACA3B,OAAO,EAAEjB,SAAS,CAACmD,KAAK,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;EACrH;EACAxC,YAAY,EAAEX,SAAS,CAAC6C;AAC1B,CAAC;AAEDxC,UAAU,CAAC+C,qBAAqB,GAAGA,qBAAqB;AAExD,eAAe/C,UAAU;AACzB,SAAS+C,qBAAqB"}

package/dist/SearchField/index.js

@@ -109,8 +109,8 @@ SearchField.propTypes = {
    *
    * ```jsx
    * {
-   *   submit: import {Search} from '@edx/paragon/icons';,
-   *   clear: import {Close} from '@edx/paragon/icons'.
+   *   submit: import {Search} from '@openedx/paragon/icons';,
+   *   clear: import {Close} from '@openedx/paragon/icons'.
    * }
    * ```
    */

package/dist/SearchField/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","Search","Close","SearchFieldAdvanced","SearchFieldContext","SearchFieldLabel","SearchFieldInput","SearchFieldClearButton","SearchFieldSubmitButton","Icon","SEARCH_FIELD_SCREEN_READER_TEXT_LABEL","SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON","SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON","SEARCH_FIELD_BUTTON_TEXT","STYLE_VARIANTS","BUTTON_LOCATION_VARIANTS","SearchField","props","label","placeholder","inputProps","variant","submitButtonLocation","buttonText","others","_objectWithoutProperties","_excluded","Wrapper","wrapperProps","createElement","className","children","Advanced","_extends","Label","Input","ClearButton","SubmitButton","propTypes","onSubmit","func","isRequired","oneOfType","string","element","onBlur","onChange","onClear","onFocus","screenReaderText","shape","submitButton","clearButton","value","icons","submit","clear","formAriaLabel","oneOf","disabled","bool","defaultProps","undefined","src","Context"],"sources":["../../src/SearchField/index.jsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Search, Close } from '../../icons';\nimport SearchFieldAdvanced, { SearchFieldContext } from './SearchFieldAdvanced';\nimport SearchFieldLabel from './SearchFieldLabel';\nimport SearchFieldInput from './SearchFieldInput';\nimport SearchFieldClearButton from './SearchFieldClearButton';\nimport SearchFieldSubmitButton from './SearchFieldSubmitButton';\n\nimport Icon from '../Icon';\n\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_LABEL = 'search';\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON = 'submit search';\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON = 'clear search';\nexport const SEARCH_FIELD_BUTTON_TEXT = 'search';\n\nconst STYLE_VARIANTS = [\n  'light',\n  'dark',\n];\n\nconst BUTTON_LOCATION_VARIANTS = [\n  'internal',\n  'external',\n];\n\nfunction SearchField(props) {\n  const {\n    label,\n    placeholder,\n    inputProps,\n    variant,\n    submitButtonLocation,\n    buttonText,\n    ...others\n  } = props;\n\n  const Wrapper = useCallback(\n    (wrapperProps) => (submitButtonLocation === 'external'\n      ? <div className=\"pgn__searchfield_wrapper\">{wrapperProps.children}</div>\n      : wrapperProps.children),\n    [submitButtonLocation],\n  );\n\n  return (\n    <SearchField.Advanced {...others} submitButtonLocation={submitButtonLocation}>\n      <Wrapper>\n        <SearchField.Label>{label}</SearchField.Label>\n        <SearchField.Input placeholder={placeholder} {...inputProps} />\n        <SearchField.ClearButton />\n      </Wrapper>\n      <SearchField.SubmitButton\n        variant={variant}\n        submitButtonLocation={submitButtonLocation}\n        buttonText={buttonText}\n      />\n    </SearchField.Advanced>\n  );\n}\n\nSearchField.propTypes = {\n  /**\n   * Specifies a callback function for when the `SearchField` is submitted by the user. For example:\n   *\n   *```jsx\n   * <SearchField onSubmit={(value) => { console.log(value); } />\n   * ```\n   */\n  onSubmit: PropTypes.func.isRequired,\n  /** Specifies the label to use for the input field (e.g., for i18n translations). */\n  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  /** Specifies a custom class name. */\n  className: PropTypes.string,\n  /**\n   * Specifies a callback function for when the user loses focus in the\n   * `SearchField` component. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onBlur={event => console.log(event)} />\n   * ```\n   */\n  onBlur: PropTypes.func,\n  /**\n   * Specifies a callback function for when the value in `SearchField`\n   * is changed by the user. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onChange={value => console.log(value)} />\n   * ```\n   */\n  onChange: PropTypes.func,\n  /**\n   * Specifies a callback function for when the value in `SearchField`\n   * is cleared by the user. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onClear={() => console.log('search cleared')} />\n   * ```\n   */\n  onClear: PropTypes.func,\n  /**\n   * Specifies a callback function for when the user focuses in the `SearchField`\n   * component. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onFocus={event => console.log(event)} />\n   * ```\n   */\n  onFocus: PropTypes.func,\n  /** Specifies the placeholder text for the input. */\n  placeholder: PropTypes.string,\n  /**\n   * Specifies the screenreader text for both the clear and submit buttons\n   * (e.g., for i18n translations). The default is `{ label: 'search',\n   * clearButton: 'clear search', searchButton: 'submit search' }`.\n   */\n  screenReaderText: PropTypes.shape({\n    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n    submitButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n    clearButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  }),\n  /** Specifies the initial value for the input. The default is an empty string. */\n  value: PropTypes.string,\n  /**\n   * Specifies the icon element(s) to use for the clear and submit buttons.\n   * The default is:\n   *\n   * ```jsx\n   * {\n   *   submit: import {Search} from '@edx/paragon/icons';,\n   *   clear: import {Close} from '@edx/paragon/icons'.\n   * }\n   * ```\n   */\n  icons: PropTypes.shape({\n    submit: PropTypes.element.isRequired,\n    clear: PropTypes.element,\n  }),\n  /**\n   * Specifies the aria-label attribute on the form element.\n   * This is useful if you use the `SearchField` component more than once on a page.\n   */\n  formAriaLabel: PropTypes.string,\n  /** Props to be passed to the form input */\n  inputProps: PropTypes.shape({}),\n  /** The button style variant to use. */\n  variant: PropTypes.oneOf(STYLE_VARIANTS),\n  /** Specifies whether the `SearchField` is disabled. */\n  disabled: PropTypes.bool,\n  /** Controls whether the search button is internal as an icon or external as a button. */\n  submitButtonLocation: PropTypes.oneOf(BUTTON_LOCATION_VARIANTS),\n  /**\n   * Specifies a text that is displayed on the button.\n   * The `submitButtonLocation` prop should be set to `external`.\n   */\n  buttonText: PropTypes.string,\n};\n\nSearchField.defaultProps = {\n  label: undefined,\n  placeholder: undefined,\n  className: undefined,\n  formAriaLabel: undefined,\n  value: '',\n  screenReaderText: {\n    label: SEARCH_FIELD_SCREEN_READER_TEXT_LABEL,\n    submitButton: SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON,\n    clearButton: SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON,\n  },\n  icons: {\n    clear: <Icon src={Close} />,\n    submit: <Icon src={Search} />,\n  },\n  onBlur: () => {},\n  onChange: () => {},\n  onFocus: () => {},\n  onClear: () => {},\n  inputProps: {},\n  variant: 'light',\n  disabled: false,\n  submitButtonLocation: 'internal',\n  buttonText: SEARCH_FIELD_BUTTON_TEXT,\n};\n\nSearchField.Advanced = SearchFieldAdvanced;\nSearchField.Label = SearchFieldLabel;\nSearchField.Input = SearchFieldInput;\nSearchField.ClearButton = SearchFieldClearButton;\nSearchField.SubmitButton = SearchFieldSubmitButton;\nSearchField.Context = SearchFieldContext;\n\nexport default SearchField;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","Search","Close","SearchFieldAdvanced","SearchFieldContext","SearchFieldLabel","SearchFieldInput","SearchFieldClearButton","SearchFieldSubmitButton","Icon","SEARCH_FIELD_SCREEN_READER_TEXT_LABEL","SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON","SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON","SEARCH_FIELD_BUTTON_TEXT","STYLE_VARIANTS","BUTTON_LOCATION_VARIANTS","SearchField","props","label","placeholder","inputProps","variant","submitButtonLocation","buttonText","others","_objectWithoutProperties","_excluded","Wrapper","wrapperProps","createElement","className","children","Advanced","_extends","Label","Input","ClearButton","SubmitButton","propTypes","onSubmit","func","isRequired","oneOfType","string","element","onBlur","onChange","onClear","onFocus","screenReaderText","shape","submitButton","clearButton","value","icons","submit","clear","formAriaLabel","oneOf","disabled","bool","defaultProps","undefined","src","Context"],"sources":["../../src/SearchField/index.jsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Search, Close } from '../../icons';\nimport SearchFieldAdvanced, { SearchFieldContext } from './SearchFieldAdvanced';\nimport SearchFieldLabel from './SearchFieldLabel';\nimport SearchFieldInput from './SearchFieldInput';\nimport SearchFieldClearButton from './SearchFieldClearButton';\nimport SearchFieldSubmitButton from './SearchFieldSubmitButton';\n\nimport Icon from '../Icon';\n\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_LABEL = 'search';\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON = 'submit search';\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON = 'clear search';\nexport const SEARCH_FIELD_BUTTON_TEXT = 'search';\n\nconst STYLE_VARIANTS = [\n  'light',\n  'dark',\n];\n\nconst BUTTON_LOCATION_VARIANTS = [\n  'internal',\n  'external',\n];\n\nfunction SearchField(props) {\n  const {\n    label,\n    placeholder,\n    inputProps,\n    variant,\n    submitButtonLocation,\n    buttonText,\n    ...others\n  } = props;\n\n  const Wrapper = useCallback(\n    (wrapperProps) => (submitButtonLocation === 'external'\n      ? <div className=\"pgn__searchfield_wrapper\">{wrapperProps.children}</div>\n      : wrapperProps.children),\n    [submitButtonLocation],\n  );\n\n  return (\n    <SearchField.Advanced {...others} submitButtonLocation={submitButtonLocation}>\n      <Wrapper>\n        <SearchField.Label>{label}</SearchField.Label>\n        <SearchField.Input placeholder={placeholder} {...inputProps} />\n        <SearchField.ClearButton />\n      </Wrapper>\n      <SearchField.SubmitButton\n        variant={variant}\n        submitButtonLocation={submitButtonLocation}\n        buttonText={buttonText}\n      />\n    </SearchField.Advanced>\n  );\n}\n\nSearchField.propTypes = {\n  /**\n   * Specifies a callback function for when the `SearchField` is submitted by the user. For example:\n   *\n   *```jsx\n   * <SearchField onSubmit={(value) => { console.log(value); } />\n   * ```\n   */\n  onSubmit: PropTypes.func.isRequired,\n  /** Specifies the label to use for the input field (e.g., for i18n translations). */\n  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  /** Specifies a custom class name. */\n  className: PropTypes.string,\n  /**\n   * Specifies a callback function for when the user loses focus in the\n   * `SearchField` component. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onBlur={event => console.log(event)} />\n   * ```\n   */\n  onBlur: PropTypes.func,\n  /**\n   * Specifies a callback function for when the value in `SearchField`\n   * is changed by the user. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onChange={value => console.log(value)} />\n   * ```\n   */\n  onChange: PropTypes.func,\n  /**\n   * Specifies a callback function for when the value in `SearchField`\n   * is cleared by the user. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onClear={() => console.log('search cleared')} />\n   * ```\n   */\n  onClear: PropTypes.func,\n  /**\n   * Specifies a callback function for when the user focuses in the `SearchField`\n   * component. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onFocus={event => console.log(event)} />\n   * ```\n   */\n  onFocus: PropTypes.func,\n  /** Specifies the placeholder text for the input. */\n  placeholder: PropTypes.string,\n  /**\n   * Specifies the screenreader text for both the clear and submit buttons\n   * (e.g., for i18n translations). The default is `{ label: 'search',\n   * clearButton: 'clear search', searchButton: 'submit search' }`.\n   */\n  screenReaderText: PropTypes.shape({\n    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n    submitButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n    clearButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  }),\n  /** Specifies the initial value for the input. The default is an empty string. */\n  value: PropTypes.string,\n  /**\n   * Specifies the icon element(s) to use for the clear and submit buttons.\n   * The default is:\n   *\n   * ```jsx\n   * {\n   *   submit: import {Search} from '@openedx/paragon/icons';,\n   *   clear: import {Close} from '@openedx/paragon/icons'.\n   * }\n   * ```\n   */\n  icons: PropTypes.shape({\n    submit: PropTypes.element.isRequired,\n    clear: PropTypes.element,\n  }),\n  /**\n   * Specifies the aria-label attribute on the form element.\n   * This is useful if you use the `SearchField` component more than once on a page.\n   */\n  formAriaLabel: PropTypes.string,\n  /** Props to be passed to the form input */\n  inputProps: PropTypes.shape({}),\n  /** The button style variant to use. */\n  variant: PropTypes.oneOf(STYLE_VARIANTS),\n  /** Specifies whether the `SearchField` is disabled. */\n  disabled: PropTypes.bool,\n  /** Controls whether the search button is internal as an icon or external as a button. */\n  submitButtonLocation: PropTypes.oneOf(BUTTON_LOCATION_VARIANTS),\n  /**\n   * Specifies a text that is displayed on the button.\n   * The `submitButtonLocation` prop should be set to `external`.\n   */\n  buttonText: PropTypes.string,\n};\n\nSearchField.defaultProps = {\n  label: undefined,\n  placeholder: undefined,\n  className: undefined,\n  formAriaLabel: undefined,\n  value: '',\n  screenReaderText: {\n    label: SEARCH_FIELD_SCREEN_READER_TEXT_LABEL,\n    submitButton: SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON,\n    clearButton: SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON,\n  },\n  icons: {\n    clear: <Icon src={Close} />,\n    submit: <Icon src={Search} />,\n  },\n  onBlur: () => {},\n  onChange: () => {},\n  onFocus: () => {},\n  onClear: () => {},\n  inputProps: {},\n  variant: 'light',\n  disabled: false,\n  submitButtonLocation: 'internal',\n  buttonText: SEARCH_FIELD_BUTTON_TEXT,\n};\n\nSearchField.Advanced = SearchFieldAdvanced;\nSearchField.Label = SearchFieldLabel;\nSearchField.Input = SearchFieldInput;\nSearchField.ClearButton = SearchFieldClearButton;\nSearchField.SubmitButton = SearchFieldSubmitButton;\nSearchField.Context = SearchFieldContext;\n\nexport default SearchField;\n"],"mappings":"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"}

package/lib/migrate-to-openedx-scope.js

@@ -0,0 +1,62 @@
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+
+const isValidFileExtension = (filename) => /(.jsx|.js|.tsx|.ts|.md|.rst|.scss)$/.test(filename.toLowerCase());
+
+/**
+ * Processes the content of a file by replacing occurrences of '@edx/paragon' with '@openedx/paragon'.
+ *
+ * @param {string} filePath - The path to the file to process.
+ */
+function processFileContent(filePath) {
+  const fileName = path.basename(filePath);
+
+  if (!isValidFileExtension(fileName)) {
+    return;
+  }
+
+  const fileContent = fs.readFileSync(filePath, 'utf-8');
+  const updatedContent = fileContent.replace(/@edx\/paragon/g, '@openedx/paragon');
+
+  if (fileContent !== updatedContent) {
+    fs.writeFileSync(filePath, updatedContent, 'utf-8');
+    console.log(`Updated file: ${filePath}`); // eslint-disable-line no-console
+  }
+}
+
+/**
+ * Performs a migration from "@edx/paragon" to "@openedx/paragon" NPM package name.
+ */
+function migrateToOpenEdxScopeCommand() {
+  const projectPath = process.argv[3] || path.resolve(__dirname, '../../../../');
+  const stack = [projectPath];
+
+  while (stack.length > 0) {
+    const currentDir = stack.pop();
+    const files = fs.readdirSync(currentDir);
+
+    files.forEach(file => {
+      const filePath = path.join(currentDir, file);
+      const fileStats = fs.statSync(filePath);
+
+      if (fileStats.isDirectory()) {
+        if (file === 'node_modules') {
+          return;
+        }
+
+        if (file.startsWith('.') && file !== '.' && file !== '..') {
+          return;
+        }
+
+        stack.push(filePath);
+      } else {
+        processFileContent(filePath);
+      }
+    });
+  }
+
+  console.error(`${chalk.green.bold('Paragon migration to Openedx scope completed successfully.')}`); // eslint-disable-line no-console
+}
+
+module.exports = migrateToOpenEdxScopeCommand;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "21.12.3",
+  "version": "21.13.1",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -46,7 +46,8 @@
     "type-check:watch": "npm run type-check -- --watch",
     "build-types": "tsc --emitDeclarationOnly",
     "playroom:start": "npm run playroom:start --workspace=www",
-    "playroom:build": "npm run playroom:build --workspace=www"
+    "playroom:build": "npm run playroom:build --workspace=www",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
@@ -127,6 +128,7 @@
     "jest": "^28.1.3",
     "jest-cli": "^28.1.2",
     "jest-environment-jsdom": "^28.1.2",
+    "lint-staged": "^15.2.0",
     "markdown-loader-jest": "^0.1.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
@@ -173,13 +175,16 @@
       "/component-generator/"
     ],
     "transformIgnorePatterns": [
-      "/node_modules/(?!(@edx/paragon)/).*/"
+      "/node_modules/(?!(@openedx/paragon)/).*/"
     ]
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "npx eslint"
+    ],
+    "*.scss": [
+      "npx stylelint"
+    ]
   },
   "workspaces": [
     "example",

package/src/Button/index.jsx

@@ -51,10 +51,10 @@ Button.propTypes = {
    * */
   variant: PropTypes.string,
   /** An icon component to render.
-  * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';` */
+  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
   iconBefore: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
   /** An icon component to render.
-  * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';` */
+  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
   iconAfter: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
 };
 

package/src/Chip/index.tsx

@@ -86,7 +86,7 @@ Chip.propTypes = {
    * An icon component to render before the content.
    * Example import of a Paragon icon component:
    *
-   * `import { Check } from '@edx/paragon/icons';`
+   * `import { Check } from '@openedx/paragon/icons';`
    */
   iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
   /** A click handler for the `Chip` icon before. */
@@ -95,7 +95,7 @@ Chip.propTypes = {
    * An icon component to render before after the content.
    * Example import of a Paragon icon component:
    *
-   * `import { Check } from '@edx/paragon/icons';`
+   * `import { Check } from '@openedx/paragon/icons';`
    */
   iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
   /** A click handler for the `Chip` icon after. */

package/src/DataTable/filters/TextFilter.jsx

@@ -1,7 +1,6 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import Form, { FormLabel } from '../../Form';
-import Input from '../../Input';
+import Form from '../../Form';
 import { newId } from '../../utils';
 
 const formatHeaderForLabel = (header) => {
@@ -23,10 +22,9 @@ function TextFilter({
   const formattedHeader = formatHeaderForLabel(Header);
   const inputText = React.isValidElement(formattedHeader) ? formattedHeader : `Search ${formattedHeader}`;
   return (
-    <Form.Group>
-      <FormLabel id={ariaLabel.current} className="sr-only">{inputText}</FormLabel>
-      <Input
-        aria-labelledby={ariaLabel.current}
+    <Form.Group controlId={ariaLabel.current}>
+      <Form.Label className="sr-only">{inputText}</Form.Label>
+      <Form.Control
         value={filterValue || ''}
         type="text"
         onChange={e => {

package/src/Icon/README.md

@@ -11,13 +11,13 @@ devStatus: 'Done'
 notes: |
 ---
 
-Displays an svg icon from `@edx/paragon/icons`. See [Icons Foundation Documentation](/foundations/icons) for a list of all available icons.
+Displays an svg icon from `@openedx/paragon/icons`. See [Icons Foundation Documentation](/foundations/icons) for a list of all available icons.
 
 ## Basic Usage
 
 ```jsx live
 // Included in this live jsx scope:
-// import { Add, AddCircle } from '@edx/paragon/icons';
+// import { Add, AddCircle } from '@openedx/paragon/icons';
 <Icon src={Add} />
 ```
 ### With HTML attributes
@@ -26,7 +26,7 @@ HTML attributes can be passed to this component allowing for customization of th
 
 ```jsx live
 // Included in this live jsx scope:
-// import { Add, AddCircle } from '@edx/paragon/icons';
+// import { Add, AddCircle } from '@openedx/paragon/icons';
 <div className="d-flex align-items-center bg-dark">
   <Icon src={Add} className="mx-3 text-white" />
   <Icon src={Add} className="mx-3 text-white" size="xs" />

package/src/Icon/index.jsx

@@ -72,7 +72,7 @@ function Icon({
 Icon.propTypes = {
   /**
    * An icon component to render.
-   * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';`
+   * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';`
    */
   src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
   /** HTML element attributes to pass through to the underlying svg element */

package/src/IconButton/index.jsx

@@ -78,7 +78,7 @@ IconButton.propTypes = {
    *  but is going to be deprecated soon, please use Paragon's icons instead. */
   iconAs: PropTypes.elementType,
   /** An icon component to render. Example import of a Paragon icon component:
-   * `import { Check } from '@edx/paragon/dist/icon';`
+   * `import { Check } from '@openedx/paragon/dist/icon';`
    * */
   src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
   /** Alt text for your icon. For best practice, avoid using alt text to describe

package/src/SearchField/index.jsx

@@ -128,8 +128,8 @@ SearchField.propTypes = {
    *
    * ```jsx
    * {
-   *   submit: import {Search} from '@edx/paragon/icons';,
-   *   clear: import {Close} from '@edx/paragon/icons'.
+   *   submit: import {Search} from '@openedx/paragon/icons';,
+   *   clear: import {Close} from '@openedx/paragon/icons'.
    * }
    * ```
    */