@contentful/experiences-components-react 1.42.0-beta.0 → 1.42.0-dev-20250617T0920-3f313ab.0

package/dist/index.js

@@ -1,3 +1,4 @@
+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';
@@ -5,6 +6,9 @@ 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
@@ -77,6 +81,9 @@ 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) => {
@@ -189,6 +196,9 @@ 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);
@@ -275,6 +285,9 @@ 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, {
@@ -362,6 +375,9 @@ 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) {
@@ -453,6 +469,9 @@ 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) },
@@ -1274,11 +1293,11 @@ const ComponentPropertyValueSchema = z.discriminatedUnion('type', [
 ]);
 // TODO: finalize schema structure before release
 // https://contentful.atlassian.net/browse/LUMOS-523
-const ParameterSchema = z.object({
+const PatternPropertySchema = z.object({
     type: z.literal('BoundValue'),
     path: z.string(),
 });
-const ParametersSchema = z.record(propertyKeySchema, ParameterSchema);
+const PatternPropertiesSchema = z.record(propertyKeySchema, PatternPropertySchema);
 const BreakpointSchema = z
     .object({
     id: propertyKeySchema,
@@ -1295,7 +1314,7 @@ const BaseComponentTreeNodeSchema = z.object({
     displayName: z.string().optional(),
     slotId: z.string().optional(),
     variables: z.record(propertyKeySchema, ComponentPropertyValueSchema),
-    parameters: ParametersSchema.optional(),
+    patternProperties: PatternPropertiesSchema.optional(),
 });
 const ComponentVariableSchema = z.object({
     displayName: z.string().optional(),
@@ -1364,13 +1383,13 @@ const THUMBNAIL_IDS = [
 // TODO: finalize schema structure before release
 // https://contentful.atlassian.net/browse/LUMOS-523
 const VariableMappingSchema = z.object({
-    parameterId: propertyKeySchema,
+    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 ParameterDefinitionSchema = z.object({
+const PatternPropertyDefinitionSchema = z.object({
     defaultValue: z
         .record(z.string(), z.object({
         sys: z.object({
@@ -1388,7 +1407,7 @@ const ParameterDefinitionSchema = z.object({
         }),
     })),
 });
-const ParameterDefinitionsSchema = z.record(propertyKeySchema, ParameterDefinitionSchema);
+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);
@@ -1397,7 +1416,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(),
-    parameterDefinitions: ParameterDefinitionsSchema.optional(),
+    patternPropertyDefinitions: PatternPropertyDefinitionsSchema.optional(),
 });
 z.object({
     componentTree: localeWrapper(ComponentTreeSchema),
@@ -1608,6 +1627,9 @@ 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',
@@ -1701,6 +1723,9 @@ 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 }) => {
@@ -1719,6 +1744,9 @@ 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 || {}),