@wix/patterns-fields 1.39.0 → 1.40.0

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

@@ -0,0 +1,364 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import {
+  Box,
+  IconButton,
+  Loader,
+  PopoverMenu,
+  Tag,
+  Tooltip,
+} from '@wix/design-system';
+import {
+  Add,
+  Delete,
+  DocumentSmall,
+  Download,
+  ExternalLink,
+  Link,
+  LinkSmall,
+  MoreSmall,
+  Replace,
+} from '@wix/wix-ui-icons-common';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+import { getMediaTitle, MEDIA_TYPES } from '../../utils/media-utils';
+import { getMediaURL } from '../../auto-field-types';
+import { useTranslations, useCellEditKeyboard } from '../../hooks';
+import {
+  PasteURLForm,
+  MediaFieldType,
+  useMediaControl,
+  usePasteURLForm,
+} from '../media-control';
+import { openDocument } from '../document/utils';
+
+export interface CellMultiDocumentEditProps {
+  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>;
+  dataHook?: string;
+  /** Stable id prefix for tags. Each chip uses `${fieldId}-${index}`. */
+  fieldId: string;
+}
+
+export const CellMultiDocumentEdit: React.FC<CellMultiDocumentEditProps> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  onStartEdit,
+  inputRef,
+  dataHook,
+  fieldId,
+}) => {
+  const { t } = useTranslations();
+  const msid = useWixPatternsContainer()?.environment?.msid;
+
+  const uris = useMemo(() => value ?? [], [value]);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const handleMultiChange = useCallback(
+    (next: string[]) => {
+      onChange(next.length === 0 ? null : next);
+      onCommit();
+    },
+    [onChange, onCommit],
+  );
+
+  const { callMedia, downloadMedia, loading } = useMediaControl({
+    mediaType: MEDIA_TYPES.ALL_MEDIA,
+    value: uris,
+    onChange: handleMultiChange,
+    multiSelect: true,
+  });
+
+  // In multi-doc, dismissing a picker/form must NOT exit the whole editor —
+  // the user is mid-multi-edit and may want to act on other chips. Only Escape
+  // (via useCellEditKeyboard) and click-outside should fire onCancel.
+  const handleAdd = useCallback(async () => {
+    onStartEdit?.();
+    await callMedia();
+  }, [callMedia, onStartEdit]);
+
+  const [replaceIndex, setReplaceIndex] = useState<number | null>(null);
+  const handleReplace = useCallback(
+    (index: number) => async () => {
+      onStartEdit?.();
+      setReplaceIndex(index);
+      await callMedia(index);
+      setReplaceIndex(null);
+    },
+    [callMedia, onStartEdit],
+  );
+
+  const handleDelete = useCallback(
+    (index: number) => () => {
+      const next = uris.filter((_, i) => i !== index);
+      handleMultiChange(next);
+    },
+    [uris, handleMultiChange],
+  );
+
+  const handleOpen = useCallback(
+    (uri: string) => () => {
+      openDocument(getMediaURL(uri, msid));
+    },
+    [msid],
+  );
+
+  const handleDownload = useCallback(
+    (uri: string) => () => {
+      downloadMedia(uri);
+    },
+    [downloadMedia],
+  );
+
+  const onPastedURLChange = useCallback(
+    (urlValue: string, indexToReplace?: number) => {
+      if (indexToReplace !== undefined) {
+        const next = [...uris];
+        next.splice(indexToReplace, 1, urlValue);
+        handleMultiChange(next);
+      } else {
+        handleMultiChange([...uris, urlValue]);
+      }
+    },
+    [uris, handleMultiChange],
+  );
+
+  const pasteUrlForm = usePasteURLForm({ onChange: onPastedURLChange });
+
+  const openAddViaUrl = useCallback(() => {
+    onStartEdit?.();
+    pasteUrlForm.onOpen({ title: t('CMS.document.pasteUrl.title') })();
+  }, [onStartEdit, pasteUrlForm, t]);
+
+  const openReplaceViaUrl = useCallback(
+    (index: number, currentValue: string) => () => {
+      onStartEdit?.();
+      pasteUrlForm.onOpen({
+        title: t('CMS.document.replaceWithUrl.title'),
+        value: currentValue,
+        index,
+      })();
+    },
+    [onStartEdit, pasteUrlForm, t],
+  );
+
+  const handlePasteUrlClose = useCallback(() => {
+    pasteUrlForm.onClose();
+  }, [pasteUrlForm]);
+
+  const { handleContainerFocus, handleContainerBlur } = useCellEditKeyboard({
+    containerRef,
+    onCancel,
+    inputRef,
+  });
+
+  const addDocLabel = t('CMS.document.add.button.text');
+  const addViaUrlLabel = t('CMS.document.pasteUrl.button');
+
+  return (
+    <div
+      ref={containerRef}
+      data-hook={dataHook}
+      onFocus={handleContainerFocus}
+      onBlur={handleContainerBlur}
+      style={{
+        width: '100%',
+        // min-width: 0 lets the wrapper shrink to the column width inside the
+        // flex .root, so flex-wrap on the chip strip has a bounded width.
+        minWidth: 0,
+        maxWidth: '100%',
+        boxSizing: 'border-box',
+      }}
+    >
+      {uris.length === 0 ? (
+        <Box
+          align="space-between"
+          verticalAlign="middle"
+          height="100%"
+          padding="0 8px"
+          gap="SP1"
+          style={{ boxSizing: 'border-box' }}
+        >
+          <Tooltip content={addDocLabel} appendTo="window">
+            <IconButton
+              dataHook="multi-document-edit-add-button"
+              ariaLabel={addDocLabel}
+              size="tiny"
+              priority="secondary"
+              onClick={handleAdd}
+            >
+              <Add />
+            </IconButton>
+          </Tooltip>
+          <Tooltip content={addViaUrlLabel} appendTo="window">
+            <IconButton
+              dataHook="multi-document-edit-paste-url-button"
+              ariaLabel={addViaUrlLabel}
+              size="tiny"
+              priority="tertiary"
+              onClick={openAddViaUrl}
+            >
+              <LinkSmall />
+            </IconButton>
+          </Tooltip>
+        </Box>
+      ) : (
+        <Box
+          padding="SP1"
+          gap="SP1"
+          verticalAlign="middle"
+          style={{ flexWrap: 'wrap', boxSizing: 'border-box' }}
+        >
+          {uris.map((uri, index) => {
+            const isReplacing = replaceIndex === index && loading;
+            if (isReplacing) {
+              return (
+                <Box
+                  key={`${fieldId}-${index}-loading`}
+                  verticalAlign="middle"
+                  height="24px"
+                >
+                  <Loader dataHook="loader" size="tiny" />
+                </Box>
+              );
+            }
+            return (
+              <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%' }}
+              >
+                <PopoverMenu
+                  textSize="small"
+                  appendTo="window"
+                  triggerElement={
+                    <Tag
+                      id={`${fieldId}-${index}`}
+                      dataHook="multi-document-edit-tag"
+                      size="small"
+                      thumb={<DocumentSmall />}
+                      removable={false}
+                      maxWidth="100%"
+                    >
+                      <span
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: 4,
+                          width: '100%',
+                          minWidth: 0,
+                        }}
+                      >
+                        <span
+                          style={{
+                            flex: '1 1 auto',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            minWidth: 0,
+                          }}
+                        >
+                          {getMediaTitle(uri)}
+                        </span>
+                        <MoreSmall
+                          style={{
+                            width: 12,
+                            height: 12,
+                            flexShrink: 0,
+                          }}
+                        />
+                      </span>
+                    </Tag>
+                  }
+                >
+                  <PopoverMenu.MenuItem
+                    dataHook="multi-document-edit-action-replace"
+                    text={t('CMS.document.action.replace')}
+                    prefixIcon={<Replace />}
+                    onClick={handleReplace(index)}
+                  />
+                  <PopoverMenu.MenuItem
+                    dataHook="multi-document-edit-action-replace-url"
+                    text={t('CMS.document.action.replaceWithUrl')}
+                    prefixIcon={<Link />}
+                    onClick={openReplaceViaUrl(index, uri)}
+                  />
+                  <PopoverMenu.Divider />
+                  <PopoverMenu.MenuItem
+                    dataHook="multi-document-edit-action-open"
+                    text={t('CMS.document.action.open')}
+                    prefixIcon={<ExternalLink />}
+                    onClick={handleOpen(uri)}
+                  />
+                  <PopoverMenu.MenuItem
+                    dataHook="multi-document-edit-action-download"
+                    text={t('CMS.document.action.download')}
+                    prefixIcon={<Download />}
+                    onClick={handleDownload(uri)}
+                  />
+                  <PopoverMenu.Divider />
+                  <PopoverMenu.MenuItem
+                    dataHook="multi-document-edit-action-delete"
+                    text={t('CMS.document.action.delete')}
+                    skin="destructive"
+                    prefixIcon={<Delete />}
+                    onClick={handleDelete(index)}
+                  />
+                </PopoverMenu>
+              </Box>
+            );
+          })}
+          <Box gap="SP1" verticalAlign="middle">
+            <Tooltip content={addDocLabel} appendTo="window">
+              <IconButton
+                dataHook="multi-document-edit-add-button"
+                ariaLabel={addDocLabel}
+                size="tiny"
+                priority="secondary"
+                onClick={handleAdd}
+              >
+                <Add />
+              </IconButton>
+            </Tooltip>
+            <Tooltip content={addViaUrlLabel} appendTo="window">
+              <IconButton
+                dataHook="multi-document-edit-paste-url-button"
+                ariaLabel={addViaUrlLabel}
+                size="tiny"
+                priority="tertiary"
+                onClick={openAddViaUrl}
+              >
+                <LinkSmall />
+              </IconButton>
+            </Tooltip>
+          </Box>
+        </Box>
+      )}
+
+      <PasteURLForm
+        title={pasteUrlForm.title}
+        value={pasteUrlForm.value}
+        show={pasteUrlForm.isOpen}
+        closeModal={handlePasteUrlClose}
+        onSave={pasteUrlForm.onSave}
+        fieldType={MediaFieldType.document}
+      />
+    </div>
+  );
+};
+
+CellMultiDocumentEdit.displayName = 'CellMultiDocumentEdit';

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

