@wix/patterns-fields 1.116.0 → 1.117.0

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "mediaimageview4152861386";
+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":"mediaimageview4152861386__root","altTextPlaceholder":"mediaimageview4152861386__altTextPlaceholder"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-color-text-placeholder":"--wds-color-text-placeholder","wsr-color-D40":"--wsr-color-D40"}; 
+
+
+
+

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

@@ -0,0 +1,95 @@
+import React, { useCallback, useState } from 'react';
+import { Box, Divider, Text } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import type { MediaImageValue } from '../../types/media-image';
+import { usePatternsCmsFieldsContainer } from '../../providers/PatternsFieldsContainerProvider';
+import { getImageSource } from '../../utils/get-image-source';
+import { smallTooltipCommonProps } from '../../utils/tooltip';
+import { ImagePreviewPopover } from '../image/image-preview-popover';
+import { ImageThumbnail } from '../image/image-thumbnail';
+import { classes } from './media-image-view.st.css.js';
+
+export interface MediaImageViewProps {
+  /** A value read with `toMediaImageValue`. */
+  value: MediaImageValue | null;
+  dataHook?: string;
+}
+
+function _MediaImageView({ value: image, dataHook }: MediaImageViewProps) {
+  // Tables render this cell even with no fields container above them, which
+  // legacy image cells never needed. Without one there is nothing to translate
+  // the placeholder with, so it is left out instead of breaking the cell.
+  const translate = usePatternsCmsFieldsContainer()?.translate;
+  const src = getImageSource(image);
+  const altText = image?.altText;
+  const placeholder = altText
+    ? undefined
+    : translate?.('CMS.image.altText.cellPlaceholder');
+  const [isPreviewShown, setIsPreviewShown] = useState(false);
+
+  const showPreview = useCallback(() => setIsPreviewShown(true), []);
+  const hidePreview = useCallback(() => setIsPreviewShown(false), []);
+
+  // With no src, the thumbnail renders the empty-image placeholder.
+  const thumbnail = (
+    <ImageThumbnail
+      value={image}
+      dataHook="media-image-view-thumbnail"
+      width="36px"
+      height="24px"
+      borderRadius="0"
+      onMouseEnter={src ? showPreview : undefined}
+      onMouseLeave={src ? hidePreview : undefined}
+    />
+  );
+
+  return (
+    <Box
+      dataHook={dataHook}
+      className={classes.root}
+      verticalAlign="middle"
+      gap="8px"
+      padding="0 8px"
+      height="100%"
+      width="100%"
+    >
+      {src ? (
+        <ImagePreviewPopover src={src} shown={isPreviewShown}>
+          {thumbnail}
+        </ImagePreviewPopover>
+      ) : (
+        thumbnail
+      )}
+      {src && (altText || placeholder) && (
+        <>
+          <Box height="16px" flexShrink={0}>
+            <Divider direction="vertical" />
+          </Box>
+          {altText ? (
+            <Text
+              size="tiny"
+              ellipsis
+              tooltipProps={smallTooltipCommonProps}
+              dataHook="media-image-view-alt-text"
+            >
+              {altText}
+            </Text>
+          ) : (
+            <Text
+              size="tiny"
+              ellipsis
+              className={classes.altTextPlaceholder}
+              dataHook="media-image-view-alt-text-placeholder"
+            >
+              {placeholder}
+            </Text>
+          )}
+        </>
+      )}
+    </Box>
+  );
+}
+
+export const MediaImageView = observer(_MediaImageView);
+
+MediaImageView.displayName = 'MediaImageView';

package/src/components/media-image-field/media-image-view.uni.driver.ts

