@stigg/react-sdk 4.5.1 → 4.6.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.1",
+  "version": "4.6.1",
   "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/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/stories/baseArgs.ts

@@ -1,7 +1,7 @@
 export const defaultArgs = {
-  apiKey: process.env.API_KEY || 'place your api key here',
-  baseUri: process.env.BASE_URI || 'https://api.stigg.io',
-  disableEdge: Boolean(process.env.DISABLE_EDGE),
+  apiKey: process.env.API_KEY || 'client-8b907ff9-743d-4be2-ba10-c56d0ec1acc7:8d04a53d-14ad-4a9e-967b-8ed7d126297f',
+  baseUri: process.env.BASE_URI || 'http://localhost:4000',
+  disableEdge: true,
 };
 
 export const defaultArgsWithCustomer = {

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} />