@wix/patterns-fields 1.130.0 → 1.133.0

package/src/components/media-vector-art-field/form-media-vector-art-input.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useController } from '@wix/bex-core/form';
+
+import type { BaseInputProps } from '../../types/base-input';
+import type { MediaVectorArtValue } from '../../types/media-vector-art';
+import { useFieldRef } from '../../hooks';
+import { isMediaVectorArtEmpty } from '../../utils/media-vector-art-value';
+import { FormMediaVectorArtField } from './form-media-vector-art-field';
+
+export interface FormMediaVectorArtInputProps
+  extends BaseInputProps<MediaVectorArtValue | null> {}
+
+const _FormMediaVectorArtInput = (props: FormMediaVectorArtInputProps) => {
+  const { field, dataHook, formControl, data } = props;
+
+  const { translate: t } = useWixPatternsContainer();
+
+  const controller = useController({
+    name: field?.id ?? '',
+    control: formControl,
+    defaultValue: data?.[field?.id ?? ''],
+    rules: {
+      validate: (value) =>
+        field.validation?.required && isMediaVectorArtEmpty(value)
+          ? t('cairo.fieldValidation.requiredField')
+          : true,
+    },
+  });
+
+  const setFieldRef = useFieldRef(controller.field.ref);
+
+  return (
+    <FormMediaVectorArtField
+      inputRef={setFieldRef}
+      data={controller.field.value}
+      onChange={(value) => controller.field.onChange(value)}
+      dataHook={dataHook}
+      imageFormFieldProps={{
+        label: field.displayName,
+        required: field.validation?.required,
+        status: controller.fieldState.error ? 'error' : undefined,
+        statusMessage: controller.fieldState.error?.message,
+      }}
+    />
+  );
+};
+
+export const FormMediaVectorArtInput = observer(_FormMediaVectorArtInput);

package/src/components/media-vector-art-field/index.ts

@@ -1 +1,4 @@
 export * from './media-vector-art-view';
+export * from './cell-media-vector-art-edit';
+export * from './form-media-vector-art-field';
+export * from './form-media-vector-art-input';

package/src/components/media-vector-art-field/media-vector-art-actions.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { IconButton, PopoverMenu } from '@wix/design-system';
+import type { IconButtonProps } from '@wix/design-system';
+import {
+  Delete,
+  Download,
+  Maximize,
+  MoreSmall,
+  Replace,
+} from '@wix/wix-ui-icons-common/lazy';
+import { useTranslations } from '../../hooks';
+import type { MediaVectorArtValue } from '../../types/media-vector-art';
+import { MediaPreviewModal } from '../media-gallery/media-preview-modal';
+
+type ActionsPlacement = 'cell' | 'overlay';
+
+const TRIGGER_LOOK: Record<
+  ActionsPlacement,
+  Pick<IconButtonProps, 'size' | 'skin' | 'priority'>
+> = {
+  cell: { size: 'tiny', priority: 'tertiary' },
+  overlay: { size: 'small', skin: 'light', priority: 'secondary' },
+};
+
+export interface MediaVectorArtActionsProps {
+  dataHook: string;
+  placement: ActionsPlacement;
+  onReplace?: () => void;
+  onPreview: () => void;
+  onDownload: () => void;
+  onDelete?: () => void;
+  menuZIndex?: number;
+}
+
+export const MediaVectorArtActions: React.FC<MediaVectorArtActionsProps> = ({
+  dataHook,
+  placement,
+  onReplace,
+  onPreview,
+  onDownload,
+  onDelete,
+  menuZIndex,
+}) => {
+  const { t } = useTranslations();
+
+  return (
+    <PopoverMenu
+      textSize="small"
+      appendTo="window"
+      zIndex={menuZIndex}
+      triggerElement={({ isOpen, toggle, ref }) => (
+        <IconButton
+          {...TRIGGER_LOOK[placement]}
+          ref={ref}
+          dataHook={`${dataHook}-more-button`}
+          ariaLabel={t('auto-patterns.fields.more_actions_tooltip')}
+          aria-haspopup="menu"
+          aria-expanded={isOpen}
+          onClick={toggle}
+        >
+          <MoreSmall />
+        </IconButton>
+      )}
+    >
+      <PopoverMenu.MenuItem
+        dataHook={`${dataHook}-action-replace`}
+        text={t('CMS.image.replace')}
+        prefixIcon={<Replace />}
+        disabled={!onReplace}
+        onClick={() => onReplace?.()}
+      />
+      <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>
+  );
+};
+
+MediaVectorArtActions.displayName = 'MediaVectorArtActions';
+
+export interface MediaVectorArtPreviewModalProps {
+  isOpen: boolean;
+  vectorArt: MediaVectorArtValue;
+  onClose: () => void;
+  onReplace: () => void;
+  onDelete?: () => void;
+  onDownload: () => void;
+  readOnly?: boolean;
+}
+
+export const MediaVectorArtPreviewModal: React.FC<
+  MediaVectorArtPreviewModalProps
+> = ({
+  isOpen,
+  vectorArt,
+  onClose,
+  onReplace,
+  onDelete,
+  onDownload,
+  readOnly,
+}) => (
+  <MediaPreviewModal
+    isOpen={isOpen}
+    value={vectorArt.uri}
+    onClose={onClose}
+    onRequestMedia={onReplace}
+    onClearMedia={onDelete}
+    onDownloadMedia={onDownload}
+    readOnly={readOnly}
+    textKeys={{
+      replace: 'CMS.image.replace',
+      download: 'CMS.image.download',
+      delete: 'CMS.image.clear',
+    }}
+  />
+);
+
+MediaVectorArtPreviewModal.displayName = 'MediaVectorArtPreviewModal';

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_ = "cellmultidocumentedit1175738466";
+var _namespace_ = "cellmultidocumentedit1162337225";
 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":"cellmultidocumentedit1175738466__root","chipTrigger":"cellmultidocumentedit1175738466__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit1162337225__root","chipTrigger":"cellmultidocumentedit1162337225__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_ = "formmultidocument1257162130";
