[MM-52979]: Remove code around abandoned MUI modal migration (#23556)

webapp/channels/package.json

@@ -16,7 +16,6 @@
     "@mui/base": "5.0.0-alpha.127",
     "@mui/material": "5.11.16",
     "@mui/styled-engine-sc": "5.11.11",
-    "@mui/system": "5.11.16",
     "@stripe/react-stripe-js": "1.13.0",
     "@stripe/stripe-js": "1.41.0",
     "@tippyjs/react": "4.2.6",

webapp/channels/src/components/__snapshots__/generic_modal.test.tsx.snap

@@ -1,245 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/GenericModal should match snapshot for base case 1`] = `
-<Modal
-  animation={true}
-  aria-labelledby="genericModalLabel"
-  autoFocus={true}
-  backdrop={true}
-  bsClass="modal"
-  dialogClassName="a11y__modal GenericModal"
-  dialogComponentClass={[Function]}
-  enforceFocus={true}
-  id="genericModal"
-  keyboard={true}
-  manager={
-    ModalManager {
-      "add": [Function],
-      "containers": Array [],
-      "data": Array [],
-      "handleContainerOverflow": true,
-      "hideSiblingNodes": true,
-      "isTopModal": [Function],
-      "modals": Array [],
-      "remove": [Function],
-    }
-  }
-  onExited={[MockFunction]}
-  onHide={[Function]}
-  onShow={[Function]}
-  renderBackdrop={[Function]}
-  restoreFocus={true}
-  role="dialog"
-  show={true}
->
-  <FocusTrap
-    active={false}
-  >
-    <div
-      className="GenericModal__wrapper-enter-key-press-catcher"
-      onKeyDown={[Function]}
-      tabIndex={0}
-    >
-      <ModalHeader
-        bsClass="modal-header"
-        closeButton={true}
-        closeLabel="Close"
-      />
-      <ModalBody
-        bsClass="modal-body"
-        componentClass="div"
-      >
-        <div
-          className="GenericModal__header"
-        >
-          <h1
-            id="genericModalLabel"
-          >
-            Modal Header Text
-          </h1>
-        </div>
-        <div
-          className="GenericModal__body padding"
-        />
-      </ModalBody>
-    </div>
-  </FocusTrap>
-</Modal>
-`;
-
-exports[`components/GenericModal should match snapshot with both buttons 1`] = `
-<Modal
-  animation={true}
-  aria-labelledby="genericModalLabel"
-  autoFocus={true}
-  backdrop={true}
-  bsClass="modal"
-  dialogClassName="a11y__modal GenericModal"
-  dialogComponentClass={[Function]}
-  enforceFocus={true}
-  id="genericModal"
-  keyboard={true}
-  manager={
-    ModalManager {
-      "add": [Function],
-      "containers": Array [],
-      "data": Array [],
-      "handleContainerOverflow": true,
-      "hideSiblingNodes": true,
-      "isTopModal": [Function],
-      "modals": Array [],
-      "remove": [Function],
-    }
-  }
-  onExited={[MockFunction]}
-  onHide={[Function]}
-  onShow={[Function]}
-  renderBackdrop={[Function]}
-  restoreFocus={true}
-  role="dialog"
-  show={true}
->
-  <FocusTrap
-    active={false}
-  >
-    <div
-      className="GenericModal__wrapper-enter-key-press-catcher"
-      onKeyDown={[Function]}
-      tabIndex={0}
-    >
-      <ModalHeader
-        bsClass="modal-header"
-        closeButton={true}
-        closeLabel="Close"
-      />
-      <ModalBody
-        bsClass="modal-body"
-        componentClass="div"
-      >
-        <div
-          className="GenericModal__header"
-        >
-          <h1
-            id="genericModalLabel"
-          >
-            Modal Header Text
-          </h1>
-        </div>
-        <div
-          className="GenericModal__body padding"
-        />
-      </ModalBody>
-      <ModalFooter
-        bsClass="modal-footer"
-        className=""
-        componentClass="div"
-      >
-        <button
-          className="GenericModal__button cancel"
-          onClick={[Function]}
-          type="button"
-        >
-          <MemoizedFormattedMessage
-            defaultMessage="Cancel"
-            id="generic_modal.cancel"
-          />
-        </button>
-        <button
-          className="GenericModal__button confirm"
-          onClick={[Function]}
-          type="submit"
-        >
-          <MemoizedFormattedMessage
-            defaultMessage="Confirm"
-            id="generic_modal.confirm"
-          />
-        </button>
-      </ModalFooter>
-    </div>
-  </FocusTrap>
-</Modal>
-`;
-
-exports[`components/GenericModal should match snapshot with disabled confirm button 1`] = `
-<Modal
-  animation={true}
-  aria-labelledby="genericModalLabel"
-  autoFocus={true}
-  backdrop={true}
-  bsClass="modal"
-  dialogClassName="a11y__modal GenericModal"
-  dialogComponentClass={[Function]}
-  enforceFocus={true}
-  id="genericModal"
-  keyboard={true}
-  manager={
-    ModalManager {
-      "add": [Function],
-      "containers": Array [],
-      "data": Array [],
-      "handleContainerOverflow": true,
-      "hideSiblingNodes": true,
-      "isTopModal": [Function],
-      "modals": Array [],
-      "remove": [Function],
-    }
-  }
-  onExited={[MockFunction]}
-  onHide={[Function]}
-  onShow={[Function]}
-  renderBackdrop={[Function]}
-  restoreFocus={true}
-  role="dialog"
-  show={true}
->
-  <FocusTrap
-    active={false}
-  >
-    <div
-      className="GenericModal__wrapper-enter-key-press-catcher"
-      onKeyDown={[Function]}
-      tabIndex={0}
-    >
-      <ModalHeader
-        bsClass="modal-header"
-        closeButton={true}
-        closeLabel="Close"
-      />
-      <ModalBody
-        bsClass="modal-body"
-        componentClass="div"
-      >
-        <div
-          className="GenericModal__header"
-        >
-          <h1
-            id="genericModalLabel"
-          >
-            Modal Header Text
-          </h1>
-        </div>
-        <div
-          className="GenericModal__body padding"
-        />
-      </ModalBody>
-      <ModalFooter
-        bsClass="modal-footer"
-        className=""
-        componentClass="div"
-      >
-        <button
-          className="GenericModal__button confirm disabled"
-          disabled={true}
-          onClick={[Function]}
-          type="submit"
-        >
-          <MemoizedFormattedMessage
-            defaultMessage="Confirm"
-            id="generic_modal.confirm"
-          />
-        </button>
-      </ModalFooter>
-    </div>
-  </FocusTrap>
-</Modal>
-`;

webapp/channels/src/components/admin_console/billing/delete_workspace/delete_workspace_modal.tsx

@@ -7,7 +7,7 @@ import {FormattedMessage} from 'react-intl';
 
 import {useDispatch, useSelector} from 'react-redux';
 
-import {LegacyGenericModal} from '@mattermost/components';
+import {GenericModal} from '@mattermost/components';
 
 import LaptopAlertSVG from 'components/common/svg_images_components/laptop_alert_svg';
 import {closeModal, openModal} from 'actions/views/modals';
@@ -180,7 +180,7 @@ export default function DeleteWorkspaceModal(props: Props) {
     }
 
     return (
-        <LegacyGenericModal
+        <GenericModal
             className='DeleteWorkspaceModal'
             onExited={handleClickCancel}
         >
@@ -249,6 +249,6 @@ export default function DeleteWorkspaceModal(props: Props) {
                     />
                 </button>
             </div>
-        </LegacyGenericModal>
+        </GenericModal>
     );
 }

webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_right_panel.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import * as React from 'react';
+import React, {memo} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import {ClientLicense} from '@mattermost/types/config';
@@ -160,4 +160,4 @@ const EnterpriseEditionRightPanel = ({
     );
 };
 
-export default React.memo(EnterpriseEditionRightPanel);
+export default memo(EnterpriseEditionRightPanel);

webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.tsx

@@ -11,7 +11,7 @@ import {GlobalState} from 'types/store';
 
 import {isModalOpen} from 'selectors/views/modals';
 
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 import AlertSvg from 'components/common/svg_images_components/alert_svg';
 
 import {ModalIdentifiers} from 'utils/constants';

webapp/channels/src/components/admin_console/license_settings/modals/ee_license_modal.tsx

@@ -10,7 +10,7 @@ import {GlobalState} from 'types/store';
 
 import {isModalOpen} from 'selectors/views/modals';
 
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 
 import {ModalIdentifiers} from 'utils/constants';
 

webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx

@@ -19,7 +19,7 @@ import {GlobalState} from 'types/store';
 
 import {isModalOpen} from 'selectors/views/modals';
 
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 import WomanArmOnTable from 'components/common/svg_images_components/woman_arm_on_table_svg';
 import HandsSvg from 'components/common/svg_images_components/hands_svg';
 import FileSvg from 'components/common/svg_images_components/file_svg';

webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_right_panel.tsx

@@ -1,14 +1,14 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import * as React from 'react';
+import React, {memo} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import WomanUpArrowsAndCloudsSvg from 'components/common/svg_images_components/woman_up_arrows_and_clouds_svg';
 import PurchaseLink from 'components/announcement_bar/purchase_link/purchase_link';
 import ContactUsButton from 'components/announcement_bar/contact_sales/contact_us';
 
-const StarterRightPanel: React.FC = () => {
+const StarterRightPanel = () => {
     const upgradeAdvantages = [
         'OneLogin/ADFS SAML 2.0',
         'OpenID Connect',
@@ -61,4 +61,4 @@ const StarterRightPanel: React.FC = () => {
     );
 };
 
-export default React.memo(StarterRightPanel);
+export default memo(StarterRightPanel);

webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import * as React from 'react';
+import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import LoadingWrapper from 'components/widgets/loading/loading_wrapper';

webapp/channels/src/components/air_gapped_self_hosted_purchase_modal/index.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {LegacyGenericModal} from '@mattermost/components';
+import {GenericModal} from '@mattermost/components';
 import {CloudLinks} from 'utils/constants';
 import CreditCardSvg from 'components/common/svg_images_components/credit_card_svg';
 import {useControlAirGappedSelfHostedPurchaseModal} from 'components/common/hooks/useControlModal';
@@ -15,7 +15,7 @@ export default function AirGappedSelfHostedPurhcaseModal() {
     const {close} = useControlAirGappedSelfHostedPurchaseModal();
 
     return (
-        <LegacyGenericModal
+        <GenericModal
             onExited={close}
             show={true}
             className='air-gapped-purchase-modal'
@@ -39,6 +39,6 @@ export default function AirGappedSelfHostedPurhcaseModal() {
                 </span>
                 <a href={CloudLinks.SELF_HOSTED_PRICING}>{CloudLinks.SELF_HOSTED_PRICING}</a>
             </div>
-        </LegacyGenericModal>
+        </GenericModal>
     );
 }

webapp/channels/src/components/announcement_bar/no_internet_connection/no_internet_connection.tsx

@@ -6,7 +6,7 @@ import {FormattedMessage} from 'react-intl';
 
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 
 import './no_internet_connection.scss';
 import NoInternetConnectionSvg from './no-internet-connection-svg';

webapp/channels/src/components/at_sum_members_mention/notification_from_members_modal.tsx

@@ -25,7 +25,7 @@ import {mapFeatureIdToTranslation} from 'utils/notify_admin_utils';
 import {ModalIdentifiers} from 'utils/constants';
 
 import {ListItemType} from 'components/channel_members_rhs/channel_members_rhs';
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 
 import MemberList from '../channel_members_rhs/member_list';
 import {ChannelMembership} from '@mattermost/types/channels';

webapp/channels/src/components/cloud_start_trial/request_business_email_modal.test.tsx

@@ -10,7 +10,7 @@ import {shallow} from 'enzyme';
 
 import * as cloudActions from 'actions/cloud';
 
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 
 import {mountWithIntl} from 'tests/helpers/intl-test-helper';
 import mockStore from 'tests/test_store';

webapp/channels/src/components/cloud_start_trial/request_business_email_modal.tsx

@@ -16,7 +16,7 @@ import {validateBusinessEmail} from 'actions/cloud';
 
 import {ItemStatus, TELEMETRY_CATEGORIES, ModalIdentifiers, LicenseLinks, AboutLinks} from 'utils/constants';
 
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 import {CustomMessageInputType} from 'components/widgets/inputs/input/input';
 import ExternalLink from 'components/external_link';
 

webapp/channels/src/components/cloud_usage_modal/index.tsx

@@ -10,7 +10,7 @@ import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {Message} from 'utils/i18n';
 
 import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 import useGetLimits from 'components/common/hooks/useGetLimits';
 import useGetUsage from 'components/common/hooks/useGetUsage';
 

webapp/channels/src/components/cloud_usage_modal/mini_modal.tsx

@@ -10,7 +10,7 @@ import {Limits, CloudUsage} from '@mattermost/types/cloud';
 import {Message} from 'utils/i18n';
 
 import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 
 import WorkspaceLimitsPanel, {messageToElement} from './workspace_limits_panel';
 

webapp/channels/src/components/common/svg_images_components/access_problem_svg.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import * as React from 'react';
+import React from 'react';
 
 const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
     <svg

webapp/channels/src/components/common/svg_images_components/bulls_eye_svg.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import * as React from 'react';
+import React from 'react';
 
 type SvgProps = {
     width?: number;

webapp/channels/src/components/common/svg_images_components/clipboard_svg.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import * as React from 'react';
+import React from 'react';
 
 type SvgProps = {
     width?: number;

webapp/channels/src/components/common/svg_images_components/gears_svg.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import * as React from 'react';
+import React from 'react';
 
 type SvgProps = {
     width?: number;

webapp/channels/src/components/common/svg_images_components/handshake_svg.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import * as React from 'react';
+import React from 'react';
 
 type SvgProps = {
     width?: number;

webapp/channels/src/components/common/svg_images_components/phone_svg.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import * as React from 'react';
+import React from 'react';
 
 type SvgProps = {
     width?: number;

webapp/channels/src/components/common/svg_images_components/security_svg.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import * as React from 'react';
+import React from 'react';
 
 type SvgProps = {
     width?: number;

webapp/channels/src/components/common/svg_images_components/sunglasses_svg.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import * as React from 'react';
+import React from 'react';
 
 type SvgProps = {
     width?: number;

webapp/channels/src/components/common/svg_images_components/wrench_svg.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import * as React from 'react';
+import React from 'react';
 
 type SvgProps = {
     width?: number;

webapp/channels/src/components/custom_status/custom_status_modal.tsx

@@ -15,7 +15,7 @@ import {getCurrentTimezone} from 'mattermost-redux/selectors/entities/timezone';
 
 import {loadCustomEmojisIfNeeded} from 'actions/emoji_actions';
 import {closeModal} from 'actions/views/modals';
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 import EmojiIcon from 'components/widgets/icons/emoji_icon';
 import EmojiPickerOverlay from 'components/emoji_picker/emoji_picker_overlay';
 import RenderEmoji from 'components/emoji/render_emoji';

webapp/channels/src/components/delete_category_modal/delete_category_modal.tsx

@@ -6,10 +6,12 @@ import {FormattedMessage} from 'react-intl';
 
 import {ChannelCategory} from '@mattermost/types/channel_categories';
 
+import {GenericModal} from '@mattermost/components';
+
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
-import GenericModal from 'components/generic_modal';
 
 import {localizeMessage} from 'utils/utils';
+import {t} from 'utils/i18n';
 
 import '../category_modal.scss';
 
@@ -72,3 +74,11 @@ export default class DeleteCategoryModal extends React.PureComponent<Props, Stat
         );
     }
 }
+
+// TODO MM-52680 These strings are properly defined in @mattermost/components, but the i18n tooling currently can't
+// find them there, so we've had to redefine them here
+t('generic_modal.cancel');
+t('generic_modal.confirm');
+t('footer_pagination.count');
+t('footer_pagination.prev');
+t('footer_pagination.next');

webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.tsx

@@ -14,7 +14,7 @@ import {DateTime} from 'luxon';
 import {ActionFunc} from 'mattermost-redux/types/actions';
 import {UserStatus} from '@mattermost/types/users';
 
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
 
 import Constants, {A11yCustomEventTypes, A11yFocusEventDetail, UserStatuses} from 'utils/constants';

webapp/channels/src/components/drafts/draft_actions/__snapshots__/delete_draft_modal.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/drafts/draft_actions/delete_draft_modal should have called onConfirm 1`] = `
-<LegacyGenericModal
+<GenericModal
   autoCloseOnCancelButton={true}
   autoCloseOnConfirmButton={true}
   bodyPadding={true}
@@ -39,11 +39,11 @@ exports[`components/drafts/draft_actions/delete_draft_modal should have called o
       }
     }
   />
