@wix/patterns-fields 1.130.0 → 1.131.0

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

@@ -0,0 +1,189 @@
+import type { FC } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type { FormFieldProps } from '@wix/design-system';
+import {
+  Box,
+  FormField,
+  Image,
+  ImageViewer,
+  MediaOverlay,
+} from '@wix/design-system';
+import { useIsMobile } from '@wix/bex-core/react';
+
+import { mediaURItoImageURL, ThumbnailSize } from '../../auto-field-types';
+import type { ControlledInputProps } from '../../types/controlled-input';
+import type { MediaVectorArtValue } from '../../types/media-vector-art';
+import { useMergedRef, useTranslations } from '../../hooks';
+import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from '../../utils/media-constants';
+import { MEDIA_TYPES } from '../../utils/media-utils';
+import {
+  fromVectorArtPick,
+  toMediaVectorArtValue,
+} from '../../utils/media-vector-art-value';
+import { Z_INDEX_MODAL_POPOVER } from '../common';
+import { useMediaControl } from '../media-control';
+import {
+  MediaVectorArtActions,
+  MediaVectorArtPreviewModal,
+} from './media-vector-art-actions';
+
+interface ImageViewerActions {
+  focus: () => void;
+}
+
+export interface FormMediaVectorArtFieldProps {
+  data?: unknown;
+  onChange: (value: MediaVectorArtValue | null) => void;
+  onBlur?: () => void;
+  readOnly?: boolean;
+  autoFocus?: boolean;
+  dataHook?: string;
+  inputRef?: React.Ref<ImageViewerActions>;
+  imageFormFieldProps?: Pick<
+    FormFieldProps,
+    'label' | 'required' | 'status' | 'statusMessage'
+  >;
+}
+
+export const FormMediaVectorArtField: FC<FormMediaVectorArtFieldProps> = ({
+  data,
+  onChange,
+  onBlur,
+  readOnly,
+  autoFocus,
+  dataHook,
+  inputRef: forwardedRef,
+  imageFormFieldProps,
+}) => {
+  const { t } = useTranslations();
+  const isMobile = useIsMobile();
+  const vectorArt = toMediaVectorArtValue(data);
+  const [inputRef, setInputRef] =
+    useMergedRef<ImageViewerActions>(forwardedRef);
+
+  const handlePick = useCallback(
+    (uri: string) => {
+      const picked = fromVectorArtPick(uri);
+      if (picked) {
+        onChange(picked);
+      }
+    },
+    [onChange],
+  );
+
+  const { callMedia, downloadMedia } = useMediaControl({
+    mediaType: MEDIA_TYPES.VECTOR_ART,
+    value: vectorArt?.uri,
+    onChange: handlePick,
+    autoFocus,
+    readOnly,
+    onBlur,
+    inputRef,
+  });
+
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const canEdit = !isMobile && !readOnly;
+  const canDelete = !readOnly;
+
+  const handleDownload = useCallback(() => {
+    if (vectorArt) {
+      downloadMedia(vectorArt.uri);
+    }
+  }, [vectorArt, downloadMedia]);
+  const shouldFocusAddAfterDelete = useRef(false);
+  const handleDelete = useCallback(() => {
+    setIsPreviewOpen(false);
+    shouldFocusAddAfterDelete.current = true;
+    onChange(null);
+  }, [onChange]);
+  useEffect(() => {
+    if (!vectorArt && shouldFocusAddAfterDelete.current) {
+      shouldFocusAddAfterDelete.current = false;
+      inputRef.current?.focus();
+    }
+  }, [vectorArt, inputRef]);
+  const handlePreviewReplace = useCallback(() => {
+    setIsPreviewOpen(false);
+    callMedia();
+  }, [callMedia]);
+
+  return (
+    <Box dataHook={dataHook} width="100%" maxWidth={MEDIA_MAX_WIDTH}>
+      <FormField
+        {...imageFormFieldProps}
+        dataHook="media-vector-art-field-image"
+      >
+        {vectorArt ? (
+          <MediaOverlay
+            dataHook="media-vector-art-field-overlay"
+            hoverSkin="dark"
+            media={
+              <Image
+                dataHook="media-vector-art-field-current-image"
+                src={mediaURItoImageURL(vectorArt.uri, ThumbnailSize.L)}
+                width="100%"
+                height={MEDIA_HEIGHT}
+                fit="contain"
+              />
+            }
+          >
+            <MediaOverlay.Content placement="middle" visible="hover">
+              <MediaVectorArtActions
+                dataHook="media-vector-art-field"
+                placement="overlay"
+                onReplace={canEdit ? callMedia : undefined}
+                onPreview={() => setIsPreviewOpen(true)}
+                onDownload={handleDownload}
+                onDelete={canDelete ? handleDelete : undefined}
+                menuZIndex={Z_INDEX_MODAL_POPOVER}
+              />
+            </MediaOverlay.Content>
+          </MediaOverlay>
+        ) : (
+          <ImageViewer
+            ref={setInputRef}
+            dataHook="media-vector-art-field-viewer"
+            onAddImage={canEdit ? callMedia : undefined}
+            disabled={!canEdit}
+            addImageInfo={t('CMS.vectorArt.add')}
+            height={MEDIA_HEIGHT}
+            width="100%"
+          />
+        )}
+      </FormField>
+      {vectorArt && (
+        <MediaVectorArtPreviewModal
+          isOpen={isPreviewOpen}
+          vectorArt={vectorArt}
+          onClose={() => setIsPreviewOpen(false)}
+          onReplace={handlePreviewReplace}
+          onDelete={canEdit ? handleDelete : undefined}
+          onDownload={handleDownload}
+          readOnly={!canEdit}
+        />
+      )}
+    </Box>
+  );
+};
+
+FormMediaVectorArtField.displayName = 'FormMediaVectorArtField';
+
+export type ControlledMediaVectorArtInputProps = Omit<
+  ControlledInputProps<MediaVectorArtValue | null>,
+  'invalid'
+>;
+
+export const ControlledMediaVectorArtInput: FC<
+  ControlledMediaVectorArtInputProps
+> = ({ data, onChange, onBlur, readOnly, autoFocus, dataHook }) => (
+  <FormMediaVectorArtField
+    data={data}
+    onChange={onChange}
+    onBlur={onBlur}
+    readOnly={readOnly}
+    autoFocus={autoFocus}
+    dataHook={dataHook}
+  />
+);
+
+ControlledMediaVectorArtInput.displayName = 'ControlledMediaVectorArtInput';

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

