@contentful/experiences-components-react 1.39.0-alpha-20250528T1342-e28bc3d.0 → 1.39.0-beta.0

package/dist/index.js

@@ -9,7 +9,6 @@ import 'md5';
 var css_248z$8 = "/* Initially added with PR #253 for each component, this is now a global setting\n * It is recommended on MDN to use this as a default for layouting.\n*/\n* {\n  box-sizing: border-box;\n}\n";
 styleInject(css_248z$8);
 
-/** @deprecated will be removed when dropping backward compatibility for old DND */
 /**
  * These modes are ONLY intended to be internally used within the context of
  * editing an experience inside of Contentful Studio. i.e. these modes
@@ -1162,17 +1161,16 @@ const PrimitiveValueSchema = z.union([
     z.record(z.any(), z.any()),
     z.undefined(),
 ]);
+const UsedComponentsSchema = z.array(z.object({
+    sys: z.object({
+        type: z.literal('Link'),
+        id: z.string(),
+        linkType: z.literal('Entry'),
+    }),
+}));
 const uuidKeySchema = z
     .string()
     .regex(/^[a-zA-Z0-9-_]{1,21}$/, { message: 'Does not match /^[a-zA-Z0-9-_]{1,21}$/' });
-/**
- * Property keys for imported components have a limit of 32 characters (to be implemented) while
- * property keys for patterns have a limit of 54 characters (<32-char-variabl-name>_<21-char-nanoid-id>).
- * Because we cannot distinguish between the two in the componentTree, we will use the larger limit for both.
- */
-const propertyKeySchema = z
-    .string()
-    .regex(/^[a-zA-Z0-9-_]{1,54}$/, { message: 'Does not match /^[a-zA-Z0-9-_]{1,54}$/' });
 const DataSourceSchema = z.record(uuidKeySchema, z.object({
     sys: z.object({
         type: z.literal('Link'),
@@ -1180,7 +1178,62 @@ const DataSourceSchema = z.record(uuidKeySchema, z.object({
         linkType: z.enum(['Entry', 'Asset']),
     }),
 }));
+const UnboundValuesSchema = z.record(uuidKeySchema, z.object({
+    value: PrimitiveValueSchema,
+}));
+/**
+ * Property keys for imported components have a limit of 32 characters (to be implemented) while
+ * property keys for patterns have a limit of 54 characters (<32-char-variable-name>_<21-char-nanoid-id>).
+ * Because we cannot distinguish between the two in the componentTree, we will use the larger limit for both.
+ */
+const propertyKeySchema = z
+    .string()
+    .regex(/^[a-zA-Z0-9-_]{1,54}$/, { message: 'Does not match /^[a-zA-Z0-9-_]{1,54}$/' });
+const ComponentTreeNodeIdSchema = z
+    .string()
+    .regex(/^[a-zA-Z0-9]{1,8}$/, { message: 'Does not match /^[a-zA-Z0-9]{1,8}$/' });
+const breakpointsRefinement = (value, ctx) => {
+    if (!value.length || value[0].query !== '*') {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `The first breakpoint should include the following attributes: { "query": "*" }`,
+        });
+    }
+    const hasDuplicateIds = value.some((currentBreakpoint, currentBreakpointIndex) => {
+        // check if the current breakpoint id is found in the rest of the array
+        const breakpointIndex = value.findIndex((breakpoint) => breakpoint.id === currentBreakpoint.id);
+        return breakpointIndex !== currentBreakpointIndex;
+    });
+    if (hasDuplicateIds) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Breakpoint IDs must be unique`,
+        });
+    }
+    // Extract the queries boundary by removing the special characters around it
+    const queries = value.map((bp) => bp.query === '*' ? bp.query : parseInt(bp.query.replace(/px|<|>/, '')));
+    // sort updates queries array in place so we need to create a copy
+    const originalQueries = [...queries];
+    queries.sort((q1, q2) => {
+        if (q1 === '*') {
+            return -1;
+        }
+        if (q2 === '*') {
+            return 1;
+        }
+        return q1 > q2 ? -1 : 1;
+    });
+    if (originalQueries.join('') !== queries.join('')) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Breakpoints should be ordered from largest to smallest pixel value`,
+        });
+    }
+};
 const ValuesByBreakpointSchema = z.record(z.lazy(() => PrimitiveValueSchema));