@@ -0,0 +1,68 @@
+import React, { useMemo } from 'react';
+import { Box, TagList } from '@wix/design-system';
+import { DocumentSmall } from '@wix/wix-ui-icons-common';
+
+import { getMediaTitle } from '../../utils/media-utils';
+
+export interface CellMultiDocumentViewProps {
+  value: string[] | null | undefined;
+  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 CellMultiDocumentView: React.FC<CellMultiDocumentViewProps> = ({
+  value,
+  dataHook,
+  fieldId,
+}) => {
+  const tags = useMemo(
+    () =>
+      (value ?? []).map((uri, i) => ({
+        id: `${fieldId}-${i}`,
+        dataHook: 'cell-multi-document-tag',
+        thumb: <DocumentSmall />,
+        children: getMediaTitle(uri),
+        removable: false as const,
+      })),
+    [value, fieldId],
+  );
+
+  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-document-tags"
+        tags={tags}
+      />
+    </Box>
+  );
+};
+
+CellMultiDocumentView.displayName = 'CellMultiDocumentView';

package/src/components/multi-document/index.ts

@@ -1,3 +1,7 @@
 export { MultiDocumentView } from './multi-document-view/multi-document-view';
 export { FormMultiDocument } from './multi-document-input/form-multi-document';
 export { FormMultiDocumentField } from './multi-document-input/form-multi-document-field';
