@wix/patterns-fields 1.42.0 → 1.44.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay3531512781";
+var _namespace_ = "thumbnailreplaceoverlay3234372462";
 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":"thumbnailreplaceoverlay3531512781__root","icon":"thumbnailreplaceoverlay3531512781__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay3234372462__root","icon":"thumbnailreplaceoverlay3234372462__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_ = "cellmediaeditshell2365634993";
+var _namespace_ = "cellmediaeditshell3278014357";
 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":"cellmediaeditshell2365634993__root"};
+export var classes = {"root":"cellmediaeditshell3278014357__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_ = "pasteurlbutton19109306";
+var _namespace_ = "pasteurlbutton2508309626";
 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":"pasteurlbutton19109306__root","iconButtonTooltip":"pasteurlbutton19109306__iconButtonTooltip","iconButton":"pasteurlbutton19109306__iconButton"};
+export var classes = {"root":"pasteurlbutton2508309626__root","iconButtonTooltip":"pasteurlbutton2508309626__iconButtonTooltip","iconButton":"pasteurlbutton2508309626__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_ = "formmediagalleryfield494754511";
+var _namespace_ = "formmediagalleryfield177580183";
 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":"formmediagalleryfield494754511__root","container":"formmediagalleryfield494754511__container","viewBox":"formmediagalleryfield494754511__viewBox","addItemWrapper":"formmediagalleryfield494754511__addItemWrapper","addItem":"formmediagalleryfield494754511__addItem","overlay":"formmediagalleryfield494754511__overlay","image":"formmediagalleryfield494754511__image","previewImage":"formmediagalleryfield494754511__previewImage","previewVideo":"formmediagalleryfield494754511__previewVideo"};
+export var classes = {"root":"formmediagalleryfield177580183__root","container":"formmediagalleryfield177580183__container","viewBox":"formmediagalleryfield177580183__viewBox","addItemWrapper":"formmediagalleryfield177580183__addItemWrapper","addItem":"formmediagalleryfield177580183__addItem","overlay":"formmediagalleryfield177580183__overlay","image":"formmediagalleryfield177580183__image","previewImage":"formmediagalleryfield177580183__previewImage","previewVideo":"formmediagalleryfield177580183__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_ = "mediaimage3088306492";
+var _namespace_ = "mediaimage3330258919";
 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":"mediaimage3088306492__root"};
+export var classes = {"root":"mediaimage3330258919__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":"--mediaimage3088306492-from","to":"--mediaimage3088306492-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":"--mediaimage3330258919-from","to":"--mediaimage3330258919-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_ = "overlay3159494699";
+var _namespace_ = "overlay3988259752";
 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":"overlay3159494699__root","iconOverlay":"overlay3159494699__iconOverlay"};
+export var classes = {"root":"overlay3988259752__root","iconOverlay":"overlay3988259752__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_ = "medialoader446546935";
+var _namespace_ = "medialoader258840642";
 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":"medialoader446546935__root","loader":"medialoader446546935__loader"};
+export var classes = {"root":"medialoader258840642__root","loader":"medialoader258840642__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_ = "mediatag4224927626";
+var _namespace_ = "mediatag3640290777";
 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":"mediatag4224927626__root"};
+export var classes = {"root":"mediatag3640290777__root"};
 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_ = "formmultidocument3120106083";
+var _namespace_ = "formmultidocument2441635574";
 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":"formmultidocument3120106083__root","viewRoot":"formmultidocument3120106083__viewRoot","singleViewWrapper":"formmultidocument3120106083__singleViewWrapper","addDocumentButton":"formmultidocument3120106083__addDocumentButton"};
+export var classes = {"root":"formmultidocument2441635574__root","viewRoot":"formmultidocument2441635574__viewRoot","singleViewWrapper":"formmultidocument2441635574__singleViewWrapper","addDocumentButton":"formmultidocument2441635574__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/cell-multi-reference-input.st.css

@@ -0,0 +1,20 @@
+@property st-global(--wds-input-border-color);
+@property st-global(--wds-input-border-color-hover);
+@property st-global(--wds-input-border-color-focus);
+@property st-global(--wds-input-background-fill-default);
+@property st-global(--wds-input-background-fill-hover);
+@property st-global(--wds-input-shadow-focus-standard);
+
+/* Drop the input border / focus ring / fill so the MultiSelect sits inline
+   within the cell. Same WDS custom-property approach the singular reference
+   input uses (no !important, no class targeting). */
+.root {
+  width: 100%;
+  box-sizing: border-box;
+  --wds-input-border-color: transparent;
+  --wds-input-border-color-hover: transparent;
+  --wds-input-border-color-focus: transparent;
+  --wds-input-background-fill-default: transparent;
+  --wds-input-background-fill-hover: transparent;
+  --wds-input-shadow-focus-standard: 0 0 0 0 transparent;
+}

package/src/components/reference/cell-multi-reference-input.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "cellmultireferenceinput2476850794";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style: import("@stylable/runtime").STFunction = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"cellmultireferenceinput2476850794__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-input-border-color":"--wds-input-border-color","wds-input-border-color-hover":"--wds-input-border-color-hover","wds-input-border-color-focus":"--wds-input-border-color-focus","wds-input-background-fill-default":"--wds-input-background-fill-default","wds-input-background-fill-hover":"--wds-input-background-fill-hover","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard"}; 
+
+
+
+

package/src/components/reference/cell-multi-reference-input.tsx

@@ -0,0 +1,243 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import {
+  Divider,
+  ListItemAction,
+  MultiSelect,
+  listItemSelectBuilder,
+} from '@wix/design-system';
+import { useTranslations } from '../../hooks/use-translations';
+import { ReferenceAvatar } from './reference-avatar';
+import type { CellMultiReferenceItem } from './cell-multi-reference-view';
+import { st, classes } from './cell-multi-reference-input.st.css.js';
+
+export type { CellMultiReferenceItem };
+
+export interface CellMultiReferenceInputHandle {
+  focus: () => void;
+  hideOptions: () => void;
+}
+
+export interface CellMultiReferenceInputProps {
+  /** Dropdown options — already filtered/paginated by the caller. */
+  items: CellMultiReferenceItem[];
+  /** Currently selected references, rendered as removable chips. */
+  selectedItems: CellMultiReferenceItem[];
+  /** Text shown in the search input. */
+  value: string;
+  onChange: (value: string) => void;
+  onSelect: (item: CellMultiReferenceItem) => void;
+  onRemoveTag: (id: string) => void;
+  onBlur?: () => void;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+  infiniteScroll?: boolean;
+  hasMore?: boolean;
+  loadMore?: () => void;
+  fixedFooter?: React.ReactNode;
+  /** When provided, renders an "Open Collection" action at the bottom of the dropdown. */
+  onOpenCollection?: () => void;
+  /** Open dropdown immediately on mount (single-click / type-to-edit triggers). */
+  autoOpen?: boolean;
+  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;
+  dataHook?: string;
+}
+
+const ROW_HEIGHT = 30;
+const MAX_NUM_ROWS = 7;
+
+interface MultiSelectHandle {
+  focus?: () => void;
+  showOptions?: () => void;
+  hideOptions?: () => void;
+}
+
+export const CellMultiReferenceInput = React.forwardRef<
+  CellMultiReferenceInputHandle,
+  CellMultiReferenceInputProps
+>(
+  (
+    {
+      items,
+      selectedItems,
+      value,
+      onChange,
+      onSelect,
+      onRemoveTag,
+      onBlur,
+      onKeyDown,
+      infiniteScroll,
+      hasMore,
+      loadMore,
+      fixedFooter,
+      onOpenCollection,
+      autoOpen,
+      inputRef,
+      dataHook,
+    },
+    ref,
+  ) => {
+    const { t } = useTranslations();
+    const msRef = useRef<MultiSelectHandle | null>(null);
+    const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+    React.useImperativeHandle(ref, () => ({
+      focus: () => msRef.current?.focus?.(),
+      hideOptions: () => msRef.current?.hideOptions?.(),
+    }));
+
+    useEffect(() => {
+      if (autoOpen) {
+        msRef.current?.focus?.();
+        requestAnimationFrame(() => msRef.current?.showOptions?.());
+      }
+      // Intentionally run only on mount
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // Expose the MultiSelect input element to the framework's inputRef so
+    // type-to-edit + framework-level focus management work.
+    useEffect(() => {
+      if (!inputRef) {
+        return;
+      }
+      const el = wrapperRef.current?.querySelector<HTMLInputElement>('input');
+      if (el) {
+        inputRef.current = { focus: () => el.focus() };
+      }
+    }, [inputRef]);
+
+    const untitled = t('patterns-fields.reference.untitled');
+
+    const tags = useMemo(
+      () =>
+        selectedItems.map((item) => ({
+          id: item.id,
+          dataHook: 'multi-reference-edit-tag',
+          label: item.name || untitled,
+          thumb: (
+            <ReferenceAvatar
+              name={item.name || untitled}
+              image={item.image}
+              size="size18"
+            />
+          ),
+        })),
+      [selectedItems, untitled],
+    );
+
+    const options = useMemo(
+      () =>
+        items.map((item) =>
+          listItemSelectBuilder({
+            id: item.id,
+            title: item.name || untitled,
+            label: item.name || untitled,
+            prefix: (
+              <ReferenceAvatar
+                name={item.name || untitled}
+                image={item.image}
+              />
+            ),
+            size: 'small',
+            ellipsis: true,
+          }),
+        ),
+      [items, untitled],
+    );
+
+    const handleChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value),
+      [onChange],
+    );
+
+    const handleSelect = useCallback(
+      (option: { id: string | number }) => {
+        const item = items.find((i) => i.id === String(option.id));
+        if (item) {
+          onSelect(item);
+        }
+      },
+      [items, onSelect],
+    );
+
+    const handleRemoveTag = useCallback(
+      (id: string | number) => onRemoveTag(String(id)),
+      [onRemoveTag],
+    );
+
+    const combinedFooter = useMemo(() => {
+      if (!fixedFooter && !onOpenCollection) {
+        return undefined;
+      }
+      return (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        <div onMouseDown={(e) => e.preventDefault()}>
+          {fixedFooter}
+          {onOpenCollection && <Divider />}
+          {onOpenCollection && (
+            <ListItemAction
+              title={t('patterns-fields.reference.open_collection')}
+              size="small"
+              onClick={() => {
+                msRef.current?.hideOptions?.();
+                onOpenCollection();
+              }}
+              dataHook="reference-open-collection"
+            />
+          )}
+        </div>
+      );
+    }, [fixedFooter, onOpenCollection, t]);
+
+    return (
+      // Prevent EditableCell's row click/dblclick handlers from firing when
+      // the user interacts with the input or dropdown.
+      <div
+        ref={wrapperRef}
+        className={st(classes.root)}
+        data-hook={dataHook}
+        onClick={(e) => e.stopPropagation()}
+        onMouseDown={(e) => e.stopPropagation()}
+        // Capture phase so keys (e.g. Escape) can be intercepted before the
+        // WDS MultiSelect handles and stops them on the inner input.
+        onKeyDownCapture={onKeyDown}
+      >
+        <MultiSelect
+          ref={(instance: MultiSelectHandle | null) => {
+            msRef.current = instance;
+          }}
+          dataHook="multi-reference-input-multiselect"
+          size="small"
+          border="none"
+          tags={tags}
+          options={options}
+          predicate={() => true}
+          value={value}
+          onChange={handleChange}
+          onSelect={handleSelect}
+          onRemoveTag={handleRemoveTag}
+          onBlur={onBlur}
+          placeholder={
+            selectedItems.length === 0
+              ? t('auto-patterns.fields.select_placeholder')
+              : ''
+          }
+          emptyStateMessage={t('auto-patterns.fields.no_results_found')}
+          maxHeightPixels={ROW_HEIGHT * MAX_NUM_ROWS}
+          infiniteScroll={infiniteScroll}
+          hasMore={hasMore}
+          loadMore={loadMore}
+          fixedFooter={combinedFooter}
+          popoverProps={{
+            appendTo: 'window',
+            flip: true,
+            fixed: false,
+            placement: 'bottom-start',
+            zIndex: 9999,
+          }}
+        />
+      </div>
+    );
+  },
+);
+
+CellMultiReferenceInput.displayName = 'CellMultiReferenceInput';

package/src/components/reference/cell-multi-reference-view.tsx

@@ -0,0 +1,81 @@
+import React, { useMemo } from 'react';
+import { Box, TagList } from '@wix/design-system';
+import { useTranslations } from '../../hooks/use-translations';
+import { ReferenceAvatar } from './reference-avatar';
+
+export interface CellMultiReferenceItem {
+  id: string;
+  name: string;
+  image?: string;
+}
+
+export interface CellMultiReferenceViewProps {
+  /** Resolved reference items to display as avatar chips. */
+  items: CellMultiReferenceItem[];
+  dataHook?: string;
+  /**
+   * Stable DOM id prefix for the tags. WDS Tag requires `id` to be present;
+   * each tag uses `${fieldId}-${index}`. Callers are responsible for ensuring
+   * uniqueness (e.g., derive from columnId + rowKey).
+   */
+  fieldId: string;
+}
+
+export const CellMultiReferenceView: React.FC<CellMultiReferenceViewProps> = ({
+  items,
+  dataHook,
+  fieldId,
+}) => {
+  const { t } = useTranslations();
+
+  const tags = useMemo(
+    () =>
+      items.map((item, i) => {
+        const label = item.name || t('patterns-fields.reference.untitled');
+        return {
+          id: `${fieldId}-${i}`,
+          dataHook: 'cell-multi-reference-tag',
+          thumb: (
+            <ReferenceAvatar name={label} image={item.image} size="size18" />
+          ),
+          children: label,
+          removable: false as const,
+        };
+      }),
+    [items, fieldId, t],
+  );
+
+  if (tags.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box
+      dataHook={dataHook}
+      direction="vertical"
+      verticalAlign="middle"
+      padding="0 8px"
+      height="100%"
+      width="100%"
+      minWidth={0}
+    >
+      <TagList
+        overflowMode={{
+          type: 'collapse',
+          overflowTooltipContent: (hiddenTags) =>
+            hiddenTags
+              .map((tag) =>
+                typeof tag.children === 'string' ? tag.children : '',
+              )
+              .filter(Boolean)
+              .join(', '),
+        }}
+        size="small"
+        dataHook="cell-multi-reference-tags"
+        tags={tags}
+      />
+    </Box>
+  );
+};
+
+CellMultiReferenceView.displayName = 'CellMultiReferenceView';

package/src/components/reference/cell-reference-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput1850223869";
+var _namespace_ = "cellreferenceinput1356500309";
 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":"cellreferenceinput1850223869__root","autocomplete":"cellreferenceinput1850223869__autocomplete"};
+export var classes = {"root":"cellreferenceinput1356500309__root","autocomplete":"cellreferenceinput1356500309__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/index.ts

@@ -1,3 +1,5 @@
 export * from './reference-avatar';
 export * from './cell-reference-view';
 export * from './cell-reference-input';
+export * from './cell-multi-reference-view';
+export * from './cell-multi-reference-input';

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_ = "richcontentdefaultvalueinput2406188272";
+var _namespace_ = "richcontentdefaultvalueinput807533167";
 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":"richcontentdefaultvalueinput2406188272__root","richContentEditorContainer":"richcontentdefaultvalueinput2406188272__richContentEditorContainer","editor":"richcontentdefaultvalueinput2406188272__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput807533167__root","richContentEditorContainer":"richcontentdefaultvalueinput807533167__richContentEditorContainer","editor":"richcontentdefaultvalueinput807533167__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_ = "richcontentforminput3680693687";
+var _namespace_ = "richcontentforminput296698546";
 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":"richcontentforminput3680693687__root","editor":"richcontentforminput3680693687__editor"};
+export var classes = {"root":"richcontentforminput296698546__root","editor":"richcontentforminput296698546__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_ = "richcontentformreadonlyinput1793260671";
+var _namespace_ = "richcontentformreadonlyinput880812762";
 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":"richcontentformreadonlyinput1793260671__root"};
+export var classes = {"root":"richcontentformreadonlyinput880812762__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_ = "fullscreenmodal1180150992";
+var _namespace_ = "fullscreenmodal3873651208";
 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":"fullscreenmodal1180150992__root","modalContent":"fullscreenmodal1180150992__modalContent"};
+export var classes = {"root":"fullscreenmodal3873651208__root","modalContent":"fullscreenmodal3873651208__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_ = "publishloader2485081818";
+var _namespace_ = "publishloader1120004865";
 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":"publishloader2485081818__root","publishLoader":"publishloader2485081818__publishLoader"};
+export var classes = {"root":"publishloader1120004865__root","publishLoader":"publishloader1120004865__publishLoader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};