@eventlook/sdk 1.4.49-beta.6 → 1.4.49-beta.8

package/dist/esm/form/extra-field/ReleaseExtraFields.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReleaseExtraFields.js","sources":["../../../../src/form/extra-field/ReleaseExtraFields.tsx"],"sourcesContent":["import React, { useEffect, memo } from 'react';\nimport { Box, Grid, Stack, Typography } from '@mui/material';\nimport ExtraField from '@form/extra-field/ExtraField';\nimport { IReleaseShort } from '@utils/types/release.type';\nimport { ITicketForm } from '@utils/types/ticket.type';\nimport { useFormContext } from 'react-hook-form';\nimport { IExtraFieldForm } from '@utils/types/extra-field.type';\nimport useGlobal from '@hooks/useGlobal.ts';\n\ninterface Props {\n  release: IReleaseShort;\n  eventId: number;\n  releaseIndex: number;\n  quantity: number;\n}\n\nconst ReleaseExtraFields: React.FC<Props> = ({ release, eventId, releaseIndex, quantity }) => {\n  const { t } = useGlobal();\n  const { getValues, setValue } = useFormContext<ITicketForm>();\n\n  useEffect(() => {\n    if (releaseIndex < 0 || quantity <= 0 || !release?.extraFields?.length) return;\n\n    const path = `tickets.${eventId}.${releaseIndex}.extraFields` as const;\n    const current = (getValues(path) as IExtraFieldForm[][] | undefined) || [];\n    const wantRows = quantity;\n    const wantCols = release.extraFields.length;\n\n    const curRows = current.length;\n    const curCols = current[0]?.length ?? 0;\n\n    const buildMatrix = (): IExtraFieldForm[][] => {\n      const matrix: IExtraFieldForm[][] = Array.from({ length: wantRows }, (_, r) =>\n        Array.from({ length: wantCols }, (_, c) => {\n          const prev = current[r]?.[c];\n          return {\n            eventExtraFieldId: release.extraFields ? Number(release.extraFields[c].id) : 0,\n            value: typeof prev?.value === 'string' ? prev!.value : '',\n          };\n        })\n      );\n      return matrix;\n    };\n\n    const needResize = curRows !== wantRows || curCols !== wantCols;\n    const needFixIds =\n      !needResize &&\n      current.some((row, r) =>\n        row.some(\n          (cell, c) =>\n            release.extraFields &&\n            Number(cell?.eventExtraFieldId) !== Number(release.extraFields[c].id)\n        )\n      );\n\n    if (needResize || needFixIds) {\n      const next = buildMatrix();\n      setValue(path, next, {\n        shouldDirty: true,\n        shouldValidate: false,\n        shouldTouch: false,\n      });\n    }\n  }, [releaseIndex, quantity, release.extraFields, getValues, setValue]);\n\n  if (releaseIndex < 0 || quantity <= 0) return null;\n\n  return (\n    <Stack spacing={2}>\n      {Array.from({ length: quantity }).map((_, rowIdx) => (\n        <Stack key={rowIdx} spacing={1}>\n          <Typography variant=\"body1\" fontWeight={700}>\n            {rowIdx + 1}. {t('form.labels.ticket')}\n          </Typography>\n          <Box>\n            <Grid container spacing={3}>\n              {release.extraFields?.map((field, colIdx) => (\n                <Grid key={field.id} item xs={12} md={6}>\n                  <ExtraField\n                    extraField={field}\n                    name={`tickets.${eventId}.${releaseIndex}.extraFields.${rowIdx}.${colIdx}.value`}\n                    size=\"small\"\n                  />\n                </Grid>\n              ))}\n            </Grid>\n          </Box>\n        </Stack>\n      ))}\n    </Stack>\n  );\n};\n\nexport default memo(ReleaseExtraFields);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ReleaseExtraFields.js","sources":["../../../../src/form/extra-field/ReleaseExtraFields.tsx"],"sourcesContent":["import React, { useEffect, memo } from 'react';\nimport { Box, Grid, Stack, Typography } from '@mui/material';\nimport ExtraField from '@form/extra-field/ExtraField';\nimport { IReleaseShort } from '@utils/types/release.type';\nimport { ITicketForm } from '@utils/types/ticket.type';\nimport { useFormContext } from 'react-hook-form';\nimport { IExtraFieldForm } from '@utils/types/extra-field.type';\nimport useGlobal from '@hooks/useGlobal.ts';\n\ninterface Props {\n  release: IReleaseShort;\n  eventId: number;\n  releaseIndex: number;\n  quantity: number;\n}\n\nconst ReleaseExtraFields: React.FC<Props> = ({ release, eventId, releaseIndex, quantity }) => {\n  const { t } = useGlobal();\n  const { getValues, setValue } = useFormContext<ITicketForm>();\n\n  useEffect(() => {\n    if (releaseIndex < 0 || quantity <= 0 || !release?.extraFields?.length) return;\n\n    const path = `tickets.${eventId}.${releaseIndex}.extraFields` as const;\n    const current = (getValues(path) as IExtraFieldForm[][] | undefined) || [];\n    const wantRows = quantity;\n    const wantCols = release.extraFields.length;\n\n    const curRows = current.length;\n    const curCols = current[0]?.length ?? 0;\n\n    const buildMatrix = (): IExtraFieldForm[][] => {\n      const matrix: IExtraFieldForm[][] = Array.from({ length: wantRows }, (_, r) =>\n        Array.from({ length: wantCols }, (_, c) => {\n          const prev = current[r]?.[c];\n          return {\n            eventExtraFieldId: release.extraFields ? Number(release.extraFields[c].id) : 0,\n            value: typeof prev?.value === 'string' ? prev!.value : '',\n          };\n        })\n      );\n      return matrix;\n    };\n\n    const needResize = curRows !== wantRows || curCols !== wantCols;\n    const needFixIds =\n      !needResize &&\n      current.some((row, r) =>\n        row.some(\n          (cell, c) =>\n            release.extraFields &&\n            Number(cell?.eventExtraFieldId) !== Number(release.extraFields[c].id)\n        )\n      );\n\n    if (needResize || needFixIds) {\n      const next = buildMatrix();\n      setValue(path, next, {\n        shouldDirty: true,\n        shouldValidate: false,\n        shouldTouch: false,\n      });\n    }\n  }, [releaseIndex, quantity, release.extraFields, getValues, setValue]);\n\n  if (releaseIndex < 0 || quantity <= 0) return null;\n\n  return (\n    <Stack spacing={2}>\n      {Array.from({ length: quantity }).map((_, rowIdx) => (\n        <Stack key={rowIdx} spacing={1}>\n          <Typography variant=\"body1\" fontWeight={700}>\n            {rowIdx + 1}. {t('form.labels.ticket')}\n          </Typography>\n          <Box>\n            <Grid container spacing={3}>\n              {release.extraFields?.map((field, colIdx) => (\n                <Grid key={field.id} size={{ xs: 12, md: 6 }}>\n                  <ExtraField\n                    extraField={field}\n                    name={`tickets.${eventId}.${releaseIndex}.extraFields.${rowIdx}.${colIdx}.value`}\n                    size=\"small\"\n                  />\n                </Grid>\n              ))}\n            </Grid>\n          </Box>\n        </Stack>\n      ))}\n    </Stack>\n  );\n};\n\nexport default memo(ReleaseExtraFields);\n"],"names":[],"mappings":"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"}

package/dist/esm/form/merchandise/MerchandiseSelection.js

@@ -3,7 +3,7 @@ import { Grid } from '@mui/material';
 import CustomSkeleton from '../../components/CustomSkeleton.js';
 import MerchandiseSlider from './MerchandiseSlider.js';
 
-const MerchandiseSelection = ({ eventProducts, eventId, isLoading }) => isLoading ? ([...Array(3)].map((item) => (React.createElement(Grid, { key: item, item: true, xs: 12, md: 4 },
+const MerchandiseSelection = ({ eventProducts, eventId, isLoading }) => isLoading ? ([...Array(3)].map((item) => (React.createElement(Grid, { key: item, size: { xs: 12, md: 4 } },
     React.createElement(CustomSkeleton, { height: 334 }))))) : (React.createElement(MerchandiseSlider, { eventProducts: eventProducts, eventId: eventId }));
 
 export { MerchandiseSelection as default };

package/dist/esm/form/merchandise/MerchandiseSelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"MerchandiseSelection.js","sources":["../../../../src/form/merchandise/MerchandiseSelection.tsx"],"sourcesContent":["import React from 'react';\nimport { Grid } from '@mui/material';\nimport { IEventProduct } from '@utils/types/event-product.type';\nimport CustomSkeleton from '@components/CustomSkeleton';\nimport MerchandiseSlider from './MerchandiseSlider';\n\ninterface Props {\n  eventProducts: IEventProduct[];\n  eventId: number;\n  isLoading?: boolean;\n}\n\nconst MerchandiseSelection: React.FC<Props> = ({ eventProducts, eventId, isLoading }) =>\n  isLoading ? (\n    [...Array(3)].map((item) => (\n      <Grid key={item} item xs={12} md={4}>\n        <CustomSkeleton height={334} />\n      </Grid>\n    ))\n  ) : (\n    <MerchandiseSlider eventProducts={eventProducts} eventId={eventId} />\n  );\n\nexport default MerchandiseSelection;\n"],"names":[],"mappings":";;;;;AAYA,MAAM,oBAAoB,GAAoB,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,KAClF,SAAS,IACP,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,MACrB,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAA,IAAA,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAA;IACjC,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,MAAM,EAAE,GAAG,EAAA,CAAI,CAC1B,CACR,CAAC,KAEF,KAAA,CAAA,aAAA,CAAC,iBAAiB,EAAA,EAAC,aAAa,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,EAAA,CAAI;;;;"}
+{"version":3,"file":"MerchandiseSelection.js","sources":["../../../../src/form/merchandise/MerchandiseSelection.tsx"],"sourcesContent":["import React from 'react';\nimport { Grid } from '@mui/material';\nimport { IEventProduct } from '@utils/types/event-product.type';\nimport CustomSkeleton from '@components/CustomSkeleton';\nimport MerchandiseSlider from './MerchandiseSlider';\n\ninterface Props {\n  eventProducts: IEventProduct[];\n  eventId: number;\n  isLoading?: boolean;\n}\n\nconst MerchandiseSelection: React.FC<Props> = ({ eventProducts, eventId, isLoading }) =>\n  isLoading ? (\n    [...Array(3)].map((item) => (\n      <Grid key={item} size={{ xs: 12, md: 4 }}>\n        <CustomSkeleton height={334} />\n      </Grid>\n    ))\n  ) : (\n    <MerchandiseSlider eventProducts={eventProducts} eventId={eventId} />\n  );\n\nexport default MerchandiseSelection;\n"],"names":[],"mappings":";;;;;AAYA,MAAM,oBAAoB,GAAoB,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,KAClF,SAAS,IACP,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,MACrB,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAA;IACtC,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,MAAM,EAAE,GAAG,EAAA,CAAI,CAC1B,CACR,CAAC,KAEF,KAAA,CAAA,aAAA,CAAC,iBAAiB,EAAA,EAAC,aAAa,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,EAAA,CAAI;;;;"}

package/dist/esm/form/merchandise/MerchandiseSlider.js

@@ -11,7 +11,7 @@ const MerchandiseSlider = ({ eventProducts, eventId, sx }) => {
         React.createElement(Box, { sx: {
                 overflow: 'hidden',
                 padding: theme.spacing(8, 3),
-                margin: theme.spacing(-8, -3),
+                margin: theme.spacing(-8, -2.5),
             } },
             React.createElement(Box, { ref: emblaRef, className: "embla", sx: { overflow: 'visible' } },
                 React.createElement(Box, { className: "embla__container", sx: {

package/dist/esm/form/merchandise/MerchandiseSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"MerchandiseSlider.js","sources":["../../../../src/form/merchandise/MerchandiseSlider.tsx"],"sourcesContent":["import React from 'react';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport { Box, SxProps } from '@mui/material';\nimport { useTheme } from '@mui/material/styles';\nimport { IEventProduct } from '@utils/types/event-product.type';\nimport ProductCard from '@form/product/ProductCard';\n\ninterface Props {\n  sx?: SxProps;\n  eventProducts: IEventProduct[];\n  eventId: number;\n}\n\nconst MerchandiseSlider: React.FC<Props> = ({ eventProducts, eventId, sx }) => {\n  const [emblaRef] = useEmblaCarousel();\n  const theme = useTheme();\n\n  return (\n    <Box sx={sx}>\n      <Box\n        sx={{\n          overflow: 'hidden',\n          padding: theme.spacing(8, 3),\n          margin: theme.spacing(-8, -3),\n        }}\n      >\n        <Box ref={emblaRef} className=\"embla\" sx={{ overflow: 'visible' }}>\n          <Box\n            className=\"embla__container\"\n            sx={{\n              display: 'flex',\n            }}\n          >\n            {eventProducts.map((eventProduct, index) => (\n              <Box\n                key={`event-slide-${index}`}\n                className=\"embla__slide\"\n                sx={{\n                  flex: `0 0 ${eventProducts.length > 1 ? '78%' : '100%'}`,\n                  minWidth: 0,\n                  maxWidth: 220,\n                  margin: `0 ${theme.spacing(0.5)}`,\n                  transition: 'opacity 0.2s ease',\n                  [theme.breakpoints.up('sm')]: {\n                    flex: '0 0 43%',\n                  },\n                  [theme.breakpoints.up('md')]: {\n                    flex: '0 0 33.3333%',\n                  },\n                }}\n              >\n                <ProductCard eventProduct={eventProduct} eventId={eventId} isOnlyMerchandise />\n              </Box>\n            ))}\n          </Box>\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n\nexport default MerchandiseSlider;\n"],"names":[],"mappings":";;;;;;AAaA,MAAM,iBAAiB,GAAoB,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,EAAE,EAAE,KAAI;AAC5E,IAAA,MAAM,CAAC,QAAQ,CAAC,GAAG,gBAAgB,EAAE;AACrC,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;AAExB,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,EAAE,EAAE,EAAE,EAAA;QACT,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EACF,EAAE,EAAE;AACF,gBAAA,QAAQ,EAAE,QAAQ;gBAClB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;gBAC5B,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,CAAC;AAC9B,aAAA,EAAA;AAED,YAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAA;AAC/D,gBAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EACF,SAAS,EAAC,kBAAkB,EAC5B,EAAE,EAAE;AACF,wBAAA,OAAO,EAAE,MAAM;qBAChB,EAAA,EAEA,aAAa,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,MACrC,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EACF,GAAG,EAAE,CAAA,YAAA,EAAe,KAAK,CAAA,CAAE,EAC3B,SAAS,EAAC,cAAc,EACxB,EAAE,EAAE;AACF,wBAAA,IAAI,EAAE,CAAA,IAAA,EAAO,aAAa,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,GAAG,MAAM,CAAA,CAAE;AACxD,wBAAA,QAAQ,EAAE,CAAC;AACX,wBAAA,QAAQ,EAAE,GAAG;wBACb,MAAM,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA,CAAE;AACjC,wBAAA,UAAU,EAAE,mBAAmB;wBAC/B,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;AAC5B,4BAAA,IAAI,EAAE,SAAS;AAChB,yBAAA;wBACD,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;AAC5B,4BAAA,IAAI,EAAE,cAAc;AACrB,yBAAA;AACF,qBAAA,EAAA;oBAED,KAAA,CAAA,aAAA,CAAC,WAAW,IAAC,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAA,IAAA,EAAA,CAAG,CAC3E,CACP,CAAC,CACE,CACF,CACF,CACF;AAEV;;;;"}
+{"version":3,"file":"MerchandiseSlider.js","sources":["../../../../src/form/merchandise/MerchandiseSlider.tsx"],"sourcesContent":["import React from 'react';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport { Box, SxProps } from '@mui/material';\nimport { useTheme } from '@mui/material/styles';\nimport { IEventProduct } from '@utils/types/event-product.type';\nimport ProductCard from '@form/product/ProductCard';\n\ninterface Props {\n  sx?: SxProps;\n  eventProducts: IEventProduct[];\n  eventId: number;\n}\n\nconst MerchandiseSlider: React.FC<Props> = ({ eventProducts, eventId, sx }) => {\n  const [emblaRef] = useEmblaCarousel();\n  const theme = useTheme();\n\n  return (\n    <Box sx={sx}>\n      <Box\n        sx={{\n          overflow: 'hidden',\n          padding: theme.spacing(8, 3),\n          margin: theme.spacing(-8, -2.5),\n        }}\n      >\n        <Box ref={emblaRef} className=\"embla\" sx={{ overflow: 'visible' }}>\n          <Box\n            className=\"embla__container\"\n            sx={{\n              display: 'flex',\n            }}\n          >\n            {eventProducts.map((eventProduct, index) => (\n              <Box\n                key={`event-slide-${index}`}\n                className=\"embla__slide\"\n                sx={{\n                  flex: `0 0 ${eventProducts.length > 1 ? '78%' : '100%'}`,\n                  minWidth: 0,\n                  maxWidth: 220,\n                  margin: `0 ${theme.spacing(0.5)}`,\n                  transition: 'opacity 0.2s ease',\n                  [theme.breakpoints.up('sm')]: {\n                    flex: '0 0 43%',\n                  },\n                  [theme.breakpoints.up('md')]: {\n                    flex: '0 0 33.3333%',\n                  },\n                }}\n              >\n                <ProductCard eventProduct={eventProduct} eventId={eventId} isOnlyMerchandise />\n              </Box>\n            ))}\n          </Box>\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n\nexport default MerchandiseSlider;\n"],"names":[],"mappings":";;;;;;AAaA,MAAM,iBAAiB,GAAoB,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,EAAE,EAAE,KAAI;AAC5E,IAAA,MAAM,CAAC,QAAQ,CAAC,GAAG,gBAAgB,EAAE;AACrC,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;AAExB,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,EAAE,EAAE,EAAE,EAAA;QACT,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EACF,EAAE,EAAE;AACF,gBAAA,QAAQ,EAAE,QAAQ;gBAClB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;gBAC5B,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC;AAChC,aAAA,EAAA;AAED,YAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAA;AAC/D,gBAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EACF,SAAS,EAAC,kBAAkB,EAC5B,EAAE,EAAE;AACF,wBAAA,OAAO,EAAE,MAAM;qBAChB,EAAA,EAEA,aAAa,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,MACrC,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EACF,GAAG,EAAE,CAAA,YAAA,EAAe,KAAK,CAAA,CAAE,EAC3B,SAAS,EAAC,cAAc,EACxB,EAAE,EAAE;AACF,wBAAA,IAAI,EAAE,CAAA,IAAA,EAAO,aAAa,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,GAAG,MAAM,CAAA,CAAE;AACxD,wBAAA,QAAQ,EAAE,CAAC;AACX,wBAAA,QAAQ,EAAE,GAAG;wBACb,MAAM,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA,CAAE;AACjC,wBAAA,UAAU,EAAE,mBAAmB;wBAC/B,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;AAC5B,4BAAA,IAAI,EAAE,SAAS;AAChB,yBAAA;wBACD,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;AAC5B,4BAAA,IAAI,EAAE,cAAc;AACrB,yBAAA;AACF,qBAAA,EAAA;oBAED,KAAA,CAAA,aAAA,CAAC,WAAW,IAAC,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAA,IAAA,EAAA,CAAG,CAC3E,CACP,CAAC,CACE,CACF,CACF,CACF;AAEV;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventlook/sdk",
-  "version": "1.4.49-beta.6",
+  "version": "1.4.49-beta.8",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -57,8 +57,8 @@
     "@hookform/resolvers": "^5.0.1",
     "@iconify/icons-carbon": "^1.2.20",
     "@iconify/react": "^6.0.0",
-    "@mui/lab": "^5.0.0-alpha.87",
-    "@mui/material": "^5.8.5",
+    "@mui/lab": "^7.0.0",
+    "@mui/material": "^7.3.8",
     "@mui/x-date-pickers": "^6.3.0",
     "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-json": "^6.1.0",

package/src/components/TicketFormSkeleton.tsx

@@ -4,19 +4,19 @@ import CustomSkeleton from '@components/CustomSkeleton';
 
 const TicketFormSkeleton: React.FC = () => (
   <Grid container spacing={2}>
-    <Grid item xs={12} md={8}>
+    <Grid size={{ xs: 12, md: 8 }}>
       <Box>
         <Typography variant="h6" gutterBottom>
           <CustomSkeleton variant="text" sx={{ maxWidth: 300 }} />
         </Typography>
         <Grid container spacing={2} mb={2}>
-          <Grid item xs={12} md={6}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <CustomSkeleton variant="rectangular" height={56} />
           </Grid>
-          <Grid item xs={12} md={6}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <CustomSkeleton variant="rectangular" height={56} />
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <CustomSkeleton variant="text" width="60%" />
           </Grid>
         </Grid>
@@ -28,22 +28,22 @@ const TicketFormSkeleton: React.FC = () => (
           <CustomSkeleton variant="text" sx={{ maxWidth: 300 }} />
         </Typography>
         <Grid container spacing={2} mb={2}>
-          <Grid item xs={12} md={6}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <CustomSkeleton variant="rectangular" height={56} />
           </Grid>
-          <Grid item xs={12} md={6}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <CustomSkeleton variant="rectangular" height={56} />
           </Grid>
-          <Grid item xs={12} md={6}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <CustomSkeleton variant="rectangular" height={56} />
           </Grid>
-          <Grid item xs={12} md={6}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <CustomSkeleton variant="rectangular" height={56} />
           </Grid>
-          <Grid item xs={12} md={6}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <CustomSkeleton variant="rectangular" height={56} />
           </Grid>
-          <Grid item xs={12} md={6}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <CustomSkeleton variant="rectangular" height={56} />
           </Grid>
         </Grid>
@@ -55,10 +55,10 @@ const TicketFormSkeleton: React.FC = () => (
           <CustomSkeleton variant="text" sx={{ maxWidth: 300 }} />
         </Typography>
         <Grid container spacing={2} mb={2}>
-          <Grid item xs={12} md={8}>
+          <Grid size={{ xs: 12, md: 8 }}>
             <CustomSkeleton variant="rectangular" height={56} />
           </Grid>
-          <Grid item xs={12} md={4}>
+          <Grid size={{ xs: 12, md: 4 }}>
             <CustomSkeleton variant="rectangular" height={56} />
           </Grid>
         </Grid>
@@ -72,7 +72,7 @@ const TicketFormSkeleton: React.FC = () => (
         </Stack>
       </Box>
     </Grid>
-    <Grid item xs={12} md={4}>
+    <Grid size={{ xs: 12, md: 4 }}>
       <Box>
         <CustomSkeleton height={370} />
       </Box>

package/src/form/ChildEventCard.tsx

@@ -42,7 +42,7 @@ const ChildEventCard: React.FC<Props> = ({ event }) => {
       <Card sx={{ p: 2 }}>
         <Grid container spacing={6} alignItems="stretch">
           {/* LEFT SIDE: Image + Button */}
-          <Grid item xs={12} md={6} sx={{ display: 'flex', flexDirection: 'column' }}>
+          <Grid size={{ xs: 12, md: 6 }} sx={{ display: 'flex', flexDirection: 'column' }}>
             <Image src={event.image.url} alt={event.name} ratio="16/9" borderRadius={2} />
             <Button
               variant="contained"
@@ -59,9 +59,7 @@ const ChildEventCard: React.FC<Props> = ({ event }) => {
 
           {/* RIGHT SIDE: Info block with bottom aligned date + organizer */}
           <Grid
-            item
-            xs={12}
-            md={6}
+            size={{ xs: 12, md: 6 }}
             sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}
           >
             <Stack spacing={2}>

package/src/form/ChildEvents.tsx

@@ -13,12 +13,12 @@ const ChildEventSection: React.FC<Props> = ({ events, isLoading }) => (
   <Grid container spacing={3}>
     {isLoading
       ? [...Array(3)].map((item) => (
-          <Grid key={item} item xs={12} md={12}>
+          <Grid key={item} size={12}>
             <CustomSkeleton height={334} />
           </Grid>
         ))
       : events?.map((event) => (
-          <Grid key={event.id} item xs={12} md={12}>
+          <Grid key={event.id} size={12}>
             <ChildEventCard event={event} />
           </Grid>
         ))}

package/src/form/ContactPerson.tsx

@@ -19,16 +19,16 @@ const ContactPerson: React.FC<Props> = ({ event }) => {
 
   return (
     <Grid container spacing={{ xs: 1, md: 2 }}>
-      <Grid item xs={12} md={6}>
+      <Grid size={{ xs: 12, md: 6 }}>
         <RHFTextField name="firstName" label={t('form.labels.first_name')} />
       </Grid>
-      <Grid item xs={12} md={6}>
+      <Grid size={{ xs: 12, md: 6 }}>
         <RHFTextField name="lastName" label={t('form.labels.last_name')} />
       </Grid>
-      <Grid item xs={12} md={6}>
+      <Grid size={{ xs: 12, md: 6 }}>
         <RHFTextField name="email" label={t('form.labels.email')} />
       </Grid>
-      <Grid item xs={12} md={6}>
+      <Grid size={{ xs: 12, md: 6 }}>
         <RHFPhone
           name="phone"
           label={t('form.labels.phone')}
@@ -36,7 +36,7 @@ const ContactPerson: React.FC<Props> = ({ event }) => {
         />
       </Grid>
       {!content?.form?.disableBirthDate && (
-        <Grid item xs={12} md={6}>
+        <Grid size={{ xs: 12, md: 6 }}>
           <RHFDatePicker
             name="birthdate"
             label={t('form.labels.birthdate')}
@@ -47,7 +47,7 @@ const ContactPerson: React.FC<Props> = ({ event }) => {
         </Grid>
       )}
       {!content?.form?.disableGender && (
-        <Grid item xs={12} md={6}>
+        <Grid size={{ xs: 12, md: 6 }}>
           <RHFSelect name="gender" label={t('form.labels.gender')}>
             <MenuItem value={Gender.MALE}>{t('form.labels.male')}</MenuItem>
             <MenuItem value={Gender.FEMALE}>{t('form.labels.female')}</MenuItem>
@@ -56,7 +56,7 @@ const ContactPerson: React.FC<Props> = ({ event }) => {
         </Grid>
       )}
       {event?.extraFields.map((field, index) => (
-        <Grid key={field.id} item xs={12} md={6}>
+        <Grid key={field.id} size={{ xs: 12, md: 6 }}>
           <ExtraField extraField={field} name={`extraFields.${index}.value`} />
         </Grid>
       ))}

package/src/form/PaymentOverviewBox.tsx

@@ -419,10 +419,10 @@ const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyBut
           <Typography variant="h6">{event.name}</Typography>
           <Box>
             <Grid container spacing={1}>
-              <Grid item xs={6}>
+              <Grid size={6}>
                 <Image src={event.image.url} alt={event.name} ratio="16/9" borderRadius={2} />
               </Grid>
-              <Grid item xs={6}>
+              <Grid size={6}>
                 <TextIconLabel
                   icon={
                     <Iconify

package/src/form/PaymentOverviewDrawer.tsx

@@ -351,7 +351,6 @@ const PaymentOverviewDrawer: React.FC<Props> = ({
         swipeAreaWidth={swipeAreaWidth}
         allowSwipeInChildren
         disableSwipeToOpen={isDrawerHidden}
-        keepMounted
         SwipeAreaProps={{
           onTouchStart: (event: React.TouchEvent<HTMLDivElement>) => {
             handleGestureStart(event.touches[0]?.clientY ?? null);

package/src/form/PaymentSuccess.tsx

@@ -117,7 +117,7 @@ const PaymentSuccess: React.FC<Props> = ({ setIsPaying, isIframe, pixels }) => {
       {state === GopayState.PAID ? (
         <Box>
           <Grid container spacing={3} mb={6}>
-            <Grid display="flex" item xs={12} sm={6} alignItems="center">
+            <Grid display="flex" size={{ xs: 12, sm: 6 }} alignItems="center">
               <m.div variants={varBounce().in}>
                 <Typography
                   variant="h5"
@@ -157,7 +157,7 @@ const PaymentSuccess: React.FC<Props> = ({ setIsPaying, isIframe, pixels }) => {
               </m.div>
             </Grid>
             {!isMobile && (
-              <Grid item xs={12} sm={6} display="flex" justifyContent="center">
+              <Grid size={{ xs: 12, sm: 6 }} display="flex" justifyContent="center">
                 <m.div variants={varBounce().in}>
                   {content?.paymentConfirmation?.image ? (
                     <Image
@@ -185,7 +185,7 @@ const PaymentSuccess: React.FC<Props> = ({ setIsPaying, isIframe, pixels }) => {
               </m.div>
               <Grid container justifyContent="center" spacing={5} mb={6}>
                 {tickets.map((item, index) => (
-                  <Grid key={index} item xs={12} sm={6} textAlign="center">
+                  <Grid key={index} size={{ xs: 12, sm: 6 }} textAlign="center">
                     <m.div variants={varBounce().in}>
                       <Card sx={{ px: 2, py: 4 }}>
                         <Box
@@ -290,7 +290,7 @@ const PaymentSuccess: React.FC<Props> = ({ setIsPaying, isIframe, pixels }) => {
               </m.div>
               <Grid container justifyContent="center" spacing={5} mb={6}>
                 {products.map((item, index) => (
-                  <Grid key={index} item xs={12} sm={6} md={4} textAlign="center">
+                  <Grid key={index} size={{ xs: 12, sm: 6, md: 4 }} textAlign="center">
                     <m.div variants={varBounce().in}>
                       <Card sx={{ px: 2, py: 4 }}>
                         <Box

package/src/form/TicketForm.tsx

@@ -578,7 +578,7 @@ const TicketForm: React.FC<Props> = ({
               },
             }}
           >
-            <Grid item xs={12} md={8}>
+            <Grid size={{ xs: 12, md: 8 }}>
               <Stepper
                 orientation="vertical"
                 sx={(theme) => ({
@@ -688,10 +688,10 @@ const TicketForm: React.FC<Props> = ({
                 />
               </Stack>
             </Grid>
-            <Grid item xs={12} sx={{ display: { xs: 'block', md: 'none' } }}>
+            <Grid size={12} sx={{ display: { xs: 'block', md: 'none' } }}>
               <Divider sx={{ borderStyle: 'dashed' }} />
             </Grid>
-            <Grid item xs={12} md={4} mt={{ xs: 0, md: 0 }}>
+            <Grid size={{ xs: 12, md: 4 }} mt={{ xs: 0, md: 0 }}>
               <PaymentOverviewBox event={event} withoutPadding />
             </Grid>
           </Grid>

package/src/form/extra-field/ReleaseExtraFields.tsx

@@ -75,7 +75,7 @@ const ReleaseExtraFields: React.FC<Props> = ({ release, eventId, releaseIndex, q
           <Box>
             <Grid container spacing={3}>
               {release.extraFields?.map((field, colIdx) => (
-                <Grid key={field.id} item xs={12} md={6}>
+                <Grid key={field.id} size={{ xs: 12, md: 6 }}>
                   <ExtraField
                     extraField={field}
                     name={`tickets.${eventId}.${releaseIndex}.extraFields.${rowIdx}.${colIdx}.value`}

package/src/form/merchandise/MerchandiseSelection.tsx

@@ -13,7 +13,7 @@ interface Props {
 const MerchandiseSelection: React.FC<Props> = ({ eventProducts, eventId, isLoading }) =>
   isLoading ? (
     [...Array(3)].map((item) => (
-      <Grid key={item} item xs={12} md={4}>
+      <Grid key={item} size={{ xs: 12, md: 4 }}>
         <CustomSkeleton height={334} />
       </Grid>
     ))

package/src/form/merchandise/MerchandiseSlider.tsx

@@ -21,7 +21,7 @@ const MerchandiseSlider: React.FC<Props> = ({ eventProducts, eventId, sx }) => {
         sx={{
           overflow: 'hidden',
           padding: theme.spacing(8, 3),
-          margin: theme.spacing(-8, -3),
+          margin: theme.spacing(-8, -2.5),
         }}
       >
         <Box ref={emblaRef} className="embla" sx={{ overflow: 'visible' }}>