umwd-components 0.1.716 → 0.1.718

package/dist/esm/src/components/page-builder/FleetSection.js

@@ -0,0 +1,70 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Stack from '@mui/material/Stack';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import Paper from '@mui/material/Paper';
+import { StrapiImage } from '../StrapiImage.js';
+import RadarIcon from '@mui/icons-material/Radar';
+import SpeedIcon from '@mui/icons-material/Speed';
+import HeightIcon from '@mui/icons-material/Height';
+import { useTheme } from '@mui/material/styles';
+
+function FleetSection({ data }) {
+    const { airplane, maxWidth, sx = [] } = data;
+    const theme = useTheme();
+    return (jsx(Container, { maxWidth: maxWidth || "lg", sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            { my: 1 },
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: jsx(Stack, { spacing: 2, direction: "row", justifyContent: "stretch", flexWrap: "wrap", sx: {
+                width: "100%",
+                [theme.breakpoints.up("xs")]: {
+                    flexDirection: "column",
+                },
+                [theme.breakpoints.up("sm")]: {
+                    flexDirection: "row",
+                },
+            }, useFlexGap: true, children: airplane.map((airplane) => (jsxs(Card, { sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "space-between",
+                    flex: 1,
+                    minWidth: 275,
+                }, children: [jsx(CardHeader, { title: airplane.name, subheader: airplane.description }), jsx(Box, { sx: { flex: 1 } }), jsx(CardContent, { sx: {
+                            p: 1,
+                            height: 180,
+                            mb: 2,
+                        }, children: jsxs(Paper, { sx: {
+                                p: 1,
+                                display: "grid",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                height: "100%",
+                                position: "relative",
+                            }, variant: "outlined", children: [airplane.floorplan !== null && (jsx(StrapiImage, { id: airplane.floorplan.id?.toString(), url: airplane.floorplan.url, alternativeText: airplane.floorplan.alternativeText, width: airplane.floorplan.width, height: airplane.floorplan.height, style: {
+                                        objectFit: "contain",
+                                        width: "100%",
+                                        paddingBottom: "20px",
+                                    } })), airplane.cabinHeight &&
+                                    airplane.cabinWidth &&
+                                    airplane.cabinLength && (jsx(Box, { sx: {
+                                        position: "absolute",
+                                        right: ".5rem",
+                                        bottom: ".5rem",
+                                    }, children: jsxs(Typography, { variant: "body2", color: "text.secondary", align: "right", children: [jsx("strong", { children: "Cabin Dimensions:" }), " ", jsx("strong", { children: "H" }), " ", airplane.cabinHeight, " m ", jsx("strong", { children: "W" }), " ", airplane.cabinWidth, " m ", jsx("strong", { children: "L" }), " ", airplane.cabinLength, " m"] }) }))] }) }), jsx(CardContent, { sx: {
+                        /*  height: "33%" */
+                        }, children: jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", useFlexGap: true, children: [jsx(Chip, { label: `Range: ${airplane.range} km`, variant: "filled", color: "primary", icon: jsx(RadarIcon, {}) }), jsx(Chip, { label: `Speed: ${airplane.speed} km/h`, variant: "filled", color: "primary", icon: jsx(SpeedIcon, {}) }), jsx(Chip, { label: `Ceiling: ${airplane.ceiling} ft`, variant: "filled", color: "primary", icon: jsx(HeightIcon, {}) })] }) })] }, airplane.id))) }) }));
+}
+
+export { FleetSection };

package/dist/esm/src/components/page-builder/IconSection.js

@@ -0,0 +1,33 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Grid from '@mui/material/Grid';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import getIcon from '../../lib/getIcon.js';
+
+function IconSection({ data }) {
+    const { icon, maxWidth, sx = {} } = data;
+    return (jsx(Container, { maxWidth: maxWidth || "lg", sx: { my: 1, ...sx }, children: jsx(Grid, { container: true, spacing: 2, children: icon.map((icon) => {
+                const Icon = getIcon(icon.icon);
+                return (jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, children: jsx(Card, { sx: {
+                            display: "flex",
+                            flexDirection: "column",
+                            flex: 1,
+                            height: "100%",
+                        }, children: jsxs(CardContent, { children: [jsxs(Typography, { variant: "h6", component: "div", sx: {
+                                        display: "flex",
+                                        justifyContent: "start",
+                                        alignItems: "start",
+                                        minHeight: "4.2rem",
+                                    }, children: [Icon !== null && jsx(Icon, { sx: { mr: 2, mt: 0.2 } }), icon.title] }), jsx(Typography, { variant: "body2", color: "text.secondary", component: "div", children: icon.text })] }) }) }, icon.id));
+            }) }) }));
+}
+
+export { IconSection };

package/dist/esm/src/components/page-builder/LogoBarSection.js

@@ -0,0 +1,48 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Paper from '@mui/material/Paper';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import { StrapiImage } from '../StrapiImage.js';
+import { useTheme } from '@mui/material/styles';
+import { setOpacity } from '../../lib/utils.js';
+import { StyledLink } from '../StyledLink.js';
+
+function LogoBarSection({ data, }) {
+    const { companies, maxWidth = "lg", sx = {}, glass = false } = data;
+    const theme = useTheme();
+    return (jsx(Container, { maxWidth: maxWidth, sx: { my: 1, ...sx }, children: jsx(Grid, { container: true, spacing: 2, children: jsx(Grid, { item: true, xs: 12, children: jsx(Paper, { sx: {
+                        p: 2,
+                        backdropFilter: "blur(3px)",
+                        backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+                        border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
+                    }, children: jsx(Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, justifyContent: "space-around", children: companies &&
+                            companies.map((company) => (jsxs(StyledLink, { href: company.url, sx: {
+                                    flex: "1 1 0",
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    paddingBottom: "1rem",
+                                    transform: "scale(.9)",
+                                    transition: ".2s",
+                                    "&:hover": {
+                                        transform: "scale(1)",
+                                    },
+                                }, children: [jsx(StrapiImage, { id: company.logo.id.toString(), url: company.logo.url, alternativeText: company.logo.alternativeText, width: company.logo.width, height: company.logo.height, style: {
+                                            ...company.logo.style,
+                                            width: "120px",
+                                            height: "120px",
+                                            objectFit: "contain",
+                                            paddingBottom: "1rem",
+                                        } }), company.name] }, company.id))) }) }) }) }) }));
+}
+
+export { LogoBarSection };

package/dist/esm/src/components/page-builder/PBContactForm.js

@@ -0,0 +1,94 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Container from '@mui/material/Container';
+import Paper from '@mui/material/Paper';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
+import { setOpacity } from '../../lib/utils.js';
+import { ExplanatoryFoldOut } from '../ExplanatoryFoldOut.js';
+
+function PBContactForm({ data, index }) {
+    const { title, subtitle, successHeading, successText, errorHeading, errorText, maxWidth, sx = [], glass = false, } = data;
+    const theme = useTheme();
+    return (jsx(Container, { maxWidth: maxWidth || "lg", sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            { my: 1 },
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: jsxs(Box, { sx: { p: 1, border: `1px dashed ${theme.palette.primary.main}` }, children: [jsx("input", { id: `blocks[${index}].__component`, type: "hidden", name: `blocks[${index}].__component`, value: "layout.contact-section" }), jsx("input", { id: `blocks[${index}].id`, type: "hidden", name: `blocks[${index}].id`, value: data.id }), jsxs(Stack, { spacing: 2, sx: { width: "100%" }, children: [jsx(ExplanatoryFoldOut, { title: "Contact Form", description: "You can change the default texts to start an engaging conversation with your visitor" }), jsx(TextField, { id: `blocks[${index}].title`, name: `blocks[${index}].title`, label: "title", defaultValue: title, 
+                            // error={formState?.zodErrors?.heading != undefined ? true : false}
+                            // helperText={formState?.zodErrors?.heading}
+                            sx: {
+                                input: {
+                                    textAlign: "center",
+                                    fontFamily: theme.typography.h6.fontFamily,
+                                    fontWeight: theme.typography.h6.fontWeight,
+                                    fontSize: theme.typography.h6.fontSize,
+                                },
+                            } }), jsx(TextField, { id: `blocks[${index}].subtitle`, name: `blocks[${index}].subtitle`, label: "subtitle", defaultValue: subtitle, 
+                            // error={formState?.zodErrors?.heading != undefined ? true : false}
+                            // helperText={formState?.zodErrors?.heading}
+                            sx: {
+                                input: {
+                                    textAlign: "center",
+                                    fontFamily: theme.typography.body1.fontFamily,
+                                    fontWeight: theme.typography.body1.fontWeight,
+                                    fontSize: theme.typography.body1.fontSize,
+                                },
+                            } }), jsx(ExplanatoryFoldOut, { title: "Thank you - message", description: "Your visitor reached out to you, you could: say thanks, tell them you'll get back, etc" }), jsx(Paper, { sx: { p: 2 }, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: `blocks[${index}].successHeading`, name: `blocks[${index}].successHeading`, label: "successHeading", defaultValue: successHeading || "Thank You", 
+                                        // error={formState?.zodErrors?.heading != undefined ? true : false}
+                                        // helperText={formState?.zodErrors?.heading}
+                                        sx: {
+                                            input: {
+                                                textAlign: "center",
+                                                fontFamily: theme.typography.h6.fontFamily,
+                                                fontWeight: theme.typography.h6.fontWeight,
+                                                fontSize: theme.typography.h6.fontSize,
+                                            },
+                                        } }), jsx(TextField, { id: `blocks[${index}].successText`, name: `blocks[${index}].successText`, label: "successText", defaultValue: successText || "your message has been send", 
+                                        // error={formState?.zodErrors?.heading != undefined ? true : false}
+                                        // helperText={formState?.zodErrors?.heading}
+                                        sx: {
+                                            input: {
+                                                textAlign: "center",
+                                                fontFamily: theme.typography.body1.fontFamily,
+                                                fontWeight: theme.typography.body1.fontWeight,
+                                                fontSize: theme.typography.body1.fontSize,
+                                            },
+                                        } })] }) }), jsx(ExplanatoryFoldOut, { title: "Something went wrong - message", description: "Sometimes, somethings go wrong, whenever this happens you don't want to lose te customer! Write an engaging text to compel your visitor to try again or reach out by email" }), jsx(Paper, { sx: { p: 2 }, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: `blocks[${index}].errorHeading`, name: `blocks[${index}].errorHeading`, label: "errorHeading", defaultValue: errorHeading || "Sorry", 
+                                        // error={formState?.zodErrors?.heading != undefined ? true : false}
+                                        // helperText={formState?.zodErrors?.heading}
+                                        sx: {
+                                            input: {
+                                                textAlign: "center",
+                                                fontFamily: theme.typography.h6.fontFamily,
+                                                fontWeight: theme.typography.h6.fontWeight,
+                                                fontSize: theme.typography.h6.fontSize,
+                                            },
+                                        } }), jsx(TextField, { id: `blocks[${index}].errorText`, name: `blocks[${index}].errorText`, label: "errorText", defaultValue: errorText || "Something went wrong", 
+                                        // error={formState?.zodErrors?.heading != undefined ? true : false}
+                                        // helperText={formState?.zodErrors?.heading}
+                                        sx: {
+                                            input: {
+                                                textAlign: "center",
+                                                fontFamily: theme.typography.body1.fontFamily,
+                                                fontWeight: theme.typography.body1.fontWeight,
+                                                fontSize: theme.typography.body1.fontSize,
+                                            },
+                                        } }), jsx(Button, { variant: "contained", disabled: true, children: "try again" })] }) }), jsx(ExplanatoryFoldOut, { title: "Fields and Buttons", description: "If you'd like to add additional fields or buttons to the contactform your webdesigner should be able to help with that" }), jsx(Paper, { sx: {
+                                p: 2,
+                                backdropFilter: "blur(3px)",
+                                backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+                                border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
+                            }, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "name", name: "name", label: "Name", variant: "outlined", disabled: true }), jsx(TextField, { id: "email", name: "email", label: "Email", variant: "outlined", disabled: true }), jsx(TextField, { id: "subject", name: "subject", label: "Subject", variant: "outlined", disabled: true }), jsx(TextField, { id: "message", name: "message", label: "Message", variant: "outlined", multiline: true, disabled: true, minRows: 5 }), jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "end", children: [jsx(Button, { disabled: true, variant: "outlined", children: "Clear" }), jsx(Button, { variant: "contained", disabled: true, children: "Send" })] })] }) })] })] }) }));
+}
+
+export { PBContactForm as default };

