@wix/patterns-fields 1.124.0 → 1.126.0

package/src/components/media-image-field/form-media-image-field.uni.driver.ts

@@ -1,11 +1,16 @@
 import type { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import {
+  ButtonUniDriver,
+  CustomModalLayoutUniDriver,
   FormFieldUniDriver,
+  IconButtonUniDriver,
   ImageViewerUniDriver,
+  InputUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 
 import { baseUniDriverFactory } from '../../testkit/base-driver';
 
+/** The more actions menu, the URL form and the preview render in the body. */
 export function FormMediaImageFieldUniDriver(base: UniDriver, body: UniDriver) {
   const formField = FormFieldUniDriver(
     base.$('[data-hook="media-image-field-image"]'),
@@ -15,7 +20,15 @@ export function FormMediaImageFieldUniDriver(base: UniDriver, body: UniDriver) {
     base.$('[data-hook="media-image-field-viewer"]'),
     body,
   );
+  const replaceButton = IconButtonUniDriver(
+    base.$('[data-hook="media-image-field-replace-button"]'),
+    body,
+  );
   const altInput = base.$('[data-hook="media-image-field-alt-input"] input');
+  const menuItem = (action: string) =>
+    body.$(`[data-hook="media-image-field-action-${action}"]`);
+  const openMenu = () =>
+    base.$('[data-hook="media-image-field-more-button"]').click();
 
   return {
     ...baseUniDriverFactory(base),
@@ -23,20 +36,42 @@ export function FormMediaImageFieldUniDriver(base: UniDriver, body: UniDriver) {
     isRequired: () => formField.isRequired(),
     hasError: () => formField.hasStatus('error'),
     getErrorMessage: () => formField.getStatusMessage(),
-    getImageUrl: () => imageViewer.getImageUrl(),
-    isAddItemVisible: () => imageViewer.isAddItemVisible(),
     clickAdd: () => imageViewer.clickAdd(),
-    clickReplace: () => imageViewer.clickUpdate(),
-    clickRemove: () => imageViewer.clickRemove(),
+    clickReplace: () => replaceButton.click(),
+    isReplaceDisabled: () => replaceButton.isButtonDisabled(),
+    replaceWithUrl: async (url: string) => {
+      await openMenu();
+      await menuItem('replace-url').click();
+      await InputUniDriver(
+        body.$('[data-hook="paste-url-form.urlInput"]'),
+        body,
+      ).enterText(url);
+      await (
+        await CustomModalLayoutUniDriver(
+          body.$('[data-hook="paste-url-form.layout"]'),
+          body,
+        ).getPrimaryButtonDriver()
+      ).click();
+    },
+    openPreview: async () => {
+      await openMenu();
+      await menuItem('preview').click();
+    },
+    isPreviewOpen: () => body.$('[data-hook="preview-modal-content"]').exists(),
+    pressEscapeInPreview: () =>
+      body.$('[data-hook="preview-modal-content"]').pressKey('Escape'),
+    clickPreviewReplace: () =>
+      ButtonUniDriver(
+        body.$('[data-hook="preview-modal-replace-button"]'),
+        body,
+      ).click(),
+    clickDelete: async () => {
+      await openMenu();
+      await menuItem('delete').click();
+    },
     hasAltTextInput: () => altInput.exists(),
     getAltText: () => altInput.value(),
     getAltTextPlaceholder: () => altInput.attr('placeholder'),
     enterAltText: (text: string) => altInput.enterValue(text),
-    // ImageViewer hides its edit buttons behind a loader until the image
-    // loads, and jsdom never fires that event on its own.
-    simulateImageLoad: async () =>
-      (
-        await base.$('[data-hook="image-viewer-current-image"]').getNative()
-      ).dispatchEvent(new Event('load')),
   };
 }

package/src/components/media-image-field/media-image-actions.tsx

@@ -0,0 +1,205 @@
+import React, { useCallback, useEffect } from 'react';
+import { IconButton, PopoverMenu, Tooltip } from '@wix/design-system';
+import {
+  Delete,
+  Download,
+  Link,
+  Maximize,
+  MoreSmall,
+  Replace,
+} from '@wix/wix-ui-icons-common/lazy';
+import { useTranslations } from '../../hooks';
+import type { MediaImageValue } from '../../types/media-image';
+import { getImageSource } from '../../utils/get-image-source';
+import { isExternalMediaImage } from '../../utils/media-image-value';
+import { executeDownloading } from '../../utils/media-utils';
+import { MediaPreviewModal } from '../media-gallery/media-preview-modal';
+
+interface MenuTriggerProps {
+  isOpen: boolean;
+  toggle: () => void;
+  /** Lets WDS put focus back here when the menu closes. */
+  buttonRef?: React.RefObject<HTMLElement>;
+  onOpenChange?: (isOpen: boolean) => void;
+  ariaLabel: string;
+  dataHook: string;
+}
+
+/** WDS shows the menu's open state only to its trigger, so the trigger
+ *  reports it. */
+const MenuTrigger: React.FC<MenuTriggerProps> = ({
+  isOpen,
+  toggle,
+  buttonRef,
+  onOpenChange,
+  ariaLabel,
+  dataHook,
+}) => {
+  useEffect(() => {
+    onOpenChange?.(isOpen);
+  }, [isOpen, onOpenChange]);
+
+  return (
+    <IconButton
+      ref={buttonRef}
+      size="small"
+      skin="light"
+      priority="secondary"
+      dataHook={dataHook}
+      ariaLabel={ariaLabel}
+      aria-haspopup="menu"
+      aria-expanded={isOpen}
+      onClick={toggle}
+    >
+      <MoreSmall />
+    </IconButton>
+  );
+};
+
+export interface MediaImageActionsProps {
+  /** Every action's data-hook starts with it. */
+  dataHook: string;
+  /** Opens the media manager. The button is disabled without it. */
+  onReplace?: () => void;
+  /** The menu item is disabled without it. */
+  onReplaceWithUrl?: () => void;
+  onPreview: () => void;
+  onDownload: () => void;
+  /** The menu item is disabled without it. */
+  onDelete?: () => void;
+  onMenuOpenChange?: (isOpen: boolean) => void;
+  menuZIndex: number;
+}
+
+/** The actions over a `MEDIA_IMAGE` image: Replace, and a menu with Replace
+ *  with URL, Preview, Download and Delete. */
+export const MediaImageActions: React.FC<MediaImageActionsProps> = ({
+  dataHook,
+  onReplace,
+  onReplaceWithUrl,
+  onPreview,
+  onDownload,
+  onDelete,
+  onMenuOpenChange,
+  menuZIndex,
+}) => {
+  const { t } = useTranslations();
+
+  return (
+    <>
+      <Tooltip content={t('CMS.image.replace')} appendTo="window">
+        <IconButton
+          size="small"
+          skin="light"
+          priority="secondary"
+          dataHook={`${dataHook}-replace-button`}
+          ariaLabel={t('CMS.image.replace')}
+          disabled={!onReplace}
+          onClick={onReplace}
+        >
+          <Replace />
+        </IconButton>
+      </Tooltip>
+      <PopoverMenu
+        textSize="small"
+        appendTo="window"
+        zIndex={menuZIndex}
+        triggerElement={({ isOpen, toggle, ref }) => (
+          <MenuTrigger
+            isOpen={isOpen}
+            toggle={toggle}
+            buttonRef={ref}
+            onOpenChange={onMenuOpenChange}
+            ariaLabel={t('auto-patterns.fields.more_actions_tooltip')}
+            dataHook={`${dataHook}-more-button`}
+          />
+        )}
+      >
+        <PopoverMenu.MenuItem
+          dataHook={`${dataHook}-action-replace-url`}
+          text={t('CMS.image.replaceWithUrl.button')}
+          prefixIcon={<Link />}
+          disabled={!onReplaceWithUrl}
+          onClick={() => onReplaceWithUrl?.()}
+        />
+        <PopoverMenu.MenuItem
+          dataHook={`${dataHook}-action-preview`}
+          text={t('CMS.mediaGallery.preview')}
+          prefixIcon={<Maximize />}
+          onClick={onPreview}
+        />
+        <PopoverMenu.MenuItem
+          dataHook={`${dataHook}-action-download`}
+          text={t('CMS.image.download')}
+          prefixIcon={<Download />}
+          onClick={onDownload}
+        />
+        <PopoverMenu.Divider />
+        <PopoverMenu.MenuItem
+          dataHook={`${dataHook}-action-delete`}
+          text={t('CMS.image.clear')}
+          skin="destructive"
+          prefixIcon={<Delete />}
+          disabled={!onDelete}
+          onClick={() => onDelete?.()}
+        />
+      </PopoverMenu>
+    </>
+  );
+};
+
+MediaImageActions.displayName = 'MediaImageActions';
+
+/** Downloads the image: through the Media Manager, or straight from an
+ *  external URL, which the Media Manager can't make a download link for. */
+export const useMediaImageDownload = (
+  image: MediaImageValue | null,
+  downloadMedia: (src: string) => void,
+) =>
+  useCallback(() => {
+    if (isExternalMediaImage(image)) {
+      executeDownloading(image.url);
+      return;
+    }
+    const src = getImageSource(image);
+    if (src) {
+      downloadMedia(src);
+    }
+  }, [image, downloadMedia]);
+
+export interface MediaImagePreviewModalProps {
+  isOpen: boolean;
+  image: MediaImageValue;
+  onClose: () => void;
+  onReplace: () => void;
+  onDelete?: () => void;
+  onDownload: () => void;
+  readOnly?: boolean;
+}
+
+export const MediaImagePreviewModal: React.FC<MediaImagePreviewModalProps> = ({
+  isOpen,
+  image,
+  onClose,
+  onReplace,
+  onDelete,
+  onDownload,
+  readOnly,
+}) => (
+  <MediaPreviewModal
+    isOpen={isOpen}
+    value={getImageSource(image)}
+    onClose={onClose}
+    onRequestMedia={onReplace}
+    onClearMedia={onDelete}
+    onDownloadMedia={onDownload}
+    readOnly={readOnly}
+    textKeys={{
+      replace: 'CMS.image.replace',
+      download: 'CMS.image.download',
+      delete: 'CMS.image.clear',
+    }}
+  />
+);
+
+MediaImagePreviewModal.displayName = 'MediaImagePreviewModal';

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_ = "mediaimageview3359823944";
+var _namespace_ = "mediaimageview2861377077";
 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":"mediaimageview3359823944__root","altTextPlaceholder":"mediaimageview3359823944__altTextPlaceholder"};
+export var classes = {"root":"mediaimageview2861377077__root","altTextPlaceholder":"mediaimageview2861377077__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_ = "mediatag2648949588";
+var _namespace_ = "mediatag4137987577";
 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":"mediatag2648949588__root"};
+export var classes = {"root":"mediatag4137987577__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_ = "cellmultidocumentedit1969728076";
+var _namespace_ = "cellmultidocumentedit2789752441";
 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":"cellmultidocumentedit1969728076__root","chipTrigger":"cellmultidocumentedit1969728076__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit2789752441__root","chipTrigger":"cellmultidocumentedit2789752441__chipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -236,14 +236,11 @@ export const CellMultiDocumentEdit: React.FC<CellMultiDocumentEditProps> = ({
               <Box
                 key={`${fieldId}-${index}`}
                 verticalAlign="middle"
-                // Cap the per-chip wrapper at the chip strip's content width so a
-                // single long filename can't overflow the column. Apply on the
-                // Box (a flex item of the strip) rather than the Tag — Tag's
-                // PopoverNextTrigger parent has no max-width, so a percentage
-                // clamp on the Tag itself is degenerate at narrow widths.
-                style={{ minWidth: 0, maxWidth: '100%' }}
+                minWidth={0}
+                maxWidth="100%"
               >
                 <PopoverMenu
+                  fluid
                   textSize="small"
                   appendTo="window"
                   // Function-form trigger: WDS Tag renders a plain <span>, so it

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_ = "formmultidocument3706067851";
+var _namespace_ = "formmultidocument163448703";
 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":"formmultidocument3706067851__root","viewRoot":"formmultidocument3706067851__viewRoot","singleViewWrapper":"formmultidocument3706067851__singleViewWrapper","addDocumentButton":"formmultidocument3706067851__addDocumentButton"};
+export var classes = {"root":"formmultidocument163448703__root","viewRoot":"formmultidocument163448703__viewRoot","singleViewWrapper":"formmultidocument163448703__singleViewWrapper","addDocumentButton":"formmultidocument163448703__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_ = "cellmultireferenceinput2322369013";
+var _namespace_ = "cellmultireferenceinput222813444";
 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":"cellmultireferenceinput2322369013__root"};
+export var classes = {"root":"cellmultireferenceinput222813444__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_ = "cellmultireferenceview1878943929";
+var _namespace_ = "cellmultireferenceview2050754718";
 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":"cellmultireferenceview1878943929__root","expanded":"cellmultireferenceview1878943929__expanded"};
+export var classes = {"root":"cellmultireferenceview2050754718__root","expanded":"cellmultireferenceview2050754718__expanded"};
 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_ = "cellreferenceinput2304300202";
+var _namespace_ = "cellreferenceinput3444816998";
 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":"cellreferenceinput2304300202__root","autocomplete":"cellreferenceinput2304300202__autocomplete"};
+export var classes = {"root":"cellreferenceinput3444816998__root","autocomplete":"cellreferenceinput3444816998__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_ = "richcontentdefaultvalueinput2111913369";
+var _namespace_ = "richcontentdefaultvalueinput2462344888";
 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":"richcontentdefaultvalueinput2111913369__root","richContentEditorContainer":"richcontentdefaultvalueinput2111913369__richContentEditorContainer","editor":"richcontentdefaultvalueinput2111913369__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput2462344888__root","richContentEditorContainer":"richcontentdefaultvalueinput2462344888__richContentEditorContainer","editor":"richcontentdefaultvalueinput2462344888__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_ = "richcontentforminput1811732449";
+var _namespace_ = "richcontentforminput2553504184";
 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":"richcontentforminput1811732449__root","editor":"richcontentforminput1811732449__editor"};
+export var classes = {"root":"richcontentforminput2553504184__root","editor":"richcontentforminput2553504184__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_ = "richcontentformreadonlyinput1023395189";
+var _namespace_ = "richcontentformreadonlyinput2626425276";
 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":"richcontentformreadonlyinput1023395189__root"};
+export var classes = {"root":"richcontentformreadonlyinput2626425276__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_ = "fullscreenmodal2241348729";
+var _namespace_ = "fullscreenmodal3305425356";
 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":"fullscreenmodal2241348729__root","modalContent":"fullscreenmodal2241348729__modalContent"};
+export var classes = {"root":"fullscreenmodal3305425356__root","modalContent":"fullscreenmodal3305425356__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_ = "publishloader1555093722";
+var _namespace_ = "publishloader690997989";
 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":"publishloader1555093722__root","publishLoader":"publishloader1555093722__publishLoader"};
+export var classes = {"root":"publishloader690997989__root","publishLoader":"publishloader690997989__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_ = "togglefullscreenbutton631337782";
+var _namespace_ = "togglefullscreenbutton3212328228";
 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":"togglefullscreenbutton631337782__root"};
+export var classes = {"root":"togglefullscreenbutton3212328228__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_ = "richcontenteditor3101940028";
+var _namespace_ = "richcontenteditor4258240176";
 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":"richcontenteditor3101940028__root","toolbarContainer":"richcontenteditor3101940028__toolbarContainer","footerToolbarContainer":"richcontenteditor3101940028__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3101940028__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3101940028__editor","modalEditor":"richcontenteditor3101940028__modalEditor"};
+export var classes = {"root":"richcontenteditor4258240176__root","toolbarContainer":"richcontenteditor4258240176__toolbarContainer","footerToolbarContainer":"richcontenteditor4258240176__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor4258240176__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor4258240176__editor","modalEditor":"richcontenteditor4258240176__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_ = "richcontenttoolbar2032698855";
+var _namespace_ = "richcontenttoolbar68392144";
 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":"richcontenttoolbar2032698855__root","toolbar":"richcontenttoolbar2032698855__toolbar","toolbarButton":"richcontenttoolbar2032698855__toolbarButton","separator":"richcontenttoolbar2032698855__separator"};
+export var classes = {"root":"richcontenttoolbar68392144__root","toolbar":"richcontenttoolbar68392144__toolbar","toolbarButton":"richcontenttoolbar68392144__toolbarButton","separator":"richcontenttoolbar68392144__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_ = "richcontentviewer1028401867";
+var _namespace_ = "richcontentviewer2615512618";
 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":"richcontentviewer1028401867__root","viewer":"richcontentviewer1028401867__viewer","modalViewer":"richcontentviewer1028401867__modalViewer"};
+export var classes = {"root":"richcontentviewer2615512618__root","viewer":"richcontentviewer2615512618__viewer","modalViewer":"richcontentviewer2615512618__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_ = "richeditor3347470033";
+var _namespace_ = "richeditor887713289";
 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":"richeditor3347470033__root","editor":"richeditor3347470033__editor","header-one":"richeditor3347470033__header-one","header-two":"richeditor3347470033__header-two","header-three":"richeditor3347470033__header-three","header-four":"richeditor3347470033__header-four","header-five":"richeditor3347470033__header-five","header-six":"richeditor3347470033__header-six","paragraph-one":"richeditor3347470033__paragraph-one","unstyled":"richeditor3347470033__unstyled","paragraph-three":"richeditor3347470033__paragraph-three","align-left":"richeditor3347470033__align-left","align-right":"richeditor3347470033__align-right","align-center":"richeditor3347470033__align-center","align-justify":"richeditor3347470033__align-justify","withMargin":"richeditor3347470033__withMargin","dir-rtl":"richeditor3347470033__dir-rtl"};
+export var classes = {"root":"richeditor887713289__root","editor":"richeditor887713289__editor","header-one":"richeditor887713289__header-one","header-two":"richeditor887713289__header-two","header-three":"richeditor887713289__header-three","header-four":"richeditor887713289__header-four","header-five":"richeditor887713289__header-five","header-six":"richeditor887713289__header-six","paragraph-one":"richeditor887713289__paragraph-one","unstyled":"richeditor887713289__unstyled","paragraph-three":"richeditor887713289__paragraph-three","align-left":"richeditor887713289__align-left","align-right":"richeditor887713289__align-right","align-center":"richeditor887713289__align-center","align-justify":"richeditor887713289__align-justify","withMargin":"richeditor887713289__withMargin","dir-rtl":"richeditor887713289__dir-rtl"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richtexteditor3023173905";
+var _namespace_ = "richtexteditor2379095615";
 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":"richtexteditor3023173905__root","nativeInput":"richtexteditor3023173905__nativeInput","editor":"richtexteditor3023173905__editor"};
+export var classes = {"root":"richtexteditor2379095615__root","nativeInput":"richtexteditor2379095615__nativeInput","editor":"richtexteditor2379095615__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};