chore: Update to the new version of paragon in the new scope.

package.json

@@ -35,7 +35,7 @@
     "@edx/frontend-enterprise-logistration": "3.2.0",
     "@edx/frontend-enterprise-utils": "3.2.0",
     "@edx/frontend-platform": "4.0.1",
-    "@edx/paragon": "20.46.3",
+    "@openedx/paragon": "21.5.7",
     "@tanstack/react-query": "4.36.1",
     "@tanstack/react-query-devtools": "4.36.1",
     "algoliasearch": "4.8.3",
@@ -91,7 +91,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.0.0",
-    "@edx/frontend-build": "^12.9.0-alpha.1",
+    "@edx/frontend-build": "^13.0.12",
     "@faker-js/faker": "^7.6.0",
     "@testing-library/dom": "9.3.1",
     "@testing-library/jest-dom": "5.16.5",

src/components/ActionButtonWithModal/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 const ActionButtonWithModal = ({
   buttonClassName,

src/components/Admin/AIAnalyticsSummary.jsx

@@ -3,9 +3,9 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
   Button, Card, Stack, Badge, useToggle,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { AutoFixHigh, Groups } from '@edx/paragon/icons';
+import { AutoFixHigh, Groups } from '@openedx/paragon/icons';
 import useAIAnalyticsSummary from '../AIAnalyticsSummary/data/hooks';
 
 const AnalyticsDetailCard = ({

src/components/Admin/AIAnalyticsSummarySkeleton.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Skeleton, Stack } from '@edx/paragon';
+import { Skeleton, Stack } from '@openedx/paragon';
 
 const AIAnalyticsSummarySkeleton = () => (
   <Stack direction="horizontal" gap={2}>

src/components/Admin/AdminCards.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   Award, Check, Groups, RemoveRedEye,
-} from '@edx/paragon/icons';
+} from '@openedx/paragon/icons';
 
 import NumberCard from '../NumberCard';
 

src/components/Admin/AdminCardsSkeleton.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Skeleton } from '@edx/paragon';
+import { Skeleton } from '@openedx/paragon';
 
 const AdminCardsSkeleton = () => (
   <div

src/components/Admin/AdminSearchForm.jsx

@@ -3,8 +3,8 @@ import React from 'react';
 import dayjs from 'dayjs';
 import PropTypes from 'prop-types';
 
-import { Form } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { Form } from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
 
 import SearchBar from '../SearchBar';
 import { updateUrl } from '../../utils';

src/components/Admin/AdminSearchForm.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { FormControl } from '@edx/paragon';
+import { FormControl } from '@openedx/paragon';
 
 import AdminSearchForm from './AdminSearchForm';
 import SearchBar from '../SearchBar';

src/components/Admin/EmbeddedSubscription.jsx

@@ -1,8 +1,8 @@
 import React, { useContext, useState } from 'react';
 import dayjs from 'dayjs';
 import { useParams, Link } from 'react-router-dom';
-import { Form, Icon } from '@edx/paragon';
-import { Lightbulb, ArrowOutward } from '@edx/paragon/icons';
+import { Form, Icon } from '@openedx/paragon';
+import { Lightbulb, ArrowOutward } from '@openedx/paragon/icons';
 import ConnectedSubscriptionDetailPage from './SubscriptionDetailPage';
 import { SubscriptionContext } from '../subscriptions/SubscriptionData';
 import { sortSubscriptionsByStatus } from '../subscriptions/data/utils';

src/components/Admin/SubscriptionDetails.jsx

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import dayjs from 'dayjs';
 import {
   Row, Col, Toast, Button,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 
 import { Link } from 'react-router-dom';
 import { SubscriptionDetailContext } from '../subscriptions/SubscriptionDetailContextProvider';

src/components/Admin/index.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
-import { Alert, Icon } from '@edx/paragon';
-import { Error, Undo } from '@edx/paragon/icons';
+import { Alert, Icon } from '@openedx/paragon';
+import { Error, Undo } from '@openedx/paragon/icons';
 import { Link } from 'react-router-dom';
 
 import Hero from '../Hero';

src/components/Admin/licenses/LicenseAllocationHeader.jsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Badge } from '@edx/paragon';
+import { Badge } from '@openedx/paragon';
 import { SubscriptionDetailContext } from '../../subscriptions/SubscriptionDetailContextProvider';
 import { SubsidyRequestsContext } from '../../subsidy-requests';
 import NewFeatureAlertBrowseAndRequest from '../../NewFeatureAlertBrowseAndRequest';

src/components/Admin/licenses/LicenseManagementTable/index.jsx

@@ -12,7 +12,7 @@ import {
   TextFilter,
   CheckboxFilter,
   Toast,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 
 import { SubscriptionContext } from '../../../subscriptions/SubscriptionData';
 import { SubscriptionDetailContext } from '../../../subscriptions/SubscriptionDetailContextProvider';

src/components/BulkEnrollmentPage/BulkEnrollButton.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button } from '@edx/paragon';
-import { BookOpen } from '@edx/paragon/icons';
+import { Button } from '@openedx/paragon';
+import { BookOpen } from '@openedx/paragon/icons';
 
 /**
  * Bulk action button, meant to be used in License management page to initiate Bulk Enrollment Dialog

src/components/BulkEnrollmentPage/BulkEnrollmentWarningModal.jsx

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 
 import {
   ActionRow, AlertModal, Button, Icon,
-} from '@edx/paragon';
-import { Error } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { Error } from '@openedx/paragon/icons';
 
 import BulkEnrollButton from './BulkEnrollButton';
 

src/components/BulkEnrollmentPage/CourseSearchResults.jsx

@@ -5,8 +5,8 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import { connectStateResults } from 'react-instantsearch-dom';
-import { Alert, DataTable, Skeleton } from '@edx/paragon';
-import { Error, ErrorOutline } from '@edx/paragon/icons';
+import { Alert, DataTable, Skeleton } from '@openedx/paragon';
+import { Error, ErrorOutline } from '@openedx/paragon/icons';
 import { SearchContext, SearchPagination } from '@edx/frontend-enterprise-catalog-search';
 
 import { CourseNameCell, FormattedDateCell } from './table/CourseSearchResultsCells';

src/components/BulkEnrollmentPage/stepper/BulkEnrollmentStepper.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import {
   Button, ModalDialog, Stepper,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 
 import BulkEnrollmentSubmit from './BulkEnrollmentSubmit';
 import AddCoursesStep from './AddCoursesStep';

src/components/BulkEnrollmentPage/stepper/BulkEnrollmentSubmit.jsx

@@ -11,7 +11,7 @@ import {
   MailtoLink,
   Stack,
   Toast,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import { logError } from '@edx/frontend-platform/logging';
 import {

src/components/BulkEnrollmentPage/stepper/DismissibleCourseWarning.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
-import { Alert } from '@edx/paragon';
-import { WarningFilled } from '@edx/paragon/icons';
+import { Alert } from '@openedx/paragon';
+import { WarningFilled } from '@openedx/paragon/icons';
 import { WARNING_ALERT_TITLE_TEXT, WARNING_ALERT_BODY_TEXT } from './constants';
 
 /**

src/components/BulkEnrollmentPage/stepper/ReviewItem.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Delete } from '@edx/paragon/icons';
+import { Delete } from '@openedx/paragon/icons';
 import {
   Card, IconButton, Icon,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import { deleteSelectedRowAction } from '../data/actions';

src/components/BulkEnrollmentPage/stepper/ReviewItem.test.jsx

@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { mount } from 'enzyme';
 
-import { IconButton } from '@edx/paragon';
+import { IconButton } from '@openedx/paragon';
 import ReviewItem from './ReviewItem';
 import { deleteSelectedRowAction } from '../data/actions';
 

src/components/BulkEnrollmentPage/stepper/ReviewList.jsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import {
   Alert, Button, useToggle, Skeleton,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import ReviewItem from './ReviewItem';
 
 export const MAX_ITEMS_DISPLAYED = 25;

src/components/BulkEnrollmentPage/stepper/ReviewStep.jsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Row } from '@edx/paragon';
+import { Row } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import { BulkEnrollContext } from '../BulkEnrollmentContext';

src/components/BulkEnrollmentPage/table/BaseSelectionStatus.jsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { Button, DataTableContext } from '@edx/paragon';
+import { Button, DataTableContext } from '@openedx/paragon';
 
 // This selection status component uses the BulkEnrollContext to show selection status rather than the data table state.
 const BaseSelectionStatus = ({

src/components/BulkEnrollmentPage/table/BaseSelectionStatus.test.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { screen, render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import { DataTableContext } from '@edx/paragon';
+import { DataTableContext } from '@openedx/paragon';
 import userEvent from '@testing-library/user-event';
 
 import BaseSelectionStatus from './BaseSelectionStatus';

src/components/BulkEnrollmentPage/table/BulkEnrollSelect.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { CheckboxControl } from '@edx/paragon';
+import { CheckboxControl } from '@openedx/paragon';
 
 export const SELECT_ONE_TEST_ID = 'selectOne';
 export const SELECT_ALL_TEST_ID = 'selectAll';

src/components/BulkEnrollmentPage/table/CourseSearchResultsCells.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
 
-import { Popover, Button, OverlayTrigger } from '@edx/paragon';
+import { Popover, Button, OverlayTrigger } from '@openedx/paragon';
 
 import { configuration } from '../../../config';
 

src/components/BulkEnrollmentResultsDownloadPage/index.jsx

@@ -4,7 +4,7 @@ import { Redirect, useParams } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { logError } from '@edx/frontend-platform/logging';
 import { camelCaseObject } from '@edx/frontend-platform';
-import { Toast } from '@edx/paragon';
+import { Toast } from '@openedx/paragon';
 import EnterpriseAppSkeleton from '../EnterpriseApp/EnterpriseAppSkeleton';
 import LicenseManagerApiService from '../../data/services/LicenseManagerAPIService';
 

src/components/CodeAssignmentModal/constants.jsx

@@ -1,4 +1,4 @@
-import { Info } from '@edx/paragon/icons';
+import { Info } from '@openedx/paragon/icons';
 import { MODAL_TYPES } from '../EmailTemplateForm/constants';
 import { getTemplateEmailFields } from '../EmailTemplateForm';
 import CheckboxWithTooltip from '../ReduxFormCheckbox/CheckboxWithTooltip';

src/components/CodeAssignmentModal/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { reduxForm, SubmissionError } from 'redux-form';
 import {
   Button, Modal, Form, Spinner,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import isEmail from 'validator/lib/isEmail';

src/components/CodeManagement/CouponCodeTabs.jsx

@@ -1,7 +1,7 @@
 import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Tabs, Tab } from '@edx/paragon';
+import { Tabs, Tab } from '@openedx/paragon';
 import {
   useHistory,
   Route,

src/components/CodeManagement/ManageCodesTab.jsx

@@ -8,10 +8,10 @@ import {
   Button,
   Icon,
   Pagination,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import {
   CheckCircle, Info, Plus, SpinnerIcon, WarningFilled,
-} from '@edx/paragon/icons';
+} from '@openedx/paragon/icons';
 
 import SearchBar from '../SearchBar';
 import CodeSearchResults from '../CodeSearchResults';

src/components/CodeManagement/ManageRequestsTab.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import dayjs from 'dayjs';
 
-import { Stack } from '@edx/paragon';
+import { Stack } from '@openedx/paragon';
 import { camelCaseObject } from '@edx/frontend-platform';
 
 import SubsidyRequestManagementTable, {

src/components/CodeManagement/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Helmet from 'react-helmet';
-import { Container } from '@edx/paragon';
+import { Container } from '@openedx/paragon';
 
 import Hero from '../Hero';
 import CodeManagementRoutes from './CodeManagementRoutes';

src/components/CodeModal/ModalError.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Icon } from '@edx/paragon';
-import { Warning } from '@edx/paragon/icons';
+import { Alert, Icon } from '@openedx/paragon';
+import { Warning } from '@openedx/paragon/icons';
 
 const ModalError = React.forwardRef(({ title, errors }, ref) => (
   <div

src/components/CodeReminderModal/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { reduxForm, SubmissionError } from 'redux-form';
-import { Button, Modal, Spinner } from '@edx/paragon';
+import { Button, Modal, Spinner } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import SaveTemplateButton from '../../containers/SaveTemplateButton';

src/components/CodeRevokeModal/index.jsx

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { Field, reduxForm, SubmissionError } from 'redux-form';
 import {
   Button, Modal, Spinner,
-} from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
 
 import SaveTemplateButton from '../../containers/SaveTemplateButton';
 

src/components/CodeSearchResults/CodeSearchResultsHeading.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Icon } from '@edx/paragon';
-import { Close } from '@edx/paragon/icons';
+import { Button, Icon } from '@openedx/paragon';
+import { Close } from '@openedx/paragon/icons';
 
 const CodeSearchResultsHeading = ({ searchQuery, onClose }) => (
   <div className="d-flex align-items-center justify-content-between mb-3">

src/components/CodeSearchResults/CodeSearchResultsTable.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
 import { withRouter } from 'react-router-dom';
-import { Icon } from '@edx/paragon';
-import { Check } from '@edx/paragon/icons';
+import { Icon } from '@openedx/paragon';
+import { Check } from '@openedx/paragon/icons';
 
 import { isValidEmail } from '../../utils';
 import TableContainer from '../../containers/TableContainer';

src/components/CodeSearchResults/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, TransitionReplace } from '@edx/paragon';
-import { CheckCircle } from '@edx/paragon/icons';
+import { Alert, TransitionReplace } from '@openedx/paragon';
+import { CheckCircle } from '@openedx/paragon/icons';
 
 import { updateUrl } from '../../utils';
 

src/components/ConfirmationModal/index.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   ModalDialog, ActionRow, Button, StatefulButton, Alert,
-} from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
 
 export const DEFAULT_TITLE = 'Are you sure?';
 export const CONFIRM_BUTTON_STATES = {