package/dist/esm/src/components/page-builder/PBFeaturesSection.js

@@ -0,0 +1,78 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import Stack from '@mui/material/Stack';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import TextField from '@mui/material/TextField';
+import getIcon from '../../lib/getIcon.js';
+import { useTheme } from '@mui/material/styles';
+import { ExplanatoryFoldOut } from '../ExplanatoryFoldOut.js';
+
+React.lazy(() => import(/* webpackChunkName: "mui-markdown" */ 'mui-markdown'));
+function PBFeatureSection({ data, index, }) {
+    const { feature, maxWidth, sx = {}, anchor = "" } = data;
+    const theme = useTheme();
+    return (jsx(Container, { maxWidth: maxWidth || "lg", sx: { my: 1, ...sx }, id: anchor, children: jsxs(Box, { sx: { p: 1, border: `1px dashed ${theme.palette.primary.main}` }, children: [jsx(ExplanatoryFoldOut, { title: "Features section", description: "Direct the visitor to your most valuable services" }), jsx("input", { type: "hidden", name: `blocks[${index}].id`, value: data.id }), jsx("input", { type: "hidden", name: `blocks[${index}].__component`, value: "layout.features-section" }), jsx(Stack, { spacing: 2, direction: "row", justifyContent: "stretch", flexWrap: "wrap", sx: {
+                        width: "100%",
+                        [theme.breakpoints.up("xs")]: {
+                            flexDirection: "column",
+                        },
+                        [theme.breakpoints.up("sm")]: {
+                            flexDirection: "row",
+                        },
+                    }, useFlexGap: true, children: feature.map((feature, index2) => {
+                        const Icon = getIcon(feature.icon);
+                        return (jsx(Card, { id: feature.anchor || "", sx: {
+                                display: "flex",
+                                flexDirection: "column",
+                                justifyContent: "space-between",
+                                flex: 1,
+                                minWidth: 275,
+                            }, children: jsxs(CardContent, { sx: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "center",
+                                    gap: 2,
+                                }, children: [jsx(Box, { sx: {
+                                            height: 100,
+                                            display: "grid",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                        }, children: Icon !== null && (jsx(Icon, { sx: {
+                                                mr: 2,
+                                                mt: 0.2,
+                                                width: "75px",
+                                                height: "75px",
+                                                fill: "none",
+                                                stroke: "currentColor",
+                                                strokeWidth: 0.5,
+                                            } })) }), jsx(TextField, { id: `blocks[${index}].feature[${index2}].heading`, name: `blocks[${index}].feature[${index2}].heading`, label: "heading", defaultValue: feature.heading, variant: "outlined", sx: {
+                                            input: {
+                                                textAlign: "center",
+                                                width: "100%",
+                                                fontFamily: theme.typography.h2.fontFamily,
+                                                fontWeight: theme.typography.h2.fontWeight,
+                                                fontSize: theme.typography.h2.fontSize,
+                                            },
+                                        } }), jsx(TextField, { id: `blocks[${index}].feature[${index2}].subHeading`, name: `blocks[${index}].feature[${index2}].subHeading`, label: "subHeading", defaultValue: feature.subHeading, multiline: true, minRows: 2, maxRows: 7, sx: {
+                                            width: "100%",
+                                            textarea: {
+                                                textAlign: "center",
+                                                width: "100%",
+                                                fontFamily: theme.typography.h6.fontFamily,
+                                                fontWeight: theme.typography.h6.fontWeight,
+                                                fontSize: theme.typography.h6.fontSize,
+                                            },
+                                        } }), feature.text && (jsx(TextField, { id: `blocks[${index}].feature[${index2}].text`, name: `blocks[${index}].feature[${index2}].text`, label: "text", defaultValue: feature.text, multiline: true, sx: { width: "100%" } }))] }) }, feature.id));
+                    }) })] }) }));
+}
+
+export { PBFeatureSection };