@@ -0,0 +1,18 @@
+import type { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+
+export function MediaImageViewUniDriver(base: UniDriver, _body: UniDriver) {
+  const thumbnail = base.$('[data-hook="media-image-view-thumbnail"]');
+  const altText = base.$('[data-hook="media-image-view-alt-text"]');
+  const altTextPlaceholder = base.$(
+    '[data-hook="media-image-view-alt-text-placeholder"]',
+  );
+  return {
+    ...baseUniDriverFactory(base),
+    hasThumbnail: () => thumbnail.exists(),
+    isEmpty: async () => (await thumbnail.attr('data-empty')) === 'true',
+    getAltText: async () =>
+      (await altText.exists()) ? altText.text() : undefined,
+    hasAltTextPlaceholder: () => altTextPlaceholder.exists(),
+  };
+}

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_ = "mediatag529577997";
+var _namespace_ = "mediatag1019234819";
 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":"mediatag529577997__root"};
+export var classes = {"root":"mediatag1019234819__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_ = "cellmultidocumentedit3375278397";
+var _namespace_ = "cellmultidocumentedit537285070";
 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":"cellmultidocumentedit3375278397__root","chipTrigger":"cellmultidocumentedit3375278397__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit537285070__root","chipTrigger":"cellmultidocumentedit537285070__chipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/multi-document-input/form-multi-document.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formmultidocument3935683465";
+var _namespace_ = "formmultidocument238724793";
 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":"formmultidocument3935683465__root","viewRoot":"formmultidocument3935683465__viewRoot","singleViewWrapper":"formmultidocument3935683465__singleViewWrapper","addDocumentButton":"formmultidocument3935683465__addDocumentButton"};
+export var classes = {"root":"formmultidocument238724793__root","viewRoot":"formmultidocument238724793__viewRoot","singleViewWrapper":"formmultidocument238724793__singleViewWrapper","addDocumentButton":"formmultidocument238724793__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_ = "cellmultireferenceinput2758007147";
+var _namespace_ = "cellmultireferenceinput2852198089";
 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":"cellmultireferenceinput2758007147__root"};
+export var classes = {"root":"cellmultireferenceinput2852198089__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput1958469920";
+var _namespace_ = "cellreferenceinput1940386691";
 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":"cellreferenceinput1958469920__root","autocomplete":"cellreferenceinput1958469920__autocomplete"};
+export var classes = {"root":"cellreferenceinput1940386691__root","autocomplete":"cellreferenceinput1940386691__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_ = "richcontentdefaultvalueinput1508730957";
+var _namespace_ = "richcontentdefaultvalueinput1029994212";
 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":"richcontentdefaultvalueinput1508730957__root","richContentEditorContainer":"richcontentdefaultvalueinput1508730957__richContentEditorContainer","editor":"richcontentdefaultvalueinput1508730957__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput1029994212__root","richContentEditorContainer":"richcontentdefaultvalueinput1029994212__richContentEditorContainer","editor":"richcontentdefaultvalueinput1029994212__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_ = "richcontentforminput1910101145";
+var _namespace_ = "richcontentforminput1521948598";
 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":"richcontentforminput1910101145__root","editor":"richcontentforminput1910101145__editor"};
+export var classes = {"root":"richcontentforminput1521948598__root","editor":"richcontentforminput1521948598__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_ = "richcontentformreadonlyinput1261656306";
+var _namespace_ = "richcontentformreadonlyinput2017647909";
 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":"richcontentformreadonlyinput1261656306__root"};
+export var classes = {"root":"richcontentformreadonlyinput2017647909__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_ = "fullscreenmodal519539891";
+var _namespace_ = "fullscreenmodal832897271";
 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":"fullscreenmodal519539891__root","modalContent":"fullscreenmodal519539891__modalContent"};
+export var classes = {"root":"fullscreenmodal832897271__root","modalContent":"fullscreenmodal832897271__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_ = "publishloader1652119513";
+var _namespace_ = "publishloader2134768982";
 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":"publishloader1652119513__root","publishLoader":"publishloader1652119513__publishLoader"};
+export var classes = {"root":"publishloader2134768982__root","publishLoader":"publishloader2134768982__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_ = "togglefullscreenbutton1876260174";
+var _namespace_ = "togglefullscreenbutton4114855922";
 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":"togglefullscreenbutton1876260174__root"};
+export var classes = {"root":"togglefullscreenbutton4114855922__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_ = "richcontenteditor3517378070";
+var _namespace_ = "richcontenteditor2388141012";
 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":"richcontenteditor3517378070__root","toolbarContainer":"richcontenteditor3517378070__toolbarContainer","footerToolbarContainer":"richcontenteditor3517378070__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3517378070__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3517378070__editor","modalEditor":"richcontenteditor3517378070__modalEditor"};
+export var classes = {"root":"richcontenteditor2388141012__root","toolbarContainer":"richcontenteditor2388141012__toolbarContainer","footerToolbarContainer":"richcontenteditor2388141012__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor2388141012__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor2388141012__editor","modalEditor":"richcontenteditor2388141012__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_ = "richcontenttoolbar1592496811";
+var _namespace_ = "richcontenttoolbar2930896954";
 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":"richcontenttoolbar1592496811__root","toolbar":"richcontenttoolbar1592496811__toolbar","toolbarButton":"richcontenttoolbar1592496811__toolbarButton","separator":"richcontenttoolbar1592496811__separator"};
+export var classes = {"root":"richcontenttoolbar2930896954__root","toolbar":"richcontenttoolbar2930896954__toolbar","toolbarButton":"richcontenttoolbar2930896954__toolbarButton","separator":"richcontenttoolbar2930896954__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_ = "richcontentviewer4129004765";
+var _namespace_ = "richcontentviewer34558029";
 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":"richcontentviewer4129004765__root","viewer":"richcontentviewer4129004765__viewer","modalViewer":"richcontentviewer4129004765__modalViewer"};
+export var classes = {"root":"richcontentviewer34558029__root","viewer":"richcontentviewer34558029__viewer","modalViewer":"richcontentviewer34558029__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_ = "richeditor3471716020";
+var _namespace_ = "richeditor3680751212";
 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":"richeditor3471716020__root","editor":"richeditor3471716020__editor","header-one":"richeditor3471716020__header-one","header-two":"richeditor3471716020__header-two","header-three":"richeditor3471716020__header-three","header-four":"richeditor3471716020__header-four","header-five":"richeditor3471716020__header-five","header-six":"richeditor3471716020__header-six","paragraph-one":"richeditor3471716020__paragraph-one","unstyled":"richeditor3471716020__unstyled","paragraph-three":"richeditor3471716020__paragraph-three","align-left":"richeditor3471716020__align-left","align-right":"richeditor3471716020__align-right","align-center":"richeditor3471716020__align-center","align-justify":"richeditor3471716020__align-justify","withMargin":"richeditor3471716020__withMargin","dir-rtl":"richeditor3471716020__dir-rtl"};
+export var classes = {"root":"richeditor3680751212__root","editor":"richeditor3680751212__editor","header-one":"richeditor3680751212__header-one","header-two":"richeditor3680751212__header-two","header-three":"richeditor3680751212__header-three","header-four":"richeditor3680751212__header-four","header-five":"richeditor3680751212__header-five","header-six":"richeditor3680751212__header-six","paragraph-one":"richeditor3680751212__paragraph-one","unstyled":"richeditor3680751212__unstyled","paragraph-three":"richeditor3680751212__paragraph-three","align-left":"richeditor3680751212__align-left","align-right":"richeditor3680751212__align-right","align-center":"richeditor3680751212__align-center","align-justify":"richeditor3680751212__align-justify","withMargin":"richeditor3680751212__withMargin","dir-rtl":"richeditor3680751212__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_ = "richtexteditor297234169";
+var _namespace_ = "richtexteditor2245266630";
 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":"richtexteditor297234169__root","nativeInput":"richtexteditor297234169__nativeInput","editor":"richtexteditor297234169__editor"};
+export var classes = {"root":"richtexteditor2245266630__root","nativeInput":"richtexteditor2245266630__nativeInput","editor":"richtexteditor2245266630__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_ = "toolbar712794843";
+var _namespace_ = "toolbar3590710253";
 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":"toolbar712794843__root","item":"toolbar712794843__item","separator":"toolbar712794843__separator","clearFormatting":"toolbar712794843__clearFormatting","fullScreen":"toolbar712794843__fullScreen","dropdownItemContent":"toolbar712794843__dropdownItemContent","dropdownItemTitle":"toolbar712794843__dropdownItemTitle","dropdownItemSubtitle":"toolbar712794843__dropdownItemSubtitle","dropdownHeaderOne":"toolbar712794843__dropdownHeaderOne","dropdownHeaderTwo":"toolbar712794843__dropdownHeaderTwo","dropdownHeaderThree":"toolbar712794843__dropdownHeaderThree","dropdownHeaderFour":"toolbar712794843__dropdownHeaderFour","dropdownHeaderFive":"toolbar712794843__dropdownHeaderFive","dropdownHeaderSix":"toolbar712794843__dropdownHeaderSix","dropdownParagraphOne":"toolbar712794843__dropdownParagraphOne","dropdownNormalText":"toolbar712794843__dropdownNormalText","dropdownParagraphThree":"toolbar712794843__dropdownParagraphThree"};
+export var classes = {"root":"toolbar3590710253__root","item":"toolbar3590710253__item","separator":"toolbar3590710253__separator","clearFormatting":"toolbar3590710253__clearFormatting","fullScreen":"toolbar3590710253__fullScreen","dropdownItemContent":"toolbar3590710253__dropdownItemContent","dropdownItemTitle":"toolbar3590710253__dropdownItemTitle","dropdownItemSubtitle":"toolbar3590710253__dropdownItemSubtitle","dropdownHeaderOne":"toolbar3590710253__dropdownHeaderOne","dropdownHeaderTwo":"toolbar3590710253__dropdownHeaderTwo","dropdownHeaderThree":"toolbar3590710253__dropdownHeaderThree","dropdownHeaderFour":"toolbar3590710253__dropdownHeaderFour","dropdownHeaderFive":"toolbar3590710253__dropdownHeaderFive","dropdownHeaderSix":"toolbar3590710253__dropdownHeaderSix","dropdownParagraphOne":"toolbar3590710253__dropdownParagraphOne","dropdownNormalText":"toolbar3590710253__dropdownNormalText","dropdownParagraphThree":"toolbar3590710253__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_ = "textview1179901631";
+var _namespace_ = "textview3066745583";
 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":"textview1179901631__root","textView":"textview1179901631__textView"};
+export var classes = {"root":"textview3066745583__root","textView":"textview3066745583__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/services/translations.ts

@@ -4,6 +4,7 @@ export type TranslationsKeys =
   | 'CMS.mediaGallery.addLink.invalidUrl'
   | 'auto-patterns.fields.field_type_email_title'
   | 'CMS.mediaGallery.dialog.settingsNewItemsTitleLabel'
+  | 'CMS.image.altText.label'
   | 'CMS.richTextEditor.toolbar.headerDropdown.option.h4.title'
   | 'CMS.richTextEditor.toolbar.headerDropdown.option.h3.title'
   | 'CMS.formTime.invalidMessage'
@@ -152,6 +153,7 @@ export type TranslationsKeys =
   | 'CMS.image.download'
   | 'CMS.richTextEditor.toolbar.header'
   | 'CMS.document.action.delete'
+  | 'CMS.image.thumbnail.label'
   | 'CMS.mediaGallery.preview.download'
   | 'CMS.richTextEditor.toolbar.headerDropdown.option.h6.title'
   | 'auto-patterns.fields.email_input_error'