@contentful/experiences-components-react 1.22.1-dev-20241111T0918-dbe183a.0 → 1.23.0-beta.0

package/dist/index.js

@@ -2,20 +2,24 @@ import React, { forwardRef } from 'react';
 import styleInject from 'style-inject';
 import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
 import { BLOCKS } from '@contentful/rich-text-types';
+import 'md5';
+import { z } from 'zod';
+import 'lodash-es';
 
 /**
  * These modes are ONLY intended to be internally used within the context of
  * editing an experience inside of Contentful Studio. i.e. these modes
  * intentionally do not include preview/delivery modes.
  */
-var StudioCanvasMode;
+var StudioCanvasMode$1;
 (function (StudioCanvasMode) {
     StudioCanvasMode["READ_ONLY"] = "readOnlyMode";
     StudioCanvasMode["EDITOR"] = "editorMode";
     StudioCanvasMode["NONE"] = "none";
-})(StudioCanvasMode || (StudioCanvasMode = {}));
+})(StudioCanvasMode$1 || (StudioCanvasMode$1 = {}));
+const CONTENTFUL_COMPONENT_CATEGORY = 'contentful-component';
 const CONTENTFUL_DEFAULT_CATEGORY = 'Contentful';
-const CONTENTFUL_COMPONENTS = {
+const CONTENTFUL_COMPONENTS$1 = {
     section: {
         id: 'contentful-section',
         name: 'Section',
@@ -56,12 +60,16 @@ const CONTENTFUL_COMPONENTS = {
         id: 'contentful-divider',
         name: 'Divider',
     },
+    carousel: {
+        id: 'contentful-carousel',
+        name: 'Carousel',
+    },
 };
-var PostMessageMethods;
+var PostMessageMethods$1;
 (function (PostMessageMethods) {
     PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
     PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
-})(PostMessageMethods || (PostMessageMethods = {}));
+})(PostMessageMethods$1 || (PostMessageMethods$1 = {}));
 
 function combineClasses(...classes) {
     return classes
@@ -88,8 +96,8 @@ const Button = ({ children, className, label, onClick, onNavigate, target, url,
 };
 
 const ButtonComponentDefinition = {
-    id: CONTENTFUL_COMPONENTS.button.id,
-    name: CONTENTFUL_COMPONENTS.button.name,
+    id: CONTENTFUL_COMPONENTS$1.button.id,
+    name: CONTENTFUL_COMPONENTS$1.button.name,
     category: CONTENTFUL_DEFAULT_CATEGORY,
     builtInStyles: [
         'cfMargin',
@@ -189,8 +197,8 @@ const Heading = ({ children, className, text, type = 'h1', ...props }) => {
 };
 
 const HeadingComponentDefinition = {
-    id: CONTENTFUL_COMPONENTS.heading.id,
-    name: CONTENTFUL_COMPONENTS.heading.name,
+    id: CONTENTFUL_COMPONENTS$1.heading.id,
+    name: CONTENTFUL_COMPONENTS$1.heading.name,
     category: CONTENTFUL_DEFAULT_CATEGORY,
     builtInStyles: [
         'cfMargin',
@@ -280,8 +288,8 @@ const RichText = ({ as = 'p', className, value, ...props }) => {
 };
 
 const RichTextComponentDefinition = {
-    id: CONTENTFUL_COMPONENTS.richText.id,
-    name: CONTENTFUL_COMPONENTS.richText.name,
+    id: CONTENTFUL_COMPONENTS$1.richText.id,
+    name: CONTENTFUL_COMPONENTS$1.richText.name,
     category: CONTENTFUL_DEFAULT_CATEGORY,
     builtInStyles: [
         'cfMargin',
@@ -374,8 +382,8 @@ const Text = ({ as = 'p', children, className, value, url, target, onNavigate, o
 };
 
 const TextComponentDefinition = {
-    id: CONTENTFUL_COMPONENTS.text.id,
-    name: CONTENTFUL_COMPONENTS.text.name,
+    id: CONTENTFUL_COMPONENTS$1.text.id,
+    name: CONTENTFUL_COMPONENTS$1.text.name,
     category: CONTENTFUL_DEFAULT_CATEGORY,
     builtInStyles: [
         'cfMargin',
@@ -467,8 +475,8 @@ const Image = ({ className = '', src, cfImageAsset, ...props }) => {
 };
 
 const ImageComponentDefinition = {
-    id: CONTENTFUL_COMPONENTS.image.id,
-    name: CONTENTFUL_COMPONENTS.image.name,
+    id: CONTENTFUL_COMPONENTS$1.image.id,
+    name: CONTENTFUL_COMPONENTS$1.image.name,
     category: CONTENTFUL_DEFAULT_CATEGORY,
     builtInStyles: ['cfMargin', 'cfPadding', 'cfImageAsset', 'cfImageOptions', 'cfBorderRadius'],
     tooltip: {
@@ -483,6 +491,940 @@ const ImageComponentDefinition = {
     },
 };
 
+/**
+ * These modes are ONLY intended to be internally used within the context of
+ * editing an experience inside of Contentful Studio. i.e. these modes
+ * intentionally do not include preview/delivery modes.
+ */
+var StudioCanvasMode;
+(function (StudioCanvasMode) {
+    StudioCanvasMode["READ_ONLY"] = "readOnlyMode";
+    StudioCanvasMode["EDITOR"] = "editorMode";
+    StudioCanvasMode["NONE"] = "none";
+})(StudioCanvasMode || (StudioCanvasMode = {}));
+const CONTENTFUL_COMPONENTS = {
+    section: {
+        id: 'contentful-section',
+        name: 'Section',
+    },
+    container: {
+        id: 'contentful-container',
+        name: 'Container',
+    },
+    columns: {
+        id: 'contentful-columns',
+        name: 'Columns',
+    },
+    singleColumn: {
+        id: 'contentful-single-column',
+        name: 'Column',
+    },
+    button: {
+        id: 'contentful-button',
+        name: 'Button',
+    },
+    heading: {
+        id: 'contentful-heading',
+        name: 'Heading',
+    },
+    image: {
+        id: 'contentful-image',
+        name: 'Image',
+    },
+    richText: {
+        id: 'contentful-richText',
+        name: 'Rich Text',
+    },
+    text: {
+        id: 'contentful-text',
+        name: 'Text',
+    },
+    divider: {
+        id: 'contentful-divider',
+        name: 'Divider',
+    },
+    carousel: {
+        id: 'contentful-carousel',
+        name: 'Carousel',
+    },
+};
+const DEFAULT_IMAGE_WIDTH = '500px';
+var PostMessageMethods;
+(function (PostMessageMethods) {
+    PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
+    PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
+})(PostMessageMethods || (PostMessageMethods = {}));
+new Set(Object.values(CONTENTFUL_COMPONENTS).map((component) => component.id));
+
+// These styles get added to every component, user custom or contentful provided
+const builtInStyles = {
+    cfVerticalAlignment: {
+        validations: {
+            in: [
+                {
+                    value: 'start',
+                    displayName: 'Align left',
+                },
+                {
+                    value: 'center',
+                    displayName: 'Align center',
+                },
+                {
+                    value: 'end',
+                    displayName: 'Align right',
+                },
+            ],
+        },
+        type: 'Text',
+        group: 'style',
+        description: 'The horizontal alignment of the section',
+        defaultValue: 'center',
+        displayName: 'Vertical alignment',
+    },
+    cfHorizontalAlignment: {
+        validations: {
+            in: [
+                {
+                    value: 'start',
+                    displayName: 'Align top',
+                },
+                {
+                    value: 'center',
+                    displayName: 'Align center',
+                },
+                {
+                    value: 'end',
+                    displayName: 'Align bottom',
+                },
+            ],
+        },
+        type: 'Text',
+        group: 'style',
+        description: 'The horizontal alignment of the section',
+        defaultValue: 'center',
+        displayName: 'Horizontal alignment',
+    },
+    cfVisibility: {
+        displayName: 'Visibility toggle',
+        type: 'Boolean',
+        group: 'style',
+        defaultValue: true,
+        description: 'The visibility of the component',
+    },
+    cfMargin: {
+        displayName: 'Margin',
+        type: 'Text',
+        group: 'style',
+        description: 'The margin of the section',
+        defaultValue: '0 0 0 0',
+    },
+    cfPadding: {
+        displayName: 'Padding',
+        type: 'Text',
+        group: 'style',
+        description: 'The padding of the section',
+        defaultValue: '0 0 0 0',
+    },
+    cfBackgroundColor: {
+        displayName: 'Background color',
+        type: 'Text',
+        group: 'style',
+        description: 'The background color of the section',
+        defaultValue: 'rgba(0, 0, 0, 0)',
+    },
+    cfWidth: {
+        displayName: 'Width',
+        type: 'Text',
+        group: 'style',
+        description: 'The width of the section',
+        defaultValue: '100%',
+    },
+    cfHeight: {
+        displayName: 'Height',
+        type: 'Text',
+        group: 'style',
+        description: 'The height of the section',
+        defaultValue: 'fit-content',
+    },
+    cfMaxWidth: {
+        displayName: 'Max width',
+        type: 'Text',
+        group: 'style',
+        description: 'The max-width of the section',
+        defaultValue: 'none',
+    },
+    cfFlexDirection: {
+        displayName: 'Direction',
+        type: 'Text',
+        group: 'style',
+        description: 'The orientation of the section',
+        defaultValue: 'column',
+    },
+    cfFlexReverse: {
+        displayName: 'Reverse Direction',
+        type: 'Boolean',
+        group: 'style',
+        description: 'Toggle the flex direction to be reversed',
+        defaultValue: false,
+    },
+    cfFlexWrap: {
+        displayName: 'Wrap objects',
+        type: 'Text',
+        group: 'style',
+        description: 'Wrap objects',
+        defaultValue: 'nowrap',
+    },
+    cfBorder: {
+        displayName: 'Border',
+        type: 'Text',
+        group: 'style',
+        description: 'The border of the section',
+        defaultValue: '0px solid rgba(0, 0, 0, 0)',
+    },
+    cfGap: {
+        displayName: 'Gap',
+        type: 'Text',
+        group: 'style',
+        description: 'The spacing between the elements of the section',
+        defaultValue: '0px',
+    },
+    cfHyperlink: {
+        displayName: 'Hyperlink',
+        type: 'Hyperlink',
+        defaultValue: '',
+        validations: {
+            format: 'URL',
+        },
+        description: 'hyperlink for section or container',
+    },
+    cfOpenInNewTab: {
+        displayName: 'Hyperlink behaviour',
+        type: 'Boolean',
+        defaultValue: false,
+        description: 'Open in new tab',
+    },
+};
+const optionalBuiltInStyles = {
+    cfFontSize: {
+        displayName: 'Font Size',
+        type: 'Text',
+        group: 'style',
+        description: 'The font size of the element',
+        defaultValue: '16px',
+    },
+    cfFontWeight: {
+        validations: {
+            in: [
+                {
+                    value: '400',
+                    displayName: 'Normal',
+                },
+                {
+                    value: '500',
+                    displayName: 'Medium',
+                },
+                {
+                    value: '600',
+                    displayName: 'Semi Bold',
+                },
+            ],
+        },
+        displayName: 'Font Weight',
+        type: 'Text',
+        group: 'style',
+        description: 'The font weight of the element',
+        defaultValue: '400',
+    },
+    cfImageAsset: {
+        displayName: 'Image',
+        type: 'Media',
+        description: 'Image to display',
+    },
+    cfImageOptions: {
+        displayName: 'Image options',
+        type: 'Object',
+        group: 'style',
+        defaultValue: {
+            width: DEFAULT_IMAGE_WIDTH,
+            height: '100%',
+            targetSize: DEFAULT_IMAGE_WIDTH,
+        },
+    },
+    cfBackgroundColor: {
+        displayName: 'Background color',
+        type: 'Text',
+        group: 'style',
+        description: 'The background color of the element',
+        defaultValue: 'rgba(0, 0, 0, 0)',
+    },
+    cfBackgroundImageUrl: {
+        displayName: 'Background image',
+        type: 'Media',
+        description: 'Background image for component',
+    },
+    cfBackgroundImageOptions: {
+        displayName: 'Background image options',
+        type: 'Object',
+        group: 'style',
+        defaultValue: {
+            scaling: 'fill',
+            alignment: 'left top',
+            targetSize: '2000px',
+        },
+    },
+    cfBorderRadius: {
+        displayName: 'Border Radius',
+        type: 'Text',
+        group: 'style',
+        description: 'The border radius of the section',
+        defaultValue: '0px',
+    },
+    cfLineHeight: {
+        displayName: 'Line Height',
+        type: 'Text',
+        group: 'style',
+        description: 'The line height of the element',
+        defaultValue: '20px',
+    },
+    cfLetterSpacing: {
+        displayName: 'Letter Spacing',
+        type: 'Text',
+        group: 'style',
+        description: 'The letter spacing of the element',
+        defaultValue: '0px',
+    },
+    cfTextColor: {
+        displayName: 'Text Color',
+        type: 'Text',
+        group: 'style',
+        description: 'The text color of the element',
+        defaultValue: 'rgba(0, 0, 0, 1)',
+    },
+    cfTextAlign: {
+        validations: {
+            in: [
+                {
+                    value: 'left',
+                    displayName: 'Align left',
+                },
+                {
+                    value: 'center',
+                    displayName: 'Align center',
+                },
+                {
+                    value: 'right',
+                    displayName: 'Align right',
+                },
+            ],
+        },
+        displayName: 'Text Align',
+        type: 'Text',
+        group: 'style',
+        description: 'The text alignment of the element',
+        defaultValue: 'left',
+    },
+    cfTextTransform: {
+        validations: {
+            in: [
+                {
+                    value: 'none',
+                    displayName: 'Normal',
+                },
+                {
+                    value: 'capitalize',
+                    displayName: 'Capitalize',
+                },
+                {
+                    value: 'uppercase',
+                    displayName: 'Uppercase',
+                },
+                {
+                    value: 'lowercase',
+                    displayName: 'Lowercase',
+                },
+            ],
+        },
+        displayName: 'Text Transform',
+        type: 'Text',
+        group: 'style',
+        description: 'The text transform of the element',
+        defaultValue: 'none',
+    },
+    cfTextBold: {
+        displayName: 'Bold',
+        type: 'Boolean',
+        group: 'style',
+        description: 'The text bold of the element',
+        defaultValue: false,
+    },
+    cfTextItalic: {
+        displayName: 'Italic',
+        type: 'Boolean',
+        group: 'style',
+        description: 'The text italic of the element',
+        defaultValue: false,
+    },
+    cfTextUnderline: {
+        displayName: 'Underline',
+        type: 'Boolean',
+        group: 'style',
+        description: 'The text underline of the element',
+        defaultValue: false,
+    },
+};
+const sectionBuiltInStyles = {
+    ...builtInStyles,
+    cfBorderRadius: optionalBuiltInStyles.cfBorderRadius,
+    cfBackgroundImageUrl: optionalBuiltInStyles.cfBackgroundImageUrl,
+    cfBackgroundImageOptions: optionalBuiltInStyles.cfBackgroundImageOptions,
+};
+const containerBuiltInStyles = {
+    ...builtInStyles,
+    cfBorderRadius: optionalBuiltInStyles.cfBorderRadius,
+    cfBackgroundImageUrl: optionalBuiltInStyles.cfBackgroundImageUrl,
+    cfBackgroundImageOptions: optionalBuiltInStyles.cfBackgroundImageOptions,
+    cfMargin: {
+        displayName: 'Margin',
+        type: 'Text',
+        group: 'style',
+        description: 'The margin of the container',
+        // Note: The UI overwrites '0 Auto 0 Auto' as the default value for top-level containers
+        defaultValue: '0 0 0 0',
+    },
+    cfMaxWidth: {
+        displayName: 'Max Width',
+        type: 'Text',
+        group: 'style',
+        description: 'The max-width of the section',
+        defaultValue: '1192px',
+    },
+};
+const dividerBuiltInStyles = {
+    cfVisibility: builtInStyles.cfVisibility,
+    cfBorderRadius: optionalBuiltInStyles.cfBorderRadius,
+    cfMargin: {
+        displayName: 'Margin',
+        type: 'Text',
+        group: 'style',
+        description: 'The margin of the divider',
+        defaultValue: '20px 0px 20px 0px',
+    },
+    cfWidth: {
+        displayName: 'Width',
+        type: 'Text',
+        group: 'style',
+        description: 'The width of the divider',
+        defaultValue: '100%',
+    },
+    cfHeight: {
+        displayName: 'Height',
+        type: 'Text',
+        group: 'style',
+        description: 'The height of the divider',
+        defaultValue: '1px',
+    },
+    cfMaxWidth: {
+        displayName: 'Max width',
+        type: 'Text',
+        group: 'style',
+        description: 'The max-width of the divider',
+        defaultValue: 'none',
+    },
+    cfBackgroundColor: {
+        displayName: 'Background color',
+        type: 'Text',
+        group: 'style',
+        description: 'The background color of the divider',
+        defaultValue: 'rgba(204, 204, 204, 1)',
+    },
+};
+const singleColumnBuiltInStyles = {
+    cfVisibility: builtInStyles.cfVisibility,
+    cfBorderRadius: optionalBuiltInStyles.cfBorderRadius,
+    cfBackgroundColor: optionalBuiltInStyles.cfBackgroundColor,
+    cfBackgroundImageUrl: optionalBuiltInStyles.cfBackgroundImageUrl,
+    cfBackgroundImageOptions: optionalBuiltInStyles.cfBackgroundImageOptions,
+    cfVerticalAlignment: {
+        validations: {
+            in: [
+                {
+                    value: 'start',
+                    displayName: 'Align left',
+                },
+                {
+                    value: 'center',
+                    displayName: 'Align center',
+                },
+                {
+                    value: 'end',
+                    displayName: 'Align right',
+                },
+            ],
+        },
+        type: 'Text',
+        group: 'style',
+        description: 'The horizontal alignment of the column',
+        defaultValue: 'center',
+        displayName: 'Vertical alignment',
+    },
+    cfHorizontalAlignment: {
+        validations: {
+            in: [
+                {
+                    value: 'start',
+                    displayName: 'Align top',
+                },
+                {
+                    value: 'center',
+                    displayName: 'Align center',
+                },
+                {
+                    value: 'end',
+                    displayName: 'Align bottom',
+                },
+            ],
+        },
+        type: 'Text',
+        group: 'style',
+        description: 'The horizontal alignment of the column',
+        defaultValue: 'center',
+        displayName: 'Horizontal alignment',
+    },
+    cfPadding: {
+        displayName: 'Padding',
+        type: 'Text',
+        group: 'style',
+        description: 'The padding of the column',
+        defaultValue: '0 0 0 0',
+    },
+    cfFlexDirection: {
+        displayName: 'Direction',
+        type: 'Text',
+        group: 'style',
+        description: 'The orientation of the column',
+        defaultValue: 'column',
+    },
+    cfFlexWrap: {
+        displayName: 'Wrap objects',
+        type: 'Text',
+        group: 'style',
+        description: 'Wrap objects',
+        defaultValue: 'nowrap',
+    },
+    cfBorder: {
+        displayName: 'Border',
+        type: 'Text',
+        group: 'style',
+        description: 'The border of the column',
+        defaultValue: '0px solid rgba(0, 0, 0, 0)',
+    },
+    cfGap: {
+        displayName: 'Gap',
+        type: 'Text',
+        group: 'style',
+        description: 'The spacing between the elements of the column',
+        defaultValue: '0px',
+    },
+    cfColumnSpan: {
+        type: 'Text',
+        defaultValue: '6',
+        group: 'style',
+    },
+    cfColumnSpanLock: {
+        type: 'Boolean',
+        defaultValue: false,
+        group: 'style',
+    },
+};
+const columnsBuiltInStyles = {
+    cfVisibility: builtInStyles.cfVisibility,
+    cfBorderRadius: optionalBuiltInStyles.cfBorderRadius,
+    cfBackgroundColor: optionalBuiltInStyles.cfBackgroundColor,
+    cfBackgroundImageUrl: optionalBuiltInStyles.cfBackgroundImageUrl,
+    cfBackgroundImageOptions: optionalBuiltInStyles.cfBackgroundImageOptions,
+    cfMargin: {
+        displayName: 'Margin',
+        type: 'Text',
+        group: 'style',
+        description: 'The margin of the columns',
+        // Note: The UI overwrites '0 Auto 0 Auto' as the default value for top-level columns
+        defaultValue: '0 0 0 0',
+    },
+    cfWidth: {
+        displayName: 'Width',
+        type: 'Text',
+        group: 'style',
+        description: 'The width of the columns',
+        defaultValue: '100%',
+    },
+    cfMaxWidth: {
+        displayName: 'Max width',
+        type: 'Text',
+        group: 'style',
+        description: 'The max-width of the columns',
+        defaultValue: '1192px',
+    },
+    cfPadding: {
+        displayName: 'Padding',
+        type: 'Text',
+        group: 'style',
+        description: 'The padding of the columns',
+        defaultValue: '10px 10px 10px 10px',
+    },
+    cfBorder: {
+        displayName: 'Border',
+        type: 'Text',
+        group: 'style',
+        description: 'The border of the columns',
+        defaultValue: '0px solid rgba(0, 0, 0, 0)',
+    },
+    cfGap: {
+        displayName: 'Gap',
+        type: 'Text',
+        group: 'style',
+        description: 'The spacing between the elements of the columns',
+        defaultValue: '10px 10px',
+    },
+    cfColumns: {
+        type: 'Text',
+        defaultValue: '[6,6]',
+        group: 'style',
+    },
+    cfWrapColumns: {
+        type: 'Boolean',
+        defaultValue: false,
+        group: 'style',
+    },
+    cfWrapColumnsCount: {
+        type: 'Text',
+        defaultValue: '2',
+        group: 'style',
+    },
+};
+
+// If more than one version is supported, use z.union
+const SchemaVersions = z.literal('2023-09-28');
+// Keep deprecated versions here just for reference
+z.union([
+    z.literal('2023-08-23'),
+    z.literal('2023-07-26'),
+    z.literal('2023-06-27'),
+]);
+
+const DefinitionPropertyTypeSchema = z.enum([
+    'Text',
+    'RichText',
+    'Number',
+    'Date',
+    'Boolean',
+    'Location',
+    'Media',
+    'Object',
+    'Hyperlink',
+    'Array',
+    'Link',
+]);
+const DefinitionPropertyKeySchema = z
+    .string()
+    .regex(/^[a-zA-Z0-9-_]{1,32}$/, { message: 'Property needs to match: /^[a-zA-Z0-9-_]{1,32}$/' });
+const PrimitiveValueSchema = z.union([
+    z.string(),
+    z.boolean(),
+    z.number(),
+    z.record(z.any(), z.any()),
+    z.undefined(),
+]);
+const uuidKeySchema = z
+    .string()
+    .regex(/^[a-zA-Z0-9-_]{1,21}$/, { message: 'Does not match /^[a-zA-Z0-9-_]{1,21}$/' });
+/**
+ * Property keys for imported components have a limit of 32 characters (to be implemented) while
+ * property keys for patterns have a limit of 54 characters (<32-char-variabl-name>_<21-char-nanoid-id>).
+ * Because we cannot distinguish between the two in the componentTree, we will use the larger limit for both.
+ */
+const propertyKeySchema = z
+    .string()
+    .regex(/^[a-zA-Z0-9-_]{1,54}$/, { message: 'Does not match /^[a-zA-Z0-9-_]{1,54}$/' });
+const DataSourceSchema = z.record(uuidKeySchema, z.object({
+    sys: z.object({
+        type: z.literal('Link'),
+        id: z.string(),
+        linkType: z.enum(['Entry', 'Asset']),
+    }),
+}));
+const ValuesByBreakpointSchema = z.record(z.lazy(() => PrimitiveValueSchema));
+const DesignValueSchema = z
+    .object({
+    type: z.literal('DesignValue'),
+    valuesByBreakpoint: ValuesByBreakpointSchema,
+})
+    .strict();
+const BoundValueSchema = z
+    .object({
+    type: z.literal('BoundValue'),
+    path: z.string(),
+})
+    .strict();
+const HyperlinkValueSchema = z
+    .object({
+    type: z.literal('HyperlinkValue'),
+    linkTargetKey: z.string(),
+    /** Allows to override parts of the URL, e.g. the locale */
+    overrides: z.object({}).optional(),
+})
+    .strict();
+const UnboundValueSchema = z
+    .object({
+    type: z.literal('UnboundValue'),
+    key: z.string(),
+})
+    .strict();
+const ComponentValueSchema = z
+    .object({
+    type: z.literal('ComponentValue'),
+    key: z.string(),
+})
+    .strict();
+const ComponentPropertyValueSchema = z.discriminatedUnion('type', [
+    DesignValueSchema,
+    BoundValueSchema,
+    UnboundValueSchema,
+    HyperlinkValueSchema,
+    ComponentValueSchema,
+]);
+const BreakpointSchema = z
+    .object({
+    id: propertyKeySchema,
+    query: z.string().regex(/^\*$|^<[0-9*]+px$/),
+    previewSize: z.string(),
+    displayName: z.string(),
+    displayIcon: z.enum(['desktop', 'tablet', 'mobile']).optional(),
+})
+    .strict();
+const UnboundValuesSchema = z.record(uuidKeySchema, z.object({
+    value: PrimitiveValueSchema,
+}));
+// Use helper schema to define a recursive schema with its type correctly below
+const BaseComponentTreeNodeSchema = z.object({
+    definitionId: DefinitionPropertyKeySchema,
+    displayName: z.string().optional(),
+    slotId: z.string().optional(),
+    variables: z.record(propertyKeySchema, ComponentPropertyValueSchema),
+});
+const ComponentTreeNodeSchema = BaseComponentTreeNodeSchema.extend({
+    children: z.lazy(() => ComponentTreeNodeSchema.array()),
+});
+const ComponentVariableSchema = z.object({
+    displayName: z.string().optional(),
+    type: DefinitionPropertyTypeSchema,
+    description: z.string().optional(),
+    group: z.string().optional(),
+    defaultValue: PrimitiveValueSchema.or(ComponentPropertyValueSchema).optional(),
+    validations: z
+        .object({
+        required: z.boolean().optional(),
+        format: z.literal('URL').optional(),
+        in: z
+            .array(z.object({
+            value: z.union([z.string(), z.number()]),
+            displayName: z.string().optional(),
+        }))
+            .optional(),
+    })
+        .optional(),
+});
+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);
+const ComponentSettingsSchema = z.object({
+    variableDefinitions: ComponentVariablesSchema,
+});
+const UsedComponentsSchema = z.array(z.object({
+    sys: z.object({
+        type: z.literal('Link'),
+        id: z.string(),
+        linkType: z.literal('Entry'),
+    }),
+}));
+const breakpointsRefinement = (value, ctx) => {
+    if (!value.length || value[0].query !== '*') {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `The first breakpoint should include the following attributes: { "query": "*" }`,
+        });
+    }
+    const hasDuplicateIds = value.some((currentBreakpoint, currentBreakpointIndex) => {
+        // check if the current breakpoint id is found in the rest of the array
+        const breakpointIndex = value.findIndex((breakpoint) => breakpoint.id === currentBreakpoint.id);
+        return breakpointIndex !== currentBreakpointIndex;
+    });
+    if (hasDuplicateIds) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Breakpoint IDs must be unique`,
+        });
+    }
+    // Extract the queries boundary by removing the special characters around it
+    const queries = value.map((bp) => bp.query === '*' ? bp.query : parseInt(bp.query.replace(/px|<|>/, '')));
+    // sort updates queries array in place so we need to create a copy
+    const originalQueries = [...queries];
+    queries.sort((q1, q2) => {
+        if (q1 === '*') {
+            return -1;
+        }
+        if (q2 === '*') {
+            return 1;
+        }
+        return q1 > q2 ? -1 : 1;
+    });
+    if (originalQueries.join('') !== queries.join('')) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Breakpoints should be ordered from largest to smallest pixel value`,
+        });
+    }
+};
+const ComponentTreeSchema = z
+    .object({
+    breakpoints: z.array(BreakpointSchema).superRefine(breakpointsRefinement),
+    children: z.array(ComponentTreeNodeSchema),
+    schemaVersion: SchemaVersions,
+})
+    .strict();
+const localeWrapper = (fieldSchema) => z.record(z.string(), fieldSchema);
+z.object({
+    componentTree: localeWrapper(ComponentTreeSchema),
+    dataSource: localeWrapper(DataSourceSchema),
+    unboundValues: localeWrapper(UnboundValuesSchema),
+    usedComponents: localeWrapper(UsedComponentsSchema).optional(),
+    componentSettings: localeWrapper(ComponentSettingsSchema).optional(),
+});
+
+z.object({
+    id: DefinitionPropertyKeySchema,
+    variables: z.record(DefinitionPropertyKeySchema, ComponentVariableSchema.extend({
+        defaultValue: PrimitiveValueSchema.optional(),
+    }).superRefine((val, ctx) => {
+        switch (val.type) {
+            case 'Array':
+                if (typeof val.defaultValue !== 'undefined') {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: `defaultValue is not supported for "Array" type for ${ctx.path.join('.')}`,
+                        fatal: false,
+                    });
+                }
+                break;
+            case 'Boolean':
+                if (typeof val.defaultValue !== 'undefined' && typeof val.defaultValue !== 'boolean') {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: `defaultValue must be a boolean when type is "Boolean" for ${ctx.path.join('.')}, got ${typeof val.defaultValue} instead`,
+                        fatal: false,
+                    });
+                }
+                break;
+            case 'Date':
+                if (typeof val.defaultValue !== 'undefined' && typeof val.defaultValue !== 'string') {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: `defaultValue must be a string when type is "Date" for ${ctx.path.join('.')}, got ${typeof val.defaultValue} instead`,
+                        fatal: false,
+                    });
+                }
+                break;
+            case 'Hyperlink':
+                if (typeof val.defaultValue !== 'undefined' && typeof val.defaultValue !== 'string') {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: `defaultValue must be a string when type is "Hyperlink" for ${ctx.path.join('.')}, got ${typeof val.defaultValue} instead`,
+                        fatal: false,
+                    });
+                }
+                break;
+            case 'Link':
+                if (typeof val.defaultValue !== 'undefined' && typeof val.defaultValue !== 'object') {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: `defaultValue is not supported for "Link" type for ${ctx.path.join('.')}`,
+                        fatal: false,
+                    });
+                }
+                break;
+            case 'Location':
+                if (typeof val.defaultValue !== 'undefined' && typeof val.defaultValue !== 'object') {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: `defaultValue must be an object when type is "Location" for ${ctx.path.join('.')}, got ${typeof val.defaultValue} instead`,
+                        fatal: false,
+                    });
+                }
+                break;
+            case 'Media':
+                if (typeof val.defaultValue !== 'undefined' && typeof val.defaultValue !== 'string') {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: `defaultValue must be a string when type is "Media" for ${ctx.path.join('.')}, got ${typeof val.defaultValue} instead`,
+                        fatal: false,
+                    });
+                }
+                break;
+            case 'Number':
+                if (typeof val.defaultValue !== 'undefined' && typeof val.defaultValue !== 'number') {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: `defaultValue must be a number when type is "Number" for ${ctx.path.join('.')}, got ${typeof val.defaultValue} instead`,
+                        fatal: false,
+                    });
+                }
+                break;
+            case 'Object':
+                if (typeof val.defaultValue !== 'undefined' && typeof val.defaultValue !== 'object') {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: `defaultValue must be an object when type is "Object" for ${ctx.path.join('.')}, got ${typeof val.defaultValue} instead`,
+                        fatal: false,
+                    });
+                }
+                break;
+            case 'RichText':
+                if (typeof val.defaultValue !== 'undefined' && typeof val.defaultValue !== 'object') {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: `defaultValue must be an object when type is "RichText" for ${ctx.path.join('.')}, got ${typeof val.defaultValue} instead`,
+                        fatal: false,
+                    });
+                }
+                break;
+            case 'Text':
+                if (typeof val.defaultValue !== 'undefined' && typeof val.defaultValue !== 'string') {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: `defaultValue must be a string when type is "Text" for ${ctx.path.join('.')}, got ${typeof val.defaultValue} instead`,
+                        fatal: false,
+                    });
+                }
+                break;
+        }
+    })),
+});
+
+var CodeNames;
+(function (CodeNames) {
+    CodeNames["Type"] = "type";
+    CodeNames["Required"] = "required";
+    CodeNames["Unexpected"] = "unexpected";
+    CodeNames["Regex"] = "regex";
+    CodeNames["In"] = "in";
+    CodeNames["Size"] = "size";
+    CodeNames["Custom"] = "custom";
+})(CodeNames || (CodeNames = {}));
+
+var VisualEditorMode;
+(function (VisualEditorMode) {
+    VisualEditorMode["LazyLoad"] = "lazyLoad";
+    VisualEditorMode["InjectScript"] = "injectScript";
+})(VisualEditorMode || (VisualEditorMode = {}));
+
 var css_248z$2 = ".contentful-container {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\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);
 