package/dist/esm/src/components/page-builder/PBHeroSection.js

@@ -0,0 +1,112 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Container from '@mui/material/Container';
+import Paper from '@mui/material/Paper';
+import TextField from '@mui/material/TextField';
+import { StrapiImage } from '../StrapiImage.js';
+import { setOpacity } from '../../lib/utils.js';
+import { useTheme } from '@mui/material/styles';
+import { ExplanatoryFoldOut } from '../ExplanatoryFoldOut.js';
+
+function PBHeroSection({ data, index }) {
+    const { heading, subHeading, bgImage, logoImage, link, maxWidth, sx = {}, glass = false, } = data;
+    // console.log(index);
+    const theme = useTheme();
+    // console.log(theme.typography.button);
+    // const glassColor = setOpacity(theme.palette.background.paper, 0.1);
+    return (jsxs("div", { style: { position: "relative", padding: 0, margin: 0 }, children: [jsx("input", { type: "hidden", name: `blocks[${index}].id`, value: data.id }), jsx("input", { type: "hidden", name: `blocks[${index}].__component`, value: "layout.hero-section" }), jsxs(Box, { sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "100%",
+                    overflow: "hidden",
+                    minHeight: "600px",
+                    ...sx,
+                }, children: [bgImage && bgImage.url && (jsx(StrapiImage, { id: bgImage.id?.toString(), alternativeText: "Background", style: {
+                            position: "absolute",
+                            inset: 0,
+                            objectFit: "cover",
+                            width: "100%",
+                            height: "100%",
+                        }, height: bgImage.height || 1080, url: bgImage.url, width: bgImage.width || 1920 })), jsx(Container, { maxWidth: maxWidth || "lg", sx: { my: 1, zIndex: 1 }, children: jsxs(Box, { sx: { p: 1, border: `1px dashed ${theme.palette.primary.main}` }, children: [jsx(ExplanatoryFoldOut, { title: "Hero Section", description: "Use this to introduce yourself and create a link to you most important page. i.e. shop  or contact" }), jsx(Paper, { sx: {
+                                        px: 2,
+                                        py: 7,
+                                        backdropFilter: "blur(3px)",
+                                        backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+                                        border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
+                                    }, children: jsxs(Stack, { spacing: 5, alignItems: "center", justifyContent: "center", children: [logoImage && logoImage.url !== null && (jsx(Box, { className: "manipulator", sx: {
+                                                    position: "relative",
+                                                    mt: "-100px",
+                                                    width: "100%",
+                                                    zIndex: -1,
+                                                    display: "flex",
+                                                    justifyContent: "center",
+                                                    alignItems: "center",
+                                                    img: {
+                                                        objectFit: "contain",
+                                                        width: "100%",
+                                                        height: "100%",
+                                                    },
+                                                }, children: jsx(StrapiImage, { id: logoImage.id?.toString(), alternativeText: logoImage.alternativeText || "logo image", height: logoImage.height || 100, url: logoImage.url, width: logoImage.width || 100, style: {
+                                                        objectFit: "contain",
+                                                    } }) })), jsx(TextField, { id: `blocks[${index}].heading`, name: `blocks[${index}].heading`, label: "heading", defaultValue: heading, variant: "outlined", 
+                                                // error={formState?.zodErrors?.heading != undefined ? true : false}
+                                                // helperText={formState?.zodErrors?.heading}
+                                                sx: {
+                                                    input: {
+                                                        textAlign: "center",
+                                                        fontFamily: theme.typography.h2.fontFamily,
+                                                        fontWeight: theme.typography.h2.fontWeight,
+                                                        fontSize: theme.typography.h2.fontSize,
+                                                    },
+                                                } }), jsx(Box, { className: "spacer", sx: {
+                                                    display: "none",
+                                                } }), jsx(TextField, { id: `blocks[${index}].subHeading`, name: `blocks[${index}].subHeading`, label: "subHeading", defaultValue: subHeading, variant: "outlined", multiline: true, rows: 8, 
+                                                // error={formState?.zodErrors?.heading != undefined ? true : false}
+                                                // helperText={formState?.zodErrors?.heading}
+                                                sx: {
+                                                    width: "100%",
+                                                    "textarea#subHeading": {
+                                                        textAlign: "center",
+                                                        fontFamily: theme.typography.h4.fontFamily,
+                                                        fontWeight: theme.typography.h4.fontWeight,
+                                                        fontSize: theme.typography.h4.fontSize,
+                                                        lineHeight: theme.typography.h4.lineHeight,
+                                                    },
+                                                } }), jsxs(Stack, { direction: "column", spacing: 2, sx: { p: 1, border: "1px dashed white", borderRadius: "4px" }, children: [jsx(ExplanatoryFoldOut, { title: "Link", description: "Link to the page on your website were you would like your client/customer to have an interaction" }), jsx(TextField, { id: `blocks[${index}].link.text`, name: `blocks[${index}].link.text`, label: "link.text", defaultValue: link?.text, 
+                                                        // error={formState?.zodErrors?.heading != undefined ? true : false}
+                                                        // helperText={formState?.zodErrors?.heading}
+                                                        sx: {
+                                                            backgroundColor: theme.palette.primary.main,
+                                                            borderRadius: "4px",
+                                                            input: {
+                                                                color: theme.palette.primary.contrastText,
+                                                                textAlign: "center",
+                                                                fontFamily: theme.typography.button.fontFamily,
+                                                                fontWeight: theme.typography.button.fontWeight,
+                                                                fontSize: "1.5rem",
+                                                                letterSpacing: theme.typography.button.letterSpacing,
+                                                                textTransform: theme.typography.button.textTransform,
+                                                            },
+                                                        } }), jsx(TextField, { id: `blocks[${index}].link.url`, name: `blocks[${index}].link.url`, label: "url", defaultValue: link?.url, 
+                                                        // error={formState?.zodErrors?.heading != undefined ? true : false}
+                                                        // helperText={formState?.zodErrors?.heading}
+                                                        sx: {
+                                                            input: {
+                                                                textAlign: "center",
+                                                                fontFamily: theme.typography.button.fontFamily,
+                                                                fontWeight: theme.typography.button.fontWeight,
+                                                                fontSize: theme.typography.button.fontSize,
+                                                            },
+                                                        } })] })] }) })] }) })] })] }));
+}
+
+export { PBHeroSection };

