@wix/patterns-fields 1.74.0 → 1.75.0

package/src/components/media-control/paste-url-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "pasteurlbutton2608013352";
+var _namespace_ = "pasteurlbutton62614613";
 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":"pasteurlbutton2608013352__root","iconButtonTooltip":"pasteurlbutton2608013352__iconButtonTooltip","iconButton":"pasteurlbutton2608013352__iconButton"};
+export var classes = {"root":"pasteurlbutton62614613__root","iconButtonTooltip":"pasteurlbutton62614613__iconButtonTooltip","iconButton":"pasteurlbutton62614613__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/form-media-gallery-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formmediagalleryfield4011032354";
+var _namespace_ = "formmediagalleryfield2420637271";
 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":"formmediagalleryfield4011032354__root","container":"formmediagalleryfield4011032354__container","viewBox":"formmediagalleryfield4011032354__viewBox","addItemWrapper":"formmediagalleryfield4011032354__addItemWrapper","addItem":"formmediagalleryfield4011032354__addItem","overlay":"formmediagalleryfield4011032354__overlay","image":"formmediagalleryfield4011032354__image","previewImage":"formmediagalleryfield4011032354__previewImage","previewVideo":"formmediagalleryfield4011032354__previewVideo"};
+export var classes = {"root":"formmediagalleryfield2420637271__root","container":"formmediagalleryfield2420637271__container","viewBox":"formmediagalleryfield2420637271__viewBox","addItemWrapper":"formmediagalleryfield2420637271__addItemWrapper","addItem":"formmediagalleryfield2420637271__addItem","overlay":"formmediagalleryfield2420637271__overlay","image":"formmediagalleryfield2420637271__image","previewImage":"formmediagalleryfield2420637271__previewImage","previewVideo":"formmediagalleryfield2420637271__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage2756082487";
+var _namespace_ = "mediaimage3743484186";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediaimage2756082487__root"};
+export var classes = {"root":"mediaimage3743484186__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage2756082487-from","to":"--mediaimage2756082487-to"}; 
+export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage3743484186-from","to":"--mediaimage3743484186-to"}; 
 
 
 

package/src/components/media-image/overlays/overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "overlay101189595";
+var _namespace_ = "overlay3849110904";
 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":"overlay101189595__root","iconOverlay":"overlay101189595__iconOverlay"};
+export var classes = {"root":"overlay3849110904__root","iconOverlay":"overlay3849110904__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-loader/media-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader2582308961";
+var _namespace_ = "medialoader1993987350";
 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":"medialoader2582308961__root","loader":"medialoader2582308961__loader"};
+export var classes = {"root":"medialoader1993987350__root","loader":"medialoader1993987350__loader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-tag/web-media-tag/media-tag.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "mediatag1371547298";
+var _namespace_ = "mediatag1475573568";
 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":"mediatag1371547298__root"};
+export var classes = {"root":"mediatag1475573568__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_ = "cellmultidocumentedit3805197963";
+var _namespace_ = "cellmultidocumentedit2282935291";
 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":"cellmultidocumentedit3805197963__root","chipTrigger":"cellmultidocumentedit3805197963__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit2282935291__root","chipTrigger":"cellmultidocumentedit2282935291__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_ = "formmultidocument2780086059";
+var _namespace_ = "formmultidocument1787570023";
 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":"formmultidocument2780086059__root","viewRoot":"formmultidocument2780086059__viewRoot","singleViewWrapper":"formmultidocument2780086059__singleViewWrapper","addDocumentButton":"formmultidocument2780086059__addDocumentButton"};
+export var classes = {"root":"formmultidocument1787570023__root","viewRoot":"formmultidocument1787570023__viewRoot","singleViewWrapper":"formmultidocument1787570023__singleViewWrapper","addDocumentButton":"formmultidocument1787570023__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/number-input/form-number-input.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { NumberInput } from '@wix/design-system';
+import type { NumberInputProps } from '@wix/design-system';
+
+import type { ControlledInputProps } from '../../types/controlled-input';
+
+export interface FormNumberInputProps
+  extends ControlledInputProps<number | null> {
+  inputRef?: NumberInputProps['inputRef'];
+  onInvalid?(value: string): void;
+}
+
+export const FormNumberInput: React.FC<FormNumberInputProps> = ({
+  data,
+  onChange,
+  onBlur,
+  readOnly,
+  autoFocus,
+  invalid,
+  dataHook,
+  inputRef,
+  onInvalid,
+}) => (
+  <NumberInput
+    value={data ?? undefined}
+    onChange={(value) => onChange(value)}
+    onBlur={onBlur}
+    readOnly={readOnly}
+    autoFocus={autoFocus}
+    status={invalid ? 'error' : undefined}
+    inputRef={inputRef}
+    onInvalid={(value) => onInvalid?.(value)}
+    dataHook={dataHook}
+  />
+);
+
+FormNumberInput.displayName = 'FormNumberInput';

package/src/components/number-input/form-number.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormField, NumberInput } from '@wix/design-system';
+import { FormField } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController } from '@wix/bex-core/form';
@@ -7,6 +7,7 @@ import { useController } from '@wix/bex-core/form';
 import { BaseInputProps } from '../../types/base-input';
 import { isGreaterThan, isLessThan } from '../../validations/number';
 import { isEmpty } from '../../validations/value';
+import { FormNumberInput } from './form-number-input';
 
 export interface FormNumberProps extends BaseInputProps<number | null> {}
 
@@ -51,12 +52,13 @@ const _FormNumber = (props: FormNumberProps) => {
       statusMessage={controller.fieldState.error?.message}
       dataHook={dataHook}
     >
-      <NumberInput
-        value={controller.field.value ?? undefined}
-        onChange={(e) => controller.field.onChange(e)}
+      <FormNumberInput
+        data={controller.field.value ?? null}
+        onChange={controller.field.onChange}
         onBlur={controller.field.onBlur}
         inputRef={controller.field.ref}
         dataHook={`number-${field.id}`}
+        invalid={Boolean(controller.fieldState.error)}
       />
     </FormField>
   );

package/src/components/number-input/index.ts

@@ -1,2 +1,3 @@
 export * from './cell-number-input';
 export * from './form-number';
+export * from './form-number-input';

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_ = "cellmultireferenceinput1942999998";
+var _namespace_ = "cellmultireferenceinput4229781845";
 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":"cellmultireferenceinput1942999998__root"};
+export var classes = {"root":"cellmultireferenceinput4229781845__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_ = "cellreferenceinput3406756589";
+var _namespace_ = "cellreferenceinput2806108015";
 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":"cellreferenceinput3406756589__root","autocomplete":"cellreferenceinput3406756589__autocomplete"};
+export var classes = {"root":"cellreferenceinput2806108015__root","autocomplete":"cellreferenceinput2806108015__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_ = "richcontentdefaultvalueinput1176116246";
+var _namespace_ = "richcontentdefaultvalueinput1301683321";
 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":"richcontentdefaultvalueinput1176116246__root","richContentEditorContainer":"richcontentdefaultvalueinput1176116246__richContentEditorContainer","editor":"richcontentdefaultvalueinput1176116246__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput1301683321__root","richContentEditorContainer":"richcontentdefaultvalueinput1301683321__richContentEditorContainer","editor":"richcontentdefaultvalueinput1301683321__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_ = "richcontentforminput1413552636";
+var _namespace_ = "richcontentforminput252005457";
 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":"richcontentforminput1413552636__root","editor":"richcontentforminput1413552636__editor"};
+export var classes = {"root":"richcontentforminput252005457__root","editor":"richcontentforminput252005457__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_ = "richcontentformreadonlyinput3469320707";
+var _namespace_ = "richcontentformreadonlyinput1891295513";
 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":"richcontentformreadonlyinput3469320707__root"};
+export var classes = {"root":"richcontentformreadonlyinput1891295513__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_ = "fullscreenmodal121150353";
+var _namespace_ = "fullscreenmodal3562829559";
 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":"fullscreenmodal121150353__root","modalContent":"fullscreenmodal121150353__modalContent"};
+export var classes = {"root":"fullscreenmodal3562829559__root","modalContent":"fullscreenmodal3562829559__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_ = "publishloader3536264979";
+var _namespace_ = "publishloader2046471268";
 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":"publishloader3536264979__root","publishLoader":"publishloader3536264979__publishLoader"};
+export var classes = {"root":"publishloader2046471268__root","publishLoader":"publishloader2046471268__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_ = "togglefullscreenbutton2020405308";
+var _namespace_ = "togglefullscreenbutton3926881265";
 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":"togglefullscreenbutton2020405308__root"};
+export var classes = {"root":"togglefullscreenbutton3926881265__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_ = "richcontenteditor3175937956";
+var _namespace_ = "richcontenteditor2590819754";
 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":"richcontenteditor3175937956__root","toolbarContainer":"richcontenteditor3175937956__toolbarContainer","footerToolbarContainer":"richcontenteditor3175937956__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3175937956__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3175937956__editor","modalEditor":"richcontenteditor3175937956__modalEditor"};
+export var classes = {"root":"richcontenteditor2590819754__root","toolbarContainer":"richcontenteditor2590819754__toolbarContainer","footerToolbarContainer":"richcontenteditor2590819754__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor2590819754__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor2590819754__editor","modalEditor":"richcontenteditor2590819754__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_ = "richcontenttoolbar2225509028";
+var _namespace_ = "richcontenttoolbar53582336";
 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":"richcontenttoolbar2225509028__root","toolbar":"richcontenttoolbar2225509028__toolbar","toolbarButton":"richcontenttoolbar2225509028__toolbarButton","separator":"richcontenttoolbar2225509028__separator"};
+export var classes = {"root":"richcontenttoolbar53582336__root","toolbar":"richcontenttoolbar53582336__toolbar","toolbarButton":"richcontenttoolbar53582336__toolbarButton","separator":"richcontenttoolbar53582336__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_ = "richcontentviewer818683085";
+var _namespace_ = "richcontentviewer1550030462";
 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":"richcontentviewer818683085__root","viewer":"richcontentviewer818683085__viewer","modalViewer":"richcontentviewer818683085__modalViewer"};
+export var classes = {"root":"richcontentviewer1550030462__root","viewer":"richcontentviewer1550030462__viewer","modalViewer":"richcontentviewer1550030462__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_ = "richeditor207855410";
+var _namespace_ = "richeditor1718041748";
 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":"richeditor207855410__root","editor":"richeditor207855410__editor","header-one":"richeditor207855410__header-one","header-two":"richeditor207855410__header-two","header-three":"richeditor207855410__header-three","header-four":"richeditor207855410__header-four","header-five":"richeditor207855410__header-five","header-six":"richeditor207855410__header-six","paragraph-one":"richeditor207855410__paragraph-one","unstyled":"richeditor207855410__unstyled","paragraph-three":"richeditor207855410__paragraph-three","align-left":"richeditor207855410__align-left","align-right":"richeditor207855410__align-right","align-center":"richeditor207855410__align-center","align-justify":"richeditor207855410__align-justify","withMargin":"richeditor207855410__withMargin","dir-rtl":"richeditor207855410__dir-rtl"};
+export var classes = {"root":"richeditor1718041748__root","editor":"richeditor1718041748__editor","header-one":"richeditor1718041748__header-one","header-two":"richeditor1718041748__header-two","header-three":"richeditor1718041748__header-three","header-four":"richeditor1718041748__header-four","header-five":"richeditor1718041748__header-five","header-six":"richeditor1718041748__header-six","paragraph-one":"richeditor1718041748__paragraph-one","unstyled":"richeditor1718041748__unstyled","paragraph-three":"richeditor1718041748__paragraph-three","align-left":"richeditor1718041748__align-left","align-right":"richeditor1718041748__align-right","align-center":"richeditor1718041748__align-center","align-justify":"richeditor1718041748__align-justify","withMargin":"richeditor1718041748__withMargin","dir-rtl":"richeditor1718041748__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_ = "richtexteditor4232484640";
+var _namespace_ = "richtexteditor1211455191";
 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":"richtexteditor4232484640__root","nativeInput":"richtexteditor4232484640__nativeInput","editor":"richtexteditor4232484640__editor"};
+export var classes = {"root":"richtexteditor1211455191__root","nativeInput":"richtexteditor1211455191__nativeInput","editor":"richtexteditor1211455191__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_ = "toolbar541225243";
+var _namespace_ = "toolbar904415871";
 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":"toolbar541225243__root","item":"toolbar541225243__item","separator":"toolbar541225243__separator","clearFormatting":"toolbar541225243__clearFormatting","fullScreen":"toolbar541225243__fullScreen","dropdownItemContent":"toolbar541225243__dropdownItemContent","dropdownItemTitle":"toolbar541225243__dropdownItemTitle","dropdownItemSubtitle":"toolbar541225243__dropdownItemSubtitle","dropdownHeaderOne":"toolbar541225243__dropdownHeaderOne","dropdownHeaderTwo":"toolbar541225243__dropdownHeaderTwo","dropdownHeaderThree":"toolbar541225243__dropdownHeaderThree","dropdownHeaderFour":"toolbar541225243__dropdownHeaderFour","dropdownHeaderFive":"toolbar541225243__dropdownHeaderFive","dropdownHeaderSix":"toolbar541225243__dropdownHeaderSix","dropdownParagraphOne":"toolbar541225243__dropdownParagraphOne","dropdownNormalText":"toolbar541225243__dropdownNormalText","dropdownParagraphThree":"toolbar541225243__dropdownParagraphThree"};
+export var classes = {"root":"toolbar904415871__root","item":"toolbar904415871__item","separator":"toolbar904415871__separator","clearFormatting":"toolbar904415871__clearFormatting","fullScreen":"toolbar904415871__fullScreen","dropdownItemContent":"toolbar904415871__dropdownItemContent","dropdownItemTitle":"toolbar904415871__dropdownItemTitle","dropdownItemSubtitle":"toolbar904415871__dropdownItemSubtitle","dropdownHeaderOne":"toolbar904415871__dropdownHeaderOne","dropdownHeaderTwo":"toolbar904415871__dropdownHeaderTwo","dropdownHeaderThree":"toolbar904415871__dropdownHeaderThree","dropdownHeaderFour":"toolbar904415871__dropdownHeaderFour","dropdownHeaderFive":"toolbar904415871__dropdownHeaderFive","dropdownHeaderSix":"toolbar904415871__dropdownHeaderSix","dropdownParagraphOne":"toolbar904415871__dropdownParagraphOne","dropdownNormalText":"toolbar904415871__dropdownNormalText","dropdownParagraphThree":"toolbar904415871__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -0,0 +1,121 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  AutoComplete,
+  Input,
+  listItemSelectBuilder,
+  type DropdownLayoutValueOption,
+} from '@wix/design-system';
+
+import type { ControlledInputProps } from '../../types/controlled-input';
+
+export interface FormShortTextOption {
+  id: string;
+  value: string;
+}
+
+export interface FormShortTextInputProps extends ControlledInputProps<string> {
+  options?: FormShortTextOption[];
+  required?: boolean;
+  placeholder?: string;
+  emptyStateMessage?: string;
+  inputRef?: React.Ref<HTMLInputElement>;
+}
+
+export const FormShortTextInput: React.FC<FormShortTextInputProps> = ({
+  data,
+  onChange,
+  onBlur,
+  readOnly,
+  autoFocus,
+  invalid,
+  dataHook,
+  options,
+  required,
+  placeholder,
+  emptyStateMessage,
+  inputRef,
+}) => {
+  const [searchValue, setSearchValue] = useState<string>();
+  const selectedOption = options?.find((option) => option.id === data);
+  const selectedId = selectedOption?.id;
+  const displayValue = searchValue ?? selectedOption?.value ?? data;
+
+  const dropdownOptions = useMemo(() => {
+    const source = searchValue
+      ? options?.filter((option) =>
+          option.value.toLowerCase().includes(searchValue.toLowerCase()),
+        )
+      : options;
+    return (source ?? []).map((option) =>
+      listItemSelectBuilder({
+        id: option.id,
+        title: option.value,
+        selected: option.id === selectedId,
+      }),
+    );
+  }, [options, searchValue, selectedId]);
+
+  const handleSelect = useCallback(
+    (option: DropdownLayoutValueOption) => {
+      onChange(String(option.id));
+      setSearchValue(undefined);
+    },
+    [onChange],
+  );
+
+  const handleSearch = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setSearchValue(event.target.value);
+      if (!event.target.value) {
+        onChange('');
+      }
+    },
+    [onChange],
+  );
+
+  const handleBlur = useCallback(() => {
+    setSearchValue(undefined);
+    onBlur?.();
+  }, [onBlur]);
+
+  if (!options?.length) {
+    return (
+      <Input
+        value={data}
+        onChange={(event) => onChange(event.target.value)}
+        onBlur={onBlur}
+        readOnly={readOnly}
+        autoFocus={autoFocus}
+        status={invalid ? 'error' : undefined}
+        inputRef={inputRef}
+        placeholder={placeholder}
+        dataHook={dataHook}
+      />
+    );
+  }
+
+  return (
+    <AutoComplete
+      value={displayValue}
+      selectedId={selectedId}
+      options={dropdownOptions}
+      onSelect={handleSelect}
+      onChange={handleSearch}
+      onClear={() => {
+        onChange('');
+        setSearchValue(undefined);
+      }}
+      onBlur={handleBlur}
+      disabled={readOnly}
+      autoFocus={autoFocus}
+      status={invalid ? 'error' : undefined}
+      clearButton={!required}
+      placeholder={placeholder}
+      emptyStateMessage={emptyStateMessage}
+      inputRef={inputRef}
+      dataHook={dataHook}
+    />
+  );
+};
+
+FormShortTextInput.displayName = 'FormShortTextInput';

package/src/components/text/form-short-text.driver.ts

@@ -29,6 +29,10 @@ export function FormShortTextDriver(
       hasSpecificValues
         ? autocomplete.inputDriver.getValue()
         : input.getValue(),
+    getPlaceholder: async () =>
+      hasSpecificValues
+        ? autocomplete.inputDriver.getPlaceholder()
+        : input.getPlaceholder(),
     enterText: async (value: string) =>
       hasSpecificValues
         ? autocomplete.inputDriver.enterText(value)