@contentful/experiences-components-react 1.41.1-dev-20250613T1026-3de1677.0 → 1.42.0-beta.0

package/dist/index.css

@@ -0,0 +1 @@
+@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}.cf-button:empty:before{content:"";display:inline-block}.cf-heading,.cf-richtext{white-space:pre-line}.cf-richtext>:first-child{margin-top:0}.cf-richtext>:last-child{margin-bottom:0}.cf-text{white-space:pre-line}.cf-text-link .cf-text{margin:0}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)}.contentful-container{display:flex;pointer-events:all;position:relative}.contentful-container::-webkit-scrollbar{display:none}.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}.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}.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"}

package/dist/index.js

@@ -1,4 +1,3 @@
-import styleInject from 'style-inject';
 import React, { forwardRef } from 'react';
 import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
 import { BLOCKS } from '@contentful/rich-text-types';
@@ -6,9 +5,6 @@ import { z } from 'zod';
 import 'lodash-es';
 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);
-
 /**
  * These modes are ONLY intended to be internally used within the context of
  * editing an experience inside of Contentful Studio. i.e. these modes
@@ -81,9 +77,6 @@ function combineClasses(...classes) {
         .join(' ');
 }
 
-var css_248z$7 = "/* If the label is empty, still render the normal height by adding this pseudo element */\n.cf-button:empty::before {\n  content: '';\n  display: inline-block;\n}\n";
-styleInject(css_248z$7);
-
 const Button = ({ children, className, label, onClick, onNavigate, target, url, ...props }) => {
     const classes = combineClasses('cf-button', className);
     const handleClick = (event) => {
@@ -196,9 +189,6 @@ const ButtonComponentDefinition = {
     },
 };
 
-var css_248z$6 = ".cf-heading {\n  white-space: pre-line;\n}\n";
-styleInject(css_248z$6);
-
 const Heading = ({ children, className, text, type = 'h1', ...props }) => {
     const Tag = type;
     const classes = combineClasses('cf-heading', className);
@@ -285,9 +275,6 @@ const HeadingComponentDefinition = {
     },
 };
 
-var css_248z$5 = ".cf-richtext {\n  white-space: pre-line;\n}\n\n.cf-richtext > *:first-child {\n  margin-top: 0;\n}\n\n.cf-richtext > *:last-child {\n  margin-bottom: 0;\n}\n";
-styleInject(css_248z$5);
-
 const RichText = ({ as = 'p', className, value, ...props }) => {
     const Tag = as;
     return (React.createElement("div", { className: combineClasses('cf-richtext', className), ...props }, documentToReactComponents(value, {
@@ -375,9 +362,6 @@ const RichTextComponentDefinition = {
     },
 };
 
-var css_248z$4 = ".cf-text {\n  white-space: pre-line;\n}\n\n.cf-text-link .cf-text {\n  margin: 0;\n}\n";
-styleInject(css_248z$4);
-
 const Text = ({ as = 'p', children, className, value, url, target, onNavigate, onClick, ...props }) => {
     const Tag = as;
     if (url) {
@@ -469,9 +453,6 @@ const TextComponentDefinition = {
     },
 };
 
-var css_248z$3 = "@import url(https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;1,400;1,600&display=swap);\n\n:root {\n  /* All sizing comments based of 16px base body font size */\n\n  /* color */\n  --cf-color-white: #fff;\n  --cf-color-black: #000;\n  --cf-color-gray100: #f7f9fa;\n  --cf-color-gray400: #aec1cc;\n  --cf-color-gray400-rgb: 174, 193, 204;\n\n  /* spacing */\n  --cf-spacing-0: 0rem; /* 0px */\n  --cf-spacing-1: 0.125rem; /* 2px */\n  --cf-spacing-2: 0.25rem; /* 4px */\n  --cf-spacing-3: 0.375rem; /* 6px */\n  --cf-spacing-4: 0.5rem; /* 8px */\n  --cf-spacing-5: 0.625rem; /* 10px */\n  --cf-spacing-6: 0.75rem; /* 12px */\n  --cf-spacing-7: 0.875rem; /* 14px */\n  --cf-spacing-8: 1rem; /* 16px */\n  --cf-spacing-9: 1.25rem; /* 20px */\n  --cf-spacing-10: 1.5rem; /* 24px */\n  --cf-spacing-11: 1.75rem; /* 28px */\n  --cf-spacing-12: 2rem; /* 32px */\n  --cf-spacing-13: 2.25rem; /* 36px */\n\n  /* font-size */\n  --cf-text-xs: 0.75rem; /* 12px */\n  --cf-text-sm: 0.875rem; /* 14px */\n  --cf-text-base: 1rem; /* 16px */\n  --cf-text-lg: 1.125rem; /* 18px */\n  --cf-text-xl: 1.25rem; /* 20px */\n  --cf-text-2xl: 1.5rem; /* 24px */\n  --cf-text-3xl: 2rem; /* 32px */\n  --cf-text-4xl: 2.75rem; /* 44px */\n\n  /* font-weight */\n  --cf-font-light: 300;\n  --cf-font-normal: 400;\n  --cf-font-medium: 500;\n  --cf-font-semibold: 600;\n  --cf-font-bold: 700;\n  --cf-font-extra-bold: 800;\n  --cf-font-black: 900;\n\n  /* border-radius */\n  --cf-border-radius-none: 0px; /* none */\n  --cf-border-radius-sm: 0.125rem; /* 2px */\n  --cf-border-radius: 0.25rem; /* 4px */\n  --cf-border-radius-md: 0.375rem; /* 6px */\n  --cf-border-radius-lg: 0.5rem; /* 8px */\n  --cf-border-radius-xl: 0.75rem; /* 12px */\n  --cf-border-radius-2xl: 1rem; /* 16px */\n  --cf-border-radius-3xl: 1.5rem; /* 24px */\n  --cf-border-radius-full: 9999px; /* full */\n\n  /* font-family */\n  --cf-font-family-sans: Archivo, Helvetica, Arial, sans-serif;\n  --cf-font-family-serif: Georgia, Cambria, Times New Roman, Times, serif;\n\n  /* max widths */\n  --cf-max-width-full: 100%;\n\n  /* component specific colors */\n  --cf-button-bg: var(--cf-color-black);\n  --cf-button-color: var(--cf-color-white);\n  --cf-text-color: var(--cf-color-black);\n}\n\ndiv.cf-placeholder-wrapper {\n  /* Required for the absolute positioned icon to render in the center */\n  position: relative;\n}\n\nimg.cf-placeholder-image {\n  background-color: var(--cf-color-gray100);\n  outline-offset: -2px;\n  outline: 2px solid rgba(var(--cf-color-gray400-rgb), 0.5);\n  width: 100%;\n  height: 100%;\n}\n\nsvg.cf-placeholder-icon {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  height: var(--cf-text-3xl);\n  width: var(--cf-text-3xl);\n  max-height: 100%;\n  max-width: 100%;\n}\n\nsvg.cf-placeholder-icon path {\n  fill: var(--cf-color-gray400);\n}\n";
-styleInject(css_248z$3);
-
 const Image = ({ className = '', src, cfImageAsset, ...props }) => {
     if (!cfImageAsset && !src) {
         return (React.createElement("div", { className: combineClasses('cf-placeholder-wrapper', className) },
@@ -1293,11 +1274,11 @@ const ComponentPropertyValueSchema = z.discriminatedUnion('type', [
 ]);
 // TODO: finalize schema structure before release
 // https://contentful.atlassian.net/browse/LUMOS-523
-const PatternPropertySchema = z.object({
+const ParameterSchema = z.object({
     type: z.literal('BoundValue'),
     path: z.string(),
 });
-const PatternPropertiesSchema = z.record(propertyKeySchema, PatternPropertySchema);
+const ParametersSchema = z.record(propertyKeySchema, ParameterSchema);
 const BreakpointSchema = z
     .object({
     id: propertyKeySchema,
@@ -1314,7 +1295,7 @@ const BaseComponentTreeNodeSchema = z.object({
     displayName: z.string().optional(),
     slotId: z.string().optional(),
     variables: z.record(propertyKeySchema, ComponentPropertyValueSchema),
-    patternProperties: PatternPropertiesSchema.optional(),
+    parameters: ParametersSchema.optional(),
 });
 const ComponentVariableSchema = z.object({
     displayName: z.string().optional(),
@@ -1383,13 +1364,13 @@ const THUMBNAIL_IDS = [
 // TODO: finalize schema structure before release
 // https://contentful.atlassian.net/browse/LUMOS-523
 const VariableMappingSchema = z.object({
-    patternPropertyDefinitionId: propertyKeySchema,
+    parameterId: 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({
+const ParameterDefinitionSchema = z.object({
     defaultValue: z
         .record(z.string(), z.object({
         sys: z.object({
@@ -1407,7 +1388,7 @@ const PatternPropertyDefinitionSchema = z.object({
         }),
     })),
 });
-const PatternPropertyDefinitionsSchema = z.record(propertyKeySchema, PatternPropertyDefinitionSchema);
+const ParameterDefinitionsSchema = z.record(propertyKeySchema, ParameterDefinitionSchema);
 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);
@@ -1416,7 +1397,7 @@ const ComponentSettingsSchema = z.object({
     thumbnailId: z.enum(THUMBNAIL_IDS).optional(),
     category: z.string().max(50, 'Category must contain at most 50 characters').optional(),
     variableMappings: VariableMappingsSchema.optional(),
-    patternPropertyDefinitions: PatternPropertyDefinitionsSchema.optional(),
+    parameterDefinitions: ParameterDefinitionsSchema.optional(),
 });
 z.object({
     componentTree: localeWrapper(ComponentTreeSchema),
@@ -1627,9 +1608,6 @@ var VisualEditorMode;
     VisualEditorMode["InjectScript"] = "injectScript";
 })(VisualEditorMode || (VisualEditorMode = {}));
 
-var css_248z$2 = ".contentful-container {\n  position: relative;\n  display: flex;\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) => {
     return (React.createElement("div", { id: id, ref: ref, style: {
             display: 'flex',
@@ -1723,9 +1701,6 @@ 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\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 = '', 
 // We have to exclude this explicitly from rendering as withComponentWrapper is not used
 dragProps: _, ...props }) => {
@@ -1744,9 +1719,6 @@ 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  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 ColumnWrapper = forwardRef((props, ref) => {
     return (React.createElement("div", { ref: ref, ...props, style: {
             ...(props.style || {}),