+const BindingSourceTypeEnumSchema = z
+    .array(z.enum(['entry', 'asset', 'manual', 'experience']))
+    .nonempty();
 const DesignValueSchema = z
     .object({
     type: z.literal('DesignValue'),
@@ -1213,8 +1266,6 @@ const ComponentValueSchema = z
     key: z.string(),
 })
     .strict();
-// TODO: finalize schema structure before release
-// https://contentful.atlassian.net/browse/LUMOS-523
 const NoValueSchema = z.object({ type: z.literal('NoValue') }).strict();
 const ComponentPropertyValueSchema = z.discriminatedUnion('type', [
     DesignValueSchema,
@@ -1226,41 +1277,12 @@ const ComponentPropertyValueSchema = z.discriminatedUnion('type', [
 ]);
 // TODO: finalize schema structure before release
 // https://contentful.atlassian.net/browse/LUMOS-523
-const VariableMappingSchema = z.object({
-    patternPropertyDefinitionId: propertyKeySchema,
-    type: z.literal('ContentTypeMapping'),
-    pathsByContentType: z.record(z.string(), z.object({ path: z.string() })),
-});
-const VariableMappingsSchema = z.record(propertyKeySchema, VariableMappingSchema);
-// TODO: finalize schema structure before release
-// https://contentful.atlassian.net/browse/LUMOS-523
-const PatternPropertyDefinitionSchema = z.object({
-    defaultValue: z
-        .record(z.string(), z.object({
-        sys: z.object({
-            type: z.literal('Link'),
-            id: z.string(),
-            linkType: z.enum(['Entry']),
-        }),
-    }))
-        .optional(),
-    contentTypes: z.record(z.string(), z.object({
-        sys: z.object({
-            type: z.literal('Link'),
-            id: z.string(),
-            linkType: z.enum(['ContentType']),
-        }),
-    })),
-});
-const PatternPropertyDefinitionsSchema = z.record(propertyKeySchema, PatternPropertyDefinitionSchema);
-// TODO: finalize schema structure before release
-// https://contentful.atlassian.net/browse/LUMOS-523
 const PatternPropertySchema = z.object({
     type: z.literal('BoundValue'),
     path: z.string(),
     contentType: z.string(),
 });
-const PatternPropertysSchema = z.record(propertyKeySchema, PatternPropertySchema);
+const PatternPropertiesSchema = z.record(propertyKeySchema, PatternPropertySchema);
 const BreakpointSchema = z
     .object({
     id: propertyKeySchema,
@@ -1270,12 +1292,6 @@ const BreakpointSchema = z
     displayIcon: z.enum(['desktop', 'tablet', 'mobile']).optional(),
 })
     .strict();
-const UnboundValuesSchema = z.record(uuidKeySchema, z.object({
-    value: PrimitiveValueSchema,
-}));
-const ComponentTreeNodeIdSchema = z
-    .string()
-    .regex(/^[a-zA-Z0-9]{1,8}$/, { message: 'Does not match /^[a-zA-Z0-9]{1,8}$/' });
 // Use helper schema to define a recursive schema with its type correctly below
 const BaseComponentTreeNodeSchema = z.object({
     id: ComponentTreeNodeIdSchema.optional(),
@@ -1283,14 +1299,8 @@ const BaseComponentTreeNodeSchema = z.object({
     displayName: z.string().optional(),
     slotId: z.string().optional(),
     variables: z.record(propertyKeySchema, ComponentPropertyValueSchema),
-    patternProperties: PatternPropertysSchema.optional(),
-});
-const ComponentTreeNodeSchema = BaseComponentTreeNodeSchema.extend({
-    children: z.lazy(() => ComponentTreeNodeSchema.array()),
+    patternProperties: PatternPropertiesSchema.optional(),
 });
-const BindingSourceTypeEnumSchema = z
-    .array(z.enum(['entry', 'asset', 'manual', 'experience']))
-    .nonempty();
 const ComponentVariableSchema = z.object({
     displayName: z.string().optional(),
     type: DefinitionPropertyTypeSchema,
@@ -1311,8 +1321,25 @@ const ComponentVariableSchema = z.object({
     })
         .optional(),
 });
-const ComponentVariablesSchema = z.record(z.string().regex(/^[a-zA-Z0-9-_]{1,54}$/), // Here the key is <variableName>_<nanoidId> so we need to allow for a longer length
-ComponentVariableSchema);
+const ComponentTreeNodeSchema = BaseComponentTreeNodeSchema.extend({
+    children: z.lazy(() => ComponentTreeNodeSchema.array()),
+});
+const ComponentTreeSchema = z
+    .object({
+    breakpoints: z.array(BreakpointSchema).superRefine(breakpointsRefinement),
+    children: z.array(ComponentTreeNodeSchema),
+    schemaVersion: SchemaVersions,
+})
+    .strict();
+const localeWrapper = (fieldSchema) => z.record(z.string(), fieldSchema);
+
+z.object({
+    componentTree: localeWrapper(ComponentTreeSchema),
+    dataSource: localeWrapper(DataSourceSchema),
+    unboundValues: localeWrapper(UnboundValuesSchema),
+    usedComponents: localeWrapper(UsedComponentsSchema).optional(),
+});
+
 const THUMBNAIL_IDS = [
     'columns',
     'columnsPlusRight',
@@ -1338,6 +1365,37 @@ const THUMBNAIL_IDS = [
     'textColumns',
     'duplex',
 ];
+// TODO: finalize schema structure before release
+// https://contentful.atlassian.net/browse/LUMOS-523
+const VariableMappingSchema = z.object({
+    patternPropertyDefinitionId: propertyKeySchema,
+    type: z.literal('ContentTypeMapping'),
+    pathsByContentType: z.record(z.string(), z.object({ path: z.string() })),
+});
+// TODO: finalize schema structure before release
+// https://contentful.atlassian.net/browse/LUMOS-523
+const PatternPropertyDefinitionSchema = z.object({
+    defaultValue: z
+        .record(z.string(), z.object({
+        sys: z.object({
+            type: z.literal('Link'),
+            id: z.string(),
+            linkType: z.enum(['Entry']),
+        }),
+    }))
+        .optional(),
+    contentTypes: z.record(z.string(), z.object({
+        sys: z.object({
+            type: z.literal('Link'),
+            id: z.string(),
+            linkType: z.enum(['ContentType']),
+        }),
+    })),
+});
+const PatternPropertyDefinitionsSchema = z.record(propertyKeySchema, PatternPropertyDefinitionSchema);
+const VariableMappingsSchema = z.record(propertyKeySchema, VariableMappingSchema);
+const ComponentVariablesSchema = z.record(z.string().regex(/^[a-zA-Z0-9-_]{1,54}$/), // Here the key is <variableName>_<nanoidId> so we need to allow for a longer length
+ComponentVariableSchema);
 const ComponentSettingsSchema = z.object({
     variableDefinitions: ComponentVariablesSchema,
     thumbnailId: z.enum(THUMBNAIL_IDS).optional(),
@@ -1345,65 +1403,12 @@ const ComponentSettingsSchema = z.object({
     variableMappings: VariableMappingsSchema.optional(),
     patternPropertyDefinitions: PatternPropertyDefinitionsSchema.optional(),
 });
-const UsedComponentsSchema = z.array(z.object({
-    sys: z.object({
-        type: z.literal('Link'),
-        id: z.string(),
-        linkType: z.literal('Entry'),
-    }),
-}));
-const breakpointsRefinement = (value, ctx) => {
-    if (!value.length || value[0].query !== '*') {
-        ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: `The first breakpoint should include the following attributes: { "query": "*" }`,
-        });
-    }
-    const hasDuplicateIds = value.some((currentBreakpoint, currentBreakpointIndex) => {
-        // check if the current breakpoint id is found in the rest of the array
-        const breakpointIndex = value.findIndex((breakpoint) => breakpoint.id === currentBreakpoint.id);
-        return breakpointIndex !== currentBreakpointIndex;
-    });
-    if (hasDuplicateIds) {
-        ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: `Breakpoint IDs must be unique`,
-        });
-    }
-    // Extract the queries boundary by removing the special characters around it
-    const queries = value.map((bp) => bp.query === '*' ? bp.query : parseInt(bp.query.replace(/px|<|>/, '')));
-    // sort updates queries array in place so we need to create a copy
-    const originalQueries = [...queries];
-    queries.sort((q1, q2) => {
-        if (q1 === '*') {
-            return -1;
-        }
-        if (q2 === '*') {
-            return 1;
-        }
-        return q1 > q2 ? -1 : 1;
-    });
-    if (originalQueries.join('') !== queries.join('')) {
-        ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: `Breakpoints should be ordered from largest to smallest pixel value`,
-        });
-    }
-};
-const ComponentTreeSchema = z
-    .object({
-    breakpoints: z.array(BreakpointSchema).superRefine(breakpointsRefinement),
-    children: z.array(ComponentTreeNodeSchema),
-    schemaVersion: SchemaVersions,
-})
-    .strict();
-const localeWrapper = (fieldSchema) => z.record(z.string(), fieldSchema);
 z.object({
     componentTree: localeWrapper(ComponentTreeSchema),
     dataSource: localeWrapper(DataSourceSchema),
     unboundValues: localeWrapper(UnboundValuesSchema),
     usedComponents: localeWrapper(UsedComponentsSchema).optional(),
-    componentSettings: localeWrapper(ComponentSettingsSchema).optional(),
+    componentSettings: localeWrapper(ComponentSettingsSchema),
 });
 
 z.object({
@@ -1527,6 +1532,32 @@ var CodeNames;
 })(CodeNames || (CodeNames = {}));
 
 const CF_DEBUG_KEY = 'cf_debug';
+/**
+ * To ensure that the localStorage API can be used safely, we check
+ * for availability (e.g. undefined in Node.js). Additionally, we
+ * check if the localStorage can be used as some browsers throw a
+ * SecurityError (e.g. Brave or Chromium with specific settings).
+ */
+const checkLocalStorageAvailability = () => {
+    if (typeof localStorage === 'undefined' || localStorage === null) {
+        return false;
+    }
+    try {
+        // Attempt to set and remove an item to check if localStorage is enabled
+        const TEST_KEY = 'cf_test_local_storage';
+        localStorage.setItem(TEST_KEY, 'yes');
+        if (localStorage.getItem(TEST_KEY) === 'yes') {
+            localStorage.removeItem(TEST_KEY);
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    catch (_error) {
+        return false;
+    }
+};
 class DebugLogger {
     constructor() {
         // Public methods for logging
@@ -1534,7 +1565,7 @@ class DebugLogger {
         this.warn = this.logger('warn');
         this.log = this.logger('log');
         this.debug = this.logger('debug');
-        if (typeof localStorage === 'undefined') {
+        if (!checkLocalStorageAvailability()) {
             this.enabled = false;
             return;
         }
@@ -1580,7 +1611,7 @@ var VisualEditorMode;
     VisualEditorMode["InjectScript"] = "injectScript";
 })(VisualEditorMode || (VisualEditorMode = {}));
 
-var css_248z$2 = ".contentful-container {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  pointer-events: all;\n}\n\n.contentful-container::-webkit-scrollbar {\n  display: none; /* Safari and Chrome */\n}\n\n.cf-container-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.contentful-container:after {\n  content: '';\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 1;\n}\n\n.contentful-section-label:after {\n  content: 'Section';\n}\n\n.contentful-container-label:after {\n  content: 'Container';\n}\n\n/* used by ContentfulSectionAsHyperlink.tsx */\n\n.contentful-container-link,\n.contentful-container-link:active,\n.contentful-container-link:visited,\n.contentful-container-link:hover,\n.contentful-container-link:read-write,\n.contentful-container-link:focus-visible {\n  color: inherit;\n  text-decoration: unset;\n  outline: unset;\n}\n";
+var css_248z$2 = ".contentful-container {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  pointer-events: all;\n}\n\n.contentful-container::-webkit-scrollbar {\n  display: none; /* Safari and Chrome */\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n}\n\n.cf-container-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.contentful-container:after {\n  content: '';\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 1;\n}\n\n.contentful-section-label:after {\n  content: 'Section';\n}\n\n.contentful-container-label:after {\n  content: 'Container';\n}\n\n/* used by ContentfulSectionAsHyperlink.tsx */\n\n.contentful-container-link,\n.contentful-container-link:active,\n.contentful-container-link:visited,\n.contentful-container-link:hover,\n.contentful-container-link:read-write,\n.contentful-container-link:focus-visible {\n  color: inherit;\n  text-decoration: unset;\n  outline: unset;\n}\n";
 styleInject(css_248z$2);
 
 const Flex = forwardRef(({ id, children, onMouseEnter, onMouseUp, onMouseLeave, onMouseDown, onClick, flex, flexBasis, flexShrink, flexDirection, gap, justifyContent, justifyItems, justifySelf, alignItems, alignSelf, alignContent, order, flexWrap, flexGrow, className, cssStyles, ...props }, ref) => {
@@ -1605,29 +1636,31 @@ const Flex = forwardRef(({ id, children, onMouseEnter, onMouseUp, onMouseLeave,
 });
 Flex.displayName = 'Flex';
 
-function extractRenderProps(props) {
-    if (props.editorMode) {
-        const { editorMode, node, children, ...renderProps } = props;
-        return renderProps;
-    }
-    const { editorMode, children, ...renderProps } = props;
-    return renderProps;
-}
-
+/* eslint-disable */ /* TODO: fix eslint errors */
 const ContentfulContainerAsHyperlink = (props) => {
-    const { cfHyperlink, cfOpenInNewTab, editorMode, className, children, ...otherProps } = props;
-    const eventHandlingProps = editorMode === true ? { onClick: stopEventPropagation } : {};
-    const anchorTagProps = cfOpenInNewTab
-        ? {
-            target: '_blank',
-            rel: 'noopener noreferrer',
+    const { cfHyperlink, cfOpenInNewTab, editorMode, className, children } = props;
+    if (editorMode === false) {
+        let anchorTagProps = {};
+        if (cfOpenInNewTab) {
+            anchorTagProps = {
+                target: '_blank',
+                rel: 'noopener noreferrer',
+            };
         }
-        : {};
-    return (React.createElement("a", { className: combineClasses(className, 'contentful-container', 'contentful-container-link'), href: cfHyperlink, ...anchorTagProps, ...eventHandlingProps, ...extractRenderProps(otherProps) }, children));
-};
-const stopEventPropagation = (event) => {
-    event.stopPropagation();
-    event.preventDefault();
+        return (React.createElement("a", { className: combineClasses(className, 'contentful-container', 'contentful-container-link'), href: cfHyperlink, ...anchorTagProps }, children));
+    }
+    const { renderDropzone, node } = props;
+    const stopPropagationInEditorMode = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+    };
+    return renderDropzone(node, {
+        ['data-test-id']: 'contentful-container',
+        className: combineClasses(className, 'contentful-container', 'contentful-container-link'),
+        zoneId: node.data.id,
+        WrapperComponent: 'a',
+        onClick: stopPropagationInEditorMode,
+    });
 };
 
 /* eslint-disable */
@@ -1636,14 +1669,21 @@ const ContentfulContainer = (props) => {
     if (cfHyperlink) {
         return React.createElement(ContentfulContainerAsHyperlink, { ...props }, children);
     }
-    if (!editorMode) {
+    if (editorMode === false) {
         return (React.createElement(Flex, { "data-test-id": "contentful-container", className: combineClasses(className, 'contentful-container') }, children));
     }
     // Extract properties that are only available in editor mode
-    const { node } = props;
+    const { renderDropzone, node, dragProps = {}, ...editorModeProps } = props;
     const isEmpty = !node.children.length;
     const isSection = node.data.blockId === CONTENTFUL_COMPONENTS$1.section.id;
-    return (React.createElement(Flex, { "data-test-id": "contentful-container", ...extractRenderProps(props), className: combineClasses(className, 'contentful-container', isEmpty ? (isSection ? 'contentful-section-label' : 'contentful-container-label') : '') }, children));
+    return renderDropzone(node, {
+        ...editorModeProps,
+        ['data-test-id']: 'contentful-container',
+        id: 'ContentfulContainer',
+        className: combineClasses('contentful-container', className, isEmpty ? (isSection ? 'contentful-section-label' : 'contentful-container-label') : ''),
+        WrapperComponent: Flex,
+        dragProps,
+    });
 };
 
 const containerDefinition = {
@@ -1667,7 +1707,7 @@ const sectionDefinition = {
     },
 };
 
-var css_248z$1 = ".cf-divider {\n  display: contents;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.cf-divider hr {\n  border: none;\n}\n";
+var css_248z$1 = ".cf-divider {\n  display: contents;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.cf-divider hr {\n  border: none;\n}\n\n/* For the editor mode add this 10px tolerance to make it easier picking up the divider component.\n * Using the DND zone as precondition makes sure that we don't render this pseudo element in delivery. */\n\n[data-ctfl-zone-id='root'] .cf-divider::before {\n  content: \"\";\n  position: absolute;\n  top: -5px;\n  left: -5px;\n  bottom: -5px;\n  right: -5px;\n  pointer-events: all;\n}\n";
 styleInject(css_248z$1);
 
 const ContentfulDivider = ({ className = '', 
@@ -1688,25 +1728,48 @@ const dividerDefinition = {
     },
 };
 
-var css_248z = ".cf-columns {\n  display: flex;\n  gap: 24px;\n  grid-template-columns: repeat(12, 1fr);\n  flex-direction: column;\n  min-height: 0; /* NEW */\n  min-width: 0; /* NEW; needed for Firefox */\n}\n\n@media (min-width: 768px) {\n  .cf-columns {\n    display: grid;\n  }\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n}\n\n.cf-single-column-wrapper:after {\n  content: '';\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 1;\n}\n\n.cf-single-column-label:after {\n  content: 'Column';\n}\n";
+var css_248z = ".cf-columns {\n  display: flex;\n  gap: 24px;\n  grid-template-columns: repeat(12, 1fr);\n  flex-direction: column;\n  min-height: 0; /* NEW */\n  min-width: 0; /* NEW; needed for Firefox */\n}\n\n@media (min-width: 768px) {\n  .cf-columns {\n    display: grid;\n  }\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n  display: flex;\n}\n\n.cf-single-column {\n  pointer-events: all;\n}\n\n.cf-single-column-wrapper:after {\n  content: '';\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 1;\n}\n\n.cf-single-column-label:after {\n  content: 'Column';\n}\n";
 styleInject(css_248z);
 
-const Columns = ({ className, children, ...otherProps }) => {
-    return (React.createElement("div", { className: combineClasses(className, 'cf-columns'), style: {
+const ColumnWrapper = forwardRef((props, ref) => {
+    return (React.createElement("div", { ref: ref, ...props, style: {
+            ...(props.style || {}),
             display: 'grid',
             gridTemplateColumns: 'repeat(12, [col-start] 1fr)',
-        }, ...extractRenderProps(otherProps) }, children));
+        } }, props.children));
+});
+ColumnWrapper.displayName = 'ColumnWrapper';
+const Columns = (props) => {
+    const { editorMode, className, children } = props;
+    if (!editorMode) {
+        return (React.createElement(ColumnWrapper, { className: combineClasses(className, 'cf-columns') }, children));
+    }
+    const { node, renderDropzone, dragProps = {}, ...rest } = props;
+    return renderDropzone(node, {
+        ...rest,
+        ['data-test-id']: 'contentful-columns',
+        id: 'ContentfulContainer',
+        className: combineClasses('cf-columns', className),
+        WrapperComponent: ColumnWrapper,
+        dragProps,
+    });
 };
 
 const SingleColumn = (props) => {
-    const { className, editorMode } = props;
-    if (!editorMode) {
-        return React.createElement(Flex, { className: className }, props.children);
+    const { className, editorMode, children } = props;
+    if (editorMode === false) {
+        return React.createElement(Flex, { className: className }, children);
     }
-    const { node, children } = props;
+    const { renderDropzone, node, className: _className, dragProps = {}, cfColumnSpan, editorMode: edit, ...editorProps } = props;
     const isEmpty = !node.children.length;
-    const mixedClassName = combineClasses('cf-single-column-wrapper', className, isEmpty ? 'cf-single-column-label' : '');
-    return (React.createElement(Flex, { ...extractRenderProps(props), className: mixedClassName }, children));
+    return renderDropzone(node, {
+        ['data-test-id']: 'contentful-single-column',
+        id: 'ContentfulSingleColumn',
+        className: combineClasses('cf-single-column-wrapper', className, isEmpty ? 'cf-single-column-label' : ''),
+        WrapperComponent: Flex,
+        dragProps,
+        ...editorProps,
+    });
 };
 
 const columnsDefinition = {
@@ -1728,7 +1791,18 @@ const singleColumnDefinition = {
 };
 
 const assemblyStyle = { display: 'contents' };
+// Feel free to do any magic as regards variable definitions for assemblies
+// Or if this isn't necessary by the time we figure that part out, we can bid this part farewell
 const Assembly = (props) => {
+    if (props.editorMode) {
+        const { node, dragProps, ...editorModeProps } = props;
+        return props.renderDropzone(node, {
+            ...editorModeProps,
+            ['data-test-id']: 'contentful-assembly',
+            className: props.className,
+            dragProps,
+        });
+    }
     // Using a display contents so assembly content/children
     // can appear as if they are direct children of the div wrapper's parent
     return React.createElement("div", { "data-test-id": "assembly", ...props, style: assemblyStyle });