@wix/patterns-fields 1.87.0 → 1.89.0

package/src/components/image/form-image-input.tsx

@@ -1,40 +1,20 @@
 import React from 'react';
-import { Box, FormField, ImageViewer } from '@wix/design-system';
+import { FormField } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
-import { useIsMobile, useWixPatternsContainer } from '@wix/bex-core/react';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController } from '@wix/bex-core/form';
 
 import { BaseInputProps } from '../../types/base-input';
 import { isEmpty } from '../../validations/string';
-import { getImageUrl } from '../../utils/get-image-url';
-import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from '../../utils/media-constants';
 import { useFieldRef } from '../../hooks';
+import { FormImageField } from './form-image-field';
 
 export interface FormImageInputProps extends BaseInputProps<string> {}
 
 const _FormImageInput = (props: FormImageInputProps) => {
   const { field, dataHook, formControl, data } = props;
 
-  const { translate: t, openMediaManager } = useWixPatternsContainer();
-  const isMobile = useIsMobile();
-
-  async function openMedia() {
-    if (!openMediaManager) {
-      return;
-    }
-    try {
-      const chosenMediaItems = await openMediaManager({
-        multiSelect: false,
-        category: 'IMAGE',
-      });
-
-      const newImage = chosenMediaItems?.items[0]?.media?.image?.image;
-
-      controller.field.onChange(newImage);
-    } catch (error) {
-      console.error('Error opening Media Manager or no files selected:', error);
-    }
-  }
+  const { translate: t } = useWixPatternsContainer();
 
   const controller = useController({
     name: field?.id ?? '',
@@ -53,9 +33,6 @@ const _FormImageInput = (props: FormImageInputProps) => {
 
   const setFieldRef = useFieldRef(controller.field.ref);
 
-  const imageUrl =
-    controller.field.value && getImageUrl(controller.field.value);
-
   return (
     <FormField
       label={field.displayName}
@@ -64,25 +41,15 @@ const _FormImageInput = (props: FormImageInputProps) => {
       statusMessage={controller.fieldState.error?.message}
       dataHook={dataHook}
     >
-      <Box width="100%" maxWidth={MEDIA_MAX_WIDTH}>
-        <ImageViewer
-          // ImageViewer keeps its focus node on whichever button is live, so
-          // one ref serves both the empty and filled states. Lets
-          // react-hook-form's shouldFocusError reach this field.
-          ref={setFieldRef}
-          imageUrl={imageUrl}
-          dataHook={`image-${field.id}`}
-          onAddImage={isMobile ? undefined : () => openMedia()}
-          onUpdateImage={isMobile ? undefined : () => openMedia()}
-          updateImageInfo={t('cairo.replace-image.tooltip')}
-          removeImageInfo={t('cairo.remove-image.tooltip')}
-          addImageInfo={t('cairo.add-image.tooltip')}
-          height={MEDIA_HEIGHT}
-          width="100%"
-          fit="cover"
-          onRemoveImage={() => controller.field.onChange(null)}
-        />
-      </Box>
+      <FormImageField
+        // Hands the live button to react-hook-form so shouldFocusError can
+        // reach this field when it blocks save.
+        inputRef={setFieldRef}
+        data={controller.field.value}
+        onChange={(value) => controller.field.onChange(value)}
+        onClear={() => controller.field.onChange(null)}
+        dataHook={`image-${field.id}`}
+      />
     </FormField>
   );
 };

package/src/components/image/index.ts

@@ -2,4 +2,5 @@ export * from './image-thumbnail';
 export * from './image-view';
 export * from './image-view-field';
 export * from './cell-image-edit';
+export * from './form-image-field';
 export * from './form-image-input';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay1626805897";
+var _namespace_ = "thumbnailreplaceoverlay1623114284";
 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":"thumbnailreplaceoverlay1626805897__root","icon":"thumbnailreplaceoverlay1626805897__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay1623114284__root","icon":"thumbnailreplaceoverlay1623114284__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_ = "cellmediaeditshell588955575";
+var _namespace_ = "cellmediaeditshell1721400213";
 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":"cellmediaeditshell588955575__root"};
+export var classes = {"root":"cellmediaeditshell1721400213__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_ = "pasteurlbutton851342683";
+var _namespace_ = "pasteurlbutton3225979476";
 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":"pasteurlbutton851342683__root","iconButtonTooltip":"pasteurlbutton851342683__iconButtonTooltip","iconButton":"pasteurlbutton851342683__iconButton"};
+export var classes = {"root":"pasteurlbutton3225979476__root","iconButtonTooltip":"pasteurlbutton3225979476__iconButtonTooltip","iconButton":"pasteurlbutton3225979476__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/use-media-control.ts

@@ -2,8 +2,7 @@ import { useRef, useState, useEffect, useCallback, useContext } from 'react';
 import { WixPatternsContainerContext } from '@wix/bex-core/react';
 import { files } from '@wix/media';
 
-import { MEDIA_TYPES } from '../../utils/media-utils';
-import { executeDownloading } from '../../utils/media-utils';
+import { executeDownloading, MEDIA_TYPES } from '../../utils/media-utils';
 import { getMediaURL } from '../../auto-field-types';
 
 type Focusable = { focus: () => void };
@@ -152,7 +151,9 @@ export function useMediaControl({
     }
   }, [autoFocus, value, inputRef, viewRef]);
 
-  useEffect(() => setActive(), [setActive]);
+  // `loading` is a dependency because the focus target does not exist while the
+  // loader placeholder is up — the effect has to run again once it is gone.
+  useEffect(() => setActive(), [setActive, loading]);
 
   const onMediaLoad = useCallback(() => setLoading(false), []);
 

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import {
   AvatarGroup,
   Box,
@@ -53,20 +53,21 @@ export const CellMediaGalleryEdit: React.FC<CellMediaGalleryEditProps> = ({
 }) => {
   const { t } = useTranslations();
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const hasValue = Boolean(value?.length);
+  const items = useMemo(() => (Array.isArray(value) ? value : []), [value]);
+  const hasValue = items.length > 0;
   const [isPreviewOpen, setIsPreviewOpen] = useState(false);
   // Tracks whether a commit happened during the current external-UI session.
   // Prevents calling onCancel() after the user already committed (e.g., clear
   // in the preview modal fires onClear then onClose, but we should not cancel).
   const didCommitRef = useRef(false);
 
-  const avatarItems = (value ?? []).map((item) => ({
+  const avatarItems = items.map((item) => ({
     imgProps: { src: mediaURItoImageURL(item.src, ThumbnailSize.S) },
   }));
 
   const { openMediaGalleryDialog, ...dialogProps } = useMediaGalleryDialog({
     initialOpen: false,
-    items: value ?? [],
+    items,
     onChange: (items: WixCodeGalleryItem[]) => {
       didCommitRef.current = true;
       onChange(items.length > 0 ? items : null);
@@ -112,18 +113,22 @@ export const CellMediaGalleryEdit: React.FC<CellMediaGalleryEditProps> = ({
 
   const onDownloadMedia = useCallback(
     async (mediaUri?: string) => {
-      const uri = mediaUri ?? value?.[0]?.src;
-      if (!uri) return;
+      const uri = mediaUri ?? items[0]?.src;
+      if (!uri) {
+        return;
+      }
       try {
         const result = await files.generateFileDownloadUrl(uri);
         const downloadUrl = result.downloadUrls?.[0]?.url;
-        if (!downloadUrl) throw new Error('No download URL returned');
+        if (!downloadUrl) {
+          throw new Error('No download URL returned');
+        }
         executeDownloading(downloadUrl);
       } catch {
         executeDownloading(getMediaURL(uri));
       }
     },
-    [value],
+    [items],
   );
 
   const { handleContainerFocus, handleContainerBlur } = useCellEditKeyboard({
@@ -210,7 +215,7 @@ export const CellMediaGalleryEdit: React.FC<CellMediaGalleryEditProps> = ({
       <MediaPreviewModal
         isOpen={isPreviewOpen}
         onClose={handlePreviewClose}
-        value={(value ?? []).map((item) => item.src)}
+        value={items.map((item) => item.src)}
         onRequestMedia={handlePreviewRequestMedia}
         onClearMedia={handlePreviewClear}
         onDownloadMedia={onDownloadMedia}

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_ = "formmediagalleryfield1519743555";
+var _namespace_ = "formmediagalleryfield3126291197";
 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":"formmediagalleryfield1519743555__root","container":"formmediagalleryfield1519743555__container","viewBox":"formmediagalleryfield1519743555__viewBox","addItemWrapper":"formmediagalleryfield1519743555__addItemWrapper","addItem":"formmediagalleryfield1519743555__addItem","overlay":"formmediagalleryfield1519743555__overlay","image":"formmediagalleryfield1519743555__image","previewImage":"formmediagalleryfield1519743555__previewImage","previewVideo":"formmediagalleryfield1519743555__previewVideo"};
+export var classes = {"root":"formmediagalleryfield3126291197__root","container":"formmediagalleryfield3126291197__container","viewBox":"formmediagalleryfield3126291197__viewBox","addItemWrapper":"formmediagalleryfield3126291197__addItemWrapper","addItem":"formmediagalleryfield3126291197__addItem","overlay":"formmediagalleryfield3126291197__overlay","image":"formmediagalleryfield3126291197__image","previewImage":"formmediagalleryfield3126291197__previewImage","previewVideo":"formmediagalleryfield3126291197__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_ = "mediaimage543554141";
+var _namespace_ = "mediaimage2155391907";
 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":"mediaimage543554141__root"};
+export var classes = {"root":"mediaimage2155391907__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":"--mediaimage543554141-from","to":"--mediaimage543554141-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":"--mediaimage2155391907-from","to":"--mediaimage2155391907-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_ = "overlay4281397807";
+var _namespace_ = "overlay1396694329";
 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":"overlay4281397807__root","iconOverlay":"overlay4281397807__iconOverlay"};
+export var classes = {"root":"overlay1396694329__root","iconOverlay":"overlay1396694329__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_ = "medialoader1922632036";
+var _namespace_ = "medialoader1747610086";
 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":"medialoader1922632036__root","loader":"medialoader1922632036__loader"};
+export var classes = {"root":"medialoader1747610086__root","loader":"medialoader1747610086__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_ = "mediatag4278958412";
+var _namespace_ = "mediatag3987989940";
 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":"mediatag4278958412__root"};
+export var classes = {"root":"mediatag3987989940__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_ = "cellmultidocumentedit181383839";
+var _namespace_ = "cellmultidocumentedit1981091350";
 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":"cellmultidocumentedit181383839__root","chipTrigger":"cellmultidocumentedit181383839__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit1981091350__root","chipTrigger":"cellmultidocumentedit1981091350__chipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -61,7 +61,7 @@ export const CellMultiDocumentEdit: React.FC<CellMultiDocumentEditProps> = ({
   const { t } = useTranslations();
   const msid = useWixPatternsContainer()?.environment?.msid;
 
-  const uris = useMemo(() => value ?? [], [value]);
+  const uris = useMemo(() => (Array.isArray(value) ? value : []), [value]);
   const containerRef = useRef<HTMLDivElement | null>(null);
 
   const handleMultiChange = useCallback(

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_ = "formmultidocument2987035251";
+var _namespace_ = "formmultidocument1148866053";
 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":"formmultidocument2987035251__root","viewRoot":"formmultidocument2987035251__viewRoot","singleViewWrapper":"formmultidocument2987035251__singleViewWrapper","addDocumentButton":"formmultidocument2987035251__addDocumentButton"};
+export var classes = {"root":"formmultidocument1148866053__root","viewRoot":"formmultidocument1148866053__viewRoot","singleViewWrapper":"formmultidocument1148866053__singleViewWrapper","addDocumentButton":"formmultidocument1148866053__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_ = "cellmultireferenceinput2735260754";
+var _namespace_ = "cellmultireferenceinput957334943";
 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":"cellmultireferenceinput2735260754__root"};
+export var classes = {"root":"cellmultireferenceinput957334943__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_ = "cellreferenceinput2703478560";
+var _namespace_ = "cellreferenceinput4010207524";
 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":"cellreferenceinput2703478560__root","autocomplete":"cellreferenceinput2703478560__autocomplete"};
+export var classes = {"root":"cellreferenceinput4010207524__root","autocomplete":"cellreferenceinput4010207524__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "richcontentdefaultvalueinput4062318047";
+var _namespace_ = "richcontentdefaultvalueinput1906630195";
 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":"richcontentdefaultvalueinput4062318047__root","richContentEditorContainer":"richcontentdefaultvalueinput4062318047__richContentEditorContainer","editor":"richcontentdefaultvalueinput4062318047__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput1906630195__root","richContentEditorContainer":"richcontentdefaultvalueinput1906630195__richContentEditorContainer","editor":"richcontentdefaultvalueinput1906630195__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_ = "richcontentforminput536894925";
+var _namespace_ = "richcontentforminput2136013358";
 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":"richcontentforminput536894925__root","editor":"richcontentforminput536894925__editor"};
+export var classes = {"root":"richcontentforminput2136013358__root","editor":"richcontentforminput2136013358__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_ = "richcontentformreadonlyinput3255875696";
+var _namespace_ = "richcontentformreadonlyinput606402858";
 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":"richcontentformreadonlyinput3255875696__root"};
+export var classes = {"root":"richcontentformreadonlyinput606402858__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_ = "fullscreenmodal59785016";
+var _namespace_ = "fullscreenmodal3470736504";
 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":"fullscreenmodal59785016__root","modalContent":"fullscreenmodal59785016__modalContent"};
+export var classes = {"root":"fullscreenmodal3470736504__root","modalContent":"fullscreenmodal3470736504__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_ = "publishloader79678549";
+var _namespace_ = "publishloader2866182237";
 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":"publishloader79678549__root","publishLoader":"publishloader79678549__publishLoader"};
+export var classes = {"root":"publishloader2866182237__root","publishLoader":"publishloader2866182237__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_ = "togglefullscreenbutton207178869";
+var _namespace_ = "togglefullscreenbutton3438360958";
 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":"togglefullscreenbutton207178869__root"};
+export var classes = {"root":"togglefullscreenbutton3438360958__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_ = "richcontenteditor354605721";
+var _namespace_ = "richcontenteditor548272218";
 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":"richcontenteditor354605721__root","toolbarContainer":"richcontenteditor354605721__toolbarContainer","footerToolbarContainer":"richcontenteditor354605721__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor354605721__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor354605721__editor","modalEditor":"richcontenteditor354605721__modalEditor"};
+export var classes = {"root":"richcontenteditor548272218__root","toolbarContainer":"richcontenteditor548272218__toolbarContainer","footerToolbarContainer":"richcontenteditor548272218__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor548272218__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor548272218__editor","modalEditor":"richcontenteditor548272218__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_ = "richcontenttoolbar3985488902";
+var _namespace_ = "richcontenttoolbar1670862907";
 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":"richcontenttoolbar3985488902__root","toolbar":"richcontenttoolbar3985488902__toolbar","toolbarButton":"richcontenttoolbar3985488902__toolbarButton","separator":"richcontenttoolbar3985488902__separator"};
+export var classes = {"root":"richcontenttoolbar1670862907__root","toolbar":"richcontenttoolbar1670862907__toolbar","toolbarButton":"richcontenttoolbar1670862907__toolbarButton","separator":"richcontenttoolbar1670862907__separator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentviewer1237397678";
+var _namespace_ = "richcontentviewer242008823";
 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":"richcontentviewer1237397678__root","viewer":"richcontentviewer1237397678__viewer","modalViewer":"richcontentviewer1237397678__modalViewer"};
+export var classes = {"root":"richcontentviewer242008823__root","viewer":"richcontentviewer242008823__viewer","modalViewer":"richcontentviewer242008823__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richeditor668249387";
+var _namespace_ = "richeditor3381194974";
 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":"richeditor668249387__root","editor":"richeditor668249387__editor","header-one":"richeditor668249387__header-one","header-two":"richeditor668249387__header-two","header-three":"richeditor668249387__header-three","header-four":"richeditor668249387__header-four","header-five":"richeditor668249387__header-five","header-six":"richeditor668249387__header-six","paragraph-one":"richeditor668249387__paragraph-one","unstyled":"richeditor668249387__unstyled","paragraph-three":"richeditor668249387__paragraph-three","align-left":"richeditor668249387__align-left","align-right":"richeditor668249387__align-right","align-center":"richeditor668249387__align-center","align-justify":"richeditor668249387__align-justify","withMargin":"richeditor668249387__withMargin","dir-rtl":"richeditor668249387__dir-rtl"};
+export var classes = {"root":"richeditor3381194974__root","editor":"richeditor3381194974__editor","header-one":"richeditor3381194974__header-one","header-two":"richeditor3381194974__header-two","header-three":"richeditor3381194974__header-three","header-four":"richeditor3381194974__header-four","header-five":"richeditor3381194974__header-five","header-six":"richeditor3381194974__header-six","paragraph-one":"richeditor3381194974__paragraph-one","unstyled":"richeditor3381194974__unstyled","paragraph-three":"richeditor3381194974__paragraph-three","align-left":"richeditor3381194974__align-left","align-right":"richeditor3381194974__align-right","align-center":"richeditor3381194974__align-center","align-justify":"richeditor3381194974__align-justify","withMargin":"richeditor3381194974__withMargin","dir-rtl":"richeditor3381194974__dir-rtl"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};