-</LegacyGenericModal>
+</GenericModal>
 `;
 
 exports[`components/drafts/draft_actions/delete_draft_modal should have called onExited 1`] = `
-<LegacyGenericModal
+<GenericModal
   autoCloseOnCancelButton={true}
   autoCloseOnConfirmButton={true}
   bodyPadding={true}
@@ -81,7 +81,7 @@ exports[`components/drafts/draft_actions/delete_draft_modal should have called o
       }
     }
   />
-</LegacyGenericModal>
+</GenericModal>
 `;
 
 exports[`components/drafts/draft_actions/delete_draft_modal should match snapshot 1`] = `

webapp/channels/src/components/drafts/draft_actions/__snapshots__/send_draft_modal.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/drafts/draft_actions/send_draft_modal should have called onConfirm 1`] = `
-<LegacyGenericModal
+<GenericModal
   autoCloseOnCancelButton={true}
   autoCloseOnConfirmButton={true}
   bodyPadding={true}
@@ -38,11 +38,11 @@ exports[`components/drafts/draft_actions/send_draft_modal should have called onC
       }
     }
   />
-</LegacyGenericModal>
+</GenericModal>
 `;
 
 exports[`components/drafts/draft_actions/send_draft_modal should have called onExited 1`] = `
-<LegacyGenericModal
+<GenericModal
   autoCloseOnCancelButton={true}
   autoCloseOnConfirmButton={true}
   bodyPadding={true}
