@wix/patterns-fields 1.83.0 → 1.85.0

package/src/components/datetime-input/controlled-date-time-input.uni.driver.ts

@@ -5,14 +5,25 @@ import {
 } from '@wix/design-system/dist/testkit/unidriver';
 
 import { baseUniDriverFactory } from '../../testkit/base-driver';
+import {
+  CalendarPopoverUniDriver,
+  InlineCalendarPopoverUniDriver,
+  InlineTimeDropdownUniDriver,
+  TimeDropdownUniDriver,
+} from '../../testkit/popover-driver';
 
 export function DateTimeInputUniDriver(base: UniDriver, body: UniDriver) {
+  const dateBase = base.$('[data-hook="date-time-date"]');
+  const timeBase = base.$('[data-hook="date-time-time"]');
+  const datePicker = DatePickerUniDriver(dateBase, body);
+
   return {
     ...baseUniDriverFactory(base),
-    datePicker: DatePickerUniDriver(
-      base.$('[data-hook="date-time-date"]'),
-      body,
-    ),
-    timeInput: TimeInputUniDriver(base.$('[data-hook="date-time-time"]'), body),
+    datePicker,
+    timeInput: TimeInputUniDriver(timeBase, body),
+    calendarPopover: CalendarPopoverUniDriver(datePicker, body),
+    timeDropdown: TimeDropdownUniDriver(timeBase, body),
+    inlineCalendarPopover: InlineCalendarPopoverUniDriver(base),
+    inlineTimeDropdown: InlineTimeDropdownUniDriver(base),
   };
 }

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

@@ -1,9 +1,17 @@
 import React, { useMemo } from 'react';
 import { Cell, DatePicker, Layout, TimeInput } from '@wix/design-system';
-import type { DatePickerProps, TimeInputProps } from '@wix/design-system';
+import type {
+  DatePickerProps,
+  PopoverCommonProps,
+  TimeInputProps,
+} from '@wix/design-system';
 
 import type { ControlledInputProps } from '../../types/controlled-input';
 import { useTranslations } from '../../hooks';
+import {
+  calendarPopoverDefaults,
+  dropdownPopoverDefaults,
+} from '../popover-defaults';
 
 const DATE_INPUT_DATA_HOOK = 'date-time-date';
 const TIME_INPUT_DATA_HOOK = 'date-time-time';
@@ -24,6 +32,8 @@ export interface DateTimeInputProps
   timeInvalidMessage?: string;
   dateInputRef?: DatePickerProps['inputRef'];
   timeInputRef?: TimeInputProps['inputRef'];
+  datePopoverProps?: PopoverCommonProps;
+  timePopoverProps?: PopoverCommonProps;
   onInvalidDate?(value: string): void;
   onInvalidTime?(): void;
 }
@@ -41,6 +51,8 @@ export const ControlledDateTimeInput: React.FC<DateTimeInputProps> = ({
   timeInvalidMessage,
   dateInputRef,
   timeInputRef,
+  datePopoverProps,
+  timePopoverProps,
   onInvalidDate,
   onInvalidTime,
 }) => {
@@ -91,6 +103,7 @@ export const ControlledDateTimeInput: React.FC<DateTimeInputProps> = ({
               }
             }}
             inputProps={{ autoFocus, inputRef: dateInputRef }}
+            popoverProps={{ ...calendarPopoverDefaults, ...datePopoverProps }}
             readOnly={readOnly}
             status={invalid ? 'error' : undefined}
             placeholderText={datePlaceholder}
@@ -116,6 +129,7 @@ export const ControlledDateTimeInput: React.FC<DateTimeInputProps> = ({
             }}
             onInvalid={onInvalidTime}
             inputRef={timeInputRef}
+            popoverProps={{ ...dropdownPopoverDefaults, ...timePopoverProps }}
             readOnly={readOnly}
             status={invalid ? 'error' : undefined}
             invalidMessage={timeInvalidMessage}

package/src/components/datetime-input/form-date-time.driver.ts

@@ -10,6 +10,10 @@ import {
   baseUniDriverFactory,
   getFormFieldLabelText,
 } from '../../testkit/base-driver';