@@ -547,7 +1489,7 @@ const ContentfulContainer = (props) => {
     // Extract properties that are only available in editor mode
     const { renderDropzone, node, dragProps = {}, ...editorModeProps } = props;
     const isEmpty = !node.children.length;
-    const isSection = node.data.blockId === CONTENTFUL_COMPONENTS.section.id;
+    const isSection = node.data.blockId === CONTENTFUL_COMPONENTS$1.section.id;
     return renderDropzone(node, {
         ...editorModeProps,
         ['data-test-id']: 'contentful-container',
@@ -558,6 +1500,27 @@ const ContentfulContainer = (props) => {
     });
 };
 
+const containerDefinition = {
+    id: CONTENTFUL_COMPONENTS$1.container.id,
+    name: CONTENTFUL_COMPONENTS$1.container.name,
+    category: CONTENTFUL_COMPONENT_CATEGORY,
+    children: true,
+    variables: containerBuiltInStyles,
+    tooltip: {
+        description: 'Create a new area or pattern within your page layout by dragging a container onto the canvas. Other components and patterns can be added into a container.',
+    },
+};
+const sectionDefinition = {
+    id: CONTENTFUL_COMPONENTS$1.section.id,
+    name: CONTENTFUL_COMPONENTS$1.section.name,
+    category: CONTENTFUL_COMPONENT_CATEGORY,
+    children: true,
+    variables: sectionBuiltInStyles,
+    tooltip: {
+        description: 'Create a new full width section of your experience by dragging this component onto the canvas. Other components and patterns can be added into a section.',
+    },
+};
+
 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.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);
 