@@ -79,7 +79,7 @@ exports[`components/drafts/draft_actions/send_draft_modal should have called onE
       }
     }
   />
-</LegacyGenericModal>
+</GenericModal>
 `;
 
 exports[`components/drafts/draft_actions/send_draft_modal should match snapshot 1`] = `

webapp/channels/src/components/drafts/draft_actions/delete_draft_modal.test.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import {shallow} from 'enzyme';
 import {Provider} from 'react-redux';
 
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 
 import mockStore from 'tests/test_store';
 

webapp/channels/src/components/drafts/draft_actions/delete_draft_modal.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 
 type Props = {
     displayName: string;

webapp/channels/src/components/drafts/draft_actions/send_draft_modal.test.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import {shallow} from 'enzyme';
 import {Provider} from 'react-redux';
 
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 
 import mockStore from 'tests/test_store';
 

webapp/channels/src/components/drafts/draft_actions/send_draft_modal.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 
 type Props = {
     displayName: string;

webapp/channels/src/components/edit_category_modal/edit_category_modal.tsx

@@ -9,7 +9,7 @@ import {ChannelCategory} from '@mattermost/types/channel_categories';
 import {trackEvent} from 'actions/telemetry_actions';
 
 import QuickInput, {MaxLengthInput} from 'components/quick_input';
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 
 import {localizeMessage} from 'utils/utils';
 

webapp/channels/src/components/feature_restricted_modal/feature_restricted_modal.tsx

@@ -17,7 +17,7 @@ import {deprecateCloudFree} from 'mattermost-redux/selectors/entities/preference
 
 import CloudStartTrialButton from 'components/cloud_start_trial/cloud_start_trial_btn';
 import StartTrialBtn from 'components/learn_more_trial_modal/start_trial_btn';
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 import {NotifyStatus} from 'components/common/hooks/useGetNotifyAdmin';
 import {useNotifyAdmin} from 'components/notify_admin_cta/notify_admin_cta';
 

webapp/channels/src/components/feedback_modal/feedback.tsx

@@ -6,7 +6,7 @@ import React, {useState} from 'react';
 import {injectIntl, WrappedComponentProps} from 'react-intl';
 import {useDispatch} from 'react-redux';
 
-import {LegacyGenericModal} from '@mattermost/components';
+import {GenericModal} from '@mattermost/components';
 import {Feedback} from '@mattermost/types/cloud';
 import {closeModal} from 'actions/views/modals';
 import RadioButtonGroup from 'components/common/radio_group';
@@ -59,7 +59,7 @@ function FeedbackModal(props: Props) {
     };
 
     return (
-        <LegacyGenericModal
+        <GenericModal
             compassDesign={true}
             onExited={handleCancel}
             className='FeedbackModal__Container'
@@ -102,7 +102,7 @@ function FeedbackModal(props: Props) {
                     </span>
                 </>
             }
-        </LegacyGenericModal>
+        </GenericModal>
     );
 }
 

webapp/channels/src/components/forward_post_modal/forward_post_modal.tsx

@@ -26,7 +26,7 @@ import {General, Permissions} from 'mattermost-redux/constants';
 import Constants from 'utils/constants';
 
 import PostMessagePreview from 'components/post_view/post_message_preview';
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 
 import {PostPreviewMetadata} from '@mattermost/types/posts';
 import {getSiteURL} from '../../utils/url';

webapp/channels/src/components/generic_modal.test.tsx

@@ -1,89 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {shallow} from 'enzyme';
-
-import GenericModal from 'components/generic_modal';
-import {mountWithIntl} from 'tests/helpers/intl-test-helper';
-
-describe('components/GenericModal', () => {
-    const requiredProps = {
-        onExited: jest.fn(),
-        modalHeaderText: 'Modal Header Text',
-        children: <></>,
-    };
-
-    test('should match snapshot for base case', () => {
-        const wrapper = shallow(
-            <GenericModal {...requiredProps}/>,
-        );
-
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should match snapshot with both buttons', () => {
-        const props = {
-            ...requiredProps,
-            handleConfirm: jest.fn(),
-            handleCancel: jest.fn(),
-        };
-
-        const wrapper = shallow(
-            <GenericModal {...props}/>,
-        );
-
-        expect(wrapper).toMatchSnapshot();
-        expect(wrapper.find('.GenericModal__button.confirm')).toHaveLength(1);
-        expect(wrapper.find('.GenericModal__button.cancel')).toHaveLength(1);
-    });
-
-    test('should match snapshot with disabled confirm button', () => {
-        const props = {
-            ...requiredProps,
-            handleConfirm: jest.fn(),
-            isConfirmDisabled: true,
-        };
-
-        const wrapper = shallow(
-            <GenericModal {...props}/>,
-        );
-
-        expect(wrapper).toMatchSnapshot();
-        expect(wrapper.find('.GenericModal__button.confirm.disabled')).toHaveLength(1);
-    });
-
-    test('should hide and run handleConfirm on confirm button click', (done) => {
-        requiredProps.onExited.mockImplementation(() => done());
-
-        const props = {
-            ...requiredProps,
-            handleConfirm: jest.fn(),
-        };
-
-        const wrapper = mountWithIntl(
-            <GenericModal {...props}/>,
-        );
-
-        wrapper.find('.GenericModal__button.confirm').simulate('click');
-
-        expect(props.handleConfirm).toHaveBeenCalled();
-    });
-
-    test('should hide and run handleCancel on cancel button click', (done) => {
-        requiredProps.onExited.mockImplementation(() => done());
-
-        const props = {
-            ...requiredProps,
-            handleCancel: jest.fn(),
-        };
-
-        const wrapper = mountWithIntl(
-            <GenericModal {...props}/>,
-        );
-
-        wrapper.find('.GenericModal__button.cancel').simulate('click');
-
-        expect(props.handleCancel).toHaveBeenCalled();
-    });
-});

webapp/channels/src/components/generic_modal.tsx

@@ -1,18 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {LegacyGenericModal} from '@mattermost/components';
-
-import {t} from 'utils/i18n';
-
-import './generic_modal.scss';
-
-// TODO MM-51399 These strings are properly defined in @mattermost/components, but the i18n tooling currently can't
-// find them there, so we've had to redefine them here
-t('generic_modal.cancel');
-t('generic_modal.confirm');
-t('footer_pagination.count');
-t('footer_pagination.prev');
-t('footer_pagination.next');
-
-export default LegacyGenericModal;

webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.test.tsx

@@ -9,7 +9,7 @@ import {shallow} from 'enzyme';
 
 import Carousel from 'components/common/carousel/carousel';
 import LearnMoreTrialModal from 'components/learn_more_trial_modal/learn_more_trial_modal';
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 
 import {mountWithIntl} from 'tests/helpers/intl-test-helper';
 import mockStore from 'tests/test_store';

webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.tsx

@@ -10,7 +10,7 @@ import {trackEvent} from 'actions/telemetry_actions';
 import {ConsolePages, ModalIdentifiers, TELEMETRY_CATEGORIES} from 'utils/constants';
 
 import Carousel from 'components/common/carousel/carousel';
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 import GuestAccessSvg from 'components/common/svg_images_components/guest_access_svg';
 import MonitorImacLikeSVG from 'components/common/svg_images_components/monitor_imaclike_svg';
 import SystemRolesSVG from 'components/admin_console/feature_discovery/features/images/system_roles_svg';

webapp/channels/src/components/menu/menu.tsx

@@ -25,7 +25,7 @@ import {isKeyPressed} from 'utils/keyboard';
 import CompassDesignProvider from 'components/compass_design_provider';
 import Tooltip from 'components/tooltip';
 import OverlayTrigger from 'components/overlay_trigger';
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 
 import {MuiMenuStyled} from './menu_styled';
 

webapp/channels/src/components/menu/sub_menu.tsx

@@ -17,7 +17,7 @@ import Constants, {A11yClassNames} from 'utils/constants';
 import {isKeyPressed} from 'utils/keyboard';
 
 import CompassDesignProvider from 'components/compass_design_provider';
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 
 import {MuiMenuStyled} from './menu_styled';
 import {MenuItem as ParentMenuItem, Props as MenuItemProps} from './menu_item';

webapp/channels/src/components/new_channel_modal/new_channel_modal.tsx

@@ -10,7 +10,7 @@ import classNames from 'classnames';
 import crypto from 'crypto';
 
 import OverlayTrigger from 'components/overlay_trigger';
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 import Input from 'components/widgets/inputs/input/input';
 import PublicPrivateSelector from 'components/widgets/public-private-selector/public-private-selector';
 import URLInput from 'components/widgets/inputs/url_input/url_input';

webapp/channels/src/components/persist_notification_confirm_modal.tsx

@@ -11,7 +11,7 @@ import {GlobalState} from 'types/store';
 import {makeGetUserOrGroupMentionCountFromMessage} from 'utils/post_utils';
 import Constants from 'utils/constants';
 
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 import {UserProfile} from '@mattermost/types/users';
 import {Channel} from '@mattermost/types/channels';
 

webapp/channels/src/components/plugin_marketplace/marketplace_modal.tsx

@@ -10,7 +10,7 @@ import debounce from 'lodash/debounce';
 
 import {MagnifyIcon} from '@mattermost/compass-icons/components';
 
-import {FooterPagination} from '@mattermost/components';
+import {FooterPagination, GenericModal} from '@mattermost/components';
 import {getPluginStatuses} from 'mattermost-redux/actions/admin';
 import {setFirstAdminVisitMarketplaceStatus} from 'mattermost-redux/actions/general';
 import {getFirstAdminVisitMarketplaceStatus} from 'mattermost-redux/selectors/entities/general';
@@ -20,7 +20,6 @@ import {fetchListing, filterListing} from 'actions/marketplace';
 import {trackEvent} from 'actions/telemetry_actions.jsx';
 import {closeModal} from 'actions/views/modals';
 
-import GenericModal from 'components/generic_modal';
 import LoadingScreen from 'components/loading_screen';
 import Input, {SIZE} from 'components/widgets/inputs/input/input';
 

webapp/channels/src/components/post_edit_history/restore_post_modal.tsx

@@ -6,7 +6,7 @@ import {defineMessages, useIntl} from 'react-intl';
 
 import {Post} from '@mattermost/types/posts';
 
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 import PostMessageView from 'components/post_view/post_message_view';
 
 const modalMessages = defineMessages({

webapp/channels/src/components/post_reminder_custom_time_picker_modal/post_reminder_custom_time_picker_modal.tsx

@@ -5,7 +5,7 @@ import React, {useCallback, useEffect, useState} from 'react';
 import {FormattedMessage} from 'react-intl';
 import {Moment} from 'moment-timezone';
 
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 import {isKeyPressed} from 'utils/keyboard';
 import {localizeMessage} from 'utils/utils';
 import DateTimeInput, {getRoundedTime} from 'components/custom_status/date_time_input';

webapp/channels/src/components/post_view/reaction/reaction_tooltip/reaction_tooltip.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import * as React from 'react';
+import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import {Reaction as ReactionType} from '@mattermost/types/reactions';

webapp/channels/src/components/product_notices_modal/__snapshots__/product_notices.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ProductNoticesModal Match snapshot for single notice 1`] = `
-<LegacyGenericModal
+<GenericModal
   autoCloseOnCancelButton={false}
   autoCloseOnConfirmButton={true}
   bodyPadding={true}
@@ -38,11 +38,11 @@ exports[`ProductNoticesModal Match snapshot for single notice 1`] = `
   <div
     className="productNotices__info"
   />
-</LegacyGenericModal>
+</GenericModal>
 `;
 
 exports[`ProductNoticesModal Match snapshot for user notice 1`] = `
-<LegacyGenericModal
+<GenericModal
   autoCloseOnCancelButton={false}
   autoCloseOnConfirmButton={true}
   bodyPadding={true}
@@ -117,11 +117,11 @@ exports[`ProductNoticesModal Match snapshot for user notice 1`] = `
       />
     </span>
   </div>
-</LegacyGenericModal>
+</GenericModal>
 `;
 
 exports[`ProductNoticesModal Should match snapshot for system admin notice 1`] = `
-<LegacyGenericModal
+<GenericModal
   autoCloseOnCancelButton={false}
   autoCloseOnConfirmButton={false}
   bodyPadding={true}
@@ -200,7 +200,7 @@ exports[`ProductNoticesModal Should match snapshot for system admin notice 1`] =
       id="inProduct_notices.adminOnlyMessage"
     />
   </div>
-</LegacyGenericModal>
+</GenericModal>
 `;
 
 exports[`ProductNoticesModal Should match snapshot when there are no notices 1`] = `""`;

webapp/channels/src/components/product_notices_modal/product_notices.test.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 import {isDesktopApp, getDesktopVersion} from 'utils/user_agent';
 
 import ProductNoticesModal from './product_notices_modal';

webapp/channels/src/components/product_notices_modal/product_notices_modal.tsx

@@ -10,7 +10,7 @@ import {trackEvent} from 'actions/telemetry_actions.jsx';
 
 import ExternalLink from 'components/external_link';
 import Markdown from 'components/markdown';
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 import NextIcon from 'components/widgets/icons/fa_next_icon';
 import PreviousIcon from 'components/widgets/icons/fa_previous_icon';
 import AdminEyeIcon from 'components/widgets/icons/admin_eye_icon';

webapp/channels/src/components/purchase_in_progress_modal/index.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import {useSelector} from 'react-redux';
 import {FormattedMessage} from 'react-intl';
 
-import {LegacyGenericModal, LegacyGenericModalProps} from '@mattermost/components';
+import {GenericModal, GenericModalProps} from '@mattermost/components';
 
 import {getCurrentUser} from 'mattermost-redux/selectors/entities/common';
 import {getUserByEmail} from 'mattermost-redux/selectors/entities/users';
@@ -48,7 +48,7 @@ export default function PurchaseInProgressModal(props: Props) {
         />
     );
     let actionToTake;
-    const genericModalProps: Partial<LegacyGenericModalProps> = {};
+    const genericModalProps: Partial<GenericModalProps> = {};
     if (sameUserAlreadyPurchasing) {
         description = (
             <FormattedMessage
@@ -76,7 +76,7 @@ export default function PurchaseInProgressModal(props: Props) {
         );
     }
     return (
-        <LegacyGenericModal
+        <GenericModal
             onExited={close}
             show={true}
             modalHeaderText={header}
@@ -98,6 +98,6 @@ export default function PurchaseInProgressModal(props: Props) {
                     </div>
                 }
             </div>
-        </LegacyGenericModal>
+        </GenericModal>
     );
 }

webapp/channels/src/components/root/root_provider.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import * as React from 'react';
+import React from 'react';
 
 import WebSocketClient from 'client/web_websocket_client';
 

webapp/channels/src/components/screening_in_progress_modal/index.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {LegacyGenericModal} from '@mattermost/components';
+import {GenericModal} from '@mattermost/components';
 import AccessDeniedHappySvg from 'components/common/svg_images_components/access_denied_happy_svg';
 import {useControlScreeningInProgressModal} from 'components/common/hooks/useControlModal';
 