@@ -0,0 +1,50 @@
+import type { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  AddItemUniDriver,
+  FormFieldUniDriver,
+  ImageViewerUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+
+export function FormMediaVectorArtFieldUniDriver(
+  base: UniDriver,
+  body: UniDriver,
+) {
+  const formField = FormFieldUniDriver(
+    base.$('[data-hook="media-vector-art-field-image"]'),
+    body,
+  );
+  const imageViewer = ImageViewerUniDriver(
+    base.$('[data-hook="media-vector-art-field-viewer"]'),
+    body,
+  );
+  const addItem = AddItemUniDriver(
+    base.$(
+      '[data-hook="media-vector-art-field-viewer"] [data-hook="add-image"]',
+    ),
+    body,
+  );
+  const menuItem = (action: string) =>
+    body.$(`[data-hook="media-vector-art-field-action-${action}"]`);
+  const clickMenuItem = async (action: string) => {
+    await base.$('[data-hook="media-vector-art-field-more-button"]').click();
+    await menuItem(action).click();
+  };
+
+  return {
+    ...baseUniDriverFactory(base),
+    isRequired: () => formField.isRequired(),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+    hasImage: () =>
+      base.$('[data-hook="media-vector-art-field-current-image"]').exists(),
+    clickAdd: () => imageViewer.clickAdd(),
+    isAddDisabled: () => imageViewer.isDisabled(),
+    isAddButtonFocused: () => addItem.isFocused(),
+    clickReplace: () => clickMenuItem('replace'),
+    openPreview: () => clickMenuItem('preview'),
+    clickDelete: () => clickMenuItem('delete'),
+    isPreviewOpen: () => body.$('[data-hook="preview-modal-content"]').exists(),
+  };
+}

package/src/components/media-vector-art-field/form-media-vector-art-input.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useController } from '@wix/bex-core/form';
+
+import type { BaseInputProps } from '../../types/base-input';
+import type { MediaVectorArtValue } from '../../types/media-vector-art';
+import { useFieldRef } from '../../hooks';
+import { isMediaVectorArtEmpty } from '../../utils/media-vector-art-value';
+import { FormMediaVectorArtField } from './form-media-vector-art-field';
+
+export interface FormMediaVectorArtInputProps
+  extends BaseInputProps<MediaVectorArtValue | null> {}
+
+const _FormMediaVectorArtInput = (props: FormMediaVectorArtInputProps) => {
+  const { field, dataHook, formControl, data } = props;
+
+  const { translate: t } = useWixPatternsContainer();
+
+  const controller = useController({
+    name: field?.id ?? '',
+    control: formControl,
+    defaultValue: data?.[field?.id ?? ''],
+    rules: {
+      validate: (value) =>
+        field.validation?.required && isMediaVectorArtEmpty(value)
+          ? t('cairo.fieldValidation.requiredField')
+          : true,
+    },
+  });
+
+  const setFieldRef = useFieldRef(controller.field.ref);
+
+  return (
+    <FormMediaVectorArtField
+      inputRef={setFieldRef}
+      data={controller.field.value}
+      onChange={(value) => controller.field.onChange(value)}
+      dataHook={dataHook}
+      imageFormFieldProps={{
+        label: field.displayName,
+        required: field.validation?.required,
+        status: controller.fieldState.error ? 'error' : undefined,
+        statusMessage: controller.fieldState.error?.message,
+      }}
+    />
+  );
+};
+
+export const FormMediaVectorArtInput = observer(_FormMediaVectorArtInput);

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