@@ -568,6 +1531,17 @@ dragProps: _, ...props }) => {
         React.createElement("hr", { className: className })));
 };
 
+const dividerDefinition = {
+    id: CONTENTFUL_COMPONENTS$1.divider.id,
+    name: CONTENTFUL_COMPONENTS$1.divider.name,
+    category: CONTENTFUL_DEFAULT_CATEGORY,
+    children: false,
+    variables: dividerBuiltInStyles,
+    tooltip: {
+        description: 'Drop onto the canvas to add a divider.',
+    },
+};
+
 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);
 
@@ -612,6 +1586,24 @@ const SingleColumn = (props) => {
     });
 };
 
+const columnsDefinition = {
+    id: CONTENTFUL_COMPONENTS$1.columns.id,
+    name: CONTENTFUL_COMPONENTS$1.columns.name,
+    category: CONTENTFUL_COMPONENT_CATEGORY,
+    children: true,
+    variables: columnsBuiltInStyles,
+    tooltip: {
+        description: 'Add columns to a container to create your desired layout and ensure that the experience is responsive across different screen sizes.',
+    },
+};
+const singleColumnDefinition = {
+    id: CONTENTFUL_COMPONENTS$1.singleColumn.id,
+    name: CONTENTFUL_COMPONENTS$1.singleColumn.name,
+    category: CONTENTFUL_COMPONENT_CATEGORY,
+    children: true,
+    variables: singleColumnBuiltInStyles,
+};
+
 const assemblyStyle = { display: 'contents' };
 // Feel free to do any magic as regards variable definitions for assemblies
 // Or if this isn't necessary by the time we figure that part out, we can bid this part farewell
