@contentful/experiences-components-react 1.42.2 → 1.42.3-beta.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 = "@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}";
+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 = ".cf-button:empty:before{content:\"\";display:inline-block}";
+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{white-space:pre-line}";
+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{white-space:pre-line}.cf-richtext>:first-child{margin-top:0}.cf-richtext>:last-child{margin-bottom:0}";
+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{white-space:pre-line}.cf-text-link .cf-text{margin:0}";
+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 = "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)}";
+styleInject(css_248z$3);
+
 const Image = ({ className = '', src, cfImageAsset, ...props }) => {
     if (!cfImageAsset && !src) {
         return (React.createElement("div", { className: combineClasses('cf-placeholder-wrapper', className) },
@@ -1627,6 +1646,9 @@ var VisualEditorMode;
     VisualEditorMode["InjectScript"] = "injectScript";
 })(VisualEditorMode || (VisualEditorMode = {}));
 
+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}";
+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',
@@ -1720,6 +1742,9 @@ const sectionDefinition = {
     },
 };
 
+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}";
+styleInject(css_248z$1);
+
 const ContentfulDivider = ({ className = '', 
 // We have to exclude this explicitly from rendering as withComponentWrapper is not used
 dragProps: _, ...props }) => {
@@ -1738,6 +1763,9 @@ const dividerDefinition = {
     },
 };
 
+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\"}";
+styleInject(css_248z);
+
 const ColumnWrapper = forwardRef((props, ref) => {
     return (React.createElement("div", { ref: ref, ...props, style: {
             ...(props.style || {}),