@stigg/react-sdk 4.5.1 → 4.5.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.1",
+  "version": "4.5.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -108,7 +108,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@mui/material": "^5.10.13",
+    "@mui/material": "^5.12.0",
     "@stigg/js-client-sdk": "2.24.1",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.1",

package/src/components/checkout/components/Button.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import styled from '@emotion/styled/macro';
-import { Button as MuiButton, ButtonProps } from '@mui/material';
+import MuiButton, { ButtonProps } from '@mui/material/Button';
 
 export type StyledButtonProps = { $success?: boolean; $error?: boolean };
 

package/src/components/checkout/components/ChangePlanButton.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { ButtonProps } from '@mui/material/Button';
-import { Button } from '@mui/material';
+import Button, { ButtonProps } from '@mui/material/Button';
 import { Typography } from '../../common/Typography';
 import { CheckoutLocalization } from '../configurations/textOverrides';
 

package/src/components/checkout/components/ContentLoadingSkeleton.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Grid, Divider } from '@mui/material';
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
 import styled from '@emotion/styled/macro';
 import { FlexedSkeleton, FlexedSkeletonContainer, Skeleton, SkeletonsContainer } from './Skeletons.style';
 

package/src/components/checkout/components/DowngradeToFreeContainer.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled/macro';
-import { Alert, Box } from '@mui/material';
+import Box from '@mui/material/Box';
+import Alert from '@mui/material/Alert';
 import { CheckoutStatePlan, Subscription } from '@stigg/js-client-sdk';
 import { StyledArrowRightIcon } from './StyledArrow';
 import { Typography } from '../../common/Typography';

