@graphcommerce/magento-payment-tokens 10.0.0-canary.67 → 10.0.0-canary.68

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @graphcommerce/magento-payment-tokens
 
+## 10.0.0-canary.68
+
 ## 10.0.0-canary.67
 
 ## 10.0.0-canary.66

package/components/CustomerTokensPage/CustomerTokensPage.tsx

@@ -16,7 +16,7 @@ import {
 } from '@graphcommerce/next-ui'
 import { t } from '@lingui/core/macro'
 import { Trans } from '@lingui/react/macro'
-import { Alert, Box, Container, lighten, Typography } from '@mui/material'
+import { Alert, Box, Container, Typography } from '@mui/material'
 import type { PaymentTokenFragment } from '../../graphql/fragments/PaymentToken.gql'
 import { CustomerPaymentTokensDocument } from '../../graphql/queries/PaymentTokens.gql'
 import { DeletePaymentTokenButton } from '../DeletePaymentTokenButton'
@@ -43,32 +43,26 @@ export function CustomerTokensPage() {
           <Trans>Payment information</Trans>
         </LayoutTitle>
       </LayoutOverlayHeader>
-
       <Container maxWidth='md'>
         <PageMeta title={t`Payment information`} metaRobots={['noindex']} />
 
         <LayoutTitle icon={iconCreditCard} sx={(theme) => ({ mb: theme.spacings.xs })}>
           <Trans>Stored payment methods</Trans>
         </LayoutTitle>
-
         <WaitForCustomer waitFor={!loading}>
           {!paymentTokens?.length && (
             <Alert severity='info'>
               <Trans>No stored payment methods found.</Trans>
             </Alert>
           )}
-
-          <Box sx={sxx((theme) => ({ display: 'grid', rowGap: theme.spacings.xs }))}>
+          <Box sx={(theme) => ({ display: 'grid', rowGap: theme.spacings.xs })}>
             {paymentTokens?.map((token) => (
               <Box
                 key={token.public_hash}
                 sx={(theme) => ({
                   px: theme.spacings.xxs,
                   py: theme.spacings.xxs,
-                  background:
-                    theme.palette.mode === 'light'
-                      ? theme.palette.background.default
-                      : lighten(theme.palette.background.default, 0.15),
+                  background: theme.lighten(theme.vars.palette.background.default, 0.15),
                   ...breakpointVal(
                     'borderRadius',
                     theme.shape.borderRadius * 2,
@@ -82,6 +76,9 @@ export function CustomerTokensPage() {
                 `,
                   rowGap: 0.5,
                   columnGap: 1,
+                  ...theme.applyStyles('light', {
+                    background: theme.vars.palette.background.default,
+                  }),
                 })}
               >
                 <Box sx={{ gridArea: 'details', color: 'text.secondary' }}>{token.details}</Box>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-payment-tokens",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.0-canary.67",
+  "version": "10.0.0-canary.68",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,21 +12,21 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.67",
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/graphql": "^10.0.0-canary.67",
-    "@graphcommerce/image": "^10.0.0-canary.67",
-    "@graphcommerce/magento-cart": "^10.0.0-canary.67",
-    "@graphcommerce/magento-cart-payment-method": "^10.0.0-canary.67",
-    "@graphcommerce/magento-customer": "^10.0.0-canary.67",
-    "@graphcommerce/magento-store": "^10.0.0-canary.67",
-    "@graphcommerce/next-ui": "^10.0.0-canary.67",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.67",
+    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.68",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
+    "@graphcommerce/graphql": "^10.0.0-canary.68",
+    "@graphcommerce/image": "^10.0.0-canary.68",
+    "@graphcommerce/magento-cart": "^10.0.0-canary.68",
+    "@graphcommerce/magento-cart-payment-method": "^10.0.0-canary.68",
+    "@graphcommerce/magento-customer": "^10.0.0-canary.68",
+    "@graphcommerce/magento-store": "^10.0.0-canary.68",
+    "@graphcommerce/next-ui": "^10.0.0-canary.68",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.68",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.68",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",
-    "@mui/material": "^5.10.16",
+    "@mui/material": "^7.0.0",
     "framer-motion": "^11.0.0",
     "next": "*",
     "react": "^19.2.0",