@contentful/experiences-visual-editor-react 2.0.0-prerelease-20250703T1150-c529c88.0 → 2.0.0-prerelease-20250704T1125-6c39a4b.0

package/dist/index.js

@@ -12,8 +12,8 @@ import { v4 } from 'uuid';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 
-var css_248z$4 = "html,\nbody {\n  margin: 0;\n  padding: 0;\n}\n\n/*\n * All of these variables are tokens from Forma-36 and should not be adjusted as these\n * are global variables that may affect multiple places.\n * As our customers may use other design libraries, we try to avoid overlapping global\n * variables by always using the prefix `--exp-builder-` inside this SDK.\n */\n\n:root {\n  /* Color tokens from Forma 36: https://f36.contentful.com/tokens/color-system */\n  --exp-builder-blue100: #e8f5ff;\n  --exp-builder-blue200: #ceecff;\n  --exp-builder-blue300: #98cbff;\n  --exp-builder-blue400: #40a0ff;\n  --exp-builder-blue500: #036fe3;\n  --exp-builder-blue600: #0059c8;\n  --exp-builder-blue700: #0041ab;\n  --exp-builder-blue800: #003298;\n  --exp-builder-blue900: #002a8e;\n  --exp-builder-gray100: #f7f9fa;\n  --exp-builder-gray200: #e7ebee;\n  --exp-builder-gray300: #cfd9e0;\n  --exp-builder-gray400: #aec1cc;\n  --exp-builder-gray500: #67728a;\n  --exp-builder-gray600: #5a657c;\n  --exp-builder-gray700: #414d63;\n  --exp-builder-gray800: #1b273a;\n  --exp-builder-gray900: #111b2b;\n  --exp-builder-purple600: #6c3ecf;\n  --exp-builder-red200: #ffe0e0;\n  --exp-builder-red800: #7f0010;\n  --exp-builder-color-white: #ffffff;\n  --exp-builder-glow-primary: 0px 0px 0px 3px #e8f5ff;\n\n  /* RGB colors for applying opacity */\n  --exp-builder-blue100-rgb: 232, 245, 255;\n  --exp-builder-blue300-rgb: 152, 203, 255;\n\n  /* Spacing tokens from Forma 36: https://f36.contentful.com/tokens/spacing */\n  --exp-builder-spacing-s: 0.75rem;\n  --exp-builder-spacing-2xs: 0.25rem;\n\n  /* Typography tokens from Forma 36: https://f36.contentful.com/tokens/typography */\n  --exp-builder-font-size-l: 1rem;\n  --exp-builder-font-size-m: 0.875rem;\n  --exp-builder-font-stack-primary: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,\n    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n  --exp-builder-line-height-condensed: 1.25;\n}\n";
-styleInject(css_248z$4);
+var css_248z$b = "html,\nbody {\n  margin: 0;\n  padding: 0;\n}\n\n/*\n * All of these variables are tokens from Forma-36 and should not be adjusted as these\n * are global variables that may affect multiple places.\n * As our customers may use other design libraries, we try to avoid overlapping global\n * variables by always using the prefix `--exp-builder-` inside this SDK.\n */\n\n:root {\n  /* Color tokens from Forma 36: https://f36.contentful.com/tokens/color-system */\n  --exp-builder-blue100: #e8f5ff;\n  --exp-builder-blue200: #ceecff;\n  --exp-builder-blue300: #98cbff;\n  --exp-builder-blue400: #40a0ff;\n  --exp-builder-blue500: #036fe3;\n  --exp-builder-blue600: #0059c8;\n  --exp-builder-blue700: #0041ab;\n  --exp-builder-blue800: #003298;\n  --exp-builder-blue900: #002a8e;\n  --exp-builder-gray100: #f7f9fa;\n  --exp-builder-gray200: #e7ebee;\n  --exp-builder-gray300: #cfd9e0;\n  --exp-builder-gray400: #aec1cc;\n  --exp-builder-gray500: #67728a;\n  --exp-builder-gray600: #5a657c;\n  --exp-builder-gray700: #414d63;\n  --exp-builder-gray800: #1b273a;\n  --exp-builder-gray900: #111b2b;\n  --exp-builder-purple600: #6c3ecf;\n  --exp-builder-red200: #ffe0e0;\n  --exp-builder-red800: #7f0010;\n  --exp-builder-color-white: #ffffff;\n  --exp-builder-glow-primary: 0px 0px 0px 3px #e8f5ff;\n\n  /* RGB colors for applying opacity */\n  --exp-builder-blue100-rgb: 232, 245, 255;\n  --exp-builder-blue300-rgb: 152, 203, 255;\n\n  /* Spacing tokens from Forma 36: https://f36.contentful.com/tokens/spacing */\n  --exp-builder-spacing-s: 0.75rem;\n  --exp-builder-spacing-2xs: 0.25rem;\n\n  /* Typography tokens from Forma 36: https://f36.contentful.com/tokens/typography */\n  --exp-builder-font-size-l: 1rem;\n  --exp-builder-font-size-m: 0.875rem;\n  --exp-builder-font-stack-primary: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,\n    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n  --exp-builder-line-height-condensed: 1.25;\n}\n";
+styleInject(css_248z$b);
 
 const INCOMING_EVENTS$1 = {
     RequestEditorMode: 'requestEditorMode',
@@ -828,13 +828,7 @@ const ParameterDefinitionSchema$1 = z.object({
         }),
     })
         .optional(),
