@wix/patterns-fields 1.127.0 → 1.128.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext1099165912";
+var _namespace_ = "highlightedtext2686208068";
 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":"highlightedtext1099165912__root","substring":"highlightedtext1099165912__substring"};
-export var keyframes = {"highlighted":"highlightedtext1099165912__highlighted","highlighted-match":"highlightedtext1099165912__highlighted-match"}; 
+export var classes = {"root":"highlightedtext2686208068__root","substring":"highlightedtext2686208068__substring"};
+export var keyframes = {"highlighted":"highlightedtext2686208068__highlighted","highlighted-match":"highlightedtext2686208068__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_ = "thumbnailreplaceoverlay1534026877";
+var _namespace_ = "thumbnailreplaceoverlay1126154683";
 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":"thumbnailreplaceoverlay1534026877__root","icon":"thumbnailreplaceoverlay1534026877__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay1126154683__root","icon":"thumbnailreplaceoverlay1126154683__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/index.ts

@@ -24,5 +24,6 @@ export * from './number-input';
 export * from './url';
 export * from './image';
 export * from './media-image-field';
+export * from './media-vector-art-field';
 export * from './reference';
 export * from './field-validation-settings';

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_ = "cellmediaeditshell1442054937";
+var _namespace_ = "cellmediaeditshell899585233";
 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":"cellmediaeditshell1442054937__root"};
+export var classes = {"root":"cellmediaeditshell899585233__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_ = "pasteurlbutton638648382";
+var _namespace_ = "pasteurlbutton2182189125";
 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":"pasteurlbutton638648382__root","iconButtonTooltip":"pasteurlbutton638648382__iconButtonTooltip","iconButton":"pasteurlbutton638648382__iconButton"};
+export var classes = {"root":"pasteurlbutton2182189125__root","iconButtonTooltip":"pasteurlbutton2182189125__iconButtonTooltip","iconButton":"pasteurlbutton2182189125__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "formmediagalleryfield1874123851";
+var _namespace_ = "formmediagalleryfield2422077107";
 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":"formmediagalleryfield1874123851__root","container":"formmediagalleryfield1874123851__container","viewBox":"formmediagalleryfield1874123851__viewBox","addItemWrapper":"formmediagalleryfield1874123851__addItemWrapper","addItem":"formmediagalleryfield1874123851__addItem","overlay":"formmediagalleryfield1874123851__overlay","image":"formmediagalleryfield1874123851__image","previewImage":"formmediagalleryfield1874123851__previewImage","previewVideo":"formmediagalleryfield1874123851__previewVideo"};
+export var classes = {"root":"formmediagalleryfield2422077107__root","container":"formmediagalleryfield2422077107__container","viewBox":"formmediagalleryfield2422077107__viewBox","addItemWrapper":"formmediagalleryfield2422077107__addItemWrapper","addItem":"formmediagalleryfield2422077107__addItem","overlay":"formmediagalleryfield2422077107__overlay","image":"formmediagalleryfield2422077107__image","previewImage":"formmediagalleryfield2422077107__previewImage","previewVideo":"formmediagalleryfield2422077107__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_ = "mediaimage1458830342";
+var _namespace_ = "mediaimage167402540";
 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":"mediaimage1458830342__root"};
+export var classes = {"root":"mediaimage167402540__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":"--mediaimage1458830342-from","to":"--mediaimage1458830342-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":"--mediaimage167402540-from","to":"--mediaimage167402540-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_ = "overlay1640738509";
+var _namespace_ = "overlay3192650435";
 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":"overlay1640738509__root","iconOverlay":"overlay1640738509__iconOverlay"};
+export var classes = {"root":"overlay3192650435__root","iconOverlay":"overlay3192650435__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-image-field/cell-media-image-edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmediaimageedit1963576233";
+var _namespace_ = "cellmediaimageedit3444386420";
 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":"cellmediaimageedit1963576233__root","view":"cellmediaimageedit1963576233__view","anchor":"cellmediaimageedit1963576233__anchor","anchorBox":"cellmediaimageedit1963576233__anchorBox","popoverContent":"cellmediaimageedit1963576233__popoverContent","image":"cellmediaimageedit1963576233__image","imageActions":"cellmediaimageedit1963576233__imageActions"};
+export var classes = {"root":"cellmediaimageedit3444386420__root","view":"cellmediaimageedit3444386420__view","anchor":"cellmediaimageedit3444386420__anchor","anchorBox":"cellmediaimageedit3444386420__anchorBox","popoverContent":"cellmediaimageedit3444386420__popoverContent","image":"cellmediaimageedit3444386420__image","imageActions":"cellmediaimageedit3444386420__imageActions"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimageview423060582";
+var _namespace_ = "mediaimageview3940130497";
 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":"mediaimageview423060582__root","altTextPlaceholder":"mediaimageview423060582__altTextPlaceholder"};
+export var classes = {"root":"mediaimageview3940130497__root","altTextPlaceholder":"mediaimageview3940130497__altTextPlaceholder"};
 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_ = "mediatag1532001710";
+var _namespace_ = "mediatag375282660";
 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":"mediatag1532001710__root"};
+export var classes = {"root":"mediatag375282660__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-vector-art-field/index.ts

@@ -0,0 +1 @@
+export * from './media-vector-art-view';

package/src/components/media-vector-art-field/media-vector-art-view.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { Box } from '@wix/design-system';
+import { toMediaVectorArtValue } from '../../utils/media-vector-art-value';
+import { ImagePreviewPopover } from '../image/image-preview-popover';
+import { ImageThumbnail } from '../image/image-thumbnail';
+
+export interface MediaVectorArtViewProps {
+  value: unknown;
+  dataHook?: string;
+}
+
+export const MediaVectorArtView: React.FC<MediaVectorArtViewProps> = ({
+  value,
+  dataHook,
+}) => {
+  const vectorArt = toMediaVectorArtValue(value);
+  const [isPreviewShown, setIsPreviewShown] = useState(false);
+
+  const showPreview = () => setIsPreviewShown(true);
+  const hidePreview = () => setIsPreviewShown(false);
+
+  const thumbnail = (
+    <ImageThumbnail
+      value={vectorArt}
+      dataHook="media-vector-art-view-thumbnail"
+      width="36px"
+      height="24px"
+      borderRadius="0"
+      onMouseEnter={vectorArt ? showPreview : undefined}
+      onMouseLeave={vectorArt ? hidePreview : undefined}
+    />
+  );
+
+  return (
+    <Box
+      dataHook={dataHook}
+      verticalAlign="middle"
+      padding="0 8px"
+      height="100%"
+      width="100%"
+    >
+      {vectorArt ? (
+        <ImagePreviewPopover src={vectorArt.uri} shown={isPreviewShown}>
+          {thumbnail}
+        </ImagePreviewPopover>
+      ) : (
+        thumbnail
+      )}
+    </Box>
+  );
+};
+
+MediaVectorArtView.displayName = 'MediaVectorArtView';

package/src/components/media-vector-art-field/media-vector-art-view.uni.driver.ts

@@ -0,0 +1,11 @@
+import type { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+
+export function MediaVectorArtViewUniDriver(base: UniDriver, _body: UniDriver) {
+  const thumbnail = base.$('[data-hook="media-vector-art-view-thumbnail"]');
+  return {
+    ...baseUniDriverFactory(base),
+    isEmpty: async () => (await thumbnail.attr('data-empty')) === 'true',
+    getImageSrc: () => thumbnail.$('img').attr('src'),
+  };
+}

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_ = "cellmultidocumentedit1314898709";
+var _namespace_ = "cellmultidocumentedit83794947";
 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":"cellmultidocumentedit1314898709__root","chipTrigger":"cellmultidocumentedit1314898709__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit83794947__root","chipTrigger":"cellmultidocumentedit83794947__chipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "formmultidocument3675931403";
+var _namespace_ = "formmultidocument2065198096";
 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":"formmultidocument3675931403__root","viewRoot":"formmultidocument3675931403__viewRoot","singleViewWrapper":"formmultidocument3675931403__singleViewWrapper","addDocumentButton":"formmultidocument3675931403__addDocumentButton"};
+export var classes = {"root":"formmultidocument2065198096__root","viewRoot":"formmultidocument2065198096__viewRoot","singleViewWrapper":"formmultidocument2065198096__singleViewWrapper","addDocumentButton":"formmultidocument2065198096__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_ = "cellmultireferenceinput3941359973";
+var _namespace_ = "cellmultireferenceinput12609028";
 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":"cellmultireferenceinput3941359973__root"};
+export var classes = {"root":"cellmultireferenceinput12609028__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmultireferenceview786852382";
+var _namespace_ = "cellmultireferenceview1196730419";
 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":"cellmultireferenceview786852382__root","expanded":"cellmultireferenceview786852382__expanded"};
+export var classes = {"root":"cellmultireferenceview1196730419__root","expanded":"cellmultireferenceview1196730419__expanded"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -7,7 +7,7 @@ import { classes } from './cell-multi-reference-view.st.css.js';
 export interface CellMultiReferenceItem {
   id: string;
   name: string;
-  image?: string;
+  image?: unknown;
 }
 
 export interface CellMultiReferenceViewProps {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput984648833";
+var _namespace_ = "cellreferenceinput717243494";
 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":"cellreferenceinput984648833__root","autocomplete":"cellreferenceinput984648833__autocomplete"};
+export var classes = {"root":"cellreferenceinput717243494__root","autocomplete":"cellreferenceinput717243494__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/cell-reference-input.tsx

@@ -8,7 +8,7 @@ import { st, classes } from './cell-reference-input.st.css.js';
 export interface CellReferenceItem {
   id: string;
   name: string;
-  image?: string;
+  image?: unknown;
 }
 
 export interface CellReferenceInputHandle {

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

@@ -5,13 +5,13 @@ import { ReferenceAvatar } from './reference-avatar';
 
 export interface CellReferenceViewProps {
   name: string;
-  imageUrl?: string;
+  image?: unknown;
   dataHook?: string;
 }
 
 export const CellReferenceView: React.FC<CellReferenceViewProps> = ({
   name,
-  imageUrl,
+  image,
   dataHook,
 }) => {
   const { t } = useTranslations();
@@ -28,7 +28,7 @@ export const CellReferenceView: React.FC<CellReferenceViewProps> = ({
       height="100%"
       style={{ boxSizing: 'border-box' }}
     >
-      <ReferenceAvatar name={displayName} image={imageUrl} />
+      <ReferenceAvatar name={displayName} image={image} />
       <Text size="small" ellipsis>
         {displayName}
       </Text>

package/src/components/reference/form-multi-reference.tsx

@@ -102,9 +102,7 @@ const _FormMultiReference = (props: FormMultiReferenceProps) => {
         const label =
           (item[displayField] as string) ||
           tf('patterns-fields.reference.untitled');
-        const image = imageField
-          ? (item[imageField] as string | undefined)
-          : undefined;
+        const image = imageField ? item[imageField] : undefined;
         return {
           id: selectedId,
           label,

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

@@ -18,7 +18,7 @@ import { useReferenceDropdownFooter } from './reference-dropdown-footer';
 export interface FormReferenceItem {
   id: string;
   name: string;
-  image?: string;
+  image?: unknown;
 }
 
 /** The selected reference, stored on the form as `{ [idField], [displayField] }`. */
@@ -107,9 +107,7 @@ const _FormReference = (props: FormReferenceProps) => {
     if (found?.image) {
       return found.image;
     }
-    return imageField
-      ? (selectedValue?.[imageField] as string | undefined)
-      : undefined;
+    return imageField ? selectedValue?.[imageField] : undefined;
   }, [selectedValue, selectedId, imageField, items]);
 
   const options = useMemo(

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

@@ -1,20 +1,22 @@
 import React from 'react';
 import { Avatar } from '@wix/design-system';
 import { mediaURItoImageURL, ThumbnailSize } from '../../auto-field-types';
+import { getImageSource } from '../../utils/get-image-source';
 
 export interface ReferenceAvatarProps {
-  image?: string;
+  /** The referenced item's image field value: a URL or `wix:image://` URI
+   *  string, or an image-with-alt-text value (`{ uri }` or `{ url }`). Anything
+   *  else shows the name's initials. */
+  image?: unknown;
   name: string;
   size?: 'size18' | 'size24' | 'size30' | 'size36' | 'size48';
 }
 
-const resolveSrc = (image?: string) => {
-  if (!image || typeof image !== 'string') {
-    return undefined;
-  }
-  return image.startsWith('wix:image://')
-    ? mediaURItoImageURL(image, ThumbnailSize.S)
-    : image;
+const resolveSrc = (image: unknown) => {
+  const src = getImageSource(image);
+  return src?.startsWith('wix:image://')
+    ? mediaURItoImageURL(src, ThumbnailSize.S)
+    : src;
 };
 
 export const ReferenceAvatar: React.FC<ReferenceAvatarProps> = ({

package/src/components/rich-content/rich-content-input/default-value-input/rich-content-default-value-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentdefaultvalueinput2243878917";
+var _namespace_ = "richcontentdefaultvalueinput194483332";
 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":"richcontentdefaultvalueinput2243878917__root","richContentEditorContainer":"richcontentdefaultvalueinput2243878917__richContentEditorContainer","editor":"richcontentdefaultvalueinput2243878917__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput194483332__root","richContentEditorContainer":"richcontentdefaultvalueinput194483332__richContentEditorContainer","editor":"richcontentdefaultvalueinput194483332__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentforminput3308248543";
+var _namespace_ = "richcontentforminput3028376031";
 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":"richcontentforminput3308248543__root","editor":"richcontentforminput3308248543__editor"};
+export var classes = {"root":"richcontentforminput3028376031__root","editor":"richcontentforminput3028376031__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentformreadonlyinput1058649070";
+var _namespace_ = "richcontentformreadonlyinput1826498793";
 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":"richcontentformreadonlyinput1058649070__root"};
+export var classes = {"root":"richcontentformreadonlyinput1826498793__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "fullscreenmodal975536816";
+var _namespace_ = "fullscreenmodal411212761";
 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":"fullscreenmodal975536816__root","modalContent":"fullscreenmodal975536816__modalContent"};
+export var classes = {"root":"fullscreenmodal411212761__root","modalContent":"fullscreenmodal411212761__modalContent"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "publishloader3990480565";
+var _namespace_ = "publishloader1925093010";
 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":"publishloader3990480565__root","publishLoader":"publishloader3990480565__publishLoader"};
+export var classes = {"root":"publishloader1925093010__root","publishLoader":"publishloader1925093010__publishLoader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "togglefullscreenbutton2258542514";
+var _namespace_ = "togglefullscreenbutton952088518";
 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":"togglefullscreenbutton2258542514__root"};
+export var classes = {"root":"togglefullscreenbutton952088518__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenteditor1591127110";
+var _namespace_ = "richcontenteditor480609426";
 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":"richcontenteditor1591127110__root","toolbarContainer":"richcontenteditor1591127110__toolbarContainer","footerToolbarContainer":"richcontenteditor1591127110__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1591127110__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1591127110__editor","modalEditor":"richcontenteditor1591127110__modalEditor"};
+export var classes = {"root":"richcontenteditor480609426__root","toolbarContainer":"richcontenteditor480609426__toolbarContainer","footerToolbarContainer":"richcontenteditor480609426__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor480609426__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor480609426__editor","modalEditor":"richcontenteditor480609426__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenttoolbar1079046015";
+var _namespace_ = "richcontenttoolbar1543840675";
 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":"richcontenttoolbar1079046015__root","toolbar":"richcontenttoolbar1079046015__toolbar","toolbarButton":"richcontenttoolbar1079046015__toolbarButton","separator":"richcontenttoolbar1079046015__separator"};
+export var classes = {"root":"richcontenttoolbar1543840675__root","toolbar":"richcontenttoolbar1543840675__toolbar","toolbarButton":"richcontenttoolbar1543840675__toolbarButton","separator":"richcontenttoolbar1543840675__separator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};