@contentful/experiences-components-react 2.0.0-dev-20250704T1052-fad2ef4.0 → 2.0.0-prerelease-20250703T1150-c529c88.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css ADDED
@@ -0,0 +1 @@
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 CHANGED
@@ -1,4 +1,3 @@
1
- import styleInject from 'style-inject';
2
1
  import React, { forwardRef } from 'react';
3
2
  import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
4
3
  import { BLOCKS } from '@contentful/rich-text-types';
@@ -7,9 +6,6 @@ import 'lodash-es';
7
6
  import 'md5';
8
7
  import { create } from 'zustand';
9
8
 
10
- 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}";
11
- styleInject(css_248z$8);
12
-
13
9
  /**
14
10
  * These modes are ONLY intended to be internally used within the context of
15
11
  * editing an experience inside of Contentful Studio. i.e. these modes
@@ -82,9 +78,6 @@ function combineClasses(...classes) {
82
78
  .join(' ');
83
79
  }
84
80
 
85
- var css_248z$7 = ".cf-button:empty:before{content:\"\";display:inline-block}";
86
- styleInject(css_248z$7);
87
-
88
81
  const Button = ({ children, className, label, onClick, onNavigate, target, url, ...props }) => {
89
82
  const classes = combineClasses('cf-button', className);
90
83
  const handleClick = (event) => {
@@ -197,9 +190,6 @@ const ButtonComponentDefinition = {
197
190
  },
198
191
  };
199
192
 
200
- var css_248z$6 = ".cf-heading{white-space:pre-line}";
201
- styleInject(css_248z$6);
202
-
203
193
  const Heading = ({ children, className, text, type = 'h1', ...props }) => {
204
194
  const Tag = type;
205
195
  const classes = combineClasses('cf-heading', className);
@@ -286,9 +276,6 @@ const HeadingComponentDefinition = {
286
276
  },
287
277
  };
288
278
 
289
- var css_248z$5 = ".cf-richtext{white-space:pre-line}.cf-richtext>:first-child{margin-top:0}.cf-richtext>:last-child{margin-bottom:0}";
290
- styleInject(css_248z$5);
291
-
292
279
  const RichText = ({ as = 'p', className, value, ...props }) => {
293
280
  const Tag = as;
294
281
  return (React.createElement("div", { className: combineClasses('cf-richtext', className), ...props }, documentToReactComponents(value, {
@@ -376,9 +363,6 @@ const RichTextComponentDefinition = {
376
363
  },
377
364
  };
378
365
 
379
- var css_248z$4 = ".cf-text{white-space:pre-line}.cf-text-link .cf-text{margin:0}";
380
- styleInject(css_248z$4);
381
-
382
366
  const Text = ({ as = 'p', children, className, value, url, target, onNavigate, onClick, ...props }) => {
383
367
  const Tag = as;
384
368
  if (url) {
@@ -470,9 +454,6 @@ const TextComponentDefinition = {
470
454
  },
471
455
  };
472
456
 
473
- 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)}";
474
- styleInject(css_248z$3);
475
-
476
457
  const Image = ({ className = '', src, cfImageAsset, ...props }) => {
477
458
  if (!cfImageAsset && !src) {
478
459
  return (React.createElement("div", { className: combineClasses('cf-placeholder-wrapper', className) },
@@ -1409,7 +1390,13 @@ const ParameterDefinitionSchema = z.object({
1409
1390
  }),
1410
1391
  })
1411
1392
  .optional(),
1412
- contentTypes: z.array(z.string()),
1393
+ contentTypes: z.record(z.string(), z.object({
1394
+ sys: z.object({
1395
+ type: z.literal('Link'),
1396
+ id: z.string(),
1397
+ linkType: z.enum(['ContentType']),
1398
+ }),
1399
+ })),
1413
1400
  passToNodes: z.array(PassToNodeSchema).optional(),
1414
1401
  });
1415
1402
  const ParameterDefinitionsSchema = z.record(propertyKeySchema, ParameterDefinitionSchema);
@@ -1429,7 +1416,7 @@ const ComponentSettingsSchema = z
1429
1416
  variableDefinitions: ComponentVariablesSchema,
1430
1417
  thumbnailId: z.enum(THUMBNAIL_IDS).optional(),
1431
1418
  category: z.string().max(50, 'Category must contain at most 50 characters').optional(),
1432
- prebindingDefinitions: z.array(PrebindingDefinitionSchema).length(1).optional(),
1419
+ prebindingDefinitions: z.array(PrebindingDefinitionSchema).max(1).optional(),
1433
1420
  })
1434
1421
  .strict();
1435
1422
  z.object({
@@ -2054,9 +2041,6 @@ var VisualEditorMode;
2054
2041
  VisualEditorMode["InjectScript"] = "injectScript";
2055
2042
  })(VisualEditorMode || (VisualEditorMode = {}));
2056
2043
 
2057
- var css_248z$2 = ".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}";
2058
- styleInject(css_248z$2);
2059
-
2060
2044
  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) => {
2061
2045
  return (React.createElement("div", { id: id, ref: ref, style: {
2062
2046
  display: 'flex',
@@ -2150,9 +2134,6 @@ const sectionDefinition = {
2150
2134
  },
2151
2135
  };
2152
2136
 
2153
- var css_248z$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}";
2154
- styleInject(css_248z$1);
2155
-
2156
2137
  const ContentfulDivider = ({ className = '',
2157
2138
  // We have to exclude this explicitly from rendering as withComponentWrapper is not used
2158
2139
  dragProps: _, ...props }) => {
@@ -2171,9 +2152,6 @@ const dividerDefinition = {
2171
2152
  },
2172
2153
  };
2173
2154
 
2174
- var css_248z = ".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\"}";
2175
- styleInject(css_248z);
2176
-
2177
2155
  const ColumnWrapper = forwardRef((props, ref) => {
2178
2156
  return (React.createElement("div", { ref: ref, ...props, style: {
2179
2157
  ...(props.style || {}),