@@ -630,5 +1622,30 @@ const Assembly = (props) => {
     return React.createElement("div", { "data-test-id": "assembly", ...props, style: assemblyStyle });
 };
 
-export { Assembly, Button, ButtonComponentDefinition, Columns, ContentfulContainer, ContentfulDivider, Heading, HeadingComponentDefinition, Image, ImageComponentDefinition, RichText, RichTextComponentDefinition, SingleColumn, Text, TextComponentDefinition };
+const Carousel = ({ className, children, ...props }) => {
+    return (React.createElement("div", { className: combineClasses(className, 'cf-carousel'), ...props }, children));
+};
+
+const carouselDefinition = {
+    id: CONTENTFUL_COMPONENTS$1.carousel.id,
+    name: CONTENTFUL_COMPONENTS$1.carousel.name,
+    category: CONTENTFUL_DEFAULT_CATEGORY,
+    children: true,
+    builtInStyles: [
+        'cfPadding',
+        'cfMargin',
+        'cfHeight',
+        'cfWidth',
+        'cfMaxWidth',
+        'cfBorderRadius',
+        'cfBackgroundColor',
+        'cfBorder',
+    ],
+    variables: {},
+    tooltip: {
+        description: 'Drop onto the canvas to add a carousel.',
+    },
+};
+
+export { Assembly, Button, ButtonComponentDefinition, Carousel, Columns, ContentfulContainer, ContentfulDivider, Heading, HeadingComponentDefinition, Image, ImageComponentDefinition, RichText, RichTextComponentDefinition, SingleColumn, Text, TextComponentDefinition, carouselDefinition, columnsDefinition, containerDefinition, dividerDefinition, sectionDefinition, singleColumnDefinition };
 //# sourceMappingURL=index.js.map