@wix/patterns-fields 1.124.0 → 1.125.0

package/src/components/media-image-field/media-image-actions.tsx

@@ -0,0 +1,205 @@
+import React, { useCallback, useEffect } from 'react';
+import { IconButton, PopoverMenu, Tooltip } from '@wix/design-system';
+import {
+  Delete,
+  Download,
+  Link,
+  Maximize,
+  MoreSmall,
+  Replace,
+} from '@wix/wix-ui-icons-common/lazy';
+import { useTranslations } from '../../hooks';
+import type { MediaImageValue } from '../../types/media-image';
+import { getImageSource } from '../../utils/get-image-source';
+import { isExternalMediaImage } from '../../utils/media-image-value';
+import { executeDownloading } from '../../utils/media-utils';
+import { MediaPreviewModal } from '../media-gallery/media-preview-modal';
+
+interface MenuTriggerProps {
+  isOpen: boolean;
+  toggle: () => void;
+  /** Lets WDS put focus back here when the menu closes. */
+  buttonRef?: React.RefObject<HTMLElement>;
+  onOpenChange?: (isOpen: boolean) => void;
+  ariaLabel: string;
+  dataHook: string;
+}
+
+/** WDS shows the menu's open state only to its trigger, so the trigger
+ *  reports it. */
+const MenuTrigger: React.FC<MenuTriggerProps> = ({
+  isOpen,
+  toggle,
+  buttonRef,
+  onOpenChange,
+  ariaLabel,
+  dataHook,
+}) => {
+  useEffect(() => {
+    onOpenChange?.(isOpen);
+  }, [isOpen, onOpenChange]);
+
+  return (
+    <IconButton
+      ref={buttonRef}
+      size="small"
+      skin="light"
+      priority="secondary"
+      dataHook={dataHook}
+      ariaLabel={ariaLabel}
+      aria-haspopup="menu"
+      aria-expanded={isOpen}
+      onClick={toggle}
+    >
+      <MoreSmall />
+    </IconButton>
+  );
+};
+
+export interface MediaImageActionsProps {
+  /** Every action's data-hook starts with it. */
+  dataHook: string;
+  /** Opens the media manager. The button is disabled without it. */
+  onReplace?: () => void;
+  /** The menu item is disabled without it. */
+  onReplaceWithUrl?: () => void;
+  onPreview: () => void;
+  onDownload: () => void;
+  /** The menu item is disabled without it. */
+  onDelete?: () => void;
+  onMenuOpenChange?: (isOpen: boolean) => void;
+  menuZIndex: number;
+}
+
+/** The actions over a `MEDIA_IMAGE` image: Replace, and a menu with Replace
+ *  with URL, Preview, Download and Delete. */
+export const MediaImageActions: React.FC<MediaImageActionsProps> = ({
+  dataHook,
+  onReplace,
+  onReplaceWithUrl,
+  onPreview,
+  onDownload,
+  onDelete,
+  onMenuOpenChange,
+  menuZIndex,
+}) => {
+  const { t } = useTranslations();
+
+  return (
+    <>
+      <Tooltip content={t('CMS.image.replace')} appendTo="window">
+        <IconButton
+          size="small"
+          skin="light"
+          priority="secondary"
+          dataHook={`${dataHook}-replace-button`}
+          ariaLabel={t('CMS.image.replace')}
+          disabled={!onReplace}
+          onClick={onReplace}
+        >
+          <Replace />
+        </IconButton>
+      </Tooltip>
+      <PopoverMenu
+        textSize="small"
+        appendTo="window"
+        zIndex={menuZIndex}
+        triggerElement={({ isOpen, toggle, ref }) => (
+          <MenuTrigger
+            isOpen={isOpen}
+            toggle={toggle}
+            buttonRef={ref}
+            onOpenChange={onMenuOpenChange}
+            ariaLabel={t('auto-patterns.fields.more_actions_tooltip')}
+            dataHook={`${dataHook}-more-button`}
+          />
+        )}
+      >
+        <PopoverMenu.MenuItem
+          dataHook={`${dataHook}-action-replace-url`}
+          text={t('CMS.image.replaceWithUrl.button')}
+          prefixIcon={<Link />}
+          disabled={!onReplaceWithUrl}
+          onClick={() => onReplaceWithUrl?.()}
+        />
+        <PopoverMenu.MenuItem
+          dataHook={`${dataHook}-action-preview`}
+          text={t('CMS.mediaGallery.preview')}
+          prefixIcon={<Maximize />}
+          onClick={onPreview}
+        />
+        <PopoverMenu.MenuItem
+          dataHook={`${dataHook}-action-download`}
+          text={t('CMS.image.download')}
+          prefixIcon={<Download />}
+          onClick={onDownload}
+        />
+        <PopoverMenu.Divider />
+        <PopoverMenu.MenuItem
+          dataHook={`${dataHook}-action-delete`}
+          text={t('CMS.image.clear')}
+          skin="destructive"
+          prefixIcon={<Delete />}
+          disabled={!onDelete}
+          onClick={() => onDelete?.()}
+        />
+      </PopoverMenu>
+    </>
+  );
+};
+
+MediaImageActions.displayName = 'MediaImageActions';
+
+/** Downloads the image: through the Media Manager, or straight from an
+ *  external URL, which the Media Manager can't make a download link for. */
+export const useMediaImageDownload = (
+  image: MediaImageValue | null,
+  downloadMedia: (src: string) => void,
+) =>
+  useCallback(() => {
+    if (isExternalMediaImage(image)) {
+      executeDownloading(image.url);
+      return;
+    }
+    const src = getImageSource(image);
+    if (src) {
+      downloadMedia(src);
+    }
+  }, [image, downloadMedia]);
+
+export interface MediaImagePreviewModalProps {
+  isOpen: boolean;
+  image: MediaImageValue;
+  onClose: () => void;
+  onReplace: () => void;
+  onDelete?: () => void;
+  onDownload: () => void;
+  readOnly?: boolean;
+}
+
+export const MediaImagePreviewModal: React.FC<MediaImagePreviewModalProps> = ({
+  isOpen,
+  image,
+  onClose,
+  onReplace,
+  onDelete,
+  onDownload,
+  readOnly,
+}) => (
+  <MediaPreviewModal
+    isOpen={isOpen}
+    value={getImageSource(image)}
+    onClose={onClose}
+    onRequestMedia={onReplace}
+    onClearMedia={onDelete}
+    onDownloadMedia={onDownload}
+    readOnly={readOnly}
+    textKeys={{
+      replace: 'CMS.image.replace',
+      download: 'CMS.image.download',
+      delete: 'CMS.image.clear',
+    }}
+  />
+);
+
+MediaImagePreviewModal.displayName = 'MediaImagePreviewModal';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimageview3359823944";
+var _namespace_ = "mediaimageview2431025458";
 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":"mediaimageview3359823944__root","altTextPlaceholder":"mediaimageview3359823944__altTextPlaceholder"};
