@wix/patterns-fields 1.66.0 → 1.68.0

package/src/components/audio/audio-field/form-audio-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formaudiofield32432185";
+var _namespace_ = "formaudiofield4139509640";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formaudiofield32432185__root","addItem":"formaudiofield32432185__addItem","mediaTitle":"formaudiofield32432185__mediaTitle"};
+export var classes = {"root":"formaudiofield4139509640__root","addItem":"formaudiofield4139509640__addItem","mediaTitle":"formaudiofield4139509640__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-player/audio-player.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "audioplayer2625614961";
+var _namespace_ = "audioplayer3907523205";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"audioplayer2625614961__root"};
+export var classes = {"root":"audioplayer3907523205__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/color-view/cell-color-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellcolorview3753113674";
+var _namespace_ = "cellcolorview3987181602";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"cellcolorview3753113674__root","hashPrefix":"cellcolorview3753113674__hashPrefix"};
+export var classes = {"root":"cellcolorview3987181602__root","hashPrefix":"cellcolorview3987181602__hashPrefix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/color-view/cell-color-view.tsx

@@ -17,8 +17,9 @@ export interface CellColorViewProps {
  * FillPreview (diagonal-slash placeholder) on the right.
  */
 export const CellColorView: React.FC<CellColorViewProps> = ({ value }) => {
-  const isValid = !!value && HEX_RE.test(value);
-  const hex = value ? value.replace(/^#/, '').toUpperCase() : '';
+  const color = typeof value === 'string' ? value : '';
+  const isValid = !!color && HEX_RE.test(color);
+  const hex = color.replace(/^#/, '').toUpperCase();
 
   return (
     <Box
@@ -40,7 +41,7 @@ export const CellColorView: React.FC<CellColorViewProps> = ({ value }) => {
       </Box>
       <Box width="24px" height="24px" flexShrink={0}>
         <FillPreview
-          fill={isValid ? value : undefined}
+          fill={isValid ? color : undefined}
           aspectRatio={1}
           dataHook="cell-color-view-fill-preview"
         />

package/src/components/color-view/color-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview3879755634";
+var _namespace_ = "colorview3391623245";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"colorview3879755634__root","view":"colorview3879755634__view","fillPreview":"colorview3879755634__fillPreview"};
+export var classes = {"root":"colorview3391623245__root","view":"colorview3391623245__view","fillPreview":"colorview3391623245__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/color-view/color-view.tsx

@@ -31,10 +31,12 @@ const ColorPreview: React.FC<ColorViewProps> = ({ data, children }) => {
 };
 
 export const ColorView: React.FC<ColorViewProps> = (props) => {
+  const data = typeof props.data === 'string' ? props.data : undefined;
+
   return (
-    <ColorPreview {...props}>
+    <ColorPreview {...props} data={data}>
       <Text size="small" weight="normal" dataHook="color-view-text">
-        {props.data ?? '#'}
+        {data ?? '#'}
       </Text>
     </ColorPreview>
   );

package/src/components/delete-dialog/delete-dialog.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog3873629624";
+var _namespace_ = "deletedialog4261229259";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"deletedialog3873629624__root","layout":"deletedialog3873629624__layout"};
+export var classes = {"root":"deletedialog4261229259__root","layout":"deletedialog4261229259__layout"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/document/form-document-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield189828330";
+var _namespace_ = "formdocumentfield3707111148";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formdocumentfield189828330__root","viewWrapper":"formdocumentfield189828330__viewWrapper","textWidth":"formdocumentfield189828330__textWidth","documentLoader":"formdocumentfield189828330__documentLoader","addDocument":"formdocumentfield189828330__addDocument","addItemWrapper":"formdocumentfield189828330__addItemWrapper"};
+export var classes = {"root":"formdocumentfield3707111148__root","viewWrapper":"formdocumentfield3707111148__viewWrapper","textWidth":"formdocumentfield3707111148__textWidth","documentLoader":"formdocumentfield3707111148__documentLoader","addDocument":"formdocumentfield3707111148__addDocument","addItemWrapper":"formdocumentfield3707111148__addItemWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/exclamation/exclamation.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "exclamation1630207575";
+var _namespace_ = "exclamation1174355168";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"exclamation1630207575__root","exclamation":"exclamation1630207575__exclamation","actions":"exclamation1630207575__actions","action":"exclamation1630207575__action"};
+export var classes = {"root":"exclamation1174355168__root","exclamation":"exclamation1174355168__exclamation","actions":"exclamation1174355168__actions","action":"exclamation1174355168__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/highlighted-text/highlighted-text.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext2238026867";
+var _namespace_ = "highlightedtext2637008025";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"highlightedtext2238026867__root","substring":"highlightedtext2238026867__substring"};
-export var keyframes = {"highlighted":"highlightedtext2238026867__highlighted","highlighted-match":"highlightedtext2238026867__highlighted-match"}; 
+export var classes = {"root":"highlightedtext2637008025__root","substring":"highlightedtext2637008025__substring"};
+export var keyframes = {"highlighted":"highlightedtext2637008025__highlighted","highlighted-match":"highlightedtext2637008025__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/image/thumbnail-replace-overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay176436874";
+var _namespace_ = "thumbnailreplaceoverlay2528832930";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"thumbnailreplaceoverlay176436874__root","icon":"thumbnailreplaceoverlay176436874__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay2528832930__root","icon":"thumbnailreplaceoverlay2528832930__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/cell-media-edit-shell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmediaeditshell3100626680";
+var _namespace_ = "cellmediaeditshell1426377695";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"cellmediaeditshell3100626680__root"};
+export var classes = {"root":"cellmediaeditshell1426377695__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/paste-url-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "pasteurlbutton2664669787";
+var _namespace_ = "pasteurlbutton2984285637";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"pasteurlbutton2664669787__root","iconButtonTooltip":"pasteurlbutton2664669787__iconButtonTooltip","iconButton":"pasteurlbutton2664669787__iconButton"};
+export var classes = {"root":"pasteurlbutton2984285637__root","iconButtonTooltip":"pasteurlbutton2984285637__iconButtonTooltip","iconButton":"pasteurlbutton2984285637__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/cell-media-gallery-view.tsx

@@ -12,9 +12,11 @@ export function CellMediaGalleryView({
   data,
   dataHook,
 }: CellMediaGalleryViewProps) {
-  const items = (data ?? []).map((item) => ({
-    imgProps: { src: mediaURItoImageURL(item.src, ThumbnailSize.S) },
-  }));
+  const items = (Array.isArray(data) ? data : [])
+    .filter((item) => typeof item?.src === 'string')
+    .map((item) => ({
+      imgProps: { src: mediaURItoImageURL(item.src, ThumbnailSize.S) },
+    }));
 
   return (
     <Box

package/src/components/media-gallery/form-media-gallery-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formmediagalleryfield622057319";
+var _namespace_ = "formmediagalleryfield2595208311";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formmediagalleryfield622057319__root","container":"formmediagalleryfield622057319__container","viewBox":"formmediagalleryfield622057319__viewBox","addItemWrapper":"formmediagalleryfield622057319__addItemWrapper","addItem":"formmediagalleryfield622057319__addItem","overlay":"formmediagalleryfield622057319__overlay","image":"formmediagalleryfield622057319__image","previewImage":"formmediagalleryfield622057319__previewImage","previewVideo":"formmediagalleryfield622057319__previewVideo"};
+export var classes = {"root":"formmediagalleryfield2595208311__root","container":"formmediagalleryfield2595208311__container","viewBox":"formmediagalleryfield2595208311__viewBox","addItemWrapper":"formmediagalleryfield2595208311__addItemWrapper","addItem":"formmediagalleryfield2595208311__addItem","overlay":"formmediagalleryfield2595208311__overlay","image":"formmediagalleryfield2595208311__image","previewImage":"formmediagalleryfield2595208311__previewImage","previewVideo":"formmediagalleryfield2595208311__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-image/media-image.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage323379179";
+var _namespace_ = "mediaimage3386841427";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediaimage323379179__root"};
+export var classes = {"root":"mediaimage3386841427__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage323379179-from","to":"--mediaimage323379179-to"}; 
+export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage3386841427-from","to":"--mediaimage3386841427-to"}; 
 
 
 

package/src/components/media-image/overlays/overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "overlay2137816035";
+var _namespace_ = "overlay3948201643";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"overlay2137816035__root","iconOverlay":"overlay2137816035__iconOverlay"};
+export var classes = {"root":"overlay3948201643__root","iconOverlay":"overlay3948201643__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-loader/media-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader1252333309";
+var _namespace_ = "medialoader817014080";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"medialoader1252333309__root","loader":"medialoader1252333309__loader"};
+export var classes = {"root":"medialoader817014080__root","loader":"medialoader817014080__loader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-tag/web-media-tag/media-tag.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "mediatag917270223";
+var _namespace_ = "mediatag1026121010";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediatag917270223__root"};
+export var classes = {"root":"mediatag1026121010__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/cell-multi-document-edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmultidocumentedit1896878393";
+var _namespace_ = "cellmultidocumentedit1856688179";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"cellmultidocumentedit1896878393__root","chipTrigger":"cellmultidocumentedit1896878393__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit1856688179__root","chipTrigger":"cellmultidocumentedit1856688179__chipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/cell-multi-document-view.tsx

@@ -22,7 +22,7 @@ export const CellMultiDocumentView: React.FC<CellMultiDocumentViewProps> = ({
 }) => {
   const tags = useMemo(
     () =>
-      (value ?? []).map((uri, i) => ({
+      (Array.isArray(value) ? value : []).map((uri, i) => ({
         id: `${fieldId}-${i}`,
         dataHook: 'cell-multi-document-tag',
         thumb: <DocumentSmall />,

package/src/components/multi-document/multi-document-input/form-multi-document.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formmultidocument4263958338";
+var _namespace_ = "formmultidocument4150166092";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formmultidocument4263958338__root","viewRoot":"formmultidocument4263958338__viewRoot","singleViewWrapper":"formmultidocument4263958338__singleViewWrapper","addDocumentButton":"formmultidocument4263958338__addDocumentButton"};
+export var classes = {"root":"formmultidocument4150166092__root","viewRoot":"formmultidocument4150166092__viewRoot","singleViewWrapper":"formmultidocument4150166092__singleViewWrapper","addDocumentButton":"formmultidocument4150166092__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/cell-multi-reference-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmultireferenceinput2646909186";
+var _namespace_ = "cellmultireferenceinput2044312836";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"cellmultireferenceinput2646909186__root"};
+export var classes = {"root":"cellmultireferenceinput2044312836__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/cell-reference-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput1475045378";
+var _namespace_ = "cellreferenceinput1523227364";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"cellreferenceinput1475045378__root","autocomplete":"cellreferenceinput1475045378__autocomplete"};
+export var classes = {"root":"cellreferenceinput1523227364__root","autocomplete":"cellreferenceinput1523227364__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/reference-avatar.tsx

@@ -9,7 +9,9 @@ export interface ReferenceAvatarProps {
 }
 
 const resolveSrc = (image?: string) => {
-  if (!image) return undefined;
+  if (!image || typeof image !== 'string') {
+    return undefined;
+  }
   return image.startsWith('wix:image://')
     ? mediaURItoImageURL(image, ThumbnailSize.S)
     : image;

package/src/components/rich-content/cdn/load-ricos.ts

@@ -0,0 +1,184 @@
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+import type { RicosCdnModule } from './types';
+
+/**
+ * Pinned exactly, not to a range. The npm `@wix/ricos` used for the synchronous
+ * content helpers and this artifact must not drift — two different ricos
+ * versions in one page means two schema versions, and content written by one may
+ * not validate in the other.
+ *
+ * This number is Falcon's build counter for wix-private/patterns-deps, not the
+ * npm version of the same package. Falcon bumps it on every master build,
+ * including builds that publish nothing, so the two drift apart and occasionally
+ * coincide again — as they happen to right now. A wrong-but-existing version
+ * returns 200 and silently loads a different ricos, so confirm the artifact
+ * rather than the number:
+ *
+ *   curl -s <url> | grep -c <ricos version>   # ricos-schema/next-schema/version.js
+ */
+const RICOS_STATICS_VERSION = '1.7.0';
+const RICOS_STATICS_URL =
+  `https://static.parastorage.com/services/patterns-fields-ricos-statics/${RICOS_STATICS_VERSION}/ricos.umd.min.js` as const;
+
+/** UMD global declared by the statics bundle (`library: 'PatternsRicos'`). */
+const GLOBAL_NAME = 'PatternsRicos';
+
+type LoaderWindow = Window & {
+  PatternsRicos?: RicosCdnModule;
+  // The bundle's UMD externals. Business Manager may already provide these;
+  // we fill them in from the host app's own copies when it does not.
+  react?: typeof React;
+  reactDOM?: typeof ReactDOM;
+  requirejs?: (
+    deps: string[],
+    // Undefined when the requested id resolves to nothing — which is what asking
+    // for this bundle by URL does, since its `define` is named.
+    onOk: (mod: RicosCdnModule | undefined) => void,
+    onErr: (error: Error) => void,
+  ) => void;
+};
+
+/**
+ * The bundle externalises react/react-dom. Its UMD wrapper resolves them as AMD
+ * dependencies when requirejs is present, and off these globals when it is not —
+ * without them it throws `undefined (reading 'createContext')` while evaluating
+ * and never defines `PatternsRicos`. Pointing them at the host app's own copies
+ * is also what keeps one React on the page; a second would make every hook
+ * inside the editor throw.
+ */
+const provideReactGlobals = (win: LoaderWindow) => {
+  win.react = win.react ?? React;
+  win.reactDOM = win.reactDOM ?? ReactDOM;
+};
+
+const appendScript = (url: string) =>
+  new Promise<void>((resolve, reject) => {
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = url;
+    script.crossOrigin = 'anonymous';
+    script.onerror = () => reject(new Error(`Failed to load ${url}`));
+    script.onload = () => resolve();
+    document.head.appendChild(script);
+  });
+
+/**
+ * jsdom cannot fetch the CDN, so under test we require the package the artifact
+ * is built from — same export list, so the surface matches by construction.
+ *
+ * This `require` is dead-code-eliminated in production builds, which is the whole
+ * point: the editor and viewer must never enter a consumer's graph. Verify with
+ * `grep -r 'ricos' <consumer>/dist` after touching this.
+ */
+const loadForTests = (): RicosCdnModule | undefined => {
+  // The `require`s must sit inside the consequent of a statically-false
+  // condition. An early `return` for the non-test case leaves them as
+  // unreachable code *after* the `if`, which webpack does not prune — that
+  // silently puts the whole editor back in every consumer's graph.
+  if (process.env.NODE_ENV === 'test') {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    return require('@wix/patterns-fields-utils/@wix/patterns-fields-ricos-statics') as RicosCdnModule;
+  }
+  return undefined;
+};
+
+const load = async (): Promise<RicosCdnModule> => {
+  const forTests = loadForTests();
+  if (forTests) {
+    return forTests;
+  }
+
+  const win = window as unknown as LoaderWindow;
+
+  // The bundle is UMD with a named `define`, so under Business Manager's
+  // requirejs it takes the AMD branch: it registers under GLOBAL_NAME and never
+  // assigns the global. Asking for it by URL loads the file but resolves with
+  // `undefined`, because nothing is defined under the URL's id — so fetch it,
+  // then ask again by the name it registered itself as.
+  if (win.requirejs) {
+    return new Promise<RicosCdnModule>((resolve, reject) => {
+      const fail = (error: unknown) =>
+        reject(
+          error instanceof Error
+            ? error
+            : new Error(
+                `Failed to load ${RICOS_STATICS_URL}: ${String(error)}`,
+              ),
+        );
+
+      win.requirejs!(
+        [RICOS_STATICS_URL],
+        () =>
+          win.requirejs!(
+            [GLOBAL_NAME],
+            (mod) =>
+              mod
+                ? resolve(mod)
+                : fail(
+                    new Error(
+                      `${RICOS_STATICS_URL} loaded but defined no "${GLOBAL_NAME}" module`,
+                    ),
+                  ),
+            fail,
+          ),
+        fail,
+      );
+    });
+  }
+
+  provideReactGlobals(win);
+  await appendScript(RICOS_STATICS_URL);
+
+  const mod = win[GLOBAL_NAME];
+  if (!mod) {
+    throw new Error(
+      `${RICOS_STATICS_URL} loaded but did not define window.${GLOBAL_NAME}`,
+    );
+  }
+  return mod;
+};
+
+let pending: Promise<RicosCdnModule> | undefined;
+
+/** Loads the bundle once per page; every caller shares the same promise. */
+export const loadRicosFromCdn = (): Promise<RicosCdnModule> => {
+  pending = pending ?? load();
+  return pending;
+};
+
+/**
+ * Returns the module once loaded, `undefined` while in flight. A caller must
+ * render something in the meantime — `RCELoader` in the editor, `RCVLoader` in
+ * the viewer. Returning `null` instead leaves a blank area for the duration of
+ * the fetch.
+ */
+export const useRicosFromCdn = (): RicosCdnModule | undefined => {
+  // Resolved on the first render under test, so specs see a mounted editor
+  // rather than the pre-load `null`.
+  const [mod, setMod] = useState<RicosCdnModule | undefined>(loadForTests);
+
+  useEffect(() => {
+    if (mod) {
+      return;
+    }
+    let cancelled = false;
+    loadRicosFromCdn().then(
+      (loaded) => {
+        if (!cancelled) {
+          setMod(loaded);
+        }
+      },
+      (error) => {
+        // Nothing to fall back to — surface it rather than hanging on a spinner.
+        console.error('[rich-content] failed to load ricos from CDN', error);
+      },
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [mod]);
+
+  return mod;
+};