@wix/patterns-fields 1.115.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_ = "mediatag2220604844";
+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":"mediatag2220604844__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_ = "cellmultidocumentedit1430636138";
+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":"cellmultidocumentedit1430636138__root","chipTrigger":"cellmultidocumentedit1430636138__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_ = "formmultidocument20977685";
+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":"formmultidocument20977685__root","viewRoot":"formmultidocument20977685__viewRoot","singleViewWrapper":"formmultidocument20977685__singleViewWrapper","addDocumentButton":"formmultidocument20977685__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_ = "cellmultireferenceinput120257027";
+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":"cellmultireferenceinput120257027__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_ = "cellreferenceinput2523903401";
+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":"cellreferenceinput2523903401__root","autocomplete":"cellreferenceinput2523903401__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_ = "richcontentdefaultvalueinput623308326";
+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":"richcontentdefaultvalueinput623308326__root","richContentEditorContainer":"richcontentdefaultvalueinput623308326__richContentEditorContainer","editor":"richcontentdefaultvalueinput623308326__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_ = "richcontentforminput3167814478";
+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":"richcontentforminput3167814478__root","editor":"richcontentforminput3167814478__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_ = "richcontentformreadonlyinput2535068086";
+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":"richcontentformreadonlyinput2535068086__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_ = "fullscreenmodal401561617";
+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":"fullscreenmodal401561617__root","modalContent":"fullscreenmodal401561617__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_ = "publishloader352336245";
+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":"publishloader352336245__root","publishLoader":"publishloader352336245__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_ = "togglefullscreenbutton3212433365";
+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":"togglefullscreenbutton3212433365__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_ = "richcontenteditor4157874540";
+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":"richcontenteditor4157874540__root","toolbarContainer":"richcontenteditor4157874540__toolbarContainer","footerToolbarContainer":"richcontenteditor4157874540__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor4157874540__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor4157874540__editor","modalEditor":"richcontenteditor4157874540__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_ = "richcontenttoolbar3455448276";
+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":"richcontenttoolbar3455448276__root","toolbar":"richcontenttoolbar3455448276__toolbar","toolbarButton":"richcontenttoolbar3455448276__toolbarButton","separator":"richcontenttoolbar3455448276__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_ = "richcontentviewer1023980608";
+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":"richcontentviewer1023980608__root","viewer":"richcontentviewer1023980608__viewer","modalViewer":"richcontentviewer1023980608__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_ = "richeditor2930640007";
+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":"richeditor2930640007__root","editor":"richeditor2930640007__editor","header-one":"richeditor2930640007__header-one","header-two":"richeditor2930640007__header-two","header-three":"richeditor2930640007__header-three","header-four":"richeditor2930640007__header-four","header-five":"richeditor2930640007__header-five","header-six":"richeditor2930640007__header-six","paragraph-one":"richeditor2930640007__paragraph-one","unstyled":"richeditor2930640007__unstyled","paragraph-three":"richeditor2930640007__paragraph-three","align-left":"richeditor2930640007__align-left","align-right":"richeditor2930640007__align-right","align-center":"richeditor2930640007__align-center","align-justify":"richeditor2930640007__align-justify","withMargin":"richeditor2930640007__withMargin","dir-rtl":"richeditor2930640007__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_ = "richtexteditor2715691568";
+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":"richtexteditor2715691568__root","nativeInput":"richtexteditor2715691568__nativeInput","editor":"richtexteditor2715691568__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_ = "toolbar4183030958";
+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":"toolbar4183030958__root","item":"toolbar4183030958__item","separator":"toolbar4183030958__separator","clearFormatting":"toolbar4183030958__clearFormatting","fullScreen":"toolbar4183030958__fullScreen","dropdownItemContent":"toolbar4183030958__dropdownItemContent","dropdownItemTitle":"toolbar4183030958__dropdownItemTitle","dropdownItemSubtitle":"toolbar4183030958__dropdownItemSubtitle","dropdownHeaderOne":"toolbar4183030958__dropdownHeaderOne","dropdownHeaderTwo":"toolbar4183030958__dropdownHeaderTwo","dropdownHeaderThree":"toolbar4183030958__dropdownHeaderThree","dropdownHeaderFour":"toolbar4183030958__dropdownHeaderFour","dropdownHeaderFive":"toolbar4183030958__dropdownHeaderFive","dropdownHeaderSix":"toolbar4183030958__dropdownHeaderSix","dropdownParagraphOne":"toolbar4183030958__dropdownParagraphOne","dropdownNormalText":"toolbar4183030958__dropdownNormalText","dropdownParagraphThree":"toolbar4183030958__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/cell-text-input.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { InputArea, Tooltip } from '@wix/design-system';
+import { Box, InputArea, Popover, Text } from '@wix/design-system';
 import type { InputAreaProps } from '@wix/design-system';
 import { useTranslations } from '../../hooks/use-translations';
 
@@ -27,15 +27,10 @@ interface CharLimitTooltipProps {
 }
 
 /**
- * Renders a Tooltip that appears when the character limit is reached.
+ * Shows a hint when the character limit is reached, in a light bubble with
+ * error text so it matches the cell's validation message.
  * Extracted into its own component so that useTranslations is only called
  * when maxLength is configured — tests without a provider are not affected.
- *
- * The `<span style={{ display: 'contents' }}>` wrapper is intentional:
- * WDS Tooltip uses React.cloneElement on its direct child to inject onFocus/onBlur
- * handlers for accessibility. Without the wrapper, those injected handlers would
- * override the InputArea's own onFocus/onBlur, breaking the blur → onCommit flow.
- * The span intercepts the cloneElement while remaining invisible in layout.
  */
 const CharLimitTooltip: React.FC<CharLimitTooltipProps> = ({
   children,
@@ -43,25 +38,32 @@ const CharLimitTooltip: React.FC<CharLimitTooltipProps> = ({
   maxLength,
 }) => {
   const { t } = useTranslations();
-  // `shown` is a valid Tooltip runtime prop not yet reflected in the TS types
-  const shownProp = { shown: atLimit } as {};
 
   return (
-    <Tooltip
-      {...shownProp}
-      content={t('patterns-fields.text.char_limit_tooltip', { maxLength })}
-      placement="top"
-      size="small"
+    <Popover
+      shown={atLimit}
+      skin="light"
+      placement="top-start"
+      showArrow={false}
+      appendTo="window"
+      fluid
     >
-      <span style={{ display: 'contents' }}>{children}</span>
-    </Tooltip>
+      <Popover.Element>{children}</Popover.Element>
+      <Popover.Content>
+        <Box padding="6px 8px" maxWidth="240px">
+          <Text size="small" skin="error">
+            {t('patterns-fields.text.char_limit_tooltip', { maxLength })}
+          </Text>
+        </Box>
+      </Popover.Content>
+    </Popover>
   );
 };
 
 /**
  * Cell-layer InputArea — fires onChange on every keystroke (required by
  * EditableTable's Tab-commit flow), collapses newlines to spaces while
- * unfocused, and shows a Tooltip when the character limit is reached.
+ * unfocused, and shows a hint when the character limit is reached.
  */
 export const CellTextInput: React.FC<CellTextInputProps> = ({
   value,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "textview173077726";
+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":"textview173077726__root","textView":"textview173077726__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'