package/src/components/checkout/components/InputField.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
-import { OutlinedInputProps, TextField } from '@mui/material';
+import { OutlinedInputProps } from '@mui/material/OutlinedInput';
+import TextField from '@mui/material/TextField';
 
 export const InputField = styled(TextField)<OutlinedInputProps>(({ theme }) => ({
   '& .MuiOutlinedInput-root': {

package/src/components/checkout/components/Skeletons.style.ts

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled/macro';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import ReactSkeleton from 'react-loading-skeleton';
 
 export const SkeletonsContainer = styled(Grid, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{

package/src/components/checkout/configurations/theme.ts

@@ -21,7 +21,8 @@ const defaultCheckoutTheme: CheckoutTheme = {
 export function getResolvedCheckoutTheme(
   globalTheme: StiggTheme,
   themeOverride?: DeepPartial<CheckoutTheme>,
-  _remoteConfiguration?: CheckoutConfiguration | null, // all the remote colors override theme colors, no need to use them here
+  // all the remote colors override theme colors, no need to use them here
+  _remoteConfiguration?: CheckoutConfiguration | null,
 ): CheckoutTheme {
   const { palette: globalPalette } = globalTheme || {};
 

package/src/components/checkout/planHeader/PlanHeader.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Box, Divider } from '@mui/material';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
 
 import { Typography } from '../../common/Typography';
 import { useCheckoutModel } from '../hooks/useCheckoutModel';

package/src/components/checkout/progressBar/CheckoutProgressBar.style.ts

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled/macro';
-import { Button, buttonClasses, LinearProgress, linearProgressClasses } from '@mui/material';
+import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
+import Button, { buttonClasses } from '@mui/material/Button';
 import { Icon } from '../../common/Icon';
 
 export const StyledProgress = styled(LinearProgress, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{

package/src/components/checkout/progressBar/CheckoutProgressBar.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { Box, StepIcon, Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import StepIcon from '@mui/material/StepIcon';
 import { useCheckoutModel, useProgressBarModel } from '../hooks';
 import { Typography } from '../../common/Typography';
 import { StyledProgress, StyledStepButton, StyledIcon } from './CheckoutProgressBar.style';

package/src/components/checkout/promotionCode/AddPromotionCode.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 
 import styled from '@emotion/styled/macro';
-import { CircularProgress, Grid } from '@mui/material';
+import CircularProgress from '@mui/material/CircularProgress';
+import Grid from '@mui/material/Grid';
 
 import { Icon } from '../../common/Icon';
 import { Typography } from '../../common/Typography';

package/src/components/checkout/promotionCode/AppliedPromotionCode.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled/macro';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { Icon } from '../../common/Icon';
 import { Typography } from '../../common/Typography';
 import { Button } from '../components';

package/src/components/checkout/steps/addons/CheckoutAddonsStep.style.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled/macro';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 
 import { Button } from '../../components';
 

package/src/components/checkout/steps/addons/CheckoutAddonsStep.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { Addon, BillingPeriod, SubscriptionAddon } from '@stigg/js-client-sdk';
 
 import { Icon } from '../../../common/Icon';

package/src/components/checkout/steps/payment/PaymentMethods.style.ts

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 
 export const PaymentMethodContainer = styled(Grid, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{
   $disabled?: boolean;

package/src/components/checkout/steps/payment/PaymentMethods.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
-import { Collapse, Grid, Radio } from '@mui/material';
+import Collapse from '@mui/material/Collapse';
+import Grid from '@mui/material/Grid';
+import Radio from '@mui/material/Radio';
 import { Customer } from '@stigg/js-client-sdk';
 
 import { Icon, Icons } from '../../../common/Icon';

package/src/components/checkout/steps/payment/PaymentStep.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { Alert, Grid } from '@mui/material';
+import Alert from '@mui/material/Alert';
+import Grid from '@mui/material/Grid';
 import { useCheckoutModel, usePaymentStepModel } from '../../hooks';
 import { ExistingPaymentMethod, NewPaymentMethod } from './PaymentMethods';
 import { Typography } from '../../../common/Typography';

package/src/components/checkout/steps/payment/stripe/StripePaymentForm.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StripeAddressElementChangeEvent } from '@stripe/stripe-js';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { BillingAddress } from '@stigg/js-client-sdk';
 import { AddressElement, PaymentElement } from '@stripe/react-stripe-js';
 import { Typography } from '../../../../common/Typography';

package/src/components/checkout/steps/plan/BillingPeriodPicker.style.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled/macro';
-import { Box, Chip } from '@mui/material';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
 import Color from 'color';
 
 export const BillingPeriodPickerContainer = styled(Box)`

package/src/components/checkout/steps/plan/BillingPeriodPicker.tsx

@@ -2,7 +2,8 @@ import { partition } from 'lodash';
 import React from 'react';
 import { FontWeight } from 'styled-typography';
 
-import { Box, Radio } from '@mui/material';
+import Box from '@mui/material/Box';
+import Radio from '@mui/material/Radio';
 import { BillingPeriod, Plan } from '@stigg/js-client-sdk';
 
 import { Typography } from '../../../common/Typography';

package/src/components/checkout/steps/plan/CheckoutChargeList.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
 import styled from '@emotion/styled';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import { BillableFeatureInput } from '@stigg/api-client-js/src/generated/sdk';
 import { BillingModel, BillingPeriod, Plan, Price, PriceTierFragment } from '@stigg/js-client-sdk';
 

package/src/components/checkout/steps/plan/CheckoutPlanStep.style.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled/macro';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 
 export const CheckoutPlanContainer = styled(Box)`
   width: 100%;

package/src/components/checkout/summary/CheckoutSuccess.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled/macro';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import Color from 'color';
 import React from 'react';
 import Lottie from 'react-lottie';

package/src/components/checkout/summary/CheckoutSummary.tsx

@@ -1,7 +1,11 @@
 import React, { useState } from 'react';
 import partition from 'lodash/partition';
 import styled from '@emotion/styled/macro';
-import { Box, CircularProgress, Divider, Grid, Paper } from '@mui/material';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
 import { BillingModel } from '@stigg/js-client-sdk';
 import { PoweredByStigg } from '../../common/PoweredByStigg';
 import { Typography } from '../../common/Typography';

package/src/components/checkout/summary/components/LineItems.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled/macro';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import {
   BillingModel,
   BillingPeriod,

package/src/components/common/InformationTooltip.tsx

@@ -1,16 +1,20 @@
 import React from 'react';
-import { Tooltip, tooltipClasses, TooltipProps } from '@mui/material';
+import Tooltip, { tooltipClasses, TooltipProps } from '@mui/material/Tooltip';
 import styled from '@emotion/styled/macro';
 
-export type InformationTooltipProps = TooltipProps & { $padding?: number; $maxWidth?: number; };
+export type InformationTooltipProps = TooltipProps & { $padding?: number; $maxWidth?: number };
 
-export const InformationTooltip = styled(({ children, className, placement = 'top', ...props }: InformationTooltipProps) => (
-  <Tooltip arrow placement={placement} {...props} classes={{ popper: className, tooltip: 'stigg-tooltip', arrow: 'stigg-tooltip-arrow' }}>
-    <div>
-      {children}
-    </div>
-  </Tooltip>
-))(({ theme, $padding = 8, $maxWidth = 300 }) => ({
+export const InformationTooltip = styled(
+  ({ children, className, placement = 'top', ...props }: InformationTooltipProps) => (
+    <Tooltip
+      arrow
+      placement={placement}
+      {...props}
+      classes={{ popper: className, tooltip: 'stigg-tooltip', arrow: 'stigg-tooltip-arrow' }}>
+      <div>{children}</div>
+    </Tooltip>
+  ),
+)(({ theme, $padding = 8, $maxWidth = 300 }) => ({
   [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: theme.stigg.palette.white,
     maxWidth: $maxWidth,

package/src/components/common/LongText.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { TooltipProps } from '@mui/material';
+import { TooltipProps } from '@mui/material/Tooltip';
 import { InformationTooltip } from './InformationTooltip';
 import React from 'react';
 import { Typography, TypographyProps } from './Typography';
@@ -70,8 +70,7 @@ export const LongText = ({
       className={className}
       $display={display}
       style={style}
-      data-testid={dataTestId}
-    >
+      data-testid={dataTestId}>
       {children}
     </StyledText>
   );
@@ -91,8 +90,7 @@ export const LongText = ({
         <InformationTooltip
           placement={tooltipPlacement}
           leaveDelay={leaveDelay}
-          title={<Typography variant="body1">{children}</Typography>}
-        >
+          title={<Typography variant="body1">{children}</Typography>}>
           {content}
         </InformationTooltip>
       ) : (

package/src/components/common/TiersSelectContainer.tsx

@@ -1,5 +1,7 @@
 import { PriceTierFragment } from '@stigg/js-client-sdk';
-import { MenuItem, OutlinedInput, Select, SelectChangeEvent } from '@mui/material';
+import MenuItem from '@mui/material/MenuItem';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
 import { map } from 'lodash';
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled/macro';

package/src/components/customerPortal/billing/PaymentDetailsSection.tsx

@@ -3,7 +3,7 @@ import { useCustomerPortalContext } from '../CustomerPortalProvider';
 import { SectionTitle } from '../common/SectionTitle';
 import { SectionContainer } from '../common/SectionContainer';
 import { ExternalLinkButton } from '../common/ExternalLinkButton';
-import { Divider } from '@mui/material';
+import Divider from '@mui/material/Divider';
 import { InformationGrid, InformationGridContainer } from './InformationGrid';
 import { padStart } from 'lodash';
 import { SectionHeader } from '../common/SectionHeader';
@@ -108,8 +108,7 @@ export function PaymentDetailsSection() {
     <SectionContainer
       className="stigg-payment-details-section-layout"
       $backgroundColor={theme.backgroundColor}
-      $borderColor={theme.borderColor}
-    >
+      $borderColor={theme.borderColor}>
       <SectionHeader className="stigg-payment-details-section-header">
         <SectionTitle
           isLoading={isLoadingData}

package/src/components/customerPortal/subscriptionOverview/subscriptionScheduledUpdates/SubscriptionScheduledUpdateRow.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ArrowDown } from 'react-feather';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import {
   CustomerPortalSubscription,
   CustomerPortalSubscriptionScheduledUpdateDataFragment,
@@ -67,7 +67,7 @@ function SubscriptionScheduledUpdateUnitQuantityChangeRow({
   const newQuantityUnits = newUnitAmount === 1 ? featureUnits : featureUnitsPlural;
 
   return (
-    <Grid container alignItems="flex-start" flexWrap='nowrap'>
+    <Grid container alignItems="flex-start" flexWrap="nowrap">
       <Grid>
         <ArrowDown color="#D94052" height={20} className="stigg-scheduled-updates-arrow-down" />
       </Grid>

package/src/components/customerPortal/subscriptionOverview/subscriptionScheduledUpdates/SubscriptionScheduledUpdatesAlert.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { Box, Grid } from '@mui/material';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
 import { CustomerPortalSubscription } from '@stigg/js-client-sdk';
 import styled from '@emotion/styled/macro';
 import { Theme, useTheme } from '@emotion/react';
@@ -51,7 +52,7 @@ function MultipleScheduledUpdates({ subscription }: Pick<SubscriptionScheduledUp
         </Grid>
       </Grid>
       <Grid>
-        {(scheduledUpdates || []).map(scheduleUpdate => (
+        {(scheduledUpdates || []).map((scheduleUpdate) => (
           <SubscriptionScheduledUpdateRow
             key={scheduleUpdate.subscriptionScheduleType}
             scheduleUpdate={scheduleUpdate}
@@ -115,11 +116,10 @@ export function SubscriptionScheduledUpdatesAlert({
   return (
     <SubscriptionScheduleUpdateAlertContainer
       $borderColor={theme.borderColor}
-      className="stigg-scheduled-updates-alert-container"
-    >
+      className="stigg-scheduled-updates-alert-container">
       <Grid container alignItems={isSingleScheduledUpdate ? 'center' : 'flex-start'} gap={2}>
         <Grid item display="flex">
-          <Icon icon='ScheduleBox' svgPathColor={theme.iconsColor} svgRectColor={theme.iconsBackgroundColor}  />
+          <Icon icon="ScheduleBox" svgPathColor={theme.iconsColor} svgRectColor={theme.iconsBackgroundColor} />
         </Grid>
 
         <Grid item flex={1}>
@@ -137,8 +137,7 @@ export function SubscriptionScheduledUpdatesAlert({
               onClick={() => {
                 setIsLoading(true);
                 Promise.resolve(onCancelScheduledUpdates(subscription)).finally(() => setIsLoading(false));
-              }}
-            >
+              }}>
               {isLoading ? (
                 <LoadingIndicator loading size={16} color={stiggTheme.stigg.palette.text.disabled} />
               ) : (

package/src/components/customerPortal/subscriptionOverview/subscriptionView/TrialPanel.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import SandClockIcon from '../../../../assets/sand-clock.svg';
 import { Typography } from '../../../common/Typography';
 import { CustomerPortalSubscription, SubscriptionStatus } from '@stigg/js-client-sdk';
-import { Link } from '@mui/material';
+import Link from '@mui/material/Link';
 import { LongText } from '../../../common/LongText';
 
 const OnTrialBadge = styled.div`

package/src/components/customerPortal/usage/CustomerUsageData.style.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled/macro';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { range } from 'lodash';
 import Skeleton from 'react-loading-skeleton';
 import React from 'react';
@@ -18,4 +18,4 @@ export function CustomerUsageLoader() {
       ))}
     </Grid>
   );
-}
+}

package/src/components/customerPortal/usage/CustomerUsageData.tsx

@@ -9,7 +9,7 @@ import { SectionTitle } from '../common/SectionTitle';
 import { compact, keyBy } from 'lodash';
 import { StyledButton } from '../common/StyledButton';
 import { Minus, Plus } from 'react-feather';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { OnBuyMoreCallbackFn } from '../types';
 
 const MAX_BOXES = 6;
@@ -25,20 +25,26 @@ export function CustomerUsageData({ onManageSubscription, onBuyMore }: CustomerU
   const isLoadingData = isLoading || !customerPortal;
   const { entitlements, subscriptions } = customerPortal || {};
   const meteredEntitlements = entitlements?.filter(
-    entitlement =>
+    (entitlement) =>
       entitlement.feature?.meterType === MeterType.Fluctuating ||
       entitlement.feature?.meterType === MeterType.Incremental,
   );
   const activeSubscription = subscriptions?.find(({ status }) => status === SubscriptionStatus.Active);
   const hasCustomSubscription = activeSubscription?.pricingType === PricingType.Custom;
-  const canUpgradeSubscription = !!customerPortal?.canUpgradeSubscription
+  const canUpgradeSubscription = !!customerPortal?.canUpgradeSubscription;
 
   const subscriptionPriceByFeature = keyBy(activeSubscription?.prices, 'feature.refId');
   const entitlementByFeature = keyBy(meteredEntitlements, 'feature.refId');
 
   // sort features by prices first, then other entitlements
-  const priceEntitlements = compact(activeSubscription?.prices.map((subscriptionPrice) => subscriptionPrice.feature && entitlementByFeature[subscriptionPrice.feature.refId]));
-  const otherEntitlements = compact(meteredEntitlements?.filter((entitlement) => !subscriptionPriceByFeature[entitlement.feature!.refId]));
+  const priceEntitlements = compact(
+    activeSubscription?.prices.map(
+      (subscriptionPrice) => subscriptionPrice.feature && entitlementByFeature[subscriptionPrice.feature.refId],
+    ),
+  );
+  const otherEntitlements = compact(
+    meteredEntitlements?.filter((entitlement) => !subscriptionPriceByFeature[entitlement.feature!.refId]),
+  );
   const sortedEntitlements = [...priceEntitlements, ...otherEntitlements];
 
   // 4 -> 3 per row, 6 -> 2 per row
@@ -46,7 +52,7 @@ export function CustomerUsageData({ onManageSubscription, onBuyMore }: CustomerU
 
   const entitlementsToShow = showAll ? sortedEntitlements : sortedEntitlements.slice(0, MAX_BOXES);
 
-  const toggleShowAll = () => setShowAll(prevState => !prevState);
+  const toggleShowAll = () => setShowAll((prevState) => !prevState);
 
   if (!isLoadingData && !meteredEntitlements?.length) {
     return null;
@@ -57,9 +63,12 @@ export function CustomerUsageData({ onManageSubscription, onBuyMore }: CustomerU
       className="stigg-subscription-usage-layout"
       $backgroundColor={theme.backgroundColor}
       $borderColor={theme.borderColor}>
-
       <SectionHeader>
-        <SectionTitle title={textOverrides.usageTabTitle} className="stigg-customer-portal-usage-section-title" isLoading={isLoadingData} />
+        <SectionTitle
+          title={textOverrides.usageTabTitle}
+          className="stigg-customer-portal-usage-section-title"
+          isLoading={isLoadingData}
+        />
       </SectionHeader>
 
       {isLoadingData ? (
@@ -71,7 +80,7 @@ export function CustomerUsageData({ onManageSubscription, onBuyMore }: CustomerU
               <Grid item xs={xs}>
                 <FeatureUsage
                   key={entitlement.feature!.refId}
-                  subscriptionPrice={subscriptionPriceByFeature[(entitlement.feature!.refId)]}
+                  subscriptionPrice={subscriptionPriceByFeature[entitlement.feature!.refId]}
                   entitlement={entitlement}
                   onManageSubscription={onManageSubscription}
                   onBuyMore={onBuyMore}
@@ -85,17 +94,16 @@ export function CustomerUsageData({ onManageSubscription, onBuyMore }: CustomerU
           {sortedEntitlements.length > MAX_BOXES && (
             <Footer>
               <StyledButton
-                  className="stigg-usage-toggle-many-button"
-                  variant="text"
-                  startIcon={showAll ? <Minus /> : <Plus />}
-                  onClick={toggleShowAll}
-              >
+                className="stigg-usage-toggle-many-button"
+                variant="text"
+                startIcon={showAll ? <Minus /> : <Plus />}
+                onClick={toggleShowAll}>
                 {showAll ? 'Show less' : 'Show more'}
               </StyledButton>
             </Footer>
           )}
-          </>
+        </>
       )}
     </SectionContainer>
   );
-}
+}

package/src/components/customerPortal/usage/featureUsage/FeatureUsageProgressBar.tsx

@@ -3,15 +3,12 @@ import LinearProgress from '@mui/material/LinearProgress';
 import { getUsagePercentage, getUsageProgressStatus } from './FeatureUsage.helper';
 import React from 'react';
 import { CustomerPortalEntitlement } from '@stigg/js-client-sdk';
-import { Divider } from '@mui/material';
+import Divider from '@mui/material/Divider';
 import Color from 'color';
 
 export const StyledLinearProgress = styled(LinearProgress)<{ $progressStatus: 'standard' | 'warning' | 'error' }>`
   height: 4px;
-  background-color: ${({ theme }) =>
-    Color(theme.stigg.palette.primary)
-      .alpha(0.4)
-      .string()};
+  background-color: ${({ theme }) => Color(theme.stigg.palette.primary).alpha(0.4).string()};
 
   span {
     background-color: ${({ $progressStatus, theme }) => {
@@ -32,10 +29,7 @@ export const StyledLinearProgress = styled(LinearProgress)<{ $progressStatus: 's
 export const StyledDivider = styled(Divider)`
   border-style: dotted;
   border-bottom-width: 2px;
-  border-color: ${({ theme }) =>
-    Color(theme.stigg.palette.outlinedRestingBorder)
-      .alpha(0.4)
-      .string()};
+  border-color: ${({ theme }) => Color(theme.stigg.palette.outlinedRestingBorder).alpha(0.4).string()};
 `;
 
 export type FeatureUsageProgressBarProps = {

package/src/components/paywall/PlanOffering.tsx

@@ -8,7 +8,7 @@ import { PaywallLocalization } from './paywallTextOverrides';
 import { flexLayoutMapper } from '../../theme/getResolvedTheme';
 import { Typography } from '../common/Typography';
 import classNames from 'classnames';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import MiniSchedule from '../../assets/mini-schedule.svg';
 import { PlanPrice } from './PlanPrice';
 import { getSelectedTier } from '../utils/priceTierUtils';
@@ -134,9 +134,9 @@ export function PlanOffering({
   withStartingAtRow,
 }: PlanOfferingProps) {
   const isNextPlan = plan.isNextPlan && plan.isNextPlan(billingPeriod);
-  const planPrices = plan.pricePoints.filter(pricePoint => pricePoint.billingPeriod === billingPeriod);
+  const planPrices = plan.pricePoints.filter((pricePoint) => pricePoint.billingPeriod === billingPeriod);
   const paywallCalculatedPrice = plan.paywallCalculatedPricePoints?.find(
-    pricePoint => pricePoint.billingPeriod === billingPeriod,
+    (pricePoint) => pricePoint.billingPeriod === billingPeriod,
   );
   const showStartingAt = planPrices.length > 1 && !!paywallCalculatedPrice?.additionalChargesMayApply;
 
@@ -162,7 +162,7 @@ export function PlanOffering({
   }, [billingPeriod]);
 
   const onPlanButtonClick = (intentionType: SubscribeIntentionType) => {
-    const billableFeatures: BillableFeature[] = Object.keys(selectedTierByFeature).map(featureId => ({
+    const billableFeatures: BillableFeature[] = Object.keys(selectedTierByFeature).map((featureId) => ({
       featureId,
       quantity: selectedTierByFeature[featureId].upTo,
     }));
@@ -176,8 +176,7 @@ export function PlanOffering({
         'stigg-current-plan': plan.isCurrentCustomerPlan,
       })}
       $isHighlighted={isHighlighted}
-      $isCurrentPlan={plan.isCurrentCustomerPlan}
-    >
+      $isCurrentPlan={plan.isCurrentCustomerPlan}>
       {planBadge}
 
       <HeaderWrapper className="stigg-header-wrapper">

package/src/theme/Theme.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider as StyledThemeProvider } from 'styled-components';
 import { TypographyProps } from 'styled-typography';
 import { css, ThemeProvider } from '@emotion/react';
 import styled from '@emotion/styled/macro';
-import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { createTheme, ThemeProvider as MuiThemeProvider, THEME_ID } from '@mui/material/styles';
 import { useStiggContext } from '../components/StiggProvider';
 import { DeepPartial } from '../types';
 import { Fonts } from './Fonts';
@@ -72,11 +72,12 @@ const createMuiPalette = (theme: StiggTheme) => {
 export const SdkThemeProvider: React.FC<PropsWithChildren<SdkThemeProviderProps>> = ({ children, componentTheme }) => {
   const theme = useStiggTheme(componentTheme);
   const muiPalette = createMuiPalette(theme);
+  const materialTheme = createTheme({ palette: muiPalette, stigg: theme });
 
   return (
     // We are using styled-components theme here only because we are using styled-typography
     // which depends on styled-components for the typography theming
-    <MuiThemeProvider theme={createTheme({ palette: muiPalette, stigg: theme })}>
+    <MuiThemeProvider theme={{ [THEME_ID]: materialTheme }}>
       <ThemeProvider theme={{ stigg: theme }}>
         <CustomCssGlobal customCss={theme.customCss}>
           <Fonts externalFontUrl={theme.typography.fontFamilyUrl} />