@wix/patterns-fields 1.28.0 → 1.30.0

package/src/components/media-control/cell-media-edit-shell.st.css

@@ -0,0 +1,4 @@
+.root {
+    width: 100%;
+    height: 100%;
+}

package/src/components/media-control/cell-media-edit-shell.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "cellmediaeditshell3249443726";
+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":"cellmediaeditshell3249443726__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/src/components/media-control/cell-media-edit-shell.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Box, Loader } from '@wix/design-system';
+import type { BoxCssSizingProperty } from '@wix/design-system/dist/types/Box/Box.types';
+
+import { PasteURLForm, MediaFieldType } from './paste-url-form';
+import { classes } from './cell-media-edit-shell.st.css.js';
+import type { UseCellMediaEditResult } from './use-cell-media-edit';
+
+export interface CellMediaEditShellProps {
+  dataHook?: string;
+  /**
+   * The result of `useCellMediaEdit`; the shell reads containerRef, loading,
+   * the focus/blur handlers, and the pasteUrlForm props from it.
+   */
+  mediaEdit: Pick<
+    UseCellMediaEditResult,
+    | 'containerRef'
+    | 'loading'
+    | 'handleContainerFocus'
+    | 'handleContainerBlur'
+    | 'pasteUrlForm'
+  >;
+  /** Current cell value — forwarded to PasteURLForm as the pre-filled value. */
+  value: string | null;
+  /** Which validator/placeholder strings the PasteURLForm should use. */
+  fieldType: MediaFieldType;
+  /** Optional gap between the primary slot and the secondary actions. */
+  gap?: BoxCssSizingProperty;
+  /** Inner content — typically two slots: primary cell content + secondary actions. */
+  children: React.ReactNode;
+}
+
+/**
+ * Outer scaffolding shared by single-value media cell edit components.
+ *
+ * Renders the loading state, the focus-managed container (wired for
+ * `useCellEditKeyboard`), the inner flex Box, and the PasteURLForm modal at the
+ * end. Consumers supply only the inner primary/secondary controls via children.
+ */
+export const CellMediaEditShell: React.FC<CellMediaEditShellProps> = ({
+  dataHook,
+  mediaEdit,
+  value,
+  fieldType,
+  gap,
+  children,
+}) => {
+  const {
+    containerRef,
+    loading,
+    handleContainerFocus,
+    handleContainerBlur,
+    pasteUrlForm,
+  } = mediaEdit;
+
+  if (loading) {
+    return (
+      <Box
+        dataHook={dataHook}
+        verticalAlign="middle"
+        width="100%"
+        height="100%"
+        padding="0 8px"
+      >
+        <Loader dataHook="loader" size="tiny" />
+      </Box>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      data-hook={dataHook}
+      className={classes.root}
+      onFocus={handleContainerFocus}
+      onBlur={handleContainerBlur}
+    >
+      <Box
+        align="space-between"
+        verticalAlign="middle"
+        height="100%"
+        padding="0 8px"
+        gap={gap}
+        style={{ boxSizing: 'border-box' }}
+      >
+        {children}
+      </Box>
+
+      <PasteURLForm
+        title={pasteUrlForm.title}
+        value={value ?? undefined}
+        show={pasteUrlForm.isOpen}
+        closeModal={pasteUrlForm.handleClose}
+        onSave={pasteUrlForm.onSave}
+        fieldType={fieldType}
+      />
+    </div>
+  );
+};
+
+CellMediaEditShell.displayName = 'CellMediaEditShell';

package/src/components/media-control/index.ts

@@ -4,3 +4,5 @@ export * from './use-paste-url-form';
 export * from './use-document-delete';
 export * from './paste-url-button';
 export * from './paste-url-form';
+export * from './use-cell-media-edit';
+export * from './cell-media-edit-shell';

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_ = "pasteurlbutton3276368908";
+var _namespace_ = "pasteurlbutton625213010";
 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":"pasteurlbutton3276368908__root","iconButtonTooltip":"pasteurlbutton3276368908__iconButtonTooltip","iconButton":"pasteurlbutton3276368908__iconButton"};
+export var classes = {"root":"pasteurlbutton625213010__root","iconButtonTooltip":"pasteurlbutton625213010__iconButtonTooltip","iconButton":"pasteurlbutton625213010__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/use-cell-media-edit.ts

@@ -0,0 +1,134 @@
+import { useCallback, useRef } from 'react';
+import React from 'react';
+
+import { MEDIA_TYPES } from '../../utils/media-utils';
+import { useCellEditKeyboard } from '../../hooks';
+
+import { useMediaControl } from './use-media-control';
+import { usePasteURLForm } from './use-paste-url-form';
+
+export interface UseCellMediaEditParams {
+  mediaType: MEDIA_TYPES;
+  value: string | null;
+  onChange: (value: string | null) => void;
+  onCommit: () => void;
+  onCancel?: () => void;
+  /**
+   * Called before opening external UI (media manager / paste-URL form) so the
+   * table can set isEditing=true and protect cell focus while the modal is open.
+   */
+  onStartEdit?: () => void;
+  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;
+}
+
+export interface UseCellMediaEditResult {
+  containerRef: React.MutableRefObject<HTMLDivElement | null>;
+  loading: boolean;
+  callMedia: () => Promise<boolean>;
+  downloadMedia: (uri: string) => void;
+  /** Opens the media manager. If the user cancels, propagates onCancel. */
+  handleCallMedia: () => Promise<void>;
+  /** Clears the cell and commits. */
+  handleDelete: () => void;
+  /**
+   * Curried opener: pass the modal's `title` / preset `value`, get back the
+   * click handler. Also signals onStartEdit so the cell keeps focus while the
+   * modal is up.
+   */
+  startEditAndOpenPasteUrl: (params: {
+    title: string;
+    value?: string;
+  }) => () => void;
+  pasteUrlForm: {
+    isOpen: boolean;
+    title: string;
+    onSave: (value: string) => void;
+    /** onClose composed with onCancel — call from PasteURLForm.closeModal. */
+    handleClose: () => void;
+  };
+  handleContainerFocus: () => void;
+  handleContainerBlur: (e: React.FocusEvent) => void;
+}
+
+/**
+ * Shared state + handlers for single-value media cell edit components
+ * (image / document / audio / video / …). Each consumer renders its own
+ * primary/secondary content; this hook owns the wiring to useMediaControl,
+ * usePasteURLForm, useCellEditKeyboard, and the standard onCommit/onCancel
+ * dance.
+ */
+export function useCellMediaEdit({
+  mediaType,
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  onStartEdit,
+  inputRef,
+}: UseCellMediaEditParams): UseCellMediaEditResult {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const onMediaChange = useCallback(
+    (uri: string) => {
+      onChange(uri);
+      onCommit();
+    },
+    [onChange, onCommit],
+  );
+
+  const { callMedia, downloadMedia, loading } = useMediaControl({
+    mediaType,
+    value: value ?? undefined,
+    onChange: onMediaChange,
+  });
+
+  const handleCallMedia = useCallback(async () => {
+    onStartEdit?.();
+    const committed = await callMedia();
+    if (!committed) {
+      onCancel?.();
+    }
+  }, [onStartEdit, callMedia, onCancel]);
+
+  const { isOpen, title, onOpen, onClose, onSave } = usePasteURLForm({
+    onChange: onMediaChange,
+  });
+
+  const handleFormClose = useCallback(() => {
+    onClose();
+    onCancel?.();
+  }, [onClose, onCancel]);
+
+  const startEditAndOpenPasteUrl = useCallback(
+    (params: { title: string; value?: string }) =>
+      () => {
+        onStartEdit?.();
+        onOpen(params)();
+      },
+    [onStartEdit, onOpen],
+  );
+
+  const handleDelete = useCallback(() => {
+    onChange(null);
+    onCommit();
+  }, [onChange, onCommit]);
+
+  const { handleContainerFocus, handleContainerBlur } = useCellEditKeyboard({
+    containerRef,
+    onCancel,
+    inputRef,
+  });
+
+  return {
+    containerRef,
+    loading,
+    callMedia,
+    downloadMedia,
+    handleCallMedia,
+    handleDelete,
+    startEditAndOpenPasteUrl,
+    pasteUrlForm: { isOpen, title, onSave, handleClose: handleFormClose },
+    handleContainerFocus,
+    handleContainerBlur,
+  };
+}

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_ = "formmediagalleryfield3168997726";
+var _namespace_ = "formmediagalleryfield2467681512";
 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":"formmediagalleryfield3168997726__root","container":"formmediagalleryfield3168997726__container","viewBox":"formmediagalleryfield3168997726__viewBox","addItemWrapper":"formmediagalleryfield3168997726__addItemWrapper","addItem":"formmediagalleryfield3168997726__addItem","overlay":"formmediagalleryfield3168997726__overlay","image":"formmediagalleryfield3168997726__image","previewImage":"formmediagalleryfield3168997726__previewImage","previewVideo":"formmediagalleryfield3168997726__previewVideo"};
+export var classes = {"root":"formmediagalleryfield2467681512__root","container":"formmediagalleryfield2467681512__container","viewBox":"formmediagalleryfield2467681512__viewBox","addItemWrapper":"formmediagalleryfield2467681512__addItemWrapper","addItem":"formmediagalleryfield2467681512__addItem","overlay":"formmediagalleryfield2467681512__overlay","image":"formmediagalleryfield2467681512__image","previewImage":"formmediagalleryfield2467681512__previewImage","previewVideo":"formmediagalleryfield2467681512__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_ = "mediaimage1068707436";
+var _namespace_ = "mediaimage1036556018";
 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":"mediaimage1068707436__root"};
+export var classes = {"root":"mediaimage1036556018__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":"--mediaimage1068707436-from","to":"--mediaimage1068707436-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":"--mediaimage1036556018-from","to":"--mediaimage1036556018-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_ = "overlay3293165175";
+var _namespace_ = "overlay1563249880";
 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":"overlay3293165175__root","iconOverlay":"overlay3293165175__iconOverlay"};
+export var classes = {"root":"overlay1563249880__root","iconOverlay":"overlay1563249880__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {"iconShadow":"drop-shadow(0 1px 1px rgba(22, 45, 61, 0.6))"}; 
-export var vars = {"wds-color-white":"--wds-color-white","wsr-color-D80":"--overlay3293165175-wsr-color-D80"}; 
+export var vars = {"wds-color-white":"--wds-color-white","wsr-color-D80":"--overlay1563249880-wsr-color-D80"}; 
 
 
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader1857409334";
+var _namespace_ = "medialoader2031441929";
 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":"medialoader1857409334__root","loader":"medialoader1857409334__loader"};
+export var classes = {"root":"medialoader2031441929__root","loader":"medialoader2031441929__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_ = "mediatag1718424585";
+var _namespace_ = "mediatag1768943632";
 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":"mediatag1718424585__root"};
+export var classes = {"root":"mediatag1768943632__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_ = "formmultidocument3931866471";
+var _namespace_ = "formmultidocument2352985282";
 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":"formmultidocument3931866471__root","viewRoot":"formmultidocument3931866471__viewRoot","singleViewWrapper":"formmultidocument3931866471__singleViewWrapper","addDocumentButton":"formmultidocument3931866471__addDocumentButton"};
+export var classes = {"root":"formmultidocument2352985282__root","viewRoot":"formmultidocument2352985282__viewRoot","singleViewWrapper":"formmultidocument2352985282__singleViewWrapper","addDocumentButton":"formmultidocument2352985282__addDocumentButton"};
 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_ = "cellreferenceinput655467192";
+var _namespace_ = "cellreferenceinput2045539434";
 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":"cellreferenceinput655467192__root","autocomplete":"cellreferenceinput655467192__autocomplete"};
+export var classes = {"root":"cellreferenceinput2045539434__root","autocomplete":"cellreferenceinput2045539434__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_ = "richcontentdefaultvalueinput1174807734";
+var _namespace_ = "richcontentdefaultvalueinput1265396602";
 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":"richcontentdefaultvalueinput1174807734__root","richContentEditorContainer":"richcontentdefaultvalueinput1174807734__richContentEditorContainer","editor":"richcontentdefaultvalueinput1174807734__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput1265396602__root","richContentEditorContainer":"richcontentdefaultvalueinput1265396602__richContentEditorContainer","editor":"richcontentdefaultvalueinput1265396602__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"topToolbarHeight":"--richcontentdefaultvalueinput1174807734-topToolbarHeight","bottomToolbarHeight":"--richcontentdefaultvalueinput1174807734-bottomToolbarHeight"}; 
+export var vars = {"topToolbarHeight":"--richcontentdefaultvalueinput1265396602-topToolbarHeight","bottomToolbarHeight":"--richcontentdefaultvalueinput1265396602-bottomToolbarHeight"}; 
 
 
 

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_ = "richcontentforminput384313153";
+var _namespace_ = "richcontentforminput1859297185";
 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":"richcontentforminput384313153__root","editor":"richcontentforminput384313153__editor"};
+export var classes = {"root":"richcontentforminput1859297185__root","editor":"richcontentforminput1859297185__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-blue-300":"--wds-color-blue-300","wds-border-radius-300":"--wds-border-radius-300","wds-color-blue-100":"--wds-color-blue-100","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard","topToolbarHeight":"--richcontentforminput384313153-topToolbarHeight","bottomToolbarHeight":"--richcontentforminput384313153-bottomToolbarHeight"}; 
+export var vars = {"wds-color-blue-300":"--wds-color-blue-300","wds-border-radius-300":"--wds-border-radius-300","wds-color-blue-100":"--wds-color-blue-100","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard","topToolbarHeight":"--richcontentforminput1859297185-topToolbarHeight","bottomToolbarHeight":"--richcontentforminput1859297185-bottomToolbarHeight"}; 
 
 
 

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_ = "richcontentformreadonlyinput3090771215";
+var _namespace_ = "richcontentformreadonlyinput1244129761";
 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":"richcontentformreadonlyinput3090771215__root"};
+export var classes = {"root":"richcontentformreadonlyinput1244129761__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_ = "fullscreenmodal988372479";
+var _namespace_ = "fullscreenmodal2486232399";
 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":"fullscreenmodal988372479__root","modalContent":"fullscreenmodal988372479__modalContent"};
+export var classes = {"root":"fullscreenmodal2486232399__root","modalContent":"fullscreenmodal2486232399__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_ = "publishloader1586009701";
+var _namespace_ = "publishloader4284818147";
 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":"publishloader1586009701__root","publishLoader":"publishloader1586009701__publishLoader"};
+export var classes = {"root":"publishloader4284818147__root","publishLoader":"publishloader4284818147__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_ = "togglefullscreenbutton348113547";
+var _namespace_ = "togglefullscreenbutton1800781088";
 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":"togglefullscreenbutton348113547__root"};
+export var classes = {"root":"togglefullscreenbutton1800781088__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_ = "richcontenteditor1516217105";
+var _namespace_ = "richcontenteditor4138500072";
 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":"richcontenteditor1516217105__root","toolbarContainer":"richcontenteditor1516217105__toolbarContainer","footerToolbarContainer":"richcontenteditor1516217105__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1516217105__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1516217105__editor","modalEditor":"richcontenteditor1516217105__modalEditor"};
+export var classes = {"root":"richcontenteditor4138500072__root","toolbarContainer":"richcontenteditor4138500072__toolbarContainer","footerToolbarContainer":"richcontenteditor4138500072__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor4138500072__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor4138500072__editor","modalEditor":"richcontenteditor4138500072__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-font-family-default":"--richcontenteditor1516217105-wds-font-family-default"}; 
+export var vars = {"wds-font-family-default":"--richcontenteditor4138500072-wds-font-family-default"}; 
 
 
 

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_ = "richcontenttoolbar1081660084";
+var _namespace_ = "richcontenttoolbar929226885";
 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":"richcontenttoolbar1081660084__root","toolbar":"richcontenttoolbar1081660084__toolbar","toolbarButton":"richcontenttoolbar1081660084__toolbarButton"};
+export var classes = {"root":"richcontenttoolbar929226885__root","toolbar":"richcontenttoolbar929226885__toolbar","toolbarButton":"richcontenttoolbar929226885__toolbarButton"};
 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_ = "richcontentviewer528812382";
+var _namespace_ = "richcontentviewer2436847825";
 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":"richcontentviewer528812382__root","viewer":"richcontentviewer528812382__viewer","modalViewer":"richcontentviewer528812382__modalViewer"};
+export var classes = {"root":"richcontentviewer2436847825__root","viewer":"richcontentviewer2436847825__viewer","modalViewer":"richcontentviewer2436847825__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};