@wix/patterns-fields 1.71.0 → 1.73.0

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

@@ -63,6 +63,10 @@ const _FormImageInput = (props: FormImageInputProps) => {
     >
       <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={controller.field.ref}
           imageUrl={imageUrl}
           dataHook={`image-${field.id}`}
           onAddImage={isMobile ? undefined : () => openMedia()}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay1764449080";
+var _namespace_ = "thumbnailreplaceoverlay1250295104";
 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":"thumbnailreplaceoverlay1764449080__root","icon":"thumbnailreplaceoverlay1764449080__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay1250295104__root","icon":"thumbnailreplaceoverlay1250295104__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -8,7 +8,10 @@ import { useAutoFocus } from '../../hooks';
 
 export type FormJsonInputProps = FormInputProps<any> & JsonInputProps;
 
-export const FormJsonInput = React.forwardRef<InputArea, FormJsonInputProps>(
+// Explicit type — without it, .d.ts emit inlines WDS's internal class (TS4094).
+export const FormJsonInput: React.ForwardRefExoticComponent<
+  FormJsonInputProps & React.RefAttributes<InputArea>
+> = React.forwardRef<InputArea, FormJsonInputProps>(
   ({ data, onChange, onInput, autoFocus, readOnly, dataHook }, ref) => {
     const inputRef = useRef<InputArea | null>(null);
     useAutoFocus(inputRef, autoFocus);

package/src/components/json-input/json-input.tsx

@@ -12,7 +12,10 @@ export interface JsonInputProps
   onInput?: () => void;
 }
 
-export const JsonInput = forwardRef<InputArea, JsonInputProps>(
+// Explicit type — without it, .d.ts emit inlines WDS's internal class (TS4094).
+export const JsonInput: React.ForwardRefExoticComponent<
+  JsonInputProps & React.RefAttributes<InputArea>
+> = forwardRef<InputArea, JsonInputProps>(
   ({ value, onChange, onInput, onBlur, readOnly, disabled, ...props }, ref) => {
     const [json, setJson] = useControlledInput(safeStringify(value, true));
     const onJsonChange = useCallback(

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_ = "cellmediaeditshell679088465";
+var _namespace_ = "cellmediaeditshell222630220";
 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":"cellmediaeditshell679088465__root"};
+export var classes = {"root":"cellmediaeditshell222630220__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_ = "pasteurlbutton277900972";
+var _namespace_ = "pasteurlbutton285657028";
 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":"pasteurlbutton277900972__root","iconButtonTooltip":"pasteurlbutton277900972__iconButtonTooltip","iconButton":"pasteurlbutton277900972__iconButton"};
+export var classes = {"root":"pasteurlbutton285657028__root","iconButtonTooltip":"pasteurlbutton285657028__iconButtonTooltip","iconButton":"pasteurlbutton285657028__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_ = "formmediagalleryfield1468350743";
+var _namespace_ = "formmediagalleryfield2943984590";
 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":"formmediagalleryfield1468350743__root","container":"formmediagalleryfield1468350743__container","viewBox":"formmediagalleryfield1468350743__viewBox","addItemWrapper":"formmediagalleryfield1468350743__addItemWrapper","addItem":"formmediagalleryfield1468350743__addItem","overlay":"formmediagalleryfield1468350743__overlay","image":"formmediagalleryfield1468350743__image","previewImage":"formmediagalleryfield1468350743__previewImage","previewVideo":"formmediagalleryfield1468350743__previewVideo"};
+export var classes = {"root":"formmediagalleryfield2943984590__root","container":"formmediagalleryfield2943984590__container","viewBox":"formmediagalleryfield2943984590__viewBox","addItemWrapper":"formmediagalleryfield2943984590__addItemWrapper","addItem":"formmediagalleryfield2943984590__addItem","overlay":"formmediagalleryfield2943984590__overlay","image":"formmediagalleryfield2943984590__image","previewImage":"formmediagalleryfield2943984590__previewImage","previewVideo":"formmediagalleryfield2943984590__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/form-media-gallery-field.tsx

@@ -14,7 +14,7 @@ import {
   Maximize as MaximizeIcon,
 } from '@wix/wix-ui-icons-common/lazy';
 import type { WixCodeGalleryItem } from '../../auto-field-types';
-import { useTranslations } from '../../hooks';
+import { useMergedRef, useTranslations } from '../../hooks';
 import { executeDownloading } from '../../utils/media-utils';
 import { getMediaURL } from '../../auto-field-types';
 import { files } from '@wix/media';
@@ -33,6 +33,8 @@ export interface FormMediaGalleryFieldProps {
   invalid?: boolean;
   autoFocus?: boolean;
   dataHook?: string;
+  /** Caller's ref to the add button, filled alongside the internal one. */
+  inputRef?: React.Ref<AddItemActions>;
 }
 
 const mediaGalleryPreviewTextKeys = {
@@ -49,10 +51,11 @@ export const FormMediaGalleryField: React.FC<FormMediaGalleryFieldProps> = ({
   invalid,
   autoFocus,
   dataHook,
+  inputRef: forwardedRef,
 }) => {
   const { t } = useTranslations();
   const boxRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<AddItemActions>(null);
+  const [inputRef, setInputRef] = useMergedRef<AddItemActions>(forwardedRef);
   const [boxWidth, setBoxWidth] = useState(0);
   const [hovered, setHovered] = useState(false);
   const [isPreviewOpen, setIsPreviewOpen] = useState(false);
@@ -66,7 +69,9 @@ export const FormMediaGalleryField: React.FC<FormMediaGalleryFieldProps> = ({
     }
     boxRef.current?.focus();
     inputRef.current?.focus();
-  }, [autoFocus]);
+    // inputRef comes from useMergedRef and is stable, but eslint only knows
+    // that about a bare useRef.
+  }, [autoFocus, inputRef]);
 
   // Responsive width tracking
   useEffect(() => {
@@ -137,7 +142,7 @@ export const FormMediaGalleryField: React.FC<FormMediaGalleryFieldProps> = ({
       {!hasValue ? (
         <div className={classes.addItemWrapper}>
           <AddItem
-            ref={inputRef}
+            ref={setInputRef}
             className={style(classes.addItem, { error: invalid })}
             size="tiny"
             theme="dashes"

package/src/components/media-gallery/form-media-gallery.tsx

@@ -40,6 +40,10 @@ const _FormMediaGallery = (props: FormMediaGalleryProps) => {
       dataHook={dataHook}
     >
       <FormMediaGalleryField
+        // Hand the add button to react-hook-form so
+        // shouldFocusError scrolls to + focuses this field when it
+        // blocks save.
+        inputRef={controller.field.ref}
         data={controller.field.value}
         onChange={(value) => controller.field.onChange(value)}
         onClear={() => controller.field.onChange([])}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage32296048";
+var _namespace_ = "mediaimage1081502549";
 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":"mediaimage32296048__root"};
+export var classes = {"root":"mediaimage1081502549__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":"--mediaimage32296048-from","to":"--mediaimage32296048-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":"--mediaimage1081502549-from","to":"--mediaimage1081502549-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_ = "overlay604534348";
+var _namespace_ = "overlay1338093693";
 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":"overlay604534348__root","iconOverlay":"overlay604534348__iconOverlay"};
+export var classes = {"root":"overlay1338093693__root","iconOverlay":"overlay1338093693__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_ = "medialoader737517012";
+var _namespace_ = "medialoader142891810";
 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":"medialoader737517012__root","loader":"medialoader737517012__loader"};
+export var classes = {"root":"medialoader142891810__root","loader":"medialoader142891810__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_ = "mediatag3986082280";
+var _namespace_ = "mediatag1597208276";
 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":"mediatag3986082280__root"};
+export var classes = {"root":"mediatag1597208276__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_ = "cellmultidocumentedit30390028";
+var _namespace_ = "cellmultidocumentedit2776735104";
 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":"cellmultidocumentedit30390028__root","chipTrigger":"cellmultidocumentedit30390028__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit2776735104__root","chipTrigger":"cellmultidocumentedit2776735104__chipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/multi-document-input/form-multi-document-field.tsx

@@ -10,7 +10,7 @@ import {
   usePasteURLForm,
 } from '../../media-control';
 import { FormDocumentInput } from '../../document/form';
-import { useTranslations, useWithCallback } from '../../../hooks';
+import { useMergedRef, useTranslations, useWithCallback } from '../../../hooks';
 
 import { FormMultiDocumentView } from './form-multi-document-view';
 
@@ -24,12 +24,13 @@ export const FormMultiDocumentField: React.FC<
   readOnly,
   invalid,
   dataHook,
+  inputRef: forwardedRef,
 }) => {
   const { t } = useTranslations();
 
   const onChange = useWithCallback(onChangeMultiDocument, onInput);
 
-  const inputRef = useRef<AddItemActions>(null);
+  const [inputRef, setInputRef] = useMergedRef<AddItemActions>(forwardedRef);
   const firstDocumentViewRef = useRef<HTMLDivElement>(null);
 
   const { callMedia, loading, downloadMedia } = useMediaControl({
@@ -77,7 +78,7 @@ export const FormMultiDocumentField: React.FC<
       ) : (
         <FormDocumentInput
           dataHook={dataHook}
-          ref={inputRef}
+          ref={setInputRef}
           theme="dashes"
           disabled={readOnly}
           loading={loading}

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_ = "formmultidocument1609371478";
+var _namespace_ = "formmultidocument857357206";
 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":"formmultidocument1609371478__root","viewRoot":"formmultidocument1609371478__viewRoot","singleViewWrapper":"formmultidocument1609371478__singleViewWrapper","addDocumentButton":"formmultidocument1609371478__addDocumentButton"};
+export var classes = {"root":"formmultidocument857357206__root","viewRoot":"formmultidocument857357206__viewRoot","singleViewWrapper":"formmultidocument857357206__singleViewWrapper","addDocumentButton":"formmultidocument857357206__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/multi-document-input/form-multi-document.tsx

@@ -39,6 +39,10 @@ const _FormMultiDocument = (props: FormMultiDocumentProps) => {
       dataHook={dataHook}
     >
       <FormMultiDocumentField
+        // Hand the add button to react-hook-form so
+        // shouldFocusError scrolls to + focuses this field when it
+        // blocks save.
+        inputRef={controller.field.ref}
         data={controller.field.value}
         onChange={(value) => controller.field.onChange(value)}
         dataHook={`multi-document-${field.id}`}

package/src/components/object/cell-json-input.tsx

@@ -23,7 +23,10 @@ export interface CellJsonInputProps
  * by the EditableTable commit pipeline to mean "no edit happened," so emitting
  * `null` here is what lets the user clear a cell to empty.
  */
-export const CellJsonInput = forwardRef<InputArea, CellJsonInputProps>(
+// Explicit type — without it, .d.ts emit inlines WDS's internal class (TS4094).
+export const CellJsonInput: React.ForwardRefExoticComponent<
+  CellJsonInputProps & React.RefAttributes<InputArea>
+> = forwardRef<InputArea, CellJsonInputProps>(
   ({ value, onChange, onBlur, readOnly, disabled, ...props }, ref) => {
     const [json, setJson] = useControlledInput(
       value == null ? '' : safeStringify(value, true),

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_ = "cellmultireferenceinput2603991496";
+var _namespace_ = "cellmultireferenceinput2676689456";
 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":"cellmultireferenceinput2603991496__root"};
+export var classes = {"root":"cellmultireferenceinput2676689456__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_ = "cellreferenceinput1254621145";
+var _namespace_ = "cellreferenceinput1109486214";
 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":"cellreferenceinput1254621145__root","autocomplete":"cellreferenceinput1254621145__autocomplete"};
+export var classes = {"root":"cellreferenceinput1109486214__root","autocomplete":"cellreferenceinput1109486214__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/form-rich-content.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormField } from '@wix/design-system';
+import { Box, FormField } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
 import type {
   RichContent as RichContentType,
@@ -11,7 +11,7 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController } from '@wix/bex-core/form';
 
 import { BaseInputProps } from '../../types/base-input';
-import { useTranslations } from '../../hooks';
+import { useScrollToErrorRef, useTranslations } from '../../hooks';
 import { isEmpty } from '../../validations/string';
 import {
   isDataValidOrNotSet,
@@ -49,6 +49,14 @@ const _FormRichContent = (props: FormRichContentProps) => {
     richContentValidation,
   );
 
+  // The editor is lazy and exposes no focus handle, so hand react-hook-form
+  // a wrapper it can bring into view instead. The wrapper stays mounted even
+  // when the value is the wrong type and the editor is not rendered.
+  const setScrollToErrorRef = useScrollToErrorRef<HTMLDivElement>(
+    controller.field.ref,
+    '[contenteditable]',
+  );
+
   return (
     <FormField
       label={field.displayName}
@@ -78,18 +86,20 @@ const _FormRichContent = (props: FormRichContentProps) => {
         )
       }
     >
-      {isValueValid ? (
-        <FormRichContentInput
-          autoFocus={false}
-          data={controller.field.value}
-          onChange={(value) => controller.field.onChange?.(value)}
-          dataHook={`rich-content-${field.id}`}
-          field={field.id}
-          theme={theme}
-          experiments={ricosExperiments}
-          isSiteMetadataLoading={false}
-        />
-      ) : null}
+      <Box direction="vertical" width="100%" ref={setScrollToErrorRef}>
+        {isValueValid ? (
+          <FormRichContentInput
+            autoFocus={false}
+            data={controller.field.value}
+            onChange={(value) => controller.field.onChange?.(value)}
+            dataHook={`rich-content-${field.id}`}
+            field={field.id}
+            theme={theme}
+            experiments={ricosExperiments}
+            isSiteMetadataLoading={false}
+          />
+        ) : null}
+      </Box>
     </FormField>
   );
 };

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_ = "richcontentdefaultvalueinput2923565181";
+var _namespace_ = "richcontentdefaultvalueinput4174470607";
 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":"richcontentdefaultvalueinput2923565181__root","richContentEditorContainer":"richcontentdefaultvalueinput2923565181__richContentEditorContainer","editor":"richcontentdefaultvalueinput2923565181__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput4174470607__root","richContentEditorContainer":"richcontentdefaultvalueinput4174470607__richContentEditorContainer","editor":"richcontentdefaultvalueinput4174470607__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_ = "richcontentforminput1152158009";
+var _namespace_ = "richcontentforminput1903671592";
 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":"richcontentforminput1152158009__root","editor":"richcontentforminput1152158009__editor"};
+export var classes = {"root":"richcontentforminput1903671592__root","editor":"richcontentforminput1903671592__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_ = "richcontentformreadonlyinput755695367";
+var _namespace_ = "richcontentformreadonlyinput172558332";
 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":"richcontentformreadonlyinput755695367__root"};
+export var classes = {"root":"richcontentformreadonlyinput172558332__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_ = "fullscreenmodal740246259";
+var _namespace_ = "fullscreenmodal208254918";
 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":"fullscreenmodal740246259__root","modalContent":"fullscreenmodal740246259__modalContent"};
+export var classes = {"root":"fullscreenmodal208254918__root","modalContent":"fullscreenmodal208254918__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_ = "publishloader2959702806";
+var _namespace_ = "publishloader1461570400";
 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":"publishloader2959702806__root","publishLoader":"publishloader2959702806__publishLoader"};
+export var classes = {"root":"publishloader1461570400__root","publishLoader":"publishloader1461570400__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_ = "togglefullscreenbutton1348532638";
+var _namespace_ = "togglefullscreenbutton2385173147";
 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":"togglefullscreenbutton1348532638__root"};
+export var classes = {"root":"togglefullscreenbutton2385173147__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_ = "richcontenteditor1768344113";
+var _namespace_ = "richcontenteditor3535846372";
 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":"richcontenteditor1768344113__root","toolbarContainer":"richcontenteditor1768344113__toolbarContainer","footerToolbarContainer":"richcontenteditor1768344113__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1768344113__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1768344113__editor","modalEditor":"richcontenteditor1768344113__modalEditor"};
+export var classes = {"root":"richcontenteditor3535846372__root","toolbarContainer":"richcontenteditor3535846372__toolbarContainer","footerToolbarContainer":"richcontenteditor3535846372__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3535846372__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3535846372__editor","modalEditor":"richcontenteditor3535846372__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_ = "richcontenttoolbar1954829146";
+var _namespace_ = "richcontenttoolbar2126134109";
 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":"richcontenttoolbar1954829146__root","toolbar":"richcontenttoolbar1954829146__toolbar","toolbarButton":"richcontenttoolbar1954829146__toolbarButton","separator":"richcontenttoolbar1954829146__separator"};
+export var classes = {"root":"richcontenttoolbar2126134109__root","toolbar":"richcontenttoolbar2126134109__toolbar","toolbarButton":"richcontenttoolbar2126134109__toolbarButton","separator":"richcontenttoolbar2126134109__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_ = "richcontentviewer1006954306";
+var _namespace_ = "richcontentviewer3587365751";
 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":"richcontentviewer1006954306__root","viewer":"richcontentviewer1006954306__viewer","modalViewer":"richcontentviewer1006954306__modalViewer"};
+export var classes = {"root":"richcontentviewer3587365751__root","viewer":"richcontentviewer3587365751__viewer","modalViewer":"richcontentviewer3587365751__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};