@contentful/experiences-visual-editor-react 1.0.0 → 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/index.js
CHANGED
|
@@ -11,8 +11,8 @@ import { produce } from 'immer';
|
|
|
11
11
|
import { createPortal } from 'react-dom';
|
|
12
12
|
import { v4 } from 'uuid';
|
|
13
13
|
|
|
14
|
-
var css_248z$
|
|
15
|
-
styleInject(css_248z$
|
|
14
|
+
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";
|
|
15
|
+
styleInject(css_248z$9);
|
|
16
16
|
|
|
17
17
|
const INCOMING_EVENTS$1 = {
|
|
18
18
|
RequestEditorMode: 'requestEditorMode',
|
|
@@ -68,6 +68,10 @@ const CONTENTFUL_COMPONENTS$1 = {
|
|
|
68
68
|
id: 'contentful-text',
|
|
69
69
|
name: 'Text',
|
|
70
70
|
},
|
|
71
|
+
divider: {
|
|
72
|
+
id: 'contentful-divider',
|
|
73
|
+
name: 'Divider',
|
|
74
|
+
},
|
|
71
75
|
};
|
|
72
76
|
const EMPTY_CONTAINER_HEIGHT$1 = '80px';
|
|
73
77
|
const DEFAULT_IMAGE_WIDTH = '500px';
|
|
@@ -294,22 +298,24 @@ const transformBackgroundImage = (cfBackgroundImageUrl, cfBackgroundImageOptions
|
|
|
294
298
|
backgroundSize: matchBackgroundSize(cfBackgroundImageOptions?.scaling),
|
|
295
299
|
};
|
|
296
300
|
};
|
|
297
|
-
const transformWidthSizing = ({ value, cfMargin, }) => {
|
|
298
|
-
if (!value || !cfMargin)
|
|
301
|
+
const transformWidthSizing = ({ value, cfMargin, componentId, }) => {
|
|
302
|
+
if (!value || !cfMargin || !componentId)
|
|
299
303
|
return;
|
|
300
304
|
const transformedValue = transformFill(value);
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
305
|
+
if (isContentfulStructureComponent(componentId)) {
|
|
306
|
+
const marginValues = cfMargin.split(' ');
|
|
307
|
+
const rightMargin = marginValues[1] || '0px';
|
|
308
|
+
const leftMargin = marginValues[3] || '0px';
|
|
309
|
+
const calcValue = `calc(${transformedValue} - ${leftMargin} - ${rightMargin})`;
|
|
310
|
+
/**
|
|
311
|
+
* We want to check if the calculated value is valid CSS. If this fails,
|
|
312
|
+
* this means the `transformedValue` is not a calculable value (not a px, rem, or %).
|
|
313
|
+
* The value may instead be a string such as `min-content` or `max-content`. In
|
|
314
|
+
* that case we don't want to use calc and instead return the raw value.
|
|
315
|
+
*/
|
|
316
|
+
if (typeof window !== 'undefined' && CSS.supports('width', calcValue)) {
|
|
317
|
+
return calcValue;
|
|
318
|
+
}
|
|
313
319
|
}
|
|
314
320
|
return transformedValue;
|
|
315
321
|
};
|
|
@@ -329,12 +335,12 @@ const buildStyleTag = ({ styles, nodeId }) => {
|
|
|
329
335
|
const styleRule = `.${className}{ ${stylesStr} }`;
|
|
330
336
|
return [className, styleRule];
|
|
331
337
|
};
|
|
332
|
-
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, }) => {
|
|
338
|
+
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) => {
|
|
333
339
|
return {
|
|
334
340
|
margin: cfMargin,
|
|
335
341
|
padding: cfPadding,
|
|
336
342
|
backgroundColor: cfBackgroundColor,
|
|
337
|
-
width: transformWidthSizing({ value: cfWidth || cfImageOptions?.width, cfMargin }),
|
|
343
|
+
width: transformWidthSizing({ value: cfWidth || cfImageOptions?.width, cfMargin, componentId }),
|
|
338
344
|
height: transformFill(cfHeight || cfImageOptions?.height),
|
|
339
345
|
maxWidth: cfMaxWidth,
|
|
340
346
|
...transformGridColumn(cfColumnSpan),
|
|
@@ -1630,9 +1636,9 @@ function gatherDeepReferencesFromTree(startingNode, dataSource) {
|
|
|
1630
1636
|
return deepReferences;
|
|
1631
1637
|
}
|
|
1632
1638
|
|
|
1633
|
-
var css_248z$
|
|
1639
|
+
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";
|
|
1634
1640
|
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"};
|
|
1635
|
-
styleInject(css_248z$
|
|
1641
|
+
styleInject(css_248z$8);
|
|
1636
1642
|
|
|
1637
1643
|
const SCROLL_STATES = {
|
|
1638
1644
|
Start: 'scrollStart',
|
|
@@ -1721,6 +1727,10 @@ const CONTENTFUL_COMPONENTS = {
|
|
|
1721
1727
|
id: 'contentful-text',
|
|
1722
1728
|
name: 'Text',
|
|
1723
1729
|
},
|
|
1730
|
+
divider: {
|
|
1731
|
+
id: 'contentful-divider',
|
|
1732
|
+
name: 'Divider',
|
|
1733
|
+
},
|
|
1724
1734
|
};
|
|
1725
1735
|
const ASSEMBLY_NODE_TYPE = 'assembly';
|
|
1726
1736
|
const ASSEMBLY_DEFAULT_CATEGORY = 'Assemblies';
|
|
@@ -2398,7 +2408,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
|
|
|
2398
2408
|
node.type,
|
|
2399
2409
|
entityStore,
|
|
2400
2410
|
]);
|
|
2401
|
-
const cfStyles = buildCfStyles(props);
|
|
2411
|
+
const cfStyles = buildCfStyles(props, node.data.blockId);
|
|
2402
2412
|
// Separate the component styles from the editor wrapper styles
|
|
2403
2413
|
const { margin, height, width, maxWidth, ...componentStyles } = cfStyles;
|
|
2404
2414
|
// Styles that will be applied to the editor wrapper (draggable) element
|
|
@@ -2432,6 +2442,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
|
|
|
2432
2442
|
}),
|
|
2433
2443
|
...(userIsDragging &&
|
|
2434
2444
|
isContentfulStructureComponent(node?.data.blockId) &&
|
|
2445
|
+
node?.data.blockId !== CONTENTFUL_COMPONENTS.divider.id &&
|
|
2435
2446
|
node?.data.blockId !== CONTENTFUL_COMPONENTS.columns.id && {
|
|
2436
2447
|
padding: addExtraDropzonePadding(componentStyles.padding?.toString() || '0 0 0 0'),
|
|
2437
2448
|
}),
|
|
@@ -2474,21 +2485,21 @@ var PostMessageMethods;
|
|
|
2474
2485
|
PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
|
|
2475
2486
|
})(PostMessageMethods || (PostMessageMethods = {}));
|
|
2476
2487
|
|
|
2477
|
-
var css_248z$
|
|
2488
|
+
var css_248z$6 = ".cf-heading {\n white-space: pre-line;\n}\n";
|
|
2489
|
+
styleInject(css_248z$6);
|
|
2490
|
+
|
|
2491
|
+
var css_248z$5 = ".cf-richtext {\n white-space: pre-line;\n}\n";
|
|
2478
2492
|
styleInject(css_248z$5);
|
|
2479
2493
|
|
|
2480
|
-
var css_248z$4 = ".cf-
|
|
2494
|
+
var css_248z$4 = ".cf-text {\n white-space: pre-line;\n}\n";
|
|
2481
2495
|
styleInject(css_248z$4);
|
|
2482
2496
|
|
|
2483
|
-
var css_248z$3 = ".cf-text
|
|
2497
|
+
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";
|
|
2484
2498
|
styleInject(css_248z$3);
|
|
2485
2499
|
|
|
2486
|
-
var css_248z$2$1 = "
|
|
2500
|
+
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";
|
|
2487
2501
|
styleInject(css_248z$2$1);
|
|
2488
2502
|
|
|
2489
|
-
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";
|
|
2490
|
-
styleInject(css_248z$1$1);
|
|
2491
|
-
|
|
2492
2503
|
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) => {
|
|
2493
2504
|
return (React.createElement("div", { id: id, ref: ref, style: {
|
|
2494
2505
|
display: 'flex',
|
|
@@ -2511,8 +2522,11 @@ const Flex = forwardRef(({ id, children, onMouseEnter, onMouseUp, onMouseLeave,
|
|
|
2511
2522
|
});
|
|
2512
2523
|
Flex.displayName = 'Flex';
|
|
2513
2524
|
|
|
2514
|
-
var css_248z$
|
|
2515
|
-
styleInject(css_248z$
|
|
2525
|
+
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";
|
|
2526
|
+
styleInject(css_248z$1$1);
|
|
2527
|
+
|
|
2528
|
+
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";
|
|
2529
|
+
styleInject(css_248z$7);
|
|
2516
2530
|
|
|
2517
2531
|
const ColumnWrapper = forwardRef((props, ref) => {
|
|
2518
2532
|
return (React.createElement("div", { ref: ref, ...props, style: {
|