@@ -14,7 +14,7 @@ export default function ScreeningInProgressModal() {
     const {close} = useControlScreeningInProgressModal();
 
     return (
-        <LegacyGenericModal
+        <GenericModal
             onExited={close}
             show={true}
             className='ScreeningInProgressModal'
@@ -49,6 +49,6 @@ export default function ScreeningInProgressModal() {
                     />
                 </div>
             </div>
-        </LegacyGenericModal>
+        </GenericModal>
     );
 }

webapp/channels/src/components/switch_to_yearly_plan_confirm_modal/index.tsx

@@ -11,7 +11,7 @@ import {GlobalState} from 'types/store';
 
 import {isModalOpen} from 'selectors/views/modals';
 
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 import Svg from 'components/common/svg_images_components/woman_credit_card_and_laptop_svg';
 
 import {ModalIdentifiers, TELEMETRY_CATEGORIES} from 'utils/constants';

webapp/channels/src/components/threading/global_threads/mark_all_threads_as_read_modal/mark_all_threads_as_read_modal.tsx

@@ -1,10 +1,10 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import * as React from 'react';
+import React from 'react';
 import {useIntl} from 'react-intl';
 
-import {LegacyGenericModal} from '@mattermost/components';
+import {GenericModal} from '@mattermost/components';
 
 import './mark_all_threads_as_read_modal.scss';
 
@@ -20,7 +20,7 @@ function MarkAllThreadsAsReadModal({
     const {formatMessage} = useIntl();
 
     return (
-        <LegacyGenericModal
+        <GenericModal
             className='mark-all-threads-as-read'
             id='mark-all-threads-as-read-modal'
             compassDesign={true}
@@ -48,7 +48,7 @@ function MarkAllThreadsAsReadModal({
                     })}
                 </span>
             </div>
-        </LegacyGenericModal>
+        </GenericModal>
     );
 }
 

webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.test.tsx

@@ -8,7 +8,7 @@ import {Provider} from 'react-redux';
 import {shallow} from 'enzyme';
 
 import ThreeDaysLeftTrialModal from 'components/three_days_left_trial_modal/three_days_left_trial_modal';
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 
 import {mountWithIntl} from 'tests/helpers/intl-test-helper';
 import mockStore from 'tests/test_store';

webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.tsx

@@ -14,7 +14,7 @@ import {DispatchFunc} from 'mattermost-redux/types/actions';
 
 import {ConsolePages, DocLinks, ModalIdentifiers} from 'utils/constants';
 
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 import GuestAccessSvg from 'components/common/svg_images_components/guest_access_svg';
 import MonitorImacLikeSVG from 'components/common/svg_images_components/monitor_imaclike_svg';
 import SystemRolesSVG from 'components/admin_console/feature_discovery/features/images/system_roles_svg';

webapp/channels/src/components/tours/crt_tour/collapsed_reply_threads_modal/collapsed_reply_threads_modal.tsx

@@ -9,7 +9,7 @@ import crtInProductImg from 'images/crt-in-product.gif';
 import {savePreferences} from 'mattermost-redux/actions/preferences';
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 import {closeModal} from 'actions/views/modals';
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 import NextIcon from 'components/widgets/icons/fa_next_icon';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import {Constants, ModalIdentifiers, Preferences} from 'utils/constants';

webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal.test.tsx

@@ -11,7 +11,7 @@ import {trackEvent} from 'actions/telemetry_actions.jsx';
 
 import Carousel from 'components/common/carousel/carousel';
 import TrialBenefitsModal from 'components/trial_benefits_modal/trial_benefits_modal';
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 
 import {mountWithIntl} from 'tests/helpers/intl-test-helper';
 import mockStore from 'tests/test_store';

webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal.tsx

@@ -19,7 +19,7 @@ import {isModalOpen} from 'selectors/views/modals';
 import {GlobalState} from 'types/store';
 
 import Carousel from 'components/common/carousel/carousel';
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 import HandsSvg from 'components/common/svg_images_components/hands_svg';
 import GuestAccessSvg from 'components/common/svg_images_components/guest_access_svg';
 import MonitorImacLikeSVG from 'components/common/svg_images_components/monitor_imaclike_svg';

webapp/channels/src/components/work_templates/components/modal.tsx

@@ -3,7 +3,7 @@
 
 import styled from 'styled-components';
 
-import GenericModal from 'components/generic_modal';
+import {GenericModal} from '@mattermost/components';
 
 const Modal = styled(GenericModal)`
     width: 960px;

webapp/package-lock.json

@@ -3390,7 +3390,6 @@
         "@mui/base": "5.0.0-alpha.127",
         "@mui/material": "5.11.16",
         "@mui/styled-engine-sc": "5.11.11",
-        "@mui/system": "5.11.16",
         "@stripe/react-stripe-js": "1.13.0",
         "@stripe/stripe-js": "1.41.0",
         "@tippyjs/react": "4.2.6",
@@ -33254,9 +33253,6 @@
     "platform/components": {
       "name": "@mattermost/components",
       "version": "8.0.0",
-      "dependencies": {
-        "color-blend": "4.0.0"
-      },
       "devDependencies": {
         "@babel/cli": "^7.17.6",
         "@babel/core": "^7.17.7",
@@ -33296,7 +33292,6 @@
         "@mui/base": "5.0.0-alpha.127",
         "@mui/material": "5.11.16",
         "@mui/styled-engine-sc": "5.11.11",
-        "@mui/system": "5.11.16",
         "@tippyjs/react": "^4.2.6",
         "classnames": "^2.3.1",
         "lodash": "^4.17.21",
@@ -33636,14 +33631,6 @@
         "styled-components": ">= 2"
       }
     },
-    "platform/components/node_modules/color-blend": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/color-blend/-/color-blend-4.0.0.tgz",
-      "integrity": "sha512-fYODTHhI/NG+B5GnzvuL3kiFrK/UnkUezWFTgEPBTY5V+kpyfAn95Vn9sJeeCX6omrCOdxnqCL3CvH+6sXtIbw==",
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
     "platform/components/node_modules/css-loader": {
       "version": "6.7.3",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz",
@@ -39303,7 +39290,6 @@
         "babel-loader": "^8.2.3",
         "babel-plugin-formatjs": "10.3.14",
         "babel-plugin-styled-components": "^2.0.6",
-        "color-blend": "4.0.0",
         "css-loader": "^6.7.1",
         "rollup": "^2.75.7",
         "rollup-plugin-auto-external": "^2.0.0",
@@ -39570,11 +39556,6 @@
             "picomatch": "^2.3.0"
           }
         },
-        "color-blend": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/color-blend/-/color-blend-4.0.0.tgz",
-          "integrity": "sha512-fYODTHhI/NG+B5GnzvuL3kiFrK/UnkUezWFTgEPBTY5V+kpyfAn95Vn9sJeeCX6omrCOdxnqCL3CvH+6sXtIbw=="
-        },
         "css-loader": {
           "version": "6.7.3",
           "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz",
@@ -53252,7 +53233,6 @@
         "@mui/base": "5.0.0-alpha.127",
         "@mui/material": "5.11.16",
         "@mui/styled-engine-sc": "5.11.11",
-        "@mui/system": "5.11.16",
         "@redux-devtools/extension": "3.2.3",
         "@stripe/react-stripe-js": "1.13.0",
         "@stripe/stripe-js": "1.41.0",

webapp/platform/components/package.json

@@ -50,7 +50,6 @@
     "@mui/base": "5.0.0-alpha.127",
     "@mui/material": "5.11.16",
     "@mui/styled-engine-sc": "5.11.11",
-    "@mui/system": "5.11.16",
     "@tippyjs/react": "^4.2.6",
     "classnames": "^2.3.1",
     "lodash": "^4.17.21",
@@ -61,8 +60,5 @@
     "shallow-equals": "^1.0.0",
     "styled-components": "^5.3.5",
     "tippy.js": "^6.3.7"
-  },
-  "dependencies": {
-    "color-blend": "4.0.0"
   }
 }

webapp/platform/components/src/common/constants/theme.ts

@@ -1,139 +0,0 @@
-import {Theme, ThemeKey} from '@mattermost/types/theme';
-
-export const THEMES: Record<ThemeKey, Theme> = {
-    denim: {
-        type: 'Denim',
-            sidebarBg: '#1e325c',
-            sidebarText: '#ffffff',
-            sidebarUnreadText: '#ffffff',
-            sidebarTextHoverBg: '#28427b',
-            sidebarTextActiveBorder: '#5d89ea',
-            sidebarTextActiveColor: '#ffffff',
-            sidebarHeaderBg: '#192a4d',
-            sidebarHeaderTextColor: '#ffffff',
-            sidebarTeamBarBg: '#14213e',
-            onlineIndicator: '#3db887',
-            awayIndicator: '#ffbc1f',
-            dndIndicator: '#d24b4e',
-            mentionBg: '#ffffff',
-            mentionColor: '#1e325c',
-            centerChannelBg: '#ffffff',
-            centerChannelColor: '#3f4350',
-            newMessageSeparator: '#cc8f00',
-            linkColor: '#386fe5',
-            buttonBg: '#1c58d9',
-            buttonColor: '#ffffff',
-            errorTextColor: '#d24b4e',
-            mentionHighlightBg: '#ffd470',
-            mentionHighlightLink: '#1b1d22',
-            codeTheme: 'github',
-    },
-    sapphire: {
-        type: 'Sapphire',
-            sidebarBg: '#174ab5',
-            sidebarText: '#ffffff',
-            sidebarUnreadText: '#ffffff',
-            sidebarTextHoverBg: '#2a58ba',
-            sidebarTextActiveBorder: '#57b5f0',
-            sidebarTextActiveColor: '#ffffff',
-            sidebarHeaderBg: '#1542a2',
-            sidebarHeaderTextColor: '#ffffff',
-            sidebarTeamBarBg: '#133a91',
-            onlineIndicator: '#3db887',
-            awayIndicator: '#ffbc1f',
-            dndIndicator: '#d24b4e',
-            mentionBg: '#ffffff',
-            mentionColor: '#174ab5',
-            centerChannelBg: '#ffffff',
-            centerChannelColor: '#3f4350',
-            newMessageSeparator: '#15b7b7',
-            linkColor: '#1c58d9',
-            buttonBg: '#1c58d9',
-            buttonColor: '#ffffff',
-            errorTextColor: '#d24b4e',
-            mentionHighlightBg: '#7ff0f0',
-            mentionHighlightLink: '#0d6e6e',
-            codeTheme: 'github',
-    },
-    quartz: {
-        type: 'Quartz',
-            sidebarBg: '#f4f4f6',
-            sidebarText: '#090a0b',
-            sidebarUnreadText: '#2d3039',
-            sidebarTextHoverBg: '#ebebed',
-            sidebarTextActiveBorder: '#32a4ec',
-            sidebarTextActiveColor: '#2d3039',
-            sidebarHeaderBg: '#e8e9ed',
-            sidebarHeaderTextColor: '#2d3039',
-            sidebarTeamBarBg: '#dddfe4',
-            onlineIndicator: '#3db887',
-            awayIndicator: '#f5ab07',
-            dndIndicator: '#d24b4e',
-            mentionBg: '#1c58d9',
-            mentionColor: '#ffffff',
-            centerChannelBg: '#ffffff',
-            centerChannelColor: '#3f4350',
-            newMessageSeparator: '#15b7b7',
-            linkColor: '#1c58d9',
-            buttonBg: '#1c58d9',
-            buttonColor: '#ffffff',
-            errorTextColor: '#d24b4e',
-            mentionHighlightBg: '#7ff0f0',
-            mentionHighlightLink: '#0d6e6e',
-            codeTheme: 'github',
-    },
-    indigo: {
-        type: 'Indigo',
-            sidebarBg: '#0f1a2e',
-            sidebarText: '#ffffff',
-            sidebarUnreadText: '#ffffff',
-            sidebarTextHoverBg: '#222c3f',
-            sidebarTextActiveBorder: '#1279ba',
-            sidebarTextActiveColor: '#ffffff',
-            sidebarHeaderBg: '#152231',
-            sidebarHeaderTextColor: '#dddfe4',
-            sidebarTeamBarBg: '#05080f',
-            onlineIndicator: '#3db887',
-            awayIndicator: '#f5ab00',
-            dndIndicator: '#d24b4e',
-            mentionBg: '#1c58d9',
-            mentionColor: '#ffffff',
-            centerChannelBg: '#0a111f',
-            centerChannelColor: '#dddfe4',
-            newMessageSeparator: '#81a3ef',
-            linkColor: '#5d89ea',
-            buttonBg: '#386fe5',
-            buttonColor: '#ffffff',
-            errorTextColor: '#d24b4e',
-            mentionHighlightBg: '#133a91',
-            mentionHighlightLink: '#a4f4f4',
-            codeTheme: 'solarized-dark',
-    },
-    onyx: {
-        type: 'Onyx',
-            sidebarBg: '#121317',
-            sidebarText: '#ffffff',
-            sidebarUnreadText: '#ffffff',
-            sidebarTextHoverBg: '#25262a',
-            sidebarTextActiveBorder: '#1592e0',
-            sidebarTextActiveColor: '#ffffff',
-            sidebarHeaderBg: '#1b1d22',
-            sidebarHeaderTextColor: '#dddfe4',
-            sidebarTeamBarBg: '#000000',
-            onlineIndicator: '#3db887',
-            awayIndicator: '#f5ab00',
-            dndIndicator: '#d24b4e',
-            mentionBg: '#1c58d9',
-            mentionColor: '#ffffff',
-            centerChannelBg: '#090a0b',
-            centerChannelColor: '#dddfe4',
-            newMessageSeparator: '#1adbdb',
-            linkColor: '#5d89ea',
-            buttonBg: '#386fe5',
-            buttonColor: '#ffffff',
-            errorTextColor: '#da6c6e',
-            mentionHighlightBg: '#0d6e6e',
-            mentionHighlightLink: '#a4f4f4',
-            codeTheme: 'monokai',
-    },
-};

webapp/platform/components/src/common/hooks/useMeasurePunchouts.ts

@@ -11,7 +11,7 @@ export type Coords = {
     y?: string;
 }
 
-export type PunchOutCoordsHeightAndWidth = Coords & {
+export type Props = Coords & {
     width: string;
     height: string;
 }
@@ -23,7 +23,7 @@ type PunchOutOffset = {
     height: number;
 }
 
-export const useMeasurePunchouts = (elementIds: string[], additionalDeps: any[], offset?: PunchOutOffset): PunchOutCoordsHeightAndWidth | null => {
+export const useMeasurePunchouts = (elementIds: string[], additionalDeps: any[], offset?: PunchOutOffset): Props | null => {
     const elementsAvailable = useElementAvailable(elementIds);
     const [size, setSize] = useState({x: window.innerWidth, y: window.innerHeight});
     const updateSize = throttle(() => {

webapp/platform/components/src/compass/components/base_modal/base_modal.tsx

@@ -1,59 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {memo} from 'react';
-import {styled} from '@mui/material/styles';
-import Dialog from '@mui/material/Dialog';
-import MUIPaper, {PaperProps} from '@mui/material/Paper';
-import Slide from '@mui/material/Slide';
-import {TransitionProps} from '@mui/material/transitions';
-
-const Transition = React.forwardRef((
-    {children, ...props}: TransitionProps & {
-        children: React.ReactElement<any, any>;
-    },
-    ref: React.Ref<unknown>,
-) => {
-    return (
-        <Slide
-            direction='up'
-            ref={ref}
-            {...props}
-        >
-            {children}
-        </Slide>
-    );
-});
-
-const Paper = styled(MUIPaper)<PaperProps>(() => ({
-    border: '1px solid rgba(var(--center-channel-color-rgb), 0.16)',
-    borderRadius: 12,
-    backgroundColor: 'var(--center-channel-bg)',
-    boxShadow: '0 20px 32px 0 rgba(0, 0, 0, 0.12)',
-    minWidth: 600,
-}));
-
-type ModalProps = {
-    children: React.ReactNode | React.ReactNodeArray;
-    isOpen: boolean;
-    dialogClassName?: string;
-    dialogId?: string;
-    onClose?: () => void;
-}
-
-const BaseModal = ({children, isOpen, onClose, dialogClassName = '', dialogId = ''}: ModalProps) => (
-    <Dialog
-        open={isOpen}
-        TransitionComponent={Transition}
-        PaperComponent={Paper}
-        keepMounted={true}
-        onClose={onClose}
-        aria-describedby='alert-dialog-slide-description'
-        role='dialog'
-        className={dialogClassName}
-        id={dialogId}
-    >{children}
-    </Dialog>
-);
-
-export default BaseModal;

webapp/platform/components/src/compass/components/base_modal/modal_title.tsx

@@ -1,71 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {styled} from '@mui/material/styles';
-import MUIDialogTitle, {DialogTitleProps as MUIDialogTitleProps} from '@mui/material/DialogTitle';
-
-import {CloseIcon} from '@mattermost/compass-icons/components';
-
-import Icon_button from '../icon_button/icon_button';
-
-type DialogTitleProps = MUIDialogTitleProps & { hasCloseButton: boolean };
-
-const StyledModalTitle = styled(MUIDialogTitle, {
-    shouldForwardProp: (prop) => prop !== 'hasCloseButton',
-})<DialogTitleProps>(({hasCloseButton}) => ({
-    display: 'grid',
-    gridTemplateColumns: '1fr max-content max-content',
-    gap: 12,
-    fontFamily: 'Metropolis',
-    fontStyle: 'normal',
-    fontWeight: 600,
-    fontSize: 22,
-    lineHeight: '28px',
-    color: 'var(--center-channel-color)',
-    alignItems: 'center',
-    padding: hasCloseButton ? '22px 26px 24px 32px' : '28px 32px 24px',
-}));
-
-const StyledModalTitleSection = styled('div')(() => ({
-    padding: '0 32px 24px 32px',
-    borderBottom: '1px solid rgba(var(--center-channel-text-rgb), 0.12)',
-}));
-
-type ModalTitleProps = {
-    title: string;
-    rightSection?: React.ReactNode | React.ReactNode[];
-    children?: React.ReactNode | React.ReactNode[];
-    onClose?: React.MouseEventHandler;
-}
-
-const ModalTitle = ({title, onClose, children, rightSection = null}: ModalTitleProps) => {
-    const hasCloseButton = Boolean(onClose);
-
-    return (
-        <>
-            <StyledModalTitle
-                hasCloseButton={hasCloseButton}
-                component={'div'}
-            >
-                {title}
-                {rightSection}
-                {hasCloseButton && (
-                    <Icon_button
-                        compact={true}
-                        type='button'
-                        onClick={onClose}
-                        IconComponent={CloseIcon}
-                    />
-                )}
-            </StyledModalTitle>
-            {children && (
-                <StyledModalTitleSection>
-                    {children}
-                </StyledModalTitleSection>
-            )}
-        </>
-    );
-};
-
-export default ModalTitle;

webapp/platform/components/src/compass/components/button/button.overrides.ts

@@ -1,173 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {alpha, ComponentsProps, ComponentsVariants, emphasize, Theme} from '@mui/material';
-import {ComponentsOverrides} from '@mui/material/styles/overrides';
-
-import {blend} from '../../utils/color';
-
-const componentName = 'MuiButton';
-
-declare module '@mui/material/Button' {
-    interface ButtonPropsSizeOverrides {
-        'x-small': true;
-    }
-
-    interface ButtonPropsVariantOverrides {
-        quaternary: true;
-    }
-}
-
-const defaultProps: ComponentsProps[typeof componentName] = {
-    disableElevation: true,
-    disableRipple: true,
-    disableTouchRipple: true,
-    disableFocusRipple: true,
-};
-
-const getFocusStyles = (color: string) => ({
-    '&:not(.Mui-disabled)': {
-        '&:focus': {
-            boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`,
-        },
-
-        '&:focus:not(:focus-visible)': {
-            boxShadow: 'none',
-        },
-
-        '&:focus:focus-visible': {
-            boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`,
-        },
-    },
-});
-
-const styleOverrides: ComponentsOverrides<Theme>[typeof componentName] = {
-    containedPrimary: ({theme, ownerState}) => ({
-        backgroundColor: ownerState.inverted ? theme.palette.text.primary : theme.palette.primary.main,
-        color: ownerState.inverted ? theme.palette.primary.main : theme.palette.primary.contrastText,
-
-        '&:hover': {
-            backgroundColor: ownerState.inverted ? blend(theme.palette.text.primary, alpha(theme.palette.primary.main, 0.08)) : emphasize(theme.palette.primary.main, 0.1),
-        },
-        '&:active': {
-            backgroundColor: ownerState.inverted ? blend(theme.palette.text.primary, alpha(theme.palette.primary.main, 0.16)) : emphasize(theme.palette.primary.main, 0.2),
-        },
-
-        ...getFocusStyles(theme.palette.primary.main),
-    }),
-    containedError: ({theme}) => ({
-        '&:hover': {
-            backgroundColor: emphasize(theme.palette.error.dark, 0.1),
-        },
-        '&:active': {
-            backgroundColor: emphasize(theme.palette.error.dark, 0.2),
-        },
-
-        ...getFocusStyles(theme.palette.error.main),
-    }),
-    outlinedPrimary: ({theme}) => ({
-        backgroundColor: alpha(theme.palette.primary.main, 0),
-
-        '&:hover': {
-            backgroundColor: alpha(theme.palette.primary.main, 0.08),
-        },
-
-        '&:active': {
-            backgroundColor: alpha(theme.palette.primary.main, 0.16),
-        },
-
-        ...getFocusStyles(theme.palette.primary.main),
-    }),
-    outlinedError: ({theme}) => ({
-        backgroundColor: alpha(theme.palette.error.main, 0),
-
-        '&:hover': {
-            backgroundColor: alpha(theme.palette.error.main, 0.08),
-        },
-
-        '&:active': {
-            backgroundColor: alpha(theme.palette.error.main, 0.16),
-        },
-
-        ...getFocusStyles(theme.palette.error.main),
-    }),
-    textPrimary: ({theme}) => ({
-        backgroundColor: alpha(theme.palette.primary.main, 0.08),
-
-        '&:hover': {
-            backgroundColor: alpha(theme.palette.primary.main, 0.12),
-        },
-
-        '&:active': {
-            backgroundColor: alpha(theme.palette.primary.main, 0.16),
-        },
-
-        ...getFocusStyles(theme.palette.primary.main),
-    }),
-    textError: ({theme, ownerState}) => ({
-        backgroundColor: ownerState.disabled ? theme.palette.action.disabledBackground : alpha(theme.palette.error.main, 0.12),
-
-        '&:hover': {
-            backgroundColor: alpha(theme.palette.error.main, 0.12),
-        },
-
-        '&:active': {
-            backgroundColor: alpha(theme.palette.error.main, 0.16),
-        },
-
-        ...getFocusStyles(theme.palette.error.main),
-    }),
-};
-
-const variants: ComponentsVariants[typeof componentName] = [
-    {
-        props: {size: 'x-small'},
-        style: ({theme}) => ({
-            padding: '0.4rem 1rem',
-            ...theme.typography.b50,
-            margin: 0,
-            textTransform: 'none',
-        }),
-    },
-    {
-        props: {size: 'small'},
-        style: ({theme}) => ({
-            padding: '0.8rem 1.6rem',
-            ...theme.typography.b75,
-            margin: 0,
-            textTransform: 'none',
-        }),
-    },
-    {
-        props: {size: 'medium'},
-        style: ({theme}) => ({
-            padding: '1rem 2rem',
-            ...theme.typography.b100,
-            margin: 0,
-            textTransform: 'none',
-        }),
-    },
-    {
-        props: {size: 'large'},
-        style: ({theme}) => ({
-            padding: '1.2rem 2.4rem',
-            ...theme.typography.b200,
-            margin: 0,
-            textTransform: 'none',
-        }),
-    },
-    {
-        props: {variant: 'quaternary'},
-        style: () => ({
-            backgroundColor: 'red',
-        }),
-    },
-];
-
-const buttonOverrides = {
-    variants,
-    defaultProps,
-    styleOverrides,
-};
-
-export default buttonOverrides;

webapp/platform/components/src/compass/components/button/button.tsx

@@ -1,39 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import MuiButton, {ButtonProps as MuiButtonProps} from '@mui/material/Button';
-
-type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
-
-const variantMap: Record<ButtonVariant, Exclude<MuiButtonProps['variant'], undefined>> = {
-    primary: 'contained',
-    secondary: 'outlined',
-    tertiary: 'text',
-};
-
-type ExcludedMuiProps =
-    | 'sx'
-    | 'classes'
-    | 'variant'
-    | 'disableElevation'
-    | 'disableRipple'
-    | 'disableFocusRipple';
-
-export type ButtonProps = Omit<MuiButtonProps, ExcludedMuiProps> & {
-    destructive?: boolean;
-    disabled?: boolean;
-    inverted?: boolean;
-    variant?: ButtonVariant;
-    children: React.ReactNode | React.ReactNode[];
-}
-
-export const Button = ({variant = 'primary', destructive, ...rest}: ButtonProps) => (
-    <MuiButton
-        {...rest}
-        color={destructive ? 'error' : 'primary'}
-        variant={variantMap[variant]}
-    />
-);
-
-export default Button;

webapp/platform/components/src/compass/components/generic_modal/generic_modal.tsx

@@ -1,80 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {memo} from 'react';
-import {styled} from '@mui/material/styles';
-import Button from '@mui/material/Button';
-import MUIPaper, {PaperProps} from '@mui/material/Paper';
-import DialogActions from '@mui/material/DialogActions';
-import Slide from '@mui/material/Slide';
-import {TransitionProps} from '@mui/material/transitions';
-import BaseModal from "../base_modal/base_modal";
-
-const Transition = React.forwardRef((
-    {children, ...props}: TransitionProps & {
-        children: React.ReactElement<any, any>;
-    },
-    ref: React.Ref<unknown>,
-) => {
-    return (
-        <Slide
-            direction='up'
-            ref={ref}
-            {...props}
-        >
-            {children}
-        </Slide>
-    );
-});
-
-const Paper = styled(MUIPaper)<PaperProps>(() => ({
-    border: '1px solid rgba(var(--center-channel-color-rgb), 0.16)',
-    borderRadius: 12,
-    backgroundColor: 'var(--center-channel-bg)',
-    boxShadow: '0 20px 32px 0 rgba(0, 0, 0, 0.12)',
-    minWidth: 600,
-}));
-
-type ModalProps = {
-    children: React.ReactNode | React.ReactNodeArray;
-    isOpen: boolean;
-    dialogClassName?: string;
-    dialogId?: string;
-    onClose?: () => void;
-    onConfirm?: () => void;
-    onCancel?: () => void;
-}
-
-const GenericModal = ({children, isOpen, onClose, onConfirm, onCancel, dialogClassName = '', dialogId = ''}: ModalProps) => {
-    const hasActions = Boolean(onConfirm || onCancel);
-
-    const handleConfirmAction = () => {
-        onConfirm?.();
-        onClose?.();
-    };
-
-    const handleCancelAction = () => {
-        onCancel?.();
-        onClose?.();
-    };
-
-    return (
-            <BaseModal
-                isOpen={isOpen}
-                onClose={onClose}
-                aria-describedby='alert-dialog-slide-description'
-                dialogClassName={dialogClassName}
-                dialogId={dialogId}
-            >
-                {children}
-                {hasActions && (
-                    <DialogActions>
-                        {onCancel && <Button onClick={handleCancelAction}>{'Cancel'}</Button>}
-                        {onConfirm && <Button onClick={handleConfirmAction}>{'Confirm'}</Button>}
-                    </DialogActions>
-                )}
-            </BaseModal>
-    );
-};
-
-export default memo(GenericModal);

webapp/platform/components/src/compass/components/icon_button/icon_button.overrides.ts

@@ -1,206 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {alpha, ComponentsProps, emphasize, Theme} from '@mui/material';
-import type {ComponentsVariants} from '@mui/material';
-import type {ComponentsOverrides} from '@mui/material/styles/overrides';
-
-const componentName = 'MuiIconButton';
-
-declare module '@mui/material/IconButton' {
-    interface IconButtonPropsSizeOverrides {
-        'x-small': true;
-    }
-    interface IconButtonPropsOverrides {
-        destructive: boolean;
-        compact: boolean;
-    }
-}
-
-const defaultProps: ComponentsProps[typeof componentName] = {
-    disableRipple: true,
-    disableTouchRipple: true,
-    disableFocusRipple: true,
-};
-
-export const getFocusStyles = (color: string) => ({
-    '&:not(.Mui-disabled)': {
-        '&:focus': {
-            boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`,
-        },
-
-        '&:focus:not(:focus-visible)': {
-            boxShadow: 'none',
-        },
-
-        '&:focus:focus-visible': {
-            boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`,
-        },
-    },
-});
-
-const styleOverrides: ComponentsOverrides<Theme>[typeof componentName] = {
-    root: ({theme, ownerState}) => ({
-        backgroundColor: 'transparent',
-        color: ownerState.color === 'error' ? theme.palette.error.main : alpha(theme.palette.text.primary, 0.56),
-        borderRadius: 4,
-        margin: 0,
-
-        '&:hover': {
-            backgroundColor: alpha(ownerState.color === 'error' ? theme.palette.error.main : theme.palette.text.primary, 0.08),
-            color: ownerState.color === 'error' ? theme.palette.error.main : alpha(theme.palette.text.primary, 0.72),
-        },
-
-        '&:active': {
-            backgroundColor: alpha(ownerState.color === 'error' ? theme.palette.error.main : theme.palette.primary.main, 0.16),
-            color: ownerState.color === 'error' ? theme.palette.error.main : theme.palette.primary.main,
-        },
-
-        svg: {
-            margin: 0,
-            fill: 'currentColor',
-        },
-
-        ...getFocusStyles(ownerState.color === 'error' ? theme.palette.error.main : theme.palette.primary.main),
-
-        ...(ownerState.color !== 'error' && {
-            '&.toggled:not(.inverted):not(.Mui-disabled)': {
-                backgroundColor: theme.palette.primary.main,
-                color: theme.palette.primary.contrastText,
-
-                '&:hover': {
-                    backgroundColor: alpha(theme.palette.primary.main, 0.92),
-                    color: theme.palette.primary.contrastText,
-                },
-
-                '&:active': {
-                    backgroundColor: alpha(theme.palette.primary.main, 0.16),
-                    color: theme.palette.primary.main,
-                },
-            },
-
-            '&.inverted:not(.Mui-disabled)': {
-                backgroundColor: 'transparent',
-                color: alpha(theme.palette.text.primary, 0.56),
-
-                '&:hover': {
-                    backgroundColor: alpha(theme.palette.text.primary, 0.08),
-                    color: theme.palette.text.primary,
-                },
-
-                '&:active': {
-                    backgroundColor: alpha(theme.palette.text.primary, 0.16),
-                    color: theme.palette.text.primary,
-                },
-
-                '&.toggled': {
-                    backgroundColor: theme.palette.text.primary,
-                    color: alpha(theme.palette.background.default, 0.56),
-
-                    '&:hover': {
-                        backgroundColor: alpha(theme.palette.text.primary, 0.92),
-                        color: alpha(theme.palette.background.default, 0.56),
-                    },
-
-                    '&:active': {
-                        backgroundColor: alpha(theme.palette.text.primary, 0.16),
-                        color: theme.palette.text.primary,
-                    },
-                },
-            },
-        }),
-
-        transition: theme.transitions.create(['background-color', 'color'], {duration: theme.transitions.duration.shorter}),
-    }),
-};
-
-const variants: ComponentsVariants[typeof componentName] = [
-    {
-        props: {size: 'x-small'},
-        style: ({theme}) => ({
-            padding: theme.spacing(0.5),
-
-            svg: {
-                width: '12px',
-                height: '12px',
-            },
-
-            ...theme.typography.b75,
-            lineHeight: 0,
-            fontWeight: 600,
-
-            '.MuiGrid-container': {
-                gap: theme.spacing(0.25),
-                maxHeight: theme.spacing(1.5),
-            },
-        }),
-    },
-    {
-        props: {size: 'small'},
-        style: ({theme}) => ({
-            padding: theme.spacing(0.75),
-
-            svg: {
-                width: '16px',
-                height: '16px',
-            },
-
-            ...theme.typography.b100,
-            lineHeight: 0,
-            fontWeight: 600,
-
-            '.MuiGrid-container': {
-                gap: theme.spacing(0.5),
-                maxHeight: theme.spacing(2),
-            },
-        }),
-    },
-    {
-        props: {size: 'medium'},
-        style: ({theme}) => ({
-            padding: theme.spacing(1),
-
-            svg: {
-                width: '20px',
-                height: '20px',
-            },
-
-            ...theme.typography.b200,
-            lineHeight: 0,
-            fontWeight: 600,
-
-            '.MuiGrid-container': {
-                gap: theme.spacing(0.75),
-                maxHeight: theme.spacing(2.5),
-            },
-        }),
-    },
-    {
-        props: {size: 'large'},
-        style: ({theme}) => ({
-            padding: theme.spacing(1),
-
-            svg: {
-                width: '28px',
-                height: '28px',
-            },
-
-            ...theme.typography.b300,
-            lineHeight: 0,
-            fontWeight: 600,
-
-            '.MuiGrid-container': {
-                gap: theme.spacing(0.75),
-                maxHeight: theme.spacing(3.5),
-            },
-        }),
-    },
-];
-
-const overrides = {
-    variants,
-    defaultProps,
-    styleOverrides,
-};
-
-export default overrides;

webapp/platform/components/src/compass/components/icon_button/icon_button.tsx

@@ -1,51 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {Grid} from '@mui/material';
-import classNames from 'classnames';
-import React from 'react';
-import MuiIconButton, {IconButtonProps as MuiIconButtonProps} from '@mui/material/IconButton';
-
-type ExcludedMuiProps = 'sx' | 'disableFocusRipple' | 'disableRipple' | 'color' | 'classes';
-
-type CustomProps = {
-    IconComponent: React.FC;
-    compact?: boolean;
-    toggled?: boolean;
-    inverted?: boolean;
-    destructive?: boolean;
-    label?: string;
-}
-
-type IconButtonProps = Omit<MuiIconButtonProps, ExcludedMuiProps> & CustomProps;
-
-const IconButton = ({IconComponent, label, destructive = false, compact = false, toggled = false, inverted = false, ...props}: IconButtonProps) => {
-    return (
-        <MuiIconButton
-            {...props}
-            className={classNames({compact, toggled, inverted})}
-            color={destructive ? 'error' : 'primary'}
-        >
-            <Grid
-                container={true}
-                m={compact ? 0 : 0.25}
-                alignItems='center'
-                alignContent='center'
-            >
-                <Grid item={true}>
-                    <IconComponent/>
-                </Grid>
-                {label && (
-                    <Grid
-                        item={true}
-                        pt={0.25}
-                    >
-                        {label}
-                    </Grid>
-                )}
-            </Grid>
-        </MuiIconButton>
-    );
-};
-
-export default IconButton;

webapp/platform/components/src/compass/components/index.ts

@@ -1,16 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import Typography from './typography/typography';
-import Button, {ButtonProps} from './button/button';
-import IconButton from './icon_button/icon_button';
-
-export {
-    IconButton,
-    Button,
-    Typography,
-};
-
-export type {
-    ButtonProps,
-};

webapp/platform/components/src/compass/components/typography/typography.overrides.ts

@@ -1,285 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {TypographyOptions} from '@mui/material/styles/createTypography';
-
-import {getFontMargin} from '../../utils/font';
-
-declare module '@mui/material/styles' {
-    interface TypographyVariants {
-
-        // body text variants
-        b25: React.CSSProperties;
-        b50: React.CSSProperties;
-        b75: React.CSSProperties;
-        b100: React.CSSProperties;
-        b200: React.CSSProperties;
-        b300: React.CSSProperties;
-
-        // heading variants
-        h25: React.CSSProperties;
-        h50: React.CSSProperties;
-        h75: React.CSSProperties;
-        h100: React.CSSProperties;
-        h200: React.CSSProperties;
-        h300: React.CSSProperties;
-        h400: React.CSSProperties;
-        h500: React.CSSProperties;
-        h600: React.CSSProperties;
-        h700: React.CSSProperties;
-        h800: React.CSSProperties;
-        h900: React.CSSProperties;
-        h1000: React.CSSProperties;
-    }
-
-    // allow configuration using `createTheme`
-    interface TypographyVariantsOptions {
-
-        // body text style properties
-        b25?: React.CSSProperties;
-        b50?: React.CSSProperties;
-        b75?: React.CSSProperties;
-        b100?: React.CSSProperties;
-        b200?: React.CSSProperties;
-        b300?: React.CSSProperties;
-
-        // heading style properties
-        h25?: React.CSSProperties;
-        h50?: React.CSSProperties;
-        h75?: React.CSSProperties;
-        h100?: React.CSSProperties;
-        h200?: React.CSSProperties;
-        h300?: React.CSSProperties;
-        h400?: React.CSSProperties;
-        h500?: React.CSSProperties;
-        h600?: React.CSSProperties;
-        h700?: React.CSSProperties;
-        h800?: React.CSSProperties;
-        h900?: React.CSSProperties;
-        h1000?: React.CSSProperties;
-    }
-}
-
-// Update the Typography's variant prop options
-declare module '@mui/material/Typography' {
-    interface TypographyPropsVariantOverrides {
-
-        // enable our custom body text variants
-        b25: true;
-        b50: true;
-        b75: true;
-        b100: true;
-        b200: true;
-        b300: true;
-
-        // enable our custom heading variants
-        h25: true;
-        h50: true;
-        h75: true;
-        h100: true;
-        h200: true;
-        h300: true;
-        h400: true;
-        h500: true;
-        h600: true;
-        h700: true;
-        h800: true;
-        h900: true;
-        h1000: true;
-
-        // disable the MUI variants
-        h1: false;
-        h2: false;
-        h3: false;
-        h4: false;
-        h5: false;
-        h6: false;
-        body1: false;
-        body2: false;
-        button: false;
-        caption: false;
-        inherit: false;
-        overline: false;
-        subtitle1: false;
-        subtitle2: false;
-    }
-}
-
-const baseBodyStyles = {
-    fontFamily: 'Open Sans, sans-serif',
-    fontStyle: 'normal',
-    fontWeight: 400,
-};
-
-const b25 = {
-    fontSize: '1rem',
-    lineHeight: '1.6rem',
-    marginTop: getFontMargin(10, 0.75),
-    marginBottom: getFontMargin(10, 0.75),
-    ...baseBodyStyles,
-};
-const b50 = {
-    fontSize: '1.1rem',
-    lineHeight: '1.6rem',
-    marginTop: getFontMargin(11, 0.75),
-    marginBottom: getFontMargin(11, 0.75),
-    ...baseBodyStyles,
-};
-const b75 = {
-    fontSize: '1.2rem',
-    lineHeight: '1.6rem',
-    marginTop: getFontMargin(12, 0.75),
-    marginBottom: getFontMargin(12, 0.75),
-    ...baseBodyStyles,
-};
-const b100 = {
-    fontSize: '1.4rem',
-    lineHeight: '2rem',
-    marginTop: getFontMargin(14, 0.75),
-    marginBottom: getFontMargin(14, 0.75),
-    ...baseBodyStyles,
-};
-const b200 = {
-    fontSize: '1.6rem',
-    lineHeight: '2.4rem',
-    marginTop: getFontMargin(16, 0.75),
-    marginBottom: getFontMargin(16, 0.75),
-    ...baseBodyStyles,
-};
-const b300 = {
-    fontSize: '1.8rem',
-    lineHeight: '2.8rem',
-    marginTop: getFontMargin(18, 0.75),
-    marginBottom: getFontMargin(18, 0.75),
-    ...baseBodyStyles,
-};
-
-const baseHeadingStyles = {
-    fontFamily: 'Metropolis, sans-serif',
-    fontStyle: 'normal',
-    fontWeight: 600,
-
-    '&:first-of-type': {
-        marginTop: 0,
-    },
-};
-
-const h25 = {
-    fontSize: '1rem',
-    lineHeight: '1.6rem',
-    marginTop: getFontMargin(10, 8 / 9),
-    marginBottom: getFontMargin(10, 0.5),
-    ...baseHeadingStyles,
-    fontFamily: 'Open Sans, sans-serif',
-};
-const h50 = {
-    fontSize: '1.1rem',
-    lineHeight: '1.6rem',
-    marginTop: getFontMargin(11, 8 / 9),
-    marginBottom: getFontMargin(11, 0.5),
-    ...baseHeadingStyles,
-    fontFamily: 'Open Sans, sans-serif',
-};
-const h75 = {
-    fontSize: '1.2rem',
-    lineHeight: '1.6rem',
-    marginTop: getFontMargin(12, 8 / 9),
-    marginBottom: getFontMargin(12, 0.5),
-    ...baseHeadingStyles,
-    fontFamily: 'Open Sans, sans-serif',
-};
-const h100 = {
-    fontSize: '1.4rem',
-    lineHeight: '2rem',
-    marginTop: getFontMargin(14, 8 / 9),
-    marginBottom: getFontMargin(14, 0.5),
-    ...baseHeadingStyles,
-    fontFamily: 'Open Sans, sans-serif',
-};
-const h200 = {
-    fontSize: '1.6rem',
-    lineHeight: '2.4rem',
-    marginTop: getFontMargin(16, 8 / 9),
-    marginBottom: getFontMargin(16, 0.5),
-    ...baseHeadingStyles,
-};
-const h300 = {
-    fontSize: '1.8rem',
-    lineHeight: '2.4rem',
-    marginTop: getFontMargin(18, 8 / 9),
-    marginBottom: getFontMargin(18, 0.5),
-    ...baseHeadingStyles,
-};
-const h400 = {
-    fontSize: '2rem',
-    lineHeight: '2.8rem',
-    marginTop: getFontMargin(18, 8 / 9),
-    marginBottom: getFontMargin(18, 0.5),
-    ...baseHeadingStyles,
-};
-const h500 = {
-    fontSize: '2.2rem',
-    lineHeight: '2.8rem',
-    marginTop: getFontMargin(22, 8 / 9),
-    marginBottom: getFontMargin(22, 0.5),
-    ...baseHeadingStyles,
-};
-const h600 = {
-    fontSize: '2.5rem',
-    lineHeight: '3rem',
-    marginTop: getFontMargin(25, 8 / 9),
-    marginBottom: getFontMargin(25, 0.5),
-    ...baseHeadingStyles,
-};
-const h700 = {
-    fontSize: '2.8rem',
-    lineHeight: '3.6rem',
-    marginTop: getFontMargin(28, 8 / 9),
-    marginBottom: getFontMargin(28, 0.5),
-    ...baseHeadingStyles,
-};
-const h800 = {
-    fontSize: '3.2rem',
-    lineHeight: '4rem',
-    marginTop: getFontMargin(32, 8 / 9),
-    marginBottom: getFontMargin(32, 0.5),
-    ...baseHeadingStyles,
-};
-const h900 = {
-    fontSize: '3.6rem',
-    lineHeight: '4.4rem',
-    marginTop: getFontMargin(36, 8 / 9),
-    marginBottom: getFontMargin(36, 0.5),
-    ...baseHeadingStyles,
-};
-const h1000 = {
-    fontSize: '4rem',
-    lineHeight: '4.8rem',
-    marginTop: getFontMargin(40, 8 / 9),
-    marginBottom: getFontMargin(40, 0.5),
-    ...baseHeadingStyles,
-};
-
-const typographyOverrides: TypographyOptions = {
-    b25,
-    b50,
-    b75,
-    b100,
-    b200,
-    b300,
-    h25,
-    h50,
-    h75,
-    h100,
-    h200,
-    h300,
-    h400,
-    h500,
-    h600,
-    h700,
-    h800,
-    h900,
-    h1000,
-};
-
-export default typographyOverrides;

webapp/platform/components/src/compass/components/typography/typography.tsx

@@ -1,44 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {Typography as MuiTypography, TypographyProps as MuiTypographyProps} from '@mui/material';
-
-type Props = Omit<MuiTypographyProps, 'variantMapping' | 'paragraph'> & {
-    gutterTop?: boolean;
-}
-
-const Typography = ({variant = 'b100', ...props}: Props) => {
-    const variantMap = {
-        b25: 'p',
-        b50: 'p',
-        b75: 'p',
-        b100: 'p',
-        b200: 'p',
-        b300: 'p',
-
-        h25: 'h6',
-        h50: 'h6',
-        h75: 'h6',
-        h100: 'h5',
-        h200: 'h5',
-        h300: 'h4',
-        h400: 'h4',
-        h500: 'h3',
-        h600: 'h3',
-        h700: 'h2',
-        h800: 'h2',
-        h900: 'h1',
-        h1000: 'h1',
-    };
-
-    return (
-        <MuiTypography
-            {...props}
-            variant={variant}
-            variantMapping={variantMap}
-        />
-    );
-};
-
-export default Typography;

webapp/platform/components/src/compass/index.ts

@@ -1,10 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-export * from './components';
-
-import ThemeProvider from './theme_provider/theme_provider';
-
-export {
-    ThemeProvider,
-};

webapp/platform/components/src/compass/theme_provider/overrides.ts

@@ -1,23 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {ThemeOptions} from '@mui/material/styles/createTheme';
-
-import MuiButton from '../components/button/button.overrides';
-import MuiIconButton from '../components/icon_button/icon_button.overrides';
-import typographyOverrides from '../components/typography/typography.overrides';
-
-const components: ThemeOptions['components'] = {
-    MuiButton,
-    MuiIconButton,
-};
-
-const overrides: ThemeOptions = {
-    components,
-    typography: {
-        ...typographyOverrides,
-        htmlFontSize: 10,
-    },
-};
-
-export default overrides;

webapp/platform/components/src/compass/theme_provider/theme_provider.tsx

@@ -1,31 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {createTheme, ThemeProvider as MUIThemeProvider} from '@mui/material/styles';
-import {Theme} from "@mattermost/types/theme";
-
-import {createMUIThemeFromMMTheme} from './themes';
-
-import {THEMES} from '../../common/constants/theme';
-import overrides from './overrides';
-
-type Props = {
-    theme: Theme;
-}
-
-const ThemeProvider = ({theme = THEMES.onyx}: Props) => {
-    const MUITheme = createMUIThemeFromMMTheme(theme);
-    const combinedTheme = createTheme({
-        ...MUITheme,
-        ...overrides,
-    });
-
-    return (
-        <MUIThemeProvider
-            theme={combinedTheme}
-        />
-    );
-};
-
-export default ThemeProvider;

webapp/platform/components/src/compass/theme_provider/themes.ts

@@ -1,47 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {alpha} from '@mui/material';
-import {createTheme} from '@mui/material/styles';
-import {Theme} from '@mattermost/types/theme';
-
-import {THEMES} from '../../common/constants/theme';
-
-declare module '@mui/material/styles' {
-    interface Palette {
-        mention?: Palette['primary'];
-    }
-    interface PaletteOptions {
-        mention?: PaletteOptions['primary'];
-    }
-
-    interface PaletteColor {
-        darker?: string;
-    }
-    interface SimplePaletteColorOptions {
-        darker?: string;
-    }
-}
-
-export const createMUIThemeFromMMTheme = (theme: Theme) =>  createTheme({
-    palette: {
-        primary: {main: theme.buttonBg},
-        secondary: {main: theme.linkColor},
-        error: {main: theme.dndIndicator},
-        warning: {main: theme.awayIndicator},
-        info: {main: theme.mentionHighlightBg},
-        success: {main: theme.onlineIndicator},
-        text: {
-            primary: theme.centerChannelColor,
-        },
-        background: {
-            default: theme.centerChannelBg,
-        },
-        action: {
-            disabled: alpha(theme.centerChannelColor, 0.32),
-            disabledBackground: alpha(theme.centerChannelColor, 0.08),
-        },
-        tonalOffset: 0.05,
-    },
-});
-

webapp/platform/components/src/compass/utils/color.ts

@@ -1,32 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {decomposeColor, hslToRgb} from '@mui/material';
-import {normal} from 'color-blend';
-
-export const decomposeColorToRgb = (color: string) => {
-    if (color.startsWith('hsl')) {
-        return decomposeColor(hslToRgb(color));
-    }
-
-    return decomposeColor(color);
-};
-
-export const blend = (background: string, foreground: string) => {
-    const bg = decomposeColorToRgb(background);
-    const fg = decomposeColorToRgb(foreground);
-
-    const blended = normal({
-        r: bg.values[0],
-        g: bg.values[1],
-        b: bg.values[2],
-        a: bg.values[3] || 1,
-    }, {
-        r: fg.values[0],
-        g: fg.values[1],
-        b: fg.values[2],
-        a: fg.values[3] || 1,
-    });
-
-    return `rgba(${blended.r}, ${blended.g}, ${blended.b}, ${blended.a})`;
-};

webapp/platform/components/src/compass/utils/font.ts

@@ -1,5 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-export const getFontMargin = (fontSize: number, multiplier: number): number =>
-    Math.max(Math.round((fontSize * multiplier) / 4) * 4, 8);

webapp/platform/components/src/footer_pagination/footer_pagination.scss

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-@import '../../../../../channels/src/sass/utils/mixins';
+@import '../../../../channels/src/sass/utils/mixins';
 
 .footer-pagination {
     display: flex;

webapp/platform/components/src/footer_pagination/footer_pagination.test.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import {render, screen} from '@testing-library/react';
 
 import {FooterPagination} from './footer_pagination';
-import {wrapIntl} from '../../testUtils'
+import {wrapIntl} from '../testUtils'
 
 describe('LegacyGenericModal/FooterPagination', () => {
     const baseProps = {

webapp/platform/components/src/footer_pagination/footer_pagination.tsx

@@ -11,7 +11,7 @@ import './footer_pagination.scss';
 
 const BUTTON_ICON_SIZE = 16;
 
-type FooterPaginationProps = {
+type Props = {
     page: number;
     total: number;
     itemsPerPage: number;
@@ -25,7 +25,7 @@ export const FooterPagination = ({
     itemsPerPage,
     onNextPage,
     onPreviousPage,
-}: FooterPaginationProps) => {
+}: Props) => {
     const {formatMessage} = useIntl();
 
     const startCount = page * itemsPerPage;

webapp/platform/components/src/generic_modal/generic_modal.scss

@@ -3,8 +3,8 @@
 
 @charset 'UTF-8';
 
-@import 'utils/variables';
+@import '../../../../channels/src/sass/utils/variables';
-@import 'utils/mixins';
+@import '../../../../channels/src/sass/utils/mixins';
 
 .console__body .modal .GenericModal,
 .app__body .modal .GenericModal {

webapp/platform/components/src/generic_modal/generic_modal.test.tsx

@@ -4,10 +4,10 @@
 import React from 'react';
 import {render, screen} from '@testing-library/react';
 
-import {LegacyGenericModal} from './legacy_generic_modal';
+import {GenericModal} from './generic_modal';
 import {wrapIntl} from '../testUtils';
 
-describe('LegacyGenericModal', () => {
+describe('GenericModal', () => {
     const baseProps = {
         onExited: jest.fn(),
         modalHeaderText: 'Modal Header Text',
@@ -16,7 +16,7 @@ describe('LegacyGenericModal', () => {
 
     test('should match snapshot for base case', () => {
         const wrapper = render(
-            wrapIntl(<LegacyGenericModal {...baseProps}/>),
+            wrapIntl(<GenericModal {...baseProps}/>),
         );
 
         expect(wrapper).toMatchSnapshot();
@@ -30,7 +30,7 @@ describe('LegacyGenericModal', () => {
         };
 
         render(
-            wrapIntl(<LegacyGenericModal {...props}/>),
+            wrapIntl(<GenericModal {...props}/>),
         );
         
         expect(screen.getByText('Confirm')).toBeInTheDocument();

webapp/platform/components/src/generic_modal/generic_modal.tsx

@@ -7,6 +7,7 @@ import {Modal} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
 import {FocusTrap} from '../focus_trap';
+import './generic_modal.scss';
 
 export type Props = {
     className?: string;
@@ -53,7 +54,7 @@ type State = {
     isFocalTrapActive: boolean;
 }
 
-export class LegacyGenericModal extends React.PureComponent<Props, State> {
+export class GenericModal extends React.PureComponent<Props, State> {
     static defaultProps: Partial<Props> = {
         show: true,
         id: 'genericModal',

webapp/platform/components/src/index.tsx

@@ -2,20 +2,21 @@
 // See LICENSE.txt for license information.
 
 // type
-export type {Props as LegacyGenericModalProps} from './legacy_generic_modal/legacy_generic_modal';
+export type {Props as GenericModalProps} from './generic_modal/generic_modal';
 export type {CircleSkeletonLoaderProps, RectangleSkeletonLoaderProps} from './skeleton_loader';
 export type {Props as FocusTrapProps} from './focus_trap';
+export type {Props as PunchOutCoordsHeightAndWidth} from './common/hooks/useMeasurePunchouts';
 
 // components
-export * from './compass';
+export {GenericModal} from './generic_modal/generic_modal';
-export * from './legacy_generic_modal/footer_content';
+export {FooterPagination} from './footer_pagination/footer_pagination';
-export {LegacyGenericModal} from './legacy_generic_modal/legacy_generic_modal';
 export {CircleSkeletonLoader, RectangleSkeletonLoader} from './skeleton_loader';
-export * from './tour_tip';
+export {TourTip} from './tour_tip/tour_tip';
-export * from './pulsating_dot';
+export {TourTipBackdrop} from './tour_tip/tour_tip_backdrop';
+export {PulsatingDot} from './pulsating_dot';
 export {FocusTrap} from './focus_trap';
 
 // hooks
-export * from './common/hooks/useMeasurePunchouts';
+export {useMeasurePunchouts} from './common/hooks/useMeasurePunchouts';
 export {useElementAvailable} from './common/hooks/useElementAvailable';
 export {useFollowElementDimensions} from './common/hooks/useFollowElementDimensions';

webapp/platform/components/src/legacy_generic_modal/footer_content/index.ts

@@ -1,4 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-export * from './footer_pagination';

webapp/platform/components/src/tour_tip/tour_tip.tsx

@@ -7,7 +7,7 @@ import Tippy from '@tippyjs/react';
 import {Placement} from 'tippy.js';
 import classNames from 'classnames';
 
-import {PunchOutCoordsHeightAndWidth} from '../common/hooks/useMeasurePunchouts';
+import type {Props as PunchOutCoordsHeightAndWidth} from '../common/hooks/useMeasurePunchouts';
 
 import 'tippy.js/dist/tippy.css';
 import 'tippy.js/themes/light-border.css';

webapp/platform/components/src/tour_tip/tour_tip_backdrop.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import {PunchOutCoordsHeightAndWidth} from '../common/hooks/useMeasurePunchouts';
+import type {Props as PunchOutCoordsHeightAndWidth} from '../common/hooks/useMeasurePunchouts';
 
 type Props = {
     overlayPunchOut: PunchOutCoordsHeightAndWidth | null;

webapp/platform/types/src/theme.ts

@@ -1,33 +0,0 @@
-export type ThemeKey = 'denim' | 'sapphire' | 'quartz' | 'indigo' | 'onyx';
-
-export type LegacyThemeType = 'Mattermost' | 'Organization' | 'Mattermost Dark' | 'Windows Dark';
-
-export type ThemeType = 'Denim' | 'Sapphire' | 'Quartz' | 'Indigo' | 'Onyx';
-
-export type Theme = {
-    type?: ThemeType | 'custom';
-    sidebarBg: string;
-    sidebarText: string;
-    sidebarUnreadText: string;
-    sidebarTextHoverBg: string;
-    sidebarTextActiveBorder: string;
-    sidebarTextActiveColor: string;
-    sidebarHeaderBg: string;
-    sidebarTeamBarBg: string;
-    sidebarHeaderTextColor: string;
-    onlineIndicator: string;
-    awayIndicator: string;
-    dndIndicator: string;
-    mentionBg: string;
-    mentionColor: string;
-    centerChannelBg: string;
-    centerChannelColor: string;
-    newMessageSeparator: string;
-    linkColor: string;
-    buttonBg: string;
-    buttonColor: string;
-    errorTextColor: string;
-    mentionHighlightBg: string;
-    mentionHighlightLink: string;
-    codeTheme: string;
-};