@pixelated-tech/components 3.2.14 → 3.3.1

package/dist/components/{pagebuilder/form/form.js → sitebuilder/form/formextractor.js}

@@ -1,224 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import * as FC from './formcomponents';
-import * as FV from './formvalidations';
-import { generateKey, capitalize, attributeMap } from '../../utilities/functions';
-import './form.css';
-const debug = false;
-/* ===== FORM ENGINE =====
-Generate all the elements to display a form */
-FormEngine.propTypes = {
-    name: PropTypes.string,
-    id: PropTypes.string,
-    method: PropTypes.string,
-    onSubmitHandler: PropTypes.func,
-    formData: PropTypes.object.isRequired
-};
-export function FormEngine(props) {
-    function generateFormProps(props) {
-        // GENERATE PROPS TO RENDER THE FORM CONTAINER, INTERNAL FUNCTION
-        if (debug)
-            console.log("Generating Form Props");
-        const formProps = JSON.parse(JSON.stringify(props));
-        ['formData', 'onSubmitHandler'].forEach(e => delete formProps[e]);
-        return formProps;
-    }
-    generateNewFields.propTypes = {
-        formData: PropTypes.any.isRequired,
-    };
-    function generateNewFields(props) {
-        // CORE OF THE FORM ENGINE - CONVERT JSON TO COMPONENTS - INTERNAL
-        if (debug)
-            console.log("Generating Form Fields");
-        const newFields = [];
-        const formFields = props.formData.fields;
-        if (props.formData && formFields) {
-            // const thisFields = formFields;
-            for (let field = 0; field < formFields.length; field++) {
-                const thisField = formFields[field];
-                const newProps = JSON.parse(JSON.stringify(thisField.props));
-                newProps.key = generateKey();
-                // Convert string numeric props to numbers where needed
-                const numericProps = ['maxLength', 'minLength', 'rows', 'cols', 'size', 'step'];
-                numericProps.forEach(prop => {
-                    if (newProps[prop] !== undefined &&
-                        newProps[prop] !== null &&
-                        newProps[prop] !== '') {
-                        // Only convert if the value is not already a number
-                        if (typeof newProps[prop] === 'string') {
-                            const num = Number(newProps[prop]);
-                            if (!isNaN(num)) {
-                                newProps[prop] = num;
-                            }
-                        }
-                    }
-                });
-                const componentName = thisField.component;
-                const newElementType = FC[componentName];
-                const newElement = React.createElement(newElementType, newProps);
-                newFields.push(newElement);
-            }
-        }
-        return newFields;
-    }
-    function handleSubmit(event) {
-        // HANDLES THE FORM ACTION / FORM SUBMIT - EXPOSED EXTERNAL
-        event.preventDefault();
-        if (props.onSubmitHandler)
-            props.onSubmitHandler(event);
-        return true;
-    }
-    return (_jsx("form", { ...generateFormProps(props), onSubmit: (event) => { handleSubmit(event); }, suppressHydrationWarning: true, children: generateNewFields(props) }));
-}
-/* =====  FORM BUILDER =====
-Display all the components for a Form Builder -
-Element Buttons, Element Details, and the Form */
-function mapTypeToComponent(myType) {
-    if (debug)
-        console.log("Mapping Type Field to Component");
-    let myComponent = (["button"].includes(myType)) ? 'FormButton' :
-        (["checkbox"].includes(myType)) ? 'FormCheckbox' :
-            (["datalist"].includes(myType)) ? 'FormDataList' :
-                (["radio"].includes(myType)) ? 'FormRadio' :
-                    (["select"].includes(myType)) ? 'FormSelect' :
-                        (["textarea"].includes(myType)) ? 'FormTextarea' :
-                            "FormInput";
-    return myComponent;
-}
-export function FormBuilder() {
-    const [formData, setFormData] = useState({});
-    const [fieldFormData, setFieldFormData] = useState({});
-    function appendFormData(event) {
-        // APPEND JSON FOR NEW FIELD TO EXISTING JSON CONFIG OBJECT - EXPOSED EXTERNAL
-        if (debug)
-            console.log("Appending form Data...");
-        const props = {};
-        const target = event.target;
-        for (const prop in target) {
-            const thisProp = target[prop];
-            if (thisProp && thisProp.value && (thisProp.value !== Object(thisProp.value))) {
-                props[thisProp.name] = thisProp.value;
-            }
-        }
-        const field = {};
-        field.props = props;
-        field.component = mapTypeToComponent(field.props.type);
-        let fields = [];
-        if (Object.keys(formData).length > 0) {
-            fields = JSON.parse(JSON.stringify(formData.fields));
-        }
-        fields[fields.length] = field;
-        setFormData({ fields: fields });
-        setFieldFormData({});
-        return (field);
-    }
-    /* function getCircularReplacer() {
-        const seen = new WeakSet();
-        return (key, value) => {
-            if (typeof value === 'object' && value !== null) {
-                if (seen.has(value)) {
-                    return ; // return undefined ;
-                }
-                seen.add(value);
-            }
-            return value;
-        };
-    } */
-    return (_jsxs("div", { className: "section-container", children: [_jsxs("div", { style: { display: 'inline-block', verticalAlign: 'top' }, children: [_jsx(FormBuild, { setFormData: setFieldFormData }), _jsx("div", {}), _jsx(FormEngine, { name: "field_props", id: "field_props", onSubmitHandler: appendFormData, formData: fieldFormData })] }), _jsx("div", { style: { display: 'inline-block', verticalAlign: 'top' }, children: _jsx("pre", { style: { width: '100%' }, children: JSON.stringify(formData, null, 2) }) }), _jsxs("div", { children: [_jsx("br", {}), _jsx("br", {}), _jsx("hr", {}), _jsx("br", {}), _jsx("br", {})] }), _jsx("div", { style: { display: 'block', verticalAlign: 'top' }, children: _jsx(FormEngine, { formData: formData || {} }) })] }));
-}
-/*
-===== FORM BUILD =====
-Dynamically generate, component by component, and prop by prop,
-the JSON to create a form via FormEngine
-*/
-FormBuild.propTypes = {
-    setFormData: PropTypes.func.isRequired,
-};
-export function FormBuild(props) {
-    function generateFieldJSON(component, type) {
-        // GENERATE THE JSON TO DISPLAY A FORM TO ADD A FIELD - INTERNAL
-        if (debug)
-            console.log("Generating Form JSON for ", component, " Type : ", type);
-        const form = { fields: [] };
-        let i = 0;
-        for (const prop in FC[component].propTypes) {
-            const field = {};
-            field.component = 'FormInput';
-            const props = {};
-            props.label = prop;
-            props.name = prop;
-            props.id = prop;
-            props.type = 'text';
-            if (prop === 'type') {
-                props.disabled = true;
-                props.value = type;
-                props.list = 'inputTypes';
-            }
-            field.props = props;
-            form.fields[i] = field;
-            i++;
-        }
-        const addButton = {
-            component: 'FormButton',
-            props: {
-                label: 'Add ' + component,
-                type: 'submit',
-                id: 'Add ' + component,
-                text: 'Add ' + component
-            }
-        };
-        form.fields[i] = addButton;
-        return (form);
-    }
-    function handlePhaseOneSubmit(event) {
-        // GENERATE THE JSON TO DISPLAY A FORM TO ADD A FIELD - EXTERNAL
-        const target = event.target;
-        const typeElement = target.elements.namedItem('type');
-        const myType = typeElement ? typeElement.value : '';
-        const myComponent = mapTypeToComponent(myType);
-        const fieldJSON = generateFieldJSON(myComponent, myType);
-        props.setFormData(fieldJSON);
-        return true;
-    }
-    function generateTypeField() {
-        const form = {};
-        const typeField = {
-            component: 'FormInput',
-            props: {
-                label: 'Type : ',
-                name: 'type',
-                id: 'type',
-                type: 'text',
-                list: 'inputTypes'
-            }
-        };
-        const addButton = {
-            component: 'FormButton',
-            props: {
-                label: 'Build',
-                type: 'submit',
-                id: 'build',
-                text: '===  Build  ==='
-            }
-        };
-        form.fields = [typeField, addButton];
-        return (form);
-    }
-    return (_jsx(_Fragment, { children: _jsx(FormEngine, { formData: generateTypeField(), onSubmitHandler: event => { handlePhaseOneSubmit(event); }, name: "build", id: "build", method: "post" }) }));
-}
+import * as FVF from './formfieldvalidations';
+import { capitalize, attributeMap, debug } from './formutils';
+import { FormEngine } from './formengine';
 /*
 ===== FORM EXTRACT =====
 Submit a page URL of a form to extract all form elements and
 convert them to JSON to create a form via FormEngine
 */
 FormExtractor.propTypes = {
-    url: PropTypes.string
+    url: PropTypes.string,
+    htmlPaste: PropTypes.string
 };
 export function FormExtractor(props) {
     const [url, setURL] = useState(props.url || "");
-    const [htmlPaste, setHtmlPaste] = useState();
-    const [formData, setFormData] = useState({});
+    const [htmlPaste, setHtmlPaste] = useState(props.htmlPaste || "");
+    const [formData, setFormData] = useState({ fields: [] });
     setParentState.propTypes = {
         url: PropTypes.string.isRequired,
         htmlPaste: PropTypes.string.isRequired,
@@ -256,7 +55,7 @@ export function FormExtractUI(props) {
             console.log("Form Submitted...");
         props.setParentState({ url: url, htmlPaste: htmlPaste });
     }
-    return (_jsxs("form", { onSubmit: e => { e.preventDefault(); }, method: "post", name: "extract", children: [_jsx("label", { htmlFor: "url", children: "URL : " }), _jsx("input", { type: "text", list: "form_urls", id: "url", name: "url", size: 100, onChange: onChange }), _jsx(FC.FormDataList, { id: 'form_urls', items: FV.formURLs }), _jsx("div", { style: { width: '100%', textAlign: 'center' }, children: "OR" }), _jsx("label", { htmlFor: "htmlPaste", children: "HTML : " }), _jsx("textarea", { id: "htmlPaste", name: "htmlPaste", rows: 10, cols: 80, onChange: onChange }), _jsx("br", {}), _jsxs("div", { style: { width: '100%', textAlign: 'center' }, children: [_jsx("button", { type: "button", onClick: onSubmit, children: "Extract" }), _jsx("input", { type: "reset" })] })] }));
+    return (_jsxs("form", { onSubmit: e => { e.preventDefault(); }, method: "post", name: "extract", children: [_jsx("label", { htmlFor: "url", children: "URL : " }), _jsx("input", { type: "text", list: "form_urls", id: "url", name: "url", size: 100, onChange: onChange }), _jsx(FC.FormDataList, { id: 'form_urls', items: FVF.formURLs }), _jsx("div", { style: { width: '100%', textAlign: 'center' }, children: "OR" }), _jsx("label", { htmlFor: "htmlPaste", children: "HTML : " }), _jsx("textarea", { id: "htmlPaste", name: "htmlPaste", rows: 10, cols: 80, onChange: onChange }), _jsx("br", {}), _jsxs("div", { style: { width: '100%', textAlign: 'center' }, children: [_jsx("button", { type: "button", onClick: onSubmit, children: "Extract" }), _jsx("input", { type: "reset" })] })] }));
 }
 FormExtractEngine.propTypes = {
     url: PropTypes.string,

package/dist/components/sitebuilder/form/formutils.js

@@ -0,0 +1,206 @@
+// Shared utility functions for form components
+import { generateKey, capitalize, attributeMap } from '../../utilities/functions';
+export const debug = false;
+/**
+ * Maps input type to form component name
+ */
+export function mapTypeToComponent(myType) {
+    if (debug)
+        console.log("Mapping Type Field to Component");
+    let myComponent = (["button"].includes(myType)) ? 'FormButton' :
+        (["checkbox"].includes(myType)) ? 'FormCheckbox' :
+            (["datalist"].includes(myType)) ? 'FormDataList' :
+                (["radio"].includes(myType)) ? 'FormRadio' :
+                    (["select"].includes(myType)) ? 'FormSelect' :
+                        (["textarea"].includes(myType)) ? 'FormTextarea' :
+                            "FormInput";
+    return myComponent;
+}
+/**
+ * Generates field JSON for form building
+ */
+export function generateFieldJSON(component, type) {
+    const form = {};
+    form.fields = [];
+    // Common fields for all components
+    const commonFields = [
+        {
+            component: 'FormInput',
+            props: {
+                label: 'ID : ',
+                name: 'id',
+                id: 'id',
+                type: 'text',
+                required: true
+            }
+        },
+        {
+            component: 'FormInput',
+            props: {
+                label: 'Label : ',
+                name: 'label',
+                id: 'label',
+                type: 'text'
+            }
+        }
+    ];
+    // Type-specific fields
+    let typeSpecificFields = [];
+    if (component === 'FormSelect') {
+        typeSpecificFields = [
+            {
+                component: 'FormTextarea',
+                props: {
+                    label: 'Options (JSON) : ',
+                    name: 'options',
+                    id: 'options',
+                    rows: 5,
+                    placeholder: '[{"value": "option1", "text": "Option 1"}, {"value": "option2", "text": "Option 2"}]'
+                }
+            }
+        ];
+    }
+    else if (component === 'FormRadio' || component === 'FormCheckbox') {
+        typeSpecificFields = [
+            {
+                component: 'FormInput',
+                props: {
+                    label: 'Value : ',
+                    name: 'value',
+                    id: 'value',
+                    type: 'text'
+                }
+            },
+            {
+                component: 'FormTextarea',
+                props: {
+                    label: 'Options (JSON) : ',
+                    name: 'options',
+                    id: 'options',
+                    rows: 5,
+                    placeholder: '[{"value": "option1", "text": "Option 1"}, {"value": "option2", "text": "Option 2"}]'
+                }
+            }
+        ];
+    }
+    else {
+        typeSpecificFields = [
+            {
+                component: 'FormInput',
+                props: {
+                    label: 'Type : ',
+                    name: 'type',
+                    id: 'type',
+                    type: 'text',
+                    value: type,
+                    list: 'inputTypes'
+                }
+            },
+            {
+                component: 'FormInput',
+                props: {
+                    label: 'Placeholder : ',
+                    name: 'placeholder',
+                    id: 'placeholder',
+                    type: 'text'
+                }
+            },
+            {
+                component: 'FormInput',
+                props: {
+                    label: 'Value : ',
+                    name: 'value',
+                    id: 'value',
+                    type: 'text'
+                }
+            }
+        ];
+    }
+    // Add required field
+    const requiredField = {
+        component: 'FormCheckbox',
+        props: {
+            label: 'Required : ',
+            name: 'required',
+            id: 'required',
+            value: 'required'
+        }
+    };
+    // Add validation field
+    const validationField = {
+        component: 'FormInput',
+        props: {
+            label: 'Validate : ',
+            name: 'validate',
+            id: 'validate',
+            type: 'text',
+            list: 'validationTypes',
+            placeholder: 'isValidEmailAddress, isValidUrl, etc.'
+        }
+    };
+    // Combine all fields
+    let i = 0;
+    [...commonFields, ...typeSpecificFields, requiredField, validationField].forEach(field => {
+        form.fields[i] = field;
+        i++;
+    });
+    // Add submit button
+    const addButton = {
+        component: 'FormButton',
+        props: {
+            label: 'Add ' + component,
+            type: 'submit',
+            id: 'Add ' + component,
+            text: 'Add ' + component
+        }
+    };
+    form.fields[i] = addButton;
+    return form;
+}
+/**
+ * Generates type selection field for form builder
+ */
+export function generateTypeField() {
+    const form = {};
+    const typeField = {
+        component: 'FormInput',
+        props: {
+            label: 'Type : ',
+            name: 'type',
+            id: 'type',
+            type: 'text',
+            list: 'inputTypes'
+        }
+    };
+    const addButton = {
+        component: 'FormButton',
+        props: {
+            label: 'Build',
+            type: 'submit',
+            id: 'build',
+            text: '===  Build  ==='
+        }
+    };
+    form.fields = [typeField, addButton];
+    return form;
+}
+/**
+ * Converts numeric string props to numbers
+ */
+export function convertNumericProps(props) {
+    const numericProps = ['maxLength', 'minLength', 'rows', 'cols', 'size', 'step'];
+    numericProps.forEach(prop => {
+        if (props[prop] !== undefined &&
+            props[prop] !== null &&
+            props[prop] !== '') {
+            if (typeof props[prop] === 'string') {
+                const num = Number(props[prop]);
+                if (!isNaN(num)) {
+                    props[prop] = num;
+                }
+            }
+        }
+    });
+}
+// Re-export utilities from main utilities file for convenience
+export { generateKey, capitalize, attributeMap };

package/dist/components/sitebuilder/form/formvalidator.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback } from 'react';
+import * as FVF from './formfieldvalidations';
+/**
+ * Centralized field validation service
+ */
+export async function validateField(fieldProps, event) {
+    const errors = [];
+    let isValid = true;
+    // 1. Field-specific validation (e.g., isValidEmailAddress, isValidUrl, etc.)
+    if (fieldProps.validate && typeof fieldProps.validate === "string" && fieldProps.validate in FVF) {
+        const fieldValid = FVF[fieldProps.validate](event.target);
+        if (!fieldValid) {
+            isValid = false;
+            errors.push(`${fieldProps.validate} validation failed`);
+        }
+    }
+    // 2. Parent validation (for grouped/nested fields)
+    if (fieldProps.parent?.validate && typeof fieldProps.parent.validate === "string" && fieldProps.parent.validate in FVF) {
+        const parentValid = FVF[fieldProps.parent.validate](event.target);
+        if (!parentValid) {
+            isValid = false;
+            errors.push(`Parent ${fieldProps.parent.validate} validation failed`);
+        }
+    }
+    // 3. HTML5 required validation
+    if (fieldProps.required) {
+        const requiredValid = event.target.checkValidity();
+        if (!requiredValid) {
+            isValid = false;
+            errors.push('Required field validation failed');
+        }
+    }
+    // 4. Required not empty check
+    if (fieldProps.required && !event.target.value) {
+        isValid = false;
+        errors.push('Field cannot be empty');
+    }
+    // 5. Custom validation rules can be added here
+    // Example: minimum length, maximum length, pattern matching, etc.
+    return { isValid, errors };
+}
+/**
+ * Form validation context for managing form-wide validation state
+ */
+const FormValidationContext = createContext(null);
+export function useFormValidation() {
+    const context = useContext(FormValidationContext);
+    if (!context) {
+        throw new Error('useFormValidation must be used within FormValidationProvider');
+    }
+    return context;
+}
+export function FormValidationProvider({ children }) {
+    const [fieldValidity, setFieldValidity] = useState({});
+    const [fieldErrors, setFieldErrors] = useState({});
+    const validateField = useCallback((fieldId, isValid, errors) => {
+        setFieldValidity(prev => ({ ...prev, [fieldId]: isValid }));
+        setFieldErrors(prev => ({ ...prev, [fieldId]: errors }));
+    }, []);
+    const validateAllFields = useCallback(() => {
+        return Object.values(fieldValidity).every(valid => valid === true);
+    }, [fieldValidity]);
+    const resetValidation = useCallback(() => {
+        setFieldValidity({});
+        setFieldErrors({});
+    }, []);
+    const isFormValid = Object.values(fieldValidity).every(valid => valid === true);
+    const value = {
+        fieldValidity,
+        fieldErrors,
+        isFormValid,
+        validateField,
+        validateAllFields,
+        resetValidation
+    };
+    return (_jsx(FormValidationContext.Provider, { value: value, children: children }));
+}
+/**
+ * Cross-field validation functions
+ */
+export function validatePasswordMatch(formData) {
+    const password = formData.password?.value;
+    const confirm = formData.passwordConfirm?.value;
+    if (!password || !confirm) {
+        return { isValid: true, errors: [] }; // Not required fields
+    }
+    const isValid = password === confirm;
+    return {
+        isValid,
+        errors: isValid ? [] : ['Passwords do not match']
+    };
+}
+export function validateAgeRestriction(formData) {
+    const age = parseInt(formData.age?.value);
+    const hasParentalConsent = formData.parentalConsent?.value === 'yes';
+    if (isNaN(age) || age >= 13) {
+        return { isValid: true, errors: [] };
+    }
+    const isValid = hasParentalConsent;
+    return {
+        isValid,
+        errors: isValid ? [] : ['Parental consent required for users under 13']
+    };
+}
+/**
+ * Form-level validation orchestrator
+ */
+export function validateFormLevel(formData, customValidators = []) {
+    const allErrors = [];
+    let isValid = true;
+    // Run custom cross-field validations
+    const defaultValidators = [validatePasswordMatch, validateAgeRestriction];
+    const allValidators = [...defaultValidators, ...customValidators];
+    for (const validator of allValidators) {
+        const result = validator(formData);
+        if (!result.isValid) {
+            isValid = false;
+            allErrors.push(...result.errors);
+        }
+    }
+    return { isValid, errors: allErrors };
+}

package/dist/components/{pagebuilder → sitebuilder/page}/components/ComponentPropertiesForm.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 // import { PageSectionHeader } from '../../general/pixelated.headers';
-import { FormEngine } from '../form/form';
+import { FormEngine } from '../../form/formengine';
 /**
  * ComponentPropertiesForm - Displays the component properties form
  * Shows FormEngine when component is selected, placeholder otherwise

package/dist/components/{pagebuilder → sitebuilder/page}/components/PageBuilderUI.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { PageSectionHeader } from '../../general/semantic';
+import { PageSectionHeader } from '../../../general/semantic';
 import { usePageBuilder } from '../lib/usePageBuilder';
 import { ComponentSelector } from '../components/ComponentSelector';
 import { ComponentPropertiesForm } from '../components/ComponentPropertiesForm';
 import { PageEngine } from '../components/PageEngine';
 import { SaveLoadSection } from '../components/SaveLoadSection';
-import "../../../css/pixelated.global.css";
+import "../../../../css/pixelated.global.css";
 import './pagebuilder.scss';
 /**
  * PageBuilderUI - Main orchestrator component

package/dist/components/{pagebuilder → sitebuilder/page}/components/PageEngine.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import PropTypes from 'prop-types';
-import { generateKey } from '../../utilities/functions';
+import { generateKey } from '../../../utilities/functions';
 import { componentMap, layoutComponents } from '../lib/componentMap';
 import './pagebuilder.scss';
 /**

package/dist/components/sitebuilder/page/documentation/api-examples/save-route-example.js

@@ -0,0 +1,37 @@
+import { NextResponse } from 'next/server';
+// Choose ONE of these imports:
+// Option 1: File-based storage
+import { savePage } from '../../lib/pageStorageLocal';
+// Option 2: Contentful storage
+// import { savePage } from '@pixelated-tech/components/server';
+// import type { ContentfulConfig } from '@pixelated-tech/components/server';
+export async function POST(request) {
+    try {
+        const body = await request.json();
+        const { name, data } = body;
+        if (!name || !data) {
+            return NextResponse.json({
+                success: false,
+                message: 'Name and data are required'
+            }, { status: 400 });
+        }
+        // ===== OPTION 1: File-based storage =====
+        const result = await savePage(name, data);
+        // ===== OPTION 2: Contentful storage =====
+        // ===== OPTION 2: Contentful storage (recommended when using the unified PIXELATED config blob) =====
+        // The app reads the unified config on the server via `getFullPixelatedConfig()` which
+        // sources values from `PIXELATED_CONFIG_JSON` or `PIXELATED_CONFIG_B64`.
+        // Example (server-side):
+        // import { getFullPixelatedConfig } from '@pixelated-tech/components/server';
+        // const cfg = getFullPixelatedConfig();
+        // const contentfulConfig = cfg.contentful;
+        // const result = await savePage(name, data, contentfulConfig);
+        return NextResponse.json(result);
+    }
+    catch (error) {
+        return NextResponse.json({
+            success: false,
+            message: `Invalid request: ${error}`
+        }, { status: 400 });
+    }
+}

package/dist/components/{pagebuilder → sitebuilder/page}/lib/componentMap.js

@@ -1,6 +1,6 @@
-import { PageTitleHeader, PageSectionHeader } from "../../general/semantic";
-import { Callout } from "../../callout/callout";
-import { PageSection, PageGridItem, PageFlexItem } from "../../general/semantic";
+import { PageTitleHeader, PageSectionHeader } from "../../../general/semantic";
+import { Callout } from "../../../callout/callout";
+import { PageSection, PageGridItem, PageFlexItem } from "../../../general/semantic";
 /**
  * Component registry and constants
  */

package/dist/components/{pagebuilder → sitebuilder/page}/lib/componentMetadata.js

@@ -6,8 +6,8 @@
  * used in PropTypes, generate TypeScript types via InferProps, and provide
  * runtime values for form generation.
  */
-import { variants, shapes, layouts, directions } from "../../callout/callout";
-import { layoutTypes, autoFlowValues, flexDirections, flexWraps, justifyContentValues, alignItemsValues } from "../../general/semantic";
+import { variants, shapes, layouts, directions } from "../../../callout/callout";
+import { layoutTypes, autoFlowValues, flexDirections, flexWraps, justifyContentValues, alignItemsValues } from "../../../general/semantic";
 export const componentMetadata = {
     'Callout': {
         variant: {