-    contentTypes: z.record(z.string(), z.object({
-        sys: z.object({
-            type: z.literal('Link'),
-            id: z.string(),
-            linkType: z.enum(['ContentType']),
-        }),
-    })),
+    contentTypes: z.array(z.string()),
     passToNodes: z.array(PassToNodeSchema$1).optional(),
 });
 const ParameterDefinitionsSchema$1 = z.record(propertyKeySchema$1, ParameterDefinitionSchema$1);
@@ -854,7 +848,7 @@ const ComponentSettingsSchema$1 = z
     variableDefinitions: ComponentVariablesSchema$1,
     thumbnailId: z.enum(THUMBNAIL_IDS$1).optional(),
     category: z.string().max(50, 'Category must contain at most 50 characters').optional(),
-    prebindingDefinitions: z.array(PrebindingDefinitionSchema$1).max(1).optional(),
+    prebindingDefinitions: z.array(PrebindingDefinitionSchema$1).length(1).optional(),
 })
     .strict();
 z.object({
@@ -1099,7 +1093,10 @@ propertyName, resolveDesignTokens = true) => {
 };
 /** Overwrites the default value breakpoint by breakpoint. If a breakpoint
  * is not overwritten, it will fall back to the default. */
-const mergeDesignValuesByBreakpoint = (defaultValue, overwriteValue) => {
+function mergeDesignValuesByBreakpoint(defaultValue, overwriteValue) {
+    if (!defaultValue || !overwriteValue) {
+        return defaultValue ?? overwriteValue;
+    }
     const mergedValuesByBreakpoint = { ...defaultValue.valuesByBreakpoint };
     for (const [breakpointId, value] of Object.entries(overwriteValue.valuesByBreakpoint)) {
         if (!isValidBreakpointValue(value)) {
@@ -1111,7 +1108,7 @@ const mergeDesignValuesByBreakpoint = (defaultValue, overwriteValue) => {
         type: 'DesignValue',
         valuesByBreakpoint: mergedValuesByBreakpoint,
     };
-};
+}
 
 const CF_DEBUG_KEY$1 = 'cf_debug';
 /**
@@ -3286,9 +3283,9 @@ const cloneDeepAsPOJO = (obj) => {
     return JSON.parse(JSON.stringify(obj));
 };
 
-var css_248z$3 = ".render-module_hitbox__l4ysJ {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 10px;\n  z-index: 1000000;\n}\n\n.render-module_hitboxLower__tgsA1 {\n  position: absolute;\n  bottom: -20px;\n  left: 0;\n  width: 100%;\n  height: 20px;\n  z-index: 1000000;\n}\n\n.render-module_canvasBottomSpacer__JuxVh {\n  position: absolute;\n  width: 100%;\n  height: 50px;\n}\n\n.render-module_container__-C3d7 {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\nbody {\n  margin: 0;\n}\n\nhtml {\n  -ms-overflow-style: none; /* Internet Explorer 10+ */\n  scrollbar-width: none; /* Firefox */\n}\n\nhtml::-webkit-scrollbar {\n  display: none;\n}\n";
+var css_248z$a = ".render-module_hitbox__l4ysJ {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 10px;\n  z-index: 1000000;\n}\n\n.render-module_hitboxLower__tgsA1 {\n  position: absolute;\n  bottom: -20px;\n  left: 0;\n  width: 100%;\n  height: 20px;\n  z-index: 1000000;\n}\n\n.render-module_canvasBottomSpacer__JuxVh {\n  position: absolute;\n  width: 100%;\n  height: 50px;\n}\n\n.render-module_container__-C3d7 {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\nbody {\n  margin: 0;\n}\n\nhtml {\n  -ms-overflow-style: none; /* Internet Explorer 10+ */\n  scrollbar-width: none; /* Firefox */\n}\n\nhtml::-webkit-scrollbar {\n  display: none;\n}\n";
 var styles$3 = {"hitbox":"render-module_hitbox__l4ysJ","hitboxLower":"render-module_hitboxLower__tgsA1","canvasBottomSpacer":"render-module_canvasBottomSpacer__JuxVh","container":"render-module_container__-C3d7"};
-styleInject(css_248z$3);
+styleInject(css_248z$a);
 
 // TODO: In order to support integrations without React, we should extract this heavy logic into simple
 // functions that we can reuse in other frameworks.
@@ -3455,6 +3452,9 @@ const useEditorStore = create((set, get) => ({
     },
 }));
 
+var css_248z$8 = "@import url(https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;1,400;1,600&display=swap);:root{--cf-color-white:#fff;--cf-color-black:#000;--cf-color-gray100:#f7f9fa;--cf-color-gray400:#aec1cc;--cf-color-gray400-rgb:174,193,204;--cf-spacing-0:0rem;--cf-spacing-1:0.125rem;--cf-spacing-2:0.25rem;--cf-spacing-3:0.375rem;--cf-spacing-4:0.5rem;--cf-spacing-5:0.625rem;--cf-spacing-6:0.75rem;--cf-spacing-7:0.875rem;--cf-spacing-8:1rem;--cf-spacing-9:1.25rem;--cf-spacing-10:1.5rem;--cf-spacing-11:1.75rem;--cf-spacing-12:2rem;--cf-spacing-13:2.25rem;--cf-text-xs:0.75rem;--cf-text-sm:0.875rem;--cf-text-base:1rem;--cf-text-lg:1.125rem;--cf-text-xl:1.25rem;--cf-text-2xl:1.5rem;--cf-text-3xl:2rem;--cf-text-4xl:2.75rem;--cf-font-light:300;--cf-font-normal:400;--cf-font-medium:500;--cf-font-semibold:600;--cf-font-bold:700;--cf-font-extra-bold:800;--cf-font-black:900;--cf-border-radius-none:0px;--cf-border-radius-sm:0.125rem;--cf-border-radius:0.25rem;--cf-border-radius-md:0.375rem;--cf-border-radius-lg:0.5rem;--cf-border-radius-xl:0.75rem;--cf-border-radius-2xl:1rem;--cf-border-radius-3xl:1.5rem;--cf-border-radius-full:9999px;--cf-font-family-sans:Archivo,Helvetica,Arial,sans-serif;--cf-font-family-serif:Georgia,Cambria,Times New Roman,Times,serif;--cf-max-width-full:100%;--cf-button-bg:var(--cf-color-black);--cf-button-color:var(--cf-color-white);--cf-text-color:var(--cf-color-black)}*{box-sizing:border-box}";
+styleInject(css_248z$8);
+
 /**
  * These modes are ONLY intended to be internally used within the context of
  * editing an experience inside of Contentful Studio. i.e. these modes
@@ -3472,6 +3472,21 @@ var PostMessageMethods$1;
     PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
 })(PostMessageMethods$1 || (PostMessageMethods$1 = {}));
 
+var css_248z$7 = ".cf-button:empty:before{content:\"\";display:inline-block}";
+styleInject(css_248z$7);
+
+var css_248z$6 = ".cf-heading{white-space:pre-line}";
+styleInject(css_248z$6);
+
+var css_248z$5 = ".cf-richtext{white-space:pre-line}.cf-richtext>:first-child{margin-top:0}.cf-richtext>:last-child{margin-bottom:0}";
+styleInject(css_248z$5);
+
+var css_248z$4 = ".cf-text{white-space:pre-line}.cf-text-link .cf-text{margin:0}";
+styleInject(css_248z$4);
+
+var css_248z$3 = "div.cf-placeholder-wrapper{position:relative}img.cf-placeholder-image{background-color:var(--cf-color-gray100);height:100%;outline:2px solid rgba(var(--cf-color-gray400-rgb),.5);outline-offset:-2px;width:100%}svg.cf-placeholder-icon{height:var(--cf-text-3xl);left:50%;max-height:100%;max-width:100%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--cf-text-3xl)}svg.cf-placeholder-icon path{fill:var(--cf-color-gray400)}";
+styleInject(css_248z$3);
+
 /**
  * These modes are ONLY intended to be internally used within the context of
  * editing an experience inside of Contentful Studio. i.e. these modes
@@ -3799,13 +3814,7 @@ const ParameterDefinitionSchema = z.object({
         }),
     })
         .optional(),
-    contentTypes: z.record(z.string(), z.object({
-        sys: z.object({
-            type: z.literal('Link'),
-            id: z.string(),
-            linkType: z.enum(['ContentType']),
-        }),
-    })),
+    contentTypes: z.array(z.string()),
     passToNodes: z.array(PassToNodeSchema).optional(),
 });
 const ParameterDefinitionsSchema = z.record(propertyKeySchema, ParameterDefinitionSchema);
@@ -3825,7 +3834,7 @@ const ComponentSettingsSchema = z
     variableDefinitions: ComponentVariablesSchema,
     thumbnailId: z.enum(THUMBNAIL_IDS).optional(),
     category: z.string().max(50, 'Category must contain at most 50 characters').optional(),
-    prebindingDefinitions: z.array(PrebindingDefinitionSchema).max(1).optional(),
+    prebindingDefinitions: z.array(PrebindingDefinitionSchema).length(1).optional(),
 })
     .strict();
 z.object({
@@ -4450,6 +4459,9 @@ var VisualEditorMode;
     VisualEditorMode["InjectScript"] = "injectScript";
 })(VisualEditorMode || (VisualEditorMode = {}));
 
+var css_248z$2$1 = ".contentful-container{display:flex;pointer-events:all;position:relative}.contentful-container::-webkit-scrollbar{display:none}.cf-single-column-wrapper{position:relative}.cf-container-wrapper{position:relative;width:100%}.contentful-container:after{align-items:center;bottom:0;color:var(--exp-builder-gray400);content:\"\";display:block;display:flex;font-family:var(--exp-builder-font-stack-primary);font-size:12px;justify-content:center;left:0;overflow-x:clip;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.contentful-section-label:after{content:\"Section\"}.contentful-container-label:after{content:\"Container\"}.contentful-container-link,.contentful-container-link:active,.contentful-container-link:focus-visible,.contentful-container-link:hover,.contentful-container-link:read-write,.contentful-container-link:visited{color:inherit;outline:unset;text-decoration:unset}";
+styleInject(css_248z$2$1);
+
 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) => {
     return (React.createElement("div", { id: id, ref: ref, style: {
             display: 'flex',
@@ -4472,6 +4484,12 @@ const Flex = forwardRef(({ id, children, onMouseEnter, onMouseUp, onMouseLeave,
 });
 Flex.displayName = 'Flex';
 
+var css_248z$1$1 = ".cf-divider{display:contents;height:100%;position:relative;width:100%}.cf-divider hr{border:none}[data-ctfl-zone-id=root] .cf-divider:before{bottom:-5px;content:\"\";left:-5px;pointer-events:all;position:absolute;right:-5px;top:-5px}";
+styleInject(css_248z$1$1);
+
+var css_248z$9 = ".cf-columns{display:flex;flex-direction:column;gap:24px;grid-template-columns:repeat(12,1fr);min-height:0;min-width:0}@media (min-width:768px){.cf-columns{display:grid}}.cf-single-column-wrapper{display:flex;position:relative}.cf-single-column{pointer-events:all}.cf-single-column-wrapper:after{align-items:center;bottom:0;color:var(--exp-builder-gray400);content:\"\";display:block;display:flex;font-family:var(--exp-builder-font-stack-primary);font-size:12px;justify-content:center;left:0;overflow-x:clip;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.cf-single-column-label:after{content:\"Column\"}";
+styleInject(css_248z$9);
+
 const ColumnWrapper = forwardRef((props, ref) => {
     return (React.createElement("div", { ref: ref, ...props, style: {
             ...(props.style || {}),
@@ -5266,7 +5284,7 @@ const maybeMergePatternDefaultDesignValues = ({ variableName, variableMapping, n
             parentPatternNode = findNodeById(parentPatternNode.data.pattern?.nodeId);
         }
         const mergedDesignValue = mergeDesignValuesByBreakpoint(exposedDefaultValue, variableMapping);
-        return mergedDesignValue.valuesByBreakpoint;
+        return mergedDesignValue?.valuesByBreakpoint;
     }
     return variableMapping.valuesByBreakpoint;
 };