@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 +1 -0
- package/dist/index.js +8 -30
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
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.
|
|
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).
|
|
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 || {}),
|