package/dist/esm/src/components/page-builder/PBPersonaliaSection.js

@@ -0,0 +1,66 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Paper from '@mui/material/Paper';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import TextField from '@mui/material/TextField';
+import Box from '@mui/material/Box';
+import { StrapiImage } from '../StrapiImage.js';
+import EmailIcon from '@mui/icons-material/Email';
+import LinkedIn from '@mui/icons-material/LinkedIn';
+import { StyledLink } from '../StyledLink.js';
+import { useTheme } from '@mui/material/styles';
+
+function Partner(partner, index2) {
+    const theme = useTheme();
+    return (jsx(Grid, { item: true, xs: 12, md: 6, children: jsx(Paper, { sx: { p: 2, height: "100%" }, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, sm: 7, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "name", label: "Name", defaultValue: partner.name, sx: {
+                                        input: {
+                                            fontFamily: theme.typography.h5.fontFamily,
+                                            fontWeight: theme.typography.h5.fontWeight,
+                                            fontSize: theme.typography.h5.fontSize,
+                                        },
+                                    } }), jsx(TextField, { id: "function", label: "Function", defaultValue: partner.function, sx: {
+                                        input: {
+                                            fontFamily: theme.typography.body2.fontFamily,
+                                            fontWeight: theme.typography.body2.fontWeight,
+                                            fontSize: theme.typography.body2.fontSize,
+                                        },
+                                    } })] }) }), jsx(Grid, { item: true, xs: 12, sm: 5, children: jsxs(Stack, { spacing: 2, sx: { overflow: "clip" }, justifyContent: "center", alignItems: "stretch", children: [partner.photo?.url && (jsx(StrapiImage, { id: partner.photo.id, url: partner.photo.url, alternativeText: partner.photo.alternativeText, width: partner.photo.width || 200, height: partner.photo.height || 200, style: {
+                                        maxWidth: "100%",
+                                        height: "auto",
+                                        // borderRadius: "50%", TODO this style was removed because it's specific to AMH, should be added to photo.style
+                                        margin: "auto",
+                                        ...partner.photo.style,
+                                    } })), partner.links?.length > 0 &&
+                                    partner.links.map((link) => {
+                                        return (jsx(StyledLink, { href: link.url, sx: {
+                                                color: theme.palette.mode === "dark"
+                                                    ? theme.palette.text.secondary
+                                                    : theme.palette.secondary.main,
+                                            }, children: link.text }, link.id));
+                                    }), partner.linkedIn && (jsx(Button, { variant: "outlined", startIcon: jsx(LinkedIn, {}), href: partner.linkedIn, target: "_blank", sx: {
+                                        color: theme.palette.mode === "dark"
+                                            ? theme.palette.text.secondary
+                                            : theme.palette.secondary.main,
+                                    }, children: "LinkedIn" })), partner.email && (jsx(Tooltip, { title: `${partner.email}`, children: jsx(Button, { variant: "outlined", startIcon: jsx(EmailIcon, {}), href: `mailto:${partner.email}`, sx: {
+                                            color: theme.palette.mode === "dark"
+                                                ? theme.palette.text.secondary
+                                                : theme.palette.secondary.main,
+                                        }, children: "Email" }) }))] }) })] }) }) }, partner.id));
+}
+function PBPersonaliaSection({ data, index, }) {
+    const { partner, maxWidth, sx = {} } = data;
+    const theme = useTheme();
+    return (jsx(Container, { maxWidth: maxWidth || "lg", sx: { my: 1, ...sx }, children: jsx(Box, { sx: { p: 1, border: `1px dashed ${theme.palette.primary.main}` }, children: jsx(Grid, { container: true, spacing: 2, children: partner && partner.map(Partner) }) }) }));
+}
+
+export { PBPersonaliaSection };