@@ -1 +1,4 @@
 export * from './media-vector-art-view';
+export * from './cell-media-vector-art-edit';
+export * from './form-media-vector-art-field';
+export * from './form-media-vector-art-input';

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

@@ -0,0 +1,136 @@
+import React from 'react';
+import { IconButton, PopoverMenu } from '@wix/design-system';
+import type { IconButtonProps } from '@wix/design-system';
+import {
+  Delete,
+  Download,
+  Maximize,
+  MoreSmall,
+  Replace,
+} from '@wix/wix-ui-icons-common/lazy';
+import { useTranslations } from '../../hooks';
+import type { MediaVectorArtValue } from '../../types/media-vector-art';
+import { MediaPreviewModal } from '../media-gallery/media-preview-modal';
+
+type ActionsPlacement = 'cell' | 'overlay';
+
+const TRIGGER_LOOK: Record<
+  ActionsPlacement,
+  Pick<IconButtonProps, 'size' | 'skin' | 'priority'>
+> = {
+  cell: { size: 'tiny', priority: 'tertiary' },
+  overlay: { size: 'small', skin: 'light', priority: 'secondary' },
+};
+
+export interface MediaVectorArtActionsProps {
+  dataHook: string;
+  placement: ActionsPlacement;
+  onReplace?: () => void;
+  onPreview: () => void;
+  onDownload: () => void;
+  onDelete?: () => void;
+  menuZIndex?: number;
+}
+
+export const MediaVectorArtActions: React.FC<MediaVectorArtActionsProps> = ({
+  dataHook,
+  placement,
+  onReplace,
+  onPreview,
+  onDownload,
+  onDelete,
+  menuZIndex,
+}) => {
+  const { t } = useTranslations();
+
+  return (
+    <PopoverMenu
+      textSize="small"
+      appendTo="window"
+      zIndex={menuZIndex}
+      triggerElement={({ isOpen, toggle, ref }) => (
+        <IconButton
+          {...TRIGGER_LOOK[placement]}
+          ref={ref}
+          dataHook={`${dataHook}-more-button`}
+          ariaLabel={t('auto-patterns.fields.more_actions_tooltip')}
+          aria-haspopup="menu"
+          aria-expanded={isOpen}
+          onClick={toggle}
+        >
+          <MoreSmall />
+        </IconButton>
+      )}
+    >
+      <PopoverMenu.MenuItem
+        dataHook={`${dataHook}-action-replace`}
+        text={t('CMS.image.replace')}
+        prefixIcon={<Replace />}
+        disabled={!onReplace}
+        onClick={() => onReplace?.()}
+      />
+      <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>
+  );
+};
+
+MediaVectorArtActions.displayName = 'MediaVectorArtActions';
+
+export interface MediaVectorArtPreviewModalProps {
+  isOpen: boolean;
+  vectorArt: MediaVectorArtValue;
+  onClose: () => void;
+  onReplace: () => void;
+  onDelete?: () => void;
+  onDownload: () => void;
+  readOnly?: boolean;
+}
+
+export const MediaVectorArtPreviewModal: React.FC<
+  MediaVectorArtPreviewModalProps
+> = ({
+  isOpen,
+  vectorArt,
+  onClose,
+  onReplace,
+  onDelete,
+  onDownload,
+  readOnly,
+}) => (
+  <MediaPreviewModal
+    isOpen={isOpen}
+    value={vectorArt.uri}
+    onClose={onClose}
+    onRequestMedia={onReplace}
+    onClearMedia={onDelete}
+    onDownloadMedia={onDownload}
+    readOnly={readOnly}
+    textKeys={{
+      replace: 'CMS.image.replace',
+      download: 'CMS.image.download',
+      delete: 'CMS.image.clear',
+    }}
+  />
+);
+
+MediaVectorArtPreviewModal.displayName = 'MediaVectorArtPreviewModal';

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_ = "cellmultidocumentedit1175738466";
+var _namespace_ = "cellmultidocumentedit4032279857";
 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":"cellmultidocumentedit1175738466__root","chipTrigger":"cellmultidocumentedit1175738466__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit4032279857__root","chipTrigger":"cellmultidocumentedit4032279857__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_ = "formmultidocument1257162130";
