@contentful/experiences-visual-editor-react 0.0.1 → 1.0.1-beta.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.js +44 -30
- package/dist/index.js.map +1 -1
- package/dist/renderApp.js +44 -30
- package/dist/renderApp.js.map +1 -1
- package/package.json +4 -4
package/dist/renderApp.js
CHANGED
|
@@ -37,8 +37,8 @@ function styleInject(css, ref) {
|
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
var css_248z$
|
|
41
|
-
styleInject(css_248z$
|
|
40
|
+
var css_248z$9 = "html,\nbody {\n margin: 0;\n padding: 0;\n}\n\n/*\n * All of these variables are tokens from Forma-36 and should not be adjusted as these\n * are global variables that may affect multiple places.\n * As our customers may use other design libraries, we try to avoid overlapping global\n * variables by always using the prefix `--exp-builder-` inside this SDK.\n */\n\n:root {\n /* Color tokens from Forma 36: https://f36.contentful.com/tokens/color-system */\n --exp-builder-blue100: #e8f5ff;\n --exp-builder-blue200: #ceecff;\n --exp-builder-blue300: #98cbff;\n --exp-builder-blue400: #40a0ff;\n --exp-builder-blue500: #036fe3;\n --exp-builder-blue600: #0059c8;\n --exp-builder-blue700: #0041ab;\n --exp-builder-blue800: #003298;\n --exp-builder-blue900: #002a8e;\n --exp-builder-gray100: #f7f9fa;\n --exp-builder-gray200: #e7ebee;\n --exp-builder-gray300: #cfd9e0;\n --exp-builder-gray400: #aec1cc;\n --exp-builder-gray500: #67728a;\n --exp-builder-gray600: #5a657c;\n --exp-builder-gray700: #414d63;\n --exp-builder-gray800: #1b273a;\n --exp-builder-gray900: #111b2b;\n --exp-builder-purple600: #6c3ecf;\n --exp-builder-red200: #ffe0e0;\n --exp-builder-red800: #7f0010;\n --exp-builder-color-white: #ffffff;\n --exp-builder-glow-primary: 0px 0px 0px 3px #e8f5ff;\n\n /* RGB colors for applying opacity */\n --exp-builder-blue100-rgb: 232, 245, 255;\n --exp-builder-blue300-rgb: 152, 203, 255;\n\n /* Spacing tokens from Forma 36: https://f36.contentful.com/tokens/spacing */\n --exp-builder-spacing-s: 0.75rem;\n --exp-builder-spacing-2xs: 0.25rem;\n\n /* Typography tokens from Forma 36: https://f36.contentful.com/tokens/typography */\n --exp-builder-font-size-l: 1rem;\n --exp-builder-font-size-m: 0.875rem;\n --exp-builder-font-stack-primary: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,\n sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n --exp-builder-line-height-condensed: 1.25;\n}\n";
|
|
41
|
+
styleInject(css_248z$9);
|
|
42
42
|
|
|
43
43
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
44
44
|
|
|
@@ -37976,6 +37976,10 @@ const CONTENTFUL_COMPONENTS$1 = {
|
|
|
37976
37976
|
id: 'contentful-text',
|
|
37977
37977
|
name: 'Text',
|
|
37978
37978
|
},
|
|
37979
|
+
divider: {
|
|
37980
|
+
id: 'contentful-divider',
|
|
37981
|
+
name: 'Divider',
|
|
37982
|
+
},
|
|
37979
37983
|
};
|
|
37980
37984
|
const EMPTY_CONTAINER_HEIGHT$1 = '80px';
|
|
37981
37985
|
const DEFAULT_IMAGE_WIDTH = '500px';
|
|
@@ -38202,22 +38206,24 @@ const transformBackgroundImage = (cfBackgroundImageUrl, cfBackgroundImageOptions
|
|
|
38202
38206
|
backgroundSize: matchBackgroundSize(cfBackgroundImageOptions?.scaling),
|
|
38203
38207
|
};
|
|
38204
38208
|
};
|
|
38205
|
-
const transformWidthSizing = ({ value, cfMargin, }) => {
|
|
38206
|
-
if (!value || !cfMargin)
|
|
38209
|
+
const transformWidthSizing = ({ value, cfMargin, componentId, }) => {
|
|
38210
|
+
if (!value || !cfMargin || !componentId)
|
|
38207
38211
|
return;
|
|
38208
38212
|
const transformedValue = transformFill(value);
|
|
38209
|
-
|
|
38210
|
-
|
|
38211
|
-
|
|
38212
|
-
|
|
38213
|
-
|
|
38214
|
-
|
|
38215
|
-
|
|
38216
|
-
|
|
38217
|
-
|
|
38218
|
-
|
|
38219
|
-
|
|
38220
|
-
|
|
38213
|
+
if (isContentfulStructureComponent(componentId)) {
|
|
38214
|
+
const marginValues = cfMargin.split(' ');
|
|
38215
|
+
const rightMargin = marginValues[1] || '0px';
|
|
38216
|
+
const leftMargin = marginValues[3] || '0px';
|
|
38217
|
+
const calcValue = `calc(${transformedValue} - ${leftMargin} - ${rightMargin})`;
|
|
38218
|
+
/**
|
|
38219
|
+
* We want to check if the calculated value is valid CSS. If this fails,
|
|
38220
|
+
* this means the `transformedValue` is not a calculable value (not a px, rem, or %).
|
|
38221
|
+
* The value may instead be a string such as `min-content` or `max-content`. In
|
|
38222
|
+
* that case we don't want to use calc and instead return the raw value.
|
|
38223
|
+
*/
|
|
38224
|
+
if (typeof window !== 'undefined' && CSS.supports('width', calcValue)) {
|
|
38225
|
+
return calcValue;
|
|
38226
|
+
}
|
|
38221
38227
|
}
|
|
38222
38228
|
return transformedValue;
|
|
38223
38229
|
};
|
|
@@ -38237,12 +38243,12 @@ const buildStyleTag = ({ styles, nodeId }) => {
|
|
|
38237
38243
|
const styleRule = `.${className}{ ${stylesStr} }`;
|
|
38238
38244
|
return [className, styleRule];
|
|
38239
38245
|
};
|
|
38240
|
-
const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection, cfFlexWrap, cfMargin, cfPadding, cfBackgroundColor, cfWidth, cfHeight, cfMaxWidth, cfBorder, cfBorderRadius, cfGap, cfBackgroundImageUrl, cfBackgroundImageOptions, cfFontSize, cfFontWeight, cfImageOptions, cfLineHeight, cfLetterSpacing, cfTextColor, cfTextAlign, cfTextTransform, cfTextBold, cfTextItalic, cfTextUnderline, cfColumnSpan, }) => {
|
|
38246
|
+
const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection, cfFlexWrap, cfMargin, cfPadding, cfBackgroundColor, cfWidth, cfHeight, cfMaxWidth, cfBorder, cfBorderRadius, cfGap, cfBackgroundImageUrl, cfBackgroundImageOptions, cfFontSize, cfFontWeight, cfImageOptions, cfLineHeight, cfLetterSpacing, cfTextColor, cfTextAlign, cfTextTransform, cfTextBold, cfTextItalic, cfTextUnderline, cfColumnSpan, }, componentId) => {
|
|
38241
38247
|
return {
|
|
38242
38248
|
margin: cfMargin,
|
|
38243
38249
|
padding: cfPadding,
|
|
38244
38250
|
backgroundColor: cfBackgroundColor,
|
|
38245
|
-
width: transformWidthSizing({ value: cfWidth || cfImageOptions?.width, cfMargin }),
|
|
38251
|
+
width: transformWidthSizing({ value: cfWidth || cfImageOptions?.width, cfMargin, componentId }),
|
|
38246
38252
|
height: transformFill(cfHeight || cfImageOptions?.height),
|
|
38247
38253
|
maxWidth: cfMaxWidth,
|
|
38248
38254
|
...transformGridColumn(cfColumnSpan),
|
|
@@ -49930,9 +49936,9 @@ var classnames = {exports: {}};
|
|
|
49930
49936
|
var classnamesExports = classnames.exports;
|
|
49931
49937
|
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
49932
49938
|
|
|
49933
|
-
var css_248z$
|
|
49939
|
+
var css_248z$8 = ".styles-module_DraggableComponent__m5-dA {\n pointer-events: all;\n position: relative;\n transition: outline 0.2s;\n cursor: grab;\n box-sizing: border-box;\n display: flex;\n}\n\n.styles-module_DraggableComponent__m5-dA:before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n outline-offset: -2px;\n outline: 2px solid transparent;\n z-index: 1;\n pointer-events: none;\n}\n\n.styles-module_DraggableClone__X8zTA:before {\n outline: 2px solid var(--exp-builder-blue500);\n}\n\n.styles-module_DraggableClone__X8zTA,\n.styles-module_DraggableClone__X8zTA * {\n pointer-events: none !important;\n}\n\n.styles-module_DraggableComponent__m5-dA:not(.styles-module_userIsDragging__lqbjG) :not(.styles-module_DraggableComponent__m5-dA) {\n pointer-events: none;\n}\n\n.styles-module_isDragging__WHjPU {\n overflow: hidden;\n}\n\n.styles-module_isSelected__BzICQ:before {\n outline: 2px solid transparent !important;\n}\n\n.styles-module_overlay__r4th9 {\n position: absolute;\n display: flex;\n align-items: center;\n min-width: max-content;\n height: 24px;\n z-index: 1;\n font-family: var(--exp-builder-font-stack-primary);\n font-size: 14px;\n font-weight: 500;\n background-color: var(--exp-builder-gray500);\n color: var(--exp-builder-color-white);\n border-radius: 0 0 2px 0;\n padding: 4px 12px 4px 12px;\n transition: opacity 0.2s;\n opacity: 0;\n text-wrap: nowrap;\n}\n\n.styles-module_overlayContainer__eiX-5 {\n opacity: 0;\n}\n\n.styles-module_overlayAssembly__tOzZU {\n background-color: var(--exp-builder-purple600);\n}\n\n.styles-module_userIsDragging__lqbjG > .styles-module_overlay__r4th9,\n.styles-module_userIsDragging__lqbjG > .styles-module_overlayContainer__eiX-5 {\n opacity: 0 !important;\n}\n\n.styles-module_userIsDragging__lqbjG:before {\n outline: 2px solid transparent !important;\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:not(:has(div[data-rfd-draggable-id]:hover)) > .styles-module_overlay__r4th9 {\n opacity: 1;\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:before,\n.styles-module_DraggableComponent__m5-dA:hover div[data-rfd-draggable-id]:before {\n outline: 2px dashed var(--exp-builder-gray500);\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:not(:has(div[data-rfd-draggable-id]:hover)):before {\n outline: 2px solid var(--exp-builder-gray500);\n}\n\n.styles-module_isAssemblyBlock__Y3Avk:hover:before,\n.styles-module_isAssemblyBlock__Y3Avk:hover div[data-rfd-draggable-id]:before,\n.styles-module_DraggableComponent__m5-dA:hover div[data-rfd-draggable-id][data-cf-node-block-type^='assembly']:before {\n outline: 2px dashed var(--exp-builder-purple600);\n}\n\n.styles-module_isAssemblyBlock__Y3Avk:hover:not(:has(div[data-rfd-draggable-id]:hover)):before {\n outline: 2px solid var(--exp-builder-purple600);\n}\n";
|
|
49934
49940
|
var styles$3 = {"DraggableComponent":"styles-module_DraggableComponent__m5-dA","DraggableClone":"styles-module_DraggableClone__X8zTA","userIsDragging":"styles-module_userIsDragging__lqbjG","isDragging":"styles-module_isDragging__WHjPU","isSelected":"styles-module_isSelected__BzICQ","overlay":"styles-module_overlay__r4th9","overlayContainer":"styles-module_overlayContainer__eiX-5","overlayAssembly":"styles-module_overlayAssembly__tOzZU","isAssemblyBlock":"styles-module_isAssemblyBlock__Y3Avk"};
|
|
49935
|
-
styleInject(css_248z$
|
|
49941
|
+
styleInject(css_248z$8);
|
|
49936
49942
|
|
|
49937
49943
|
const SCROLL_STATES = {
|
|
49938
49944
|
Start: 'scrollStart',
|
|
@@ -50022,6 +50028,10 @@ const CONTENTFUL_COMPONENTS = {
|
|
|
50022
50028
|
id: 'contentful-text',
|
|
50023
50029
|
name: 'Text',
|
|
50024
50030
|
},
|
|
50031
|
+
divider: {
|
|
50032
|
+
id: 'contentful-divider',
|
|
50033
|
+
name: 'Divider',
|
|
50034
|
+
},
|
|
50025
50035
|
};
|
|
50026
50036
|
const ASSEMBLY_NODE_TYPE = 'assembly';
|
|
50027
50037
|
const ASSEMBLY_DEFAULT_CATEGORY = 'Assemblies';
|
|
@@ -50764,7 +50774,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
|
|
|
50764
50774
|
node.type,
|
|
50765
50775
|
entityStore,
|
|
50766
50776
|
]);
|
|
50767
|
-
const cfStyles = buildCfStyles(props);
|
|
50777
|
+
const cfStyles = buildCfStyles(props, node.data.blockId);
|
|
50768
50778
|
// Separate the component styles from the editor wrapper styles
|
|
50769
50779
|
const { margin, height, width, maxWidth, ...componentStyles } = cfStyles;
|
|
50770
50780
|
// Styles that will be applied to the editor wrapper (draggable) element
|
|
@@ -50798,6 +50808,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
|
|
|
50798
50808
|
}),
|
|
50799
50809
|
...(userIsDragging &&
|
|
50800
50810
|
isContentfulStructureComponent(node?.data.blockId) &&
|
|
50811
|
+
node?.data.blockId !== CONTENTFUL_COMPONENTS.divider.id &&
|
|
50801
50812
|
node?.data.blockId !== CONTENTFUL_COMPONENTS.columns.id && {
|
|
50802
50813
|
padding: addExtraDropzonePadding(componentStyles.padding?.toString() || '0 0 0 0'),
|
|
50803
50814
|
}),
|
|
@@ -51379,21 +51390,21 @@ var PostMessageMethods;
|
|
|
51379
51390
|
PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
|
|
51380
51391
|
})(PostMessageMethods || (PostMessageMethods = {}));
|
|
51381
51392
|
|
|
51382
|
-
var css_248z$
|
|
51393
|
+
var css_248z$6 = ".cf-heading {\n white-space: pre-line;\n}\n";
|
|
51394
|
+
styleInject(css_248z$6);
|
|
51395
|
+
|
|
51396
|
+
var css_248z$5 = ".cf-richtext {\n white-space: pre-line;\n}\n";
|
|
51383
51397
|
styleInject(css_248z$5);
|
|
51384
51398
|
|
|
51385
|
-
var css_248z$4 = ".cf-
|
|
51399
|
+
var css_248z$4 = ".cf-text {\n white-space: pre-line;\n}\n";
|
|
51386
51400
|
styleInject(css_248z$4);
|
|
51387
51401
|
|
|
51388
|
-
var css_248z$3 = ".cf-text
|
|
51402
|
+
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\n.cf-no-image {\n position: relative;\n}\n\n.cf-no-image img {\n background-color: var(--cf-color-gray100);\n outline-offset: -2px;\n outline: 2px solid rgba(var(--cf-color-gray400-rgb), 0.5);\n}\n\n[data-ctfl-draggable-id] .cf-no-image {\n width: 100%;\n height: 100%;\n}\n\n[data-ctfl-draggable-id] .cf-no-image img {\n width: 100%;\n}\n\n.cf-no-image svg {\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\n.cf-no-image svg path {\n fill: var(--cf-color-gray400);\n}\n";
|
|
51389
51403
|
styleInject(css_248z$3);
|
|
51390
51404
|
|
|
51391
|
-
var css_248z$2$1 = "
|
|
51405
|
+
var css_248z$2$1 = ".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.cf-container-label {\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: 10;\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";
|
|
51392
51406
|
styleInject(css_248z$2$1);
|
|
51393
51407
|
|
|
51394
|
-
var css_248z$1$1 = ".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.cf-container-label {\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: 10;\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";
|
|
51395
|
-
styleInject(css_248z$1$1);
|
|
51396
|
-
|
|
51397
51408
|
const Flex = reactExports.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) => {
|
|
51398
51409
|
return (React.createElement("div", { id: id, ref: ref, style: {
|
|
51399
51410
|
display: 'flex',
|
|
@@ -51416,8 +51427,11 @@ const Flex = reactExports.forwardRef(({ id, children, onMouseEnter, onMouseUp, o
|
|
|
51416
51427
|
});
|
|
51417
51428
|
Flex.displayName = 'Flex';
|
|
51418
51429
|
|
|
51419
|
-
var css_248z$
|
|
51420
|
-
styleInject(css_248z$
|
|
51430
|
+
var css_248z$1$1 = ".cf-divider {\n position: relative;\n width: 100%;\n height: 100%;\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";
|
|
51431
|
+
styleInject(css_248z$1$1);
|
|
51432
|
+
|
|
51433
|
+
var css_248z$7 = ".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 .Columns {\n display: grid;\n }\n}\n\n.cf-single-column-wrapper {\n position: relative;\n}\n\n.cf-single-column {\n pointer-events: all;\n}\n\n.cf-single-column-label {\n pointer-events: none;\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: var(--exp-builder-font-stack-primary);\n font-size: 12px;\n color: var(--exp-builder-gray400);\n z-index: 100;\n}\n";
|
|
51434
|
+
styleInject(css_248z$7);
|
|
51421
51435
|
|
|
51422
51436
|
const ColumnWrapper = reactExports.forwardRef((props, ref) => {
|
|
51423
51437
|
return (React.createElement("div", { ref: ref, ...props, style: {
|