+var _namespace_ = "formmultidocument1821799669";
 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":"formmultidocument1257162130__root","viewRoot":"formmultidocument1257162130__viewRoot","singleViewWrapper":"formmultidocument1257162130__singleViewWrapper","addDocumentButton":"formmultidocument1257162130__addDocumentButton"};
+export var classes = {"root":"formmultidocument1821799669__root","viewRoot":"formmultidocument1821799669__viewRoot","singleViewWrapper":"formmultidocument1821799669__singleViewWrapper","addDocumentButton":"formmultidocument1821799669__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_ = "cellmultireferenceinput296243577";
+var _namespace_ = "cellmultireferenceinput1168105698";
 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":"cellmultireferenceinput296243577__root"};
+export var classes = {"root":"cellmultireferenceinput1168105698__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_ = "cellmultireferenceview1168811889";
+var _namespace_ = "cellmultireferenceview794013115";
 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":"cellmultireferenceview1168811889__root","expanded":"cellmultireferenceview1168811889__expanded"};
+export var classes = {"root":"cellmultireferenceview794013115__root","expanded":"cellmultireferenceview794013115__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_ = "cellreferenceinput1540347298";
+var _namespace_ = "cellreferenceinput746666304";
 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":"cellreferenceinput1540347298__root","autocomplete":"cellreferenceinput1540347298__autocomplete"};
+export var classes = {"root":"cellreferenceinput746666304__root","autocomplete":"cellreferenceinput746666304__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_ = "richcontentdefaultvalueinput384255846";
+var _namespace_ = "richcontentdefaultvalueinput1550680409";
 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":"richcontentdefaultvalueinput384255846__root","richContentEditorContainer":"richcontentdefaultvalueinput384255846__richContentEditorContainer","editor":"richcontentdefaultvalueinput384255846__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput1550680409__root","richContentEditorContainer":"richcontentdefaultvalueinput1550680409__richContentEditorContainer","editor":"richcontentdefaultvalueinput1550680409__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_ = "richcontentforminput2623724401";
+var _namespace_ = "richcontentforminput4212194625";
 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":"richcontentforminput2623724401__root","editor":"richcontentforminput2623724401__editor"};
+export var classes = {"root":"richcontentforminput4212194625__root","editor":"richcontentforminput4212194625__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_ = "richcontentformreadonlyinput2036888546";
+var _namespace_ = "richcontentformreadonlyinput870862828";
 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":"richcontentformreadonlyinput2036888546__root"};
+export var classes = {"root":"richcontentformreadonlyinput870862828__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_ = "fullscreenmodal2593435262";
+var _namespace_ = "fullscreenmodal2096094047";
 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":"fullscreenmodal2593435262__root","modalContent":"fullscreenmodal2593435262__modalContent"};
+export var classes = {"root":"fullscreenmodal2096094047__root","modalContent":"fullscreenmodal2096094047__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_ = "publishloader1519157742";
+var _namespace_ = "publishloader3920916410";
 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":"publishloader1519157742__root","publishLoader":"publishloader1519157742__publishLoader"};
+export var classes = {"root":"publishloader3920916410__root","publishLoader":"publishloader3920916410__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_ = "togglefullscreenbutton2869470931";
+var _namespace_ = "togglefullscreenbutton293670830";
 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":"togglefullscreenbutton2869470931__root"};
+export var classes = {"root":"togglefullscreenbutton293670830__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_ = "richcontenteditor450399671";
+var _namespace_ = "richcontenteditor2624185347";
 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":"richcontenteditor450399671__root","toolbarContainer":"richcontenteditor450399671__toolbarContainer","footerToolbarContainer":"richcontenteditor450399671__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor450399671__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor450399671__editor","modalEditor":"richcontenteditor450399671__modalEditor"};
+export var classes = {"root":"richcontenteditor2624185347__root","toolbarContainer":"richcontenteditor2624185347__toolbarContainer","footerToolbarContainer":"richcontenteditor2624185347__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor2624185347__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor2624185347__editor","modalEditor":"richcontenteditor2624185347__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_ = "richcontenttoolbar1384840142";
+var _namespace_ = "richcontenttoolbar1414369076";
 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":"richcontenttoolbar1384840142__root","toolbar":"richcontenttoolbar1384840142__toolbar","toolbarButton":"richcontenttoolbar1384840142__toolbarButton","separator":"richcontenttoolbar1384840142__separator"};
+export var classes = {"root":"richcontenttoolbar1414369076__root","toolbar":"richcontenttoolbar1414369076__toolbar","toolbarButton":"richcontenttoolbar1414369076__toolbarButton","separator":"richcontenttoolbar1414369076__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_ = "richcontentviewer2645458836";
+var _namespace_ = "richcontentviewer2558765804";
 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":"richcontentviewer2645458836__root","viewer":"richcontentviewer2645458836__viewer","modalViewer":"richcontentviewer2645458836__modalViewer"};
+export var classes = {"root":"richcontentviewer2558765804__root","viewer":"richcontentviewer2558765804__viewer","modalViewer":"richcontentviewer2558765804__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_ = "richeditor3922377424";
+var _namespace_ = "richeditor4233028942";
 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":"richeditor3922377424__root","editor":"richeditor3922377424__editor","header-one":"richeditor3922377424__header-one","header-two":"richeditor3922377424__header-two","header-three":"richeditor3922377424__header-three","header-four":"richeditor3922377424__header-four","header-five":"richeditor3922377424__header-five","header-six":"richeditor3922377424__header-six","paragraph-one":"richeditor3922377424__paragraph-one","unstyled":"richeditor3922377424__unstyled","paragraph-three":"richeditor3922377424__paragraph-three","align-left":"richeditor3922377424__align-left","align-right":"richeditor3922377424__align-right","align-center":"richeditor3922377424__align-center","align-justify":"richeditor3922377424__align-justify","withMargin":"richeditor3922377424__withMargin","dir-rtl":"richeditor3922377424__dir-rtl"};
+export var classes = {"root":"richeditor4233028942__root","editor":"richeditor4233028942__editor","header-one":"richeditor4233028942__header-one","header-two":"richeditor4233028942__header-two","header-three":"richeditor4233028942__header-three","header-four":"richeditor4233028942__header-four","header-five":"richeditor4233028942__header-five","header-six":"richeditor4233028942__header-six","paragraph-one":"richeditor4233028942__paragraph-one","unstyled":"richeditor4233028942__unstyled","paragraph-three":"richeditor4233028942__paragraph-three","align-left":"richeditor4233028942__align-left","align-right":"richeditor4233028942__align-right","align-center":"richeditor4233028942__align-center","align-justify":"richeditor4233028942__align-justify","withMargin":"richeditor4233028942__withMargin","dir-rtl":"richeditor4233028942__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_ = "richtexteditor3976994117";
+var _namespace_ = "richtexteditor726371940";
 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":"richtexteditor3976994117__root","nativeInput":"richtexteditor3976994117__nativeInput","editor":"richtexteditor3976994117__editor"};
+export var classes = {"root":"richtexteditor726371940__root","nativeInput":"richtexteditor726371940__nativeInput","editor":"richtexteditor726371940__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_ = "toolbar3930465490";
+var _namespace_ = "toolbar1617446846";
 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":"toolbar3930465490__root","item":"toolbar3930465490__item","separator":"toolbar3930465490__separator","clearFormatting":"toolbar3930465490__clearFormatting","fullScreen":"toolbar3930465490__fullScreen","dropdownItemContent":"toolbar3930465490__dropdownItemContent","dropdownItemTitle":"toolbar3930465490__dropdownItemTitle","dropdownItemSubtitle":"toolbar3930465490__dropdownItemSubtitle","dropdownHeaderOne":"toolbar3930465490__dropdownHeaderOne","dropdownHeaderTwo":"toolbar3930465490__dropdownHeaderTwo","dropdownHeaderThree":"toolbar3930465490__dropdownHeaderThree","dropdownHeaderFour":"toolbar3930465490__dropdownHeaderFour","dropdownHeaderFive":"toolbar3930465490__dropdownHeaderFive","dropdownHeaderSix":"toolbar3930465490__dropdownHeaderSix","dropdownParagraphOne":"toolbar3930465490__dropdownParagraphOne","dropdownNormalText":"toolbar3930465490__dropdownNormalText","dropdownParagraphThree":"toolbar3930465490__dropdownParagraphThree"};
+export var classes = {"root":"toolbar1617446846__root","item":"toolbar1617446846__item","separator":"toolbar1617446846__separator","clearFormatting":"toolbar1617446846__clearFormatting","fullScreen":"toolbar1617446846__fullScreen","dropdownItemContent":"toolbar1617446846__dropdownItemContent","dropdownItemTitle":"toolbar1617446846__dropdownItemTitle","dropdownItemSubtitle":"toolbar1617446846__dropdownItemSubtitle","dropdownHeaderOne":"toolbar1617446846__dropdownHeaderOne","dropdownHeaderTwo":"toolbar1617446846__dropdownHeaderTwo","dropdownHeaderThree":"toolbar1617446846__dropdownHeaderThree","dropdownHeaderFour":"toolbar1617446846__dropdownHeaderFour","dropdownHeaderFive":"toolbar1617446846__dropdownHeaderFive","dropdownHeaderSix":"toolbar1617446846__dropdownHeaderSix","dropdownParagraphOne":"toolbar1617446846__dropdownParagraphOne","dropdownNormalText":"toolbar1617446846__dropdownNormalText","dropdownParagraphThree":"toolbar1617446846__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/text/form-short-text.tsx

@@ -12,9 +12,6 @@ import { FormShortTextInput } from './form-short-text-input';
 
 export interface FormShortTextProps extends BaseInputProps<string> {}
 
-const specificValuesMessage = (displayName: string) =>
-  `${displayName} must be one of the allowed values`;
-
 const _FormShortText = (props: FormShortTextProps) => {
   const { field, dataHook, formControl, data } = props;
 
@@ -57,7 +54,7 @@ const _FormShortText = (props: FormShortTextProps) => {
           specificValues?.length &&
           !specificValues.some((option) => option.id === value)
         ) {
-          return specificValuesMessage(field.displayName);
+          return tf('CMS.formShortText.specificValues.invalidMessage');
         }
 
         if (value && patternRegex && !patternRegex.test(value)) {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "textview1100316184";
+var _namespace_ = "textview1501834101";
 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":"textview1100316184__root","textView":"textview1100316184__textView"};
+export var classes = {"root":"textview1501834101__root","textView":"textview1501834101__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/services/translations.ts

@@ -162,6 +162,7 @@ export type TranslationsKeys =
   | 'patterns-fields.reference.untitled'
   | 'CMS.richTextEditor.toolbar.button.tooltip.full-screen'
   | 'CMS.richTextEditor.toolbar.headerDropdown.option.h1.subtitle'
+  | 'CMS.formShortText.specificValues.invalidMessage'
   | 'CMS.audio.button.delete'
   | 'CMS.document.action.replace'
   | 'CMS.document.addMore.button.text'