+var _namespace_ = "formmultidocument1924439989";
 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":"formmultidocument1257162130__root","viewRoot":"formmultidocument1257162130__viewRoot","singleViewWrapper":"formmultidocument1257162130__singleViewWrapper","addDocumentButton":"formmultidocument1257162130__addDocumentButton"};
+export var classes = {"root":"formmultidocument1924439989__root","viewRoot":"formmultidocument1924439989__viewRoot","singleViewWrapper":"formmultidocument1924439989__singleViewWrapper","addDocumentButton":"formmultidocument1924439989__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_ = "cellmultireferenceinput296243577";
+var _namespace_ = "cellmultireferenceinput1680792579";
 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":"cellmultireferenceinput296243577__root"};
+export var classes = {"root":"cellmultireferenceinput1680792579__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_ = "cellmultireferenceview1168811889";
+var _namespace_ = "cellmultireferenceview3295820103";
 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":"cellmultireferenceview1168811889__root","expanded":"cellmultireferenceview1168811889__expanded"};
+export var classes = {"root":"cellmultireferenceview3295820103__root","expanded":"cellmultireferenceview3295820103__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_ = "cellreferenceinput1540347298";
+var _namespace_ = "cellreferenceinput4123862525";
 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":"cellreferenceinput1540347298__root","autocomplete":"cellreferenceinput1540347298__autocomplete"};
+export var classes = {"root":"cellreferenceinput4123862525__root","autocomplete":"cellreferenceinput4123862525__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_ = "richcontentdefaultvalueinput384255846";
+var _namespace_ = "richcontentdefaultvalueinput3386025156";
 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":"richcontentdefaultvalueinput384255846__root","richContentEditorContainer":"richcontentdefaultvalueinput384255846__richContentEditorContainer","editor":"richcontentdefaultvalueinput384255846__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput3386025156__root","richContentEditorContainer":"richcontentdefaultvalueinput3386025156__richContentEditorContainer","editor":"richcontentdefaultvalueinput3386025156__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_ = "richcontentforminput2623724401";
+var _namespace_ = "richcontentforminput1995002995";
 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":"richcontentforminput2623724401__root","editor":"richcontentforminput2623724401__editor"};
+export var classes = {"root":"richcontentforminput1995002995__root","editor":"richcontentforminput1995002995__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_ = "richcontentformreadonlyinput2036888546";
+var _namespace_ = "richcontentformreadonlyinput2837276239";
 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":"richcontentformreadonlyinput2036888546__root"};
+export var classes = {"root":"richcontentformreadonlyinput2837276239__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_ = "fullscreenmodal2593435262";
+var _namespace_ = "fullscreenmodal2643957088";
 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":"fullscreenmodal2593435262__root","modalContent":"fullscreenmodal2593435262__modalContent"};
+export var classes = {"root":"fullscreenmodal2643957088__root","modalContent":"fullscreenmodal2643957088__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_ = "publishloader1519157742";
+var _namespace_ = "publishloader2944071563";
 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":"publishloader1519157742__root","publishLoader":"publishloader1519157742__publishLoader"};
+export var classes = {"root":"publishloader2944071563__root","publishLoader":"publishloader2944071563__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_ = "togglefullscreenbutton2869470931";
+var _namespace_ = "togglefullscreenbutton3514134541";
 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":"togglefullscreenbutton2869470931__root"};
+export var classes = {"root":"togglefullscreenbutton3514134541__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_ = "richcontenteditor450399671";
+var _namespace_ = "richcontenteditor1083792463";
 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":"richcontenteditor450399671__root","toolbarContainer":"richcontenteditor450399671__toolbarContainer","footerToolbarContainer":"richcontenteditor450399671__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor450399671__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor450399671__editor","modalEditor":"richcontenteditor450399671__modalEditor"};
+export var classes = {"root":"richcontenteditor1083792463__root","toolbarContainer":"richcontenteditor1083792463__toolbarContainer","footerToolbarContainer":"richcontenteditor1083792463__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1083792463__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1083792463__editor","modalEditor":"richcontenteditor1083792463__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};