+export var classes = {"root":"mediaimageview2431025458__root","altTextPlaceholder":"mediaimageview2431025458__altTextPlaceholder"};
 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_ = "mediatag2648949588";
+var _namespace_ = "mediatag4208340969";
 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":"mediatag2648949588__root"};
+export var classes = {"root":"mediatag4208340969__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_ = "cellmultidocumentedit1969728076";
+var _namespace_ = "cellmultidocumentedit2557208302";
 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":"cellmultidocumentedit1969728076__root","chipTrigger":"cellmultidocumentedit1969728076__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit2557208302__root","chipTrigger":"cellmultidocumentedit2557208302__chipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/cell-multi-document-edit.tsx

@@ -236,14 +236,11 @@ export const CellMultiDocumentEdit: React.FC<CellMultiDocumentEditProps> = ({
               <Box
                 key={`${fieldId}-${index}`}
                 verticalAlign="middle"
-                // Cap the per-chip wrapper at the chip strip's content width so a
-                // single long filename can't overflow the column. Apply on the
-                // Box (a flex item of the strip) rather than the Tag — Tag's
-                // PopoverNextTrigger parent has no max-width, so a percentage
-                // clamp on the Tag itself is degenerate at narrow widths.
-                style={{ minWidth: 0, maxWidth: '100%' }}
+                minWidth={0}
+                maxWidth="100%"
               >
                 <PopoverMenu
+                  fluid
                   textSize="small"
                   appendTo="window"
                   // Function-form trigger: WDS Tag renders a plain <span>, so it

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_ = "formmultidocument3706067851";
+var _namespace_ = "formmultidocument2234993296";
 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":"formmultidocument3706067851__root","viewRoot":"formmultidocument3706067851__viewRoot","singleViewWrapper":"formmultidocument3706067851__singleViewWrapper","addDocumentButton":"formmultidocument3706067851__addDocumentButton"};
+export var classes = {"root":"formmultidocument2234993296__root","viewRoot":"formmultidocument2234993296__viewRoot","singleViewWrapper":"formmultidocument2234993296__singleViewWrapper","addDocumentButton":"formmultidocument2234993296__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_ = "cellmultireferenceinput2322369013";
+var _namespace_ = "cellmultireferenceinput3594378776";
 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":"cellmultireferenceinput2322369013__root"};
+export var classes = {"root":"cellmultireferenceinput3594378776__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmultireferenceview1878943929";
+var _namespace_ = "cellmultireferenceview1022689335";
 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":"cellmultireferenceview1878943929__root","expanded":"cellmultireferenceview1878943929__expanded"};
+export var classes = {"root":"cellmultireferenceview1022689335__root","expanded":"cellmultireferenceview1022689335__expanded"};
 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_ = "cellreferenceinput2304300202";
+var _namespace_ = "cellreferenceinput2594210922";
 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":"cellreferenceinput2304300202__root","autocomplete":"cellreferenceinput2304300202__autocomplete"};
+export var classes = {"root":"cellreferenceinput2594210922__root","autocomplete":"cellreferenceinput2594210922__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_ = "richcontentdefaultvalueinput2111913369";
+var _namespace_ = "richcontentdefaultvalueinput3651013268";
 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":"richcontentdefaultvalueinput2111913369__root","richContentEditorContainer":"richcontentdefaultvalueinput2111913369__richContentEditorContainer","editor":"richcontentdefaultvalueinput2111913369__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput3651013268__root","richContentEditorContainer":"richcontentdefaultvalueinput3651013268__richContentEditorContainer","editor":"richcontentdefaultvalueinput3651013268__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_ = "richcontentforminput1811732449";
+var _namespace_ = "richcontentforminput569321031";
 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":"richcontentforminput1811732449__root","editor":"richcontentforminput1811732449__editor"};
+export var classes = {"root":"richcontentforminput569321031__root","editor":"richcontentforminput569321031__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_ = "richcontentformreadonlyinput1023395189";
+var _namespace_ = "richcontentformreadonlyinput425086001";
 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":"richcontentformreadonlyinput1023395189__root"};
+export var classes = {"root":"richcontentformreadonlyinput425086001__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_ = "fullscreenmodal2241348729";
+var _namespace_ = "fullscreenmodal514325537";
 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":"fullscreenmodal2241348729__root","modalContent":"fullscreenmodal2241348729__modalContent"};
+export var classes = {"root":"fullscreenmodal514325537__root","modalContent":"fullscreenmodal514325537__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_ = "publishloader1555093722";
+var _namespace_ = "publishloader17506449";
 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":"publishloader1555093722__root","publishLoader":"publishloader1555093722__publishLoader"};
+export var classes = {"root":"publishloader17506449__root","publishLoader":"publishloader17506449__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_ = "togglefullscreenbutton631337782";
+var _namespace_ = "togglefullscreenbutton3492487892";
 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":"togglefullscreenbutton631337782__root"};
+export var classes = {"root":"togglefullscreenbutton3492487892__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_ = "richcontenteditor3101940028";
+var _namespace_ = "richcontenteditor4121655944";
 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":"richcontenteditor3101940028__root","toolbarContainer":"richcontenteditor3101940028__toolbarContainer","footerToolbarContainer":"richcontenteditor3101940028__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3101940028__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3101940028__editor","modalEditor":"richcontenteditor3101940028__modalEditor"};
+export var classes = {"root":"richcontenteditor4121655944__root","toolbarContainer":"richcontenteditor4121655944__toolbarContainer","footerToolbarContainer":"richcontenteditor4121655944__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor4121655944__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor4121655944__editor","modalEditor":"richcontenteditor4121655944__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_ = "richcontenttoolbar2032698855";
+var _namespace_ = "richcontenttoolbar3709949669";
 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":"richcontenttoolbar2032698855__root","toolbar":"richcontenttoolbar2032698855__toolbar","toolbarButton":"richcontenttoolbar2032698855__toolbarButton","separator":"richcontenttoolbar2032698855__separator"};
+export var classes = {"root":"richcontenttoolbar3709949669__root","toolbar":"richcontenttoolbar3709949669__toolbar","toolbarButton":"richcontenttoolbar3709949669__toolbarButton","separator":"richcontenttoolbar3709949669__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_ = "richcontentviewer1028401867";
+var _namespace_ = "richcontentviewer4096701437";
 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":"richcontentviewer1028401867__root","viewer":"richcontentviewer1028401867__viewer","modalViewer":"richcontentviewer1028401867__modalViewer"};
+export var classes = {"root":"richcontentviewer4096701437__root","viewer":"richcontentviewer4096701437__viewer","modalViewer":"richcontentviewer4096701437__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richeditor3347470033";
+var _namespace_ = "richeditor1438353194";
 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":"richeditor3347470033__root","editor":"richeditor3347470033__editor","header-one":"richeditor3347470033__header-one","header-two":"richeditor3347470033__header-two","header-three":"richeditor3347470033__header-three","header-four":"richeditor3347470033__header-four","header-five":"richeditor3347470033__header-five","header-six":"richeditor3347470033__header-six","paragraph-one":"richeditor3347470033__paragraph-one","unstyled":"richeditor3347470033__unstyled","paragraph-three":"richeditor3347470033__paragraph-three","align-left":"richeditor3347470033__align-left","align-right":"richeditor3347470033__align-right","align-center":"richeditor3347470033__align-center","align-justify":"richeditor3347470033__align-justify","withMargin":"richeditor3347470033__withMargin","dir-rtl":"richeditor3347470033__dir-rtl"};
+export var classes = {"root":"richeditor1438353194__root","editor":"richeditor1438353194__editor","header-one":"richeditor1438353194__header-one","header-two":"richeditor1438353194__header-two","header-three":"richeditor1438353194__header-three","header-four":"richeditor1438353194__header-four","header-five":"richeditor1438353194__header-five","header-six":"richeditor1438353194__header-six","paragraph-one":"richeditor1438353194__paragraph-one","unstyled":"richeditor1438353194__unstyled","paragraph-three":"richeditor1438353194__paragraph-three","align-left":"richeditor1438353194__align-left","align-right":"richeditor1438353194__align-right","align-center":"richeditor1438353194__align-center","align-justify":"richeditor1438353194__align-justify","withMargin":"richeditor1438353194__withMargin","dir-rtl":"richeditor1438353194__dir-rtl"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richtexteditor3023173905";
+var _namespace_ = "richtexteditor3877086373";
 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":"richtexteditor3023173905__root","nativeInput":"richtexteditor3023173905__nativeInput","editor":"richtexteditor3023173905__editor"};
+export var classes = {"root":"richtexteditor3877086373__root","nativeInput":"richtexteditor3877086373__nativeInput","editor":"richtexteditor3877086373__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "toolbar4104866968";
+var _namespace_ = "toolbar3566794654";
 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":"toolbar4104866968__root","item":"toolbar4104866968__item","separator":"toolbar4104866968__separator","clearFormatting":"toolbar4104866968__clearFormatting","fullScreen":"toolbar4104866968__fullScreen","dropdownItemContent":"toolbar4104866968__dropdownItemContent","dropdownItemTitle":"toolbar4104866968__dropdownItemTitle","dropdownItemSubtitle":"toolbar4104866968__dropdownItemSubtitle","dropdownHeaderOne":"toolbar4104866968__dropdownHeaderOne","dropdownHeaderTwo":"toolbar4104866968__dropdownHeaderTwo","dropdownHeaderThree":"toolbar4104866968__dropdownHeaderThree","dropdownHeaderFour":"toolbar4104866968__dropdownHeaderFour","dropdownHeaderFive":"toolbar4104866968__dropdownHeaderFive","dropdownHeaderSix":"toolbar4104866968__dropdownHeaderSix","dropdownParagraphOne":"toolbar4104866968__dropdownParagraphOne","dropdownNormalText":"toolbar4104866968__dropdownNormalText","dropdownParagraphThree":"toolbar4104866968__dropdownParagraphThree"};
+export var classes = {"root":"toolbar3566794654__root","item":"toolbar3566794654__item","separator":"toolbar3566794654__separator","clearFormatting":"toolbar3566794654__clearFormatting","fullScreen":"toolbar3566794654__fullScreen","dropdownItemContent":"toolbar3566794654__dropdownItemContent","dropdownItemTitle":"toolbar3566794654__dropdownItemTitle","dropdownItemSubtitle":"toolbar3566794654__dropdownItemSubtitle","dropdownHeaderOne":"toolbar3566794654__dropdownHeaderOne","dropdownHeaderTwo":"toolbar3566794654__dropdownHeaderTwo","dropdownHeaderThree":"toolbar3566794654__dropdownHeaderThree","dropdownHeaderFour":"toolbar3566794654__dropdownHeaderFour","dropdownHeaderFive":"toolbar3566794654__dropdownHeaderFive","dropdownHeaderSix":"toolbar3566794654__dropdownHeaderSix","dropdownParagraphOne":"toolbar3566794654__dropdownParagraphOne","dropdownNormalText":"toolbar3566794654__dropdownNormalText","dropdownParagraphThree":"toolbar3566794654__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "textview4019917747";
+var _namespace_ = "textview4040802143";
 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":"textview4019917747__root","textView":"textview4019917747__textView"};
+export var classes = {"root":"textview4040802143__root","textView":"textview4040802143__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};