+import {
+  CalendarPopoverUniDriver,
+  TimeDropdownUniDriver,
+} from '../../testkit/popover-driver';
 
 export function FormDateTimeDriver(
   base: UniDriver,
@@ -41,5 +45,7 @@ export function FormDateTimeDriver(
     // WDS Layout mirrors its `gap` prop onto `data-gap`; it is the only
     // element in this field carrying that attribute.
     getInputsGap: () => base.$('[data-gap]').attr('data-gap'),
+    calendarPopover: CalendarPopoverUniDriver(datePicker, body),
+    timeDropdown: TimeDropdownUniDriver(timeBase, body),
   };
 }

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

@@ -13,6 +13,10 @@ import { useController } from '@wix/bex-core/form';
 import { BaseInputProps, BaseInputRef } from '../../types/base-input';
 import { useTranslations } from '../../hooks';
 import { isEmpty } from '../../validations/string';
+import {
+  calendarPopoverDefaults,
+  dropdownPopoverDefaults,
+} from '../popover-defaults';
 
 export interface FormDateTimeProps extends BaseInputProps<string | null> {}
 
@@ -142,6 +146,7 @@ const _FormDateTime = (props: FormDateTimeProps) => {
               controller.fieldState.error?.message || dateStatusMessage
             }
             dataHook={`datetime-date-${field.id}`}
+            popoverProps={calendarPopoverDefaults}
           />
         </Cell>
         <Cell span={6}>
@@ -150,6 +155,7 @@ const _FormDateTime = (props: FormDateTimeProps) => {
               timeRef.current.focus = () => internalRef?.focus();
             }}
             dataHook={`datetime-time-${field.id}`}
+            popoverProps={dropdownPopoverDefaults}
             placeholder={tFields('CMS.formTime.placeholder')}
             invalidMessage={tFields('CMS.formTime.invalidMessage')}
             value={date ?? null}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog591839243";
+var _namespace_ = "deletedialog2825038614";
 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":"deletedialog591839243__root","layout":"deletedialog591839243__layout"};