+export { CellMultiDocumentView } from './cell-multi-document-view';
+export { CellMultiDocumentEdit } from './cell-multi-document-edit';
+export type { CellMultiDocumentViewProps } from './cell-multi-document-view';
+export type { CellMultiDocumentEditProps } from './cell-multi-document-edit';

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_ = "formmultidocument3697455280";
+var _namespace_ = "formmultidocument1520711159";
 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":"formmultidocument3697455280__root","viewRoot":"formmultidocument3697455280__viewRoot","singleViewWrapper":"formmultidocument3697455280__singleViewWrapper","addDocumentButton":"formmultidocument3697455280__addDocumentButton"};
+export var classes = {"root":"formmultidocument1520711159__root","viewRoot":"formmultidocument1520711159__viewRoot","singleViewWrapper":"formmultidocument1520711159__singleViewWrapper","addDocumentButton":"formmultidocument1520711159__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_ = "cellreferenceinput3231278211";
+var _namespace_ = "cellreferenceinput2943287064";
 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":"cellreferenceinput3231278211__root","autocomplete":"cellreferenceinput3231278211__autocomplete"};
+export var classes = {"root":"cellreferenceinput2943287064__root","autocomplete":"cellreferenceinput2943287064__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_ = "richcontentdefaultvalueinput908406586";
+var _namespace_ = "richcontentdefaultvalueinput1516859509";
 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":"richcontentdefaultvalueinput908406586__root","richContentEditorContainer":"richcontentdefaultvalueinput908406586__richContentEditorContainer","editor":"richcontentdefaultvalueinput908406586__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput1516859509__root","richContentEditorContainer":"richcontentdefaultvalueinput1516859509__richContentEditorContainer","editor":"richcontentdefaultvalueinput1516859509__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_ = "richcontentforminput4035690";
+var _namespace_ = "richcontentforminput1051770621";
 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":"richcontentforminput4035690__root","editor":"richcontentforminput4035690__editor"};
+export var classes = {"root":"richcontentforminput1051770621__root","editor":"richcontentforminput1051770621__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_ = "richcontentformreadonlyinput516739647";
+var _namespace_ = "richcontentformreadonlyinput2154684961";
 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":"richcontentformreadonlyinput516739647__root"};
+export var classes = {"root":"richcontentformreadonlyinput2154684961__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_ = "fullscreenmodal4175496484";
+var _namespace_ = "fullscreenmodal858536236";
 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":"fullscreenmodal4175496484__root","modalContent":"fullscreenmodal4175496484__modalContent"};
+export var classes = {"root":"fullscreenmodal858536236__root","modalContent":"fullscreenmodal858536236__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_ = "publishloader2757594344";
+var _namespace_ = "publishloader3184907926";
 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":"publishloader2757594344__root","publishLoader":"publishloader2757594344__publishLoader"};
+export var classes = {"root":"publishloader3184907926__root","publishLoader":"publishloader3184907926__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_ = "togglefullscreenbutton634800807";
+var _namespace_ = "togglefullscreenbutton3244257476";
 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":"togglefullscreenbutton634800807__root"};
+export var classes = {"root":"togglefullscreenbutton3244257476__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_ = "richcontenteditor2029451533";
+var _namespace_ = "richcontenteditor2251144620";
 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":"richcontenteditor2029451533__root","toolbarContainer":"richcontenteditor2029451533__toolbarContainer","footerToolbarContainer":"richcontenteditor2029451533__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor2029451533__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor2029451533__editor","modalEditor":"richcontenteditor2029451533__modalEditor"};
+export var classes = {"root":"richcontenteditor2251144620__root","toolbarContainer":"richcontenteditor2251144620__toolbarContainer","footerToolbarContainer":"richcontenteditor2251144620__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor2251144620__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor2251144620__editor","modalEditor":"richcontenteditor2251144620__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_ = "richcontenttoolbar3285100156";
+var _namespace_ = "richcontenttoolbar607396278";
 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":"richcontenttoolbar3285100156__root","toolbar":"richcontenttoolbar3285100156__toolbar","toolbarButton":"richcontenttoolbar3285100156__toolbarButton"};
+export var classes = {"root":"richcontenttoolbar607396278__root","toolbar":"richcontenttoolbar607396278__toolbar","toolbarButton":"richcontenttoolbar607396278__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_ = "richcontentviewer1372920771";
+var _namespace_ = "richcontentviewer2620593037";
 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":"richcontentviewer1372920771__root","viewer":"richcontentviewer1372920771__viewer","modalViewer":"richcontentviewer1372920771__modalViewer"};
+export var classes = {"root":"richcontentviewer2620593037__root","viewer":"richcontentviewer2620593037__viewer","modalViewer":"richcontentviewer2620593037__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_ = "richeditor2435020496";
+var _namespace_ = "richeditor144133490";
 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":"richeditor2435020496__root","editor":"richeditor2435020496__editor","header-one":"richeditor2435020496__header-one","header-two":"richeditor2435020496__header-two","header-three":"richeditor2435020496__header-three","header-four":"richeditor2435020496__header-four","header-five":"richeditor2435020496__header-five","header-six":"richeditor2435020496__header-six","paragraph-one":"richeditor2435020496__paragraph-one","unstyled":"richeditor2435020496__unstyled","paragraph-three":"richeditor2435020496__paragraph-three","align-left":"richeditor2435020496__align-left","align-right":"richeditor2435020496__align-right","align-center":"richeditor2435020496__align-center","align-justify":"richeditor2435020496__align-justify","withMargin":"richeditor2435020496__withMargin","dir-rtl":"richeditor2435020496__dir-rtl"};
+export var classes = {"root":"richeditor144133490__root","editor":"richeditor144133490__editor","header-one":"richeditor144133490__header-one","header-two":"richeditor144133490__header-two","header-three":"richeditor144133490__header-three","header-four":"richeditor144133490__header-four","header-five":"richeditor144133490__header-five","header-six":"richeditor144133490__header-six","paragraph-one":"richeditor144133490__paragraph-one","unstyled":"richeditor144133490__unstyled","paragraph-three":"richeditor144133490__paragraph-three","align-left":"richeditor144133490__align-left","align-right":"richeditor144133490__align-right","align-center":"richeditor144133490__align-center","align-justify":"richeditor144133490__align-justify","withMargin":"richeditor144133490__withMargin","dir-rtl":"richeditor144133490__dir-rtl"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};