@wix/patterns-fields 1.108.0 → 1.109.0

package/src/components/datetime-input/form-date-time.tsx

@@ -13,6 +13,7 @@ import { useController } from '@wix/bex-core/form';
 import { BaseInputProps, BaseInputRef } from '../../types/base-input';
 import { useTranslations } from '../../hooks';
 import { isEmpty } from '../../validations/string';
+import { useFieldValueReplacement } from '../date-input/use-field-value-replacement';
 import {
   calendarPopoverDefaults,
   dropdownPopoverDefaults,
@@ -24,6 +25,7 @@ const _FormDateTime = (props: FormDateTimeProps) => {
   const { field, dataHook, inputRef, formControl, data } = props;
   const { translate: t } = useWixPatternsContainer();
   const { t: tFields } = useTranslations();
+  const inputErrors = useRef({ date: '', time: '' });
 
   const controller = useController({
     name: field?.id ?? '',
@@ -31,6 +33,10 @@ const _FormDateTime = (props: FormDateTimeProps) => {
     defaultValue: data?.[field?.id ?? ''],
     rules: {
       validate: (v) => {
+        const inputError = inputErrors.current.date || inputErrors.current.time;
+        if (inputError) {
+          return inputError;
+        }
         if (field?.validation?.required && isEmpty(v)) {
           return t('cairo.fieldValidation.requiredField');
         }
@@ -49,6 +55,19 @@ const _FormDateTime = (props: FormDateTimeProps) => {
 
   const [dateStatusMessage, setDateStatusMessage] = useState('');
   const [timeStatusMessage, setTimeStatusMessage] = useState('');
+  const formError =
+    !dateStatusMessage && !timeStatusMessage
+      ? controller.fieldState.error
+      : undefined;
+
+  const setDateError = (error: string) => {
+    inputErrors.current.date = error;
+    setDateStatusMessage(error);
+  };
+  const setTimeError = (error: string) => {
+    inputErrors.current.time = error;
+    setTimeStatusMessage(error);
+  };
 
   const ref = useRef<BaseInputRef>({});
   const dateRef = useRef<BaseInputRef>({});
@@ -59,6 +78,16 @@ const _FormDateTime = (props: FormDateTimeProps) => {
   const [timeValue, setTimeValue] = useState<number | string | undefined>(
     date?.getTime(),
   );
+  const revision = useFieldValueReplacement(formControl, field.id, (value) => {
+    setDateError('');
+    setTimeError('');
+    ref.current.invalid = false;
+    dateRef.current.invalid = false;
+    timeRef.current.invalid = false;
+    const nextDate = typeof value === 'string' ? new Date(value) : undefined;
+    setDateValue(nextDate?.getDate());
+    setTimeValue(nextDate?.getTime());
+  });
 
   useEffect(() => {
     ref.current.focus = () => {
@@ -81,6 +110,7 @@ const _FormDateTime = (props: FormDateTimeProps) => {
       <Layout gap="12px">
         <Cell span={6}>
           <DatePicker
+            key={revision}
             ref={(internalRef) => {
               const inputEl =
                 // TODO: PR to WSR needed to expose as public API
@@ -99,6 +129,7 @@ const _FormDateTime = (props: FormDateTimeProps) => {
             // onChange is triggered only when you have valid, non-empty value.
             // and onValidate is triggered on every change so we use onValidate
             onValidate={({ validationType, value: newValue, format }) => {
+              let value = controller.field.value;
               if (validationType === 'valid') {
                 const dateWithNewDate = date
                   ? new Date(date)
@@ -107,26 +138,24 @@ const _FormDateTime = (props: FormDateTimeProps) => {
                 dateWithNewDate.setFullYear(_value.getFullYear());
                 dateWithNewDate.setMonth(_value.getMonth());
                 dateWithNewDate.setDate(_value.getDate());
-                controller.field.onChange(dateWithNewDate.toISOString());
+                value = dateWithNewDate.toISOString();
                 setDateValue(new Date(newValue).getDate());
-                setDateStatusMessage('');
+                setDateError('');
                 dateRef.current.invalid = false;
               } else if (validationType === 'formatError' && newValue === '') {
                 if (field.validation?.required) {
-                  setDateStatusMessage(
-                    t('cairo.fieldValidation.requiredField'),
-                  );
+                  setDateError(t('cairo.fieldValidation.requiredField'));
                   dateRef.current.invalid = true;
                 } else {
-                  setDateStatusMessage('');
+                  setDateError('');
                   dateRef.current.invalid = false;
                 }
                 setDateValue(newValue);
                 if (!timeValue) {
-                  controller.field.onChange(null);
+                  value = null;
                 }
               } else {
-                setDateStatusMessage(
+                setDateError(
                   t('cairo.customFields.fieldType.date.invalid.value', {
                     dateFormat: format ?? '',
                   }),
@@ -136,21 +165,17 @@ const _FormDateTime = (props: FormDateTimeProps) => {
 
               ref.current.invalid =
                 dateRef.current.invalid || timeRef.current.invalid;
+              controller.field.onChange(value);
             }}
-            status={
-              controller.fieldState.error || dateStatusMessage
-                ? 'error'
-                : undefined
-            }
-            statusMessage={
-              controller.fieldState.error?.message || dateStatusMessage
-            }
+            status={dateStatusMessage || formError ? 'error' : undefined}
+            statusMessage={dateStatusMessage || formError?.message}
             dataHook={`datetime-date-${field.id}`}
             popoverProps={calendarPopoverDefaults}
           />
         </Cell>
         <Cell span={6}>
           <TimeInput
+            key={revision}
             ref={(internalRef) => {
               timeRef.current.focus = () => internalRef?.focus();
             }}
@@ -159,23 +184,19 @@ const _FormDateTime = (props: FormDateTimeProps) => {
             placeholder={tFields('CMS.formTime.placeholder')}
             invalidMessage={tFields('CMS.formTime.invalidMessage')}
             value={date ?? null}
-            status={
-              controller.fieldState.error || timeStatusMessage
-                ? 'error'
-                : undefined
-            }
-            statusMessage={
-              controller.fieldState.error?.message || timeStatusMessage
-            }
+            status={timeStatusMessage || formError ? 'error' : undefined}
+            statusMessage={timeStatusMessage || formError?.message}
             onInvalid={() => {
               timeRef.current.invalid = true;
-              setTimeStatusMessage(
+              setTimeError(
                 t('cairo.customFields.fieldType.dateAndTime.invalid.value'),
               );
               ref.current.invalid =
                 dateRef.current.invalid || timeRef.current.invalid;
+              controller.field.onChange(controller.field.value);
             }}
             onChange={({ date: newValue }) => {
+              let value = controller.field.value;
               timeRef.current.invalid = false;
               ref.current.invalid =
                 dateRef.current.invalid || timeRef.current.invalid;
@@ -186,28 +207,29 @@ const _FormDateTime = (props: FormDateTimeProps) => {
                 dateWithNewTime.setMinutes(newValue.getMinutes());
                 dateWithNewTime.setSeconds(newValue.getSeconds());
                 dateWithNewTime.setMilliseconds(newValue.getMilliseconds());
-                controller.field.onChange(dateWithNewTime.toISOString());
-                setTimeStatusMessage('');
-                setDateStatusMessage('');
+                value = dateWithNewTime.toISOString();
+                setTimeError('');
+                if (!dateRef.current.invalid) {
+                  setDateError('');
+                }
               } else {
                 if (!newValue) {
                   setTimeValue('');
                   if (field.validation?.required) {
-                    setTimeStatusMessage(
-                      t('cairo.fieldValidation.requiredField'),
-                    );
+                    setTimeError(t('cairo.fieldValidation.requiredField'));
                     timeRef.current.invalid = true;
                   } else {
-                    setTimeStatusMessage('');
+                    setTimeError('');
                     timeRef.current.invalid = false;
                   }
                   if (!ref.current.invalid) {
                     if (!dateValue) {
-                      controller.field.onChange(null);
+                      value = null;
                     }
                   }
                 }
               }
+              controller.field.onChange(value);
             }}
           />
         </Cell>

package/src/components/delete-dialog/delete-dialog.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog744307190";
+var _namespace_ = "deletedialog1225943861";
 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":"deletedialog744307190__root","layout":"deletedialog744307190__layout"};
+export var classes = {"root":"deletedialog1225943861__root","layout":"deletedialog1225943861__layout"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/document/form-document-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield2402620674";
+var _namespace_ = "formdocumentfield1544228680";
 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":"formdocumentfield2402620674__root","viewWrapper":"formdocumentfield2402620674__viewWrapper","textWidth":"formdocumentfield2402620674__textWidth","documentLoader":"formdocumentfield2402620674__documentLoader","addDocument":"formdocumentfield2402620674__addDocument","addItemWrapper":"formdocumentfield2402620674__addItemWrapper"};
+export var classes = {"root":"formdocumentfield1544228680__root","viewWrapper":"formdocumentfield1544228680__viewWrapper","textWidth":"formdocumentfield1544228680__textWidth","documentLoader":"formdocumentfield1544228680__documentLoader","addDocument":"formdocumentfield1544228680__addDocument","addItemWrapper":"formdocumentfield1544228680__addItemWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/exclamation/exclamation.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "exclamation3341739339";
+var _namespace_ = "exclamation2206936122";
 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":"exclamation3341739339__root","exclamation":"exclamation3341739339__exclamation","actions":"exclamation3341739339__actions","action":"exclamation3341739339__action"};
+export var classes = {"root":"exclamation2206936122__root","exclamation":"exclamation2206936122__exclamation","actions":"exclamation2206936122__actions","action":"exclamation2206936122__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext3372272020";
+var _namespace_ = "highlightedtext3225126305";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"highlightedtext3372272020__root","substring":"highlightedtext3372272020__substring"};
-export var keyframes = {"highlighted":"highlightedtext3372272020__highlighted","highlighted-match":"highlightedtext3372272020__highlighted-match"}; 
+export var classes = {"root":"highlightedtext3225126305__root","substring":"highlightedtext3225126305__substring"};
+export var keyframes = {"highlighted":"highlightedtext3225126305__highlighted","highlighted-match":"highlightedtext3225126305__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay2032633141";
+var _namespace_ = "thumbnailreplaceoverlay4168077699";
 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":"thumbnailreplaceoverlay2032633141__root","icon":"thumbnailreplaceoverlay2032633141__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay4168077699__root","icon":"thumbnailreplaceoverlay4168077699__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_ = "cellmediaeditshell235224359";
+var _namespace_ = "cellmediaeditshell2380148196";
 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":"cellmediaeditshell235224359__root"};
+export var classes = {"root":"cellmediaeditshell2380148196__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_ = "pasteurlbutton2373892225";
+var _namespace_ = "pasteurlbutton1715181103";
 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":"pasteurlbutton2373892225__root","iconButtonTooltip":"pasteurlbutton2373892225__iconButtonTooltip","iconButton":"pasteurlbutton2373892225__iconButton"};
+export var classes = {"root":"pasteurlbutton1715181103__root","iconButtonTooltip":"pasteurlbutton1715181103__iconButtonTooltip","iconButton":"pasteurlbutton1715181103__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_ = "formmediagalleryfield668604997";
+var _namespace_ = "formmediagalleryfield3059241841";
 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":"formmediagalleryfield668604997__root","container":"formmediagalleryfield668604997__container","viewBox":"formmediagalleryfield668604997__viewBox","addItemWrapper":"formmediagalleryfield668604997__addItemWrapper","addItem":"formmediagalleryfield668604997__addItem","overlay":"formmediagalleryfield668604997__overlay","image":"formmediagalleryfield668604997__image","previewImage":"formmediagalleryfield668604997__previewImage","previewVideo":"formmediagalleryfield668604997__previewVideo"};
+export var classes = {"root":"formmediagalleryfield3059241841__root","container":"formmediagalleryfield3059241841__container","viewBox":"formmediagalleryfield3059241841__viewBox","addItemWrapper":"formmediagalleryfield3059241841__addItemWrapper","addItem":"formmediagalleryfield3059241841__addItem","overlay":"formmediagalleryfield3059241841__overlay","image":"formmediagalleryfield3059241841__image","previewImage":"formmediagalleryfield3059241841__previewImage","previewVideo":"formmediagalleryfield3059241841__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_ = "mediaimage1816130638";
+var _namespace_ = "mediaimage3444480295";
 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":"mediaimage1816130638__root"};
+export var classes = {"root":"mediaimage3444480295__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":"--mediaimage1816130638-from","to":"--mediaimage1816130638-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":"--mediaimage3444480295-from","to":"--mediaimage3444480295-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_ = "overlay1530238555";
+var _namespace_ = "overlay123276272";
 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":"overlay1530238555__root","iconOverlay":"overlay1530238555__iconOverlay"};
+export var classes = {"root":"overlay123276272__root","iconOverlay":"overlay123276272__iconOverlay"};
 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_ = "mediatag1357066181";
+var _namespace_ = "mediatag1892999247";
 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":"mediatag1357066181__root"};
+export var classes = {"root":"mediatag1892999247__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_ = "cellmultidocumentedit2273831326";
+var _namespace_ = "cellmultidocumentedit3949318771";
 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":"cellmultidocumentedit2273831326__root","chipTrigger":"cellmultidocumentedit2273831326__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit3949318771__root","chipTrigger":"cellmultidocumentedit3949318771__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_ = "formmultidocument3816460060";
+var _namespace_ = "formmultidocument860828417";
 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":"formmultidocument3816460060__root","viewRoot":"formmultidocument3816460060__viewRoot","singleViewWrapper":"formmultidocument3816460060__singleViewWrapper","addDocumentButton":"formmultidocument3816460060__addDocumentButton"};
+export var classes = {"root":"formmultidocument860828417__root","viewRoot":"formmultidocument860828417__viewRoot","singleViewWrapper":"formmultidocument860828417__singleViewWrapper","addDocumentButton":"formmultidocument860828417__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_ = "cellmultireferenceinput2648455914";
+var _namespace_ = "cellmultireferenceinput3549115440";
 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":"cellmultireferenceinput2648455914__root"};
+export var classes = {"root":"cellmultireferenceinput3549115440__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_ = "cellreferenceinput480790494";
+var _namespace_ = "cellreferenceinput825148666";
 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":"cellreferenceinput480790494__root","autocomplete":"cellreferenceinput480790494__autocomplete"};
+export var classes = {"root":"cellreferenceinput825148666__root","autocomplete":"cellreferenceinput825148666__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_ = "richcontentdefaultvalueinput3993079790";
+var _namespace_ = "richcontentdefaultvalueinput136872786";
 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":"richcontentdefaultvalueinput3993079790__root","richContentEditorContainer":"richcontentdefaultvalueinput3993079790__richContentEditorContainer","editor":"richcontentdefaultvalueinput3993079790__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput136872786__root","richContentEditorContainer":"richcontentdefaultvalueinput136872786__richContentEditorContainer","editor":"richcontentdefaultvalueinput136872786__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_ = "richcontentforminput3375020181";
+var _namespace_ = "richcontentforminput1980338327";
 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":"richcontentforminput3375020181__root","editor":"richcontentforminput3375020181__editor"};
+export var classes = {"root":"richcontentforminput1980338327__root","editor":"richcontentforminput1980338327__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_ = "richcontentformreadonlyinput2370049202";
+var _namespace_ = "richcontentformreadonlyinput4171215455";
 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":"richcontentformreadonlyinput2370049202__root"};
+export var classes = {"root":"richcontentformreadonlyinput4171215455__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_ = "fullscreenmodal2426758280";
+var _namespace_ = "fullscreenmodal191907069";
 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":"fullscreenmodal2426758280__root","modalContent":"fullscreenmodal2426758280__modalContent"};
+export var classes = {"root":"fullscreenmodal191907069__root","modalContent":"fullscreenmodal191907069__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_ = "publishloader174442813";
+var _namespace_ = "publishloader3452678746";
 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":"publishloader174442813__root","publishLoader":"publishloader174442813__publishLoader"};
+export var classes = {"root":"publishloader3452678746__root","publishLoader":"publishloader3452678746__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_ = "togglefullscreenbutton1788293308";
+var _namespace_ = "togglefullscreenbutton1124921780";
 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":"togglefullscreenbutton1788293308__root"};
+export var classes = {"root":"togglefullscreenbutton1124921780__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_ = "richcontenteditor1294266000";
+var _namespace_ = "richcontenteditor2665333597";
 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":"richcontenteditor1294266000__root","toolbarContainer":"richcontenteditor1294266000__toolbarContainer","footerToolbarContainer":"richcontenteditor1294266000__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1294266000__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1294266000__editor","modalEditor":"richcontenteditor1294266000__modalEditor"};
+export var classes = {"root":"richcontenteditor2665333597__root","toolbarContainer":"richcontenteditor2665333597__toolbarContainer","footerToolbarContainer":"richcontenteditor2665333597__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor2665333597__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor2665333597__editor","modalEditor":"richcontenteditor2665333597__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};