+export var classes = {"root":"deletedialog2825038614__root","layout":"deletedialog2825038614__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_ = "formdocumentfield125589374";
+var _namespace_ = "formdocumentfield502117395";
 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":"formdocumentfield125589374__root","viewWrapper":"formdocumentfield125589374__viewWrapper","textWidth":"formdocumentfield125589374__textWidth","documentLoader":"formdocumentfield125589374__documentLoader","addDocument":"formdocumentfield125589374__addDocument","addItemWrapper":"formdocumentfield125589374__addItemWrapper"};
+export var classes = {"root":"formdocumentfield502117395__root","viewWrapper":"formdocumentfield502117395__viewWrapper","textWidth":"formdocumentfield502117395__textWidth","documentLoader":"formdocumentfield502117395__documentLoader","addDocument":"formdocumentfield502117395__addDocument","addItemWrapper":"formdocumentfield502117395__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_ = "exclamation107353727";
+var _namespace_ = "exclamation2183185255";
 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":"exclamation107353727__root","exclamation":"exclamation107353727__exclamation","actions":"exclamation107353727__actions","action":"exclamation107353727__action"};
+export var classes = {"root":"exclamation2183185255__root","exclamation":"exclamation2183185255__exclamation","actions":"exclamation2183185255__actions","action":"exclamation2183185255__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_ = "highlightedtext1316333891";
+var _namespace_ = "highlightedtext2938869321";
 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":"highlightedtext1316333891__root","substring":"highlightedtext1316333891__substring"};
-export var keyframes = {"highlighted":"highlightedtext1316333891__highlighted","highlighted-match":"highlightedtext1316333891__highlighted-match"}; 
+export var classes = {"root":"highlightedtext2938869321__root","substring":"highlightedtext2938869321__substring"};
+export var keyframes = {"highlighted":"highlightedtext2938869321__highlighted","highlighted-match":"highlightedtext2938869321__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_ = "thumbnailreplaceoverlay476914298";
+var _namespace_ = "thumbnailreplaceoverlay2143454612";
 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":"thumbnailreplaceoverlay476914298__root","icon":"thumbnailreplaceoverlay476914298__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay2143454612__root","icon":"thumbnailreplaceoverlay2143454612__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_ = "cellmediaeditshell2329680740";
+var _namespace_ = "cellmediaeditshell3151325868";
 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":"cellmediaeditshell2329680740__root"};
+export var classes = {"root":"cellmediaeditshell3151325868__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_ = "pasteurlbutton8757955";
+var _namespace_ = "pasteurlbutton3556705877";
 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":"pasteurlbutton8757955__root","iconButtonTooltip":"pasteurlbutton8757955__iconButtonTooltip","iconButton":"pasteurlbutton8757955__iconButton"};
+export var classes = {"root":"pasteurlbutton3556705877__root","iconButtonTooltip":"pasteurlbutton3556705877__iconButtonTooltip","iconButton":"pasteurlbutton3556705877__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_ = "formmediagalleryfield466140145";
+var _namespace_ = "formmediagalleryfield2581192152";
 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":"formmediagalleryfield466140145__root","container":"formmediagalleryfield466140145__container","viewBox":"formmediagalleryfield466140145__viewBox","addItemWrapper":"formmediagalleryfield466140145__addItemWrapper","addItem":"formmediagalleryfield466140145__addItem","overlay":"formmediagalleryfield466140145__overlay","image":"formmediagalleryfield466140145__image","previewImage":"formmediagalleryfield466140145__previewImage","previewVideo":"formmediagalleryfield466140145__previewVideo"};
+export var classes = {"root":"formmediagalleryfield2581192152__root","container":"formmediagalleryfield2581192152__container","viewBox":"formmediagalleryfield2581192152__viewBox","addItemWrapper":"formmediagalleryfield2581192152__addItemWrapper","addItem":"formmediagalleryfield2581192152__addItem","overlay":"formmediagalleryfield2581192152__overlay","image":"formmediagalleryfield2581192152__image","previewImage":"formmediagalleryfield2581192152__previewImage","previewVideo":"formmediagalleryfield2581192152__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_ = "mediaimage3136155830";
+var _namespace_ = "mediaimage592302873";
 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":"mediaimage3136155830__root"};
+export var classes = {"root":"mediaimage592302873__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":"--mediaimage3136155830-from","to":"--mediaimage3136155830-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":"--mediaimage592302873-from","to":"--mediaimage592302873-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_ = "overlay929412153";
+var _namespace_ = "overlay1409672230";
 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":"overlay929412153__root","iconOverlay":"overlay929412153__iconOverlay"};
+export var classes = {"root":"overlay1409672230__root","iconOverlay":"overlay1409672230__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_ = "medialoader3943402091";
+var _namespace_ = "medialoader482346947";
 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":"medialoader3943402091__root","loader":"medialoader3943402091__loader"};
+export var classes = {"root":"medialoader482346947__root","loader":"medialoader482346947__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_ = "mediatag1858236787";
+var _namespace_ = "mediatag2706192894";
 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":"mediatag1858236787__root"};
+export var classes = {"root":"mediatag2706192894__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_ = "cellmultidocumentedit837926089";
+var _namespace_ = "cellmultidocumentedit1306196521";
 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":"cellmultidocumentedit837926089__root","chipTrigger":"cellmultidocumentedit837926089__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit1306196521__root","chipTrigger":"cellmultidocumentedit1306196521__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_ = "formmultidocument2239173731";
+var _namespace_ = "formmultidocument2444181742";
 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":"formmultidocument2239173731__root","viewRoot":"formmultidocument2239173731__viewRoot","singleViewWrapper":"formmultidocument2239173731__singleViewWrapper","addDocumentButton":"formmultidocument2239173731__addDocumentButton"};
+export var classes = {"root":"formmultidocument2444181742__root","viewRoot":"formmultidocument2444181742__viewRoot","singleViewWrapper":"formmultidocument2444181742__singleViewWrapper","addDocumentButton":"formmultidocument2444181742__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/popover-defaults.ts

@@ -0,0 +1,17 @@
+import type { PopoverCommonProps } from '@wix/design-system';
+
+import { Z_INDEX_MODAL_POPOVER } from './common';
+
+// WDS popovers default to appendTo 'parent' (and 'top-start' placement for
+// the calendar), which clips them inside overflow containers. Consumers can
+// still override these through the components' popover props.
+export const calendarPopoverDefaults: PopoverCommonProps = {
+  placement: 'bottom-start',
+  appendTo: 'window',
+  zIndex: Z_INDEX_MODAL_POPOVER,
+};
+
+export const dropdownPopoverDefaults: PopoverCommonProps = {
+  appendTo: 'window',
+  zIndex: Z_INDEX_MODAL_POPOVER,
+};

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_ = "cellmultireferenceinput1250892502";
+var _namespace_ = "cellmultireferenceinput1405845939";
 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":"cellmultireferenceinput1250892502__root"};
+export var classes = {"root":"cellmultireferenceinput1405845939__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_ = "cellreferenceinput720776509";
+var _namespace_ = "cellreferenceinput3470850912";
 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":"cellreferenceinput720776509__root","autocomplete":"cellreferenceinput720776509__autocomplete"};
+export var classes = {"root":"cellreferenceinput3470850912__root","autocomplete":"cellreferenceinput3470850912__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_ = "richcontentdefaultvalueinput1140021856";
+var _namespace_ = "richcontentdefaultvalueinput2469384194";
 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":"richcontentdefaultvalueinput1140021856__root","richContentEditorContainer":"richcontentdefaultvalueinput1140021856__richContentEditorContainer","editor":"richcontentdefaultvalueinput1140021856__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput2469384194__root","richContentEditorContainer":"richcontentdefaultvalueinput2469384194__richContentEditorContainer","editor":"richcontentdefaultvalueinput2469384194__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_ = "richcontentforminput220691737";
+var _namespace_ = "richcontentforminput1355753260";
 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":"richcontentforminput220691737__root","editor":"richcontentforminput220691737__editor"};
+export var classes = {"root":"richcontentforminput1355753260__root","editor":"richcontentforminput1355753260__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_ = "richcontentformreadonlyinput3634540621";
+var _namespace_ = "richcontentformreadonlyinput936630358";
 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":"richcontentformreadonlyinput3634540621__root"};
+export var classes = {"root":"richcontentformreadonlyinput936630358__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_ = "fullscreenmodal1271704472";
+var _namespace_ = "fullscreenmodal1346235513";
 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":"fullscreenmodal1271704472__root","modalContent":"fullscreenmodal1271704472__modalContent"};
+export var classes = {"root":"fullscreenmodal1346235513__root","modalContent":"fullscreenmodal1346235513__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_ = "publishloader4081695798";
+var _namespace_ = "publishloader603065690";
 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":"publishloader4081695798__root","publishLoader":"publishloader4081695798__publishLoader"};
+export var classes = {"root":"publishloader603065690__root","publishLoader":"publishloader603065690__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_ = "togglefullscreenbutton3614480925";
+var _namespace_ = "togglefullscreenbutton3885331698";
 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":"togglefullscreenbutton3614480925__root"};
+export var classes = {"root":"togglefullscreenbutton3885331698__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_ = "richcontenteditor3438875334";
+var _namespace_ = "richcontenteditor271545960";
 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":"richcontenteditor3438875334__root","toolbarContainer":"richcontenteditor3438875334__toolbarContainer","footerToolbarContainer":"richcontenteditor3438875334__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3438875334__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3438875334__editor","modalEditor":"richcontenteditor3438875334__modalEditor"};
+export var classes = {"root":"richcontenteditor271545960__root","toolbarContainer":"richcontenteditor271545960__toolbarContainer","footerToolbarContainer":"richcontenteditor271545960__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor271545960__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor271545960__editor","modalEditor":"richcontenteditor271545960__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_ = "richcontenttoolbar1684532750";
+var _namespace_ = "richcontenttoolbar3560157227";
 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":"richcontenttoolbar1684532750__root","toolbar":"richcontenttoolbar1684532750__toolbar","toolbarButton":"richcontenttoolbar1684532750__toolbarButton","separator":"richcontenttoolbar1684532750__separator"};
+export var classes = {"root":"richcontenttoolbar3560157227__root","toolbar":"richcontenttoolbar3560157227__toolbar","toolbarButton":"richcontenttoolbar3560157227__toolbarButton","separator":"richcontenttoolbar3560157227__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_ = "richcontentviewer2057557000";
+var _namespace_ = "richcontentviewer1570259522";
 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":"richcontentviewer2057557000__root","viewer":"richcontentviewer2057557000__viewer","modalViewer":"richcontentviewer2057557000__modalViewer"};
+export var classes = {"root":"richcontentviewer1570259522__root","viewer":"richcontentviewer1570259522__viewer","modalViewer":"richcontentviewer1570259522__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};