package/dist/esm/src/components/page-builder/PBTextImageSection.js

@@ -0,0 +1,91 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useState, useEffect } from 'react';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import TextField from '@mui/material/TextField';
+import { StrapiImage } from '../StrapiImage.js';
+import { useTheme } from '@mui/material/styles';
+import { setOpacity } from '../../lib/utils.js';
+
+React.lazy(() => import(/* webpackChunkName: "mui-markdown" */ 'mui-markdown'));
+function StickyImage({ image }) {
+    const theme = useTheme();
+    const imageSrc = image.url;
+    if (imageSrc === undefined) {
+        return null;
+    }
+    const [offsetY, setOffsetY] = useState(0);
+    const handleScroll = () => {
+        const offset = 160;
+        const imageDivID = `image-container${image.url}`;
+        const imageDiv = document.getElementById(imageDivID);
+        const imageID = `image${image.url}`;
+        const imageElement = document.getElementById(imageID);
+        if (imageDiv === null || imageElement === null) {
+            return;
+        }
+        const imageDivRect = imageDiv.getBoundingClientRect();
+        const imageRect = imageElement.getBoundingClientRect();
+        if (imageRect.height >= imageDivRect.height) {
+            return;
+        }
+        const imageAtBottomOffset = imageDivRect.height - imageRect.height;
+        if (imageDivRect.y <= offset &&
+            -imageDivRect.y <= imageDivRect.height - imageRect.height - offset) {
+            setOffsetY(-imageDivRect.y + offset);
+        }
+        else if (imageDivRect.y > 0) {
+            setOffsetY(0);
+        }
+        else {
+            setOffsetY(imageAtBottomOffset);
+        }
+    };
+    useEffect(() => {
+        window.addEventListener("scroll", handleScroll);
+        return () => window.removeEventListener("scroll", handleScroll);
+    }, []); // Empty dependency array to run effect only once
+    return (jsx(Box, { id: `image-container${image.url}`, sx: {
+            height: "100%",
+            position: "relative",
+        }, children: jsx(StrapiImage, { id: `image${image.url}`, alternativeText: image.alternativeText, height: image.height, width: image.width, url: image.url, style: {
+                width: "100%",
+                height: "auto",
+                display: "block",
+                position: "relative",
+                top: offsetY,
+                borderRadius: 4,
+                border: `1px solid ${theme.palette.secondary.main}`,
+            } }) }));
+}
+function PBTextImageSection({ data }) {
+    const { title, text, image, reverse = false, maxWidth, sx = {}, glass = false, anchor = "", } = data;
+    /* TODO Text_content should deal with linebreaks,
+    reading up upon mui-markdown docs is advised */
+    /* TODO Replace with blocks */
+    const theme = useTheme();
+    return (jsx(Container, { maxWidth: maxWidth || "lg", sx: { my: 1, ...sx }, id: anchor, children: jsxs(Box, { sx: { p: 1, border: "1px dashed #fff" }, children: [title && (jsx(Typography, { variant: "h1", textAlign: "center", sx: { pb: 2 }, children: title })), jsxs(Grid, { container: true, spacing: 2, direction: reverse ? "row-reverse" : "row", children: [jsx(Grid, { item: true, xs: 12, md: image?.url !== undefined ? 8 : 12, children: jsx(Paper, { sx: {
+                                    p: 2,
+                                    backdropFilter: "blur(3px)",
+                                    backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+                                    border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
+                                }, children: text !== null && text !== undefined && (jsx(Box, { sx: {
+                                        height: "100%",
+                                        overflow: "hidden",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "flex-start",
+                                    }, children: jsx(TextField, { multiline: true, placeholder: text, value: text, onChange: (e) => console.log(e.target.value), sx: { width: "100%" } }) })) }) }), image?.url !== undefined && (jsx(Grid, { item: true, xs: 12, md: 4, children: jsx(StickyImage, { image: image }) }))] })] }) }));
+}
+
+export { PBTextImageSection };