@wix/patterns-fields 1.33.0 → 1.36.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "overlay4219437867";
+var _namespace_ = "overlay448562002";
 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":"overlay4219437867__root","iconOverlay":"overlay4219437867__iconOverlay"};
+export var classes = {"root":"overlay448562002__root","iconOverlay":"overlay448562002__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_ = "medialoader1547496445";
+var _namespace_ = "medialoader732921463";
 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":"medialoader1547496445__root","loader":"medialoader1547496445__loader"};
+export var classes = {"root":"medialoader732921463__root","loader":"medialoader732921463__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_ = "mediatag3157960080";
+var _namespace_ = "mediatag803492834";
 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":"mediatag3157960080__root"};
+export var classes = {"root":"mediatag803492834__root"};
 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_ = "formmultidocument1870890700";
+var _namespace_ = "formmultidocument441385592";
 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":"formmultidocument1870890700__root","viewRoot":"formmultidocument1870890700__viewRoot","singleViewWrapper":"formmultidocument1870890700__singleViewWrapper","addDocumentButton":"formmultidocument1870890700__addDocumentButton"};
+export var classes = {"root":"formmultidocument441385592__root","viewRoot":"formmultidocument441385592__viewRoot","singleViewWrapper":"formmultidocument441385592__singleViewWrapper","addDocumentButton":"formmultidocument441385592__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/number-input/form-number.driver.ts

@@ -0,0 +1,25 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  FormFieldUniDriver,
+  NumberInputUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+
+export function FormNumberDriver(base: UniDriver, body: UniDriver) {
+  const formField = FormFieldUniDriver(base, body);
+  const input = NumberInputUniDriver(base, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: async () => {
+      const labelEl = await formField.getLabel();
+      return labelEl?.textContent ?? '';
+    },
+    getValue: () => input.getValue(),
+    enterText: (value: string) => input.enterText(value),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+    isRequired: () => formField.isRequired(),
+  };
+}

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { FormField, NumberInput } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useController } from '@wix/bex-core/form';
+
+import { BaseInputProps } from '../../types/base-input';
+import { isGreaterThan, isLessThan } from '../../validations/number';
+
+export interface FormNumberProps extends BaseInputProps<number | null> {}
+
+const _FormNumber = (props: FormNumberProps) => {
+  const { field, dataHook, formControl, data } = props;
+
+  const { translate: t } = useWixPatternsContainer();
+
+  const numberRange = field.validation?.numberRange;
+  const min = numberRange?.min;
+  const max = numberRange?.max;
+
+  const controller = useController({
+    name: field.id,
+    control: formControl,
+    defaultValue: data?.[field.id],
+    rules: {
+      validate: (value) => {
+        if (
+          field.validation?.required &&
+          (value === null || value === undefined || value === '')
+        ) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+
+        if (value !== null && value !== undefined) {
+          if (min !== undefined && isLessThan(value, min)) {
+            return t('cairo.fieldValidation.minNumber', { minAmount: min });
+          }
+          if (max !== undefined && isGreaterThan(value, max)) {
+            return t('cairo.fieldValidation.maxNumber', { maxAmount: max });
+          }
+        }
+
+        return true;
+      },
+    },
+  });
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+    >
+      <NumberInput
+        value={controller.field.value ?? undefined}
+        onChange={(e) => controller.field.onChange(e)}
+        onBlur={controller.field.onBlur}
+        inputRef={controller.field.ref}
+        dataHook={`number-${field.id}`}
+      />
+    </FormField>
+  );
+};
+
+export const FormNumber = observer(_FormNumber);

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput2828272189";
+var _namespace_ = "cellreferenceinput2634747470";
 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":"cellreferenceinput2828272189__root","autocomplete":"cellreferenceinput2828272189__autocomplete"};
+export var classes = {"root":"cellreferenceinput2634747470__root","autocomplete":"cellreferenceinput2634747470__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/cell-reference-input.tsx

@@ -148,6 +148,7 @@ export const CellReferenceInput = React.forwardRef<
       >
         <AutoComplete
           ref={acRef}
+          dataHook="reference-input-autocomplete"
           className={st(classes.autocomplete)}
           size="small"
           border="none"

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_ = "richcontentdefaultvalueinput3397011445";
+var _namespace_ = "richcontentdefaultvalueinput2663839494";
 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":"richcontentdefaultvalueinput3397011445__root","richContentEditorContainer":"richcontentdefaultvalueinput3397011445__richContentEditorContainer","editor":"richcontentdefaultvalueinput3397011445__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput2663839494__root","richContentEditorContainer":"richcontentdefaultvalueinput2663839494__richContentEditorContainer","editor":"richcontentdefaultvalueinput2663839494__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_ = "richcontentforminput3261936449";
+var _namespace_ = "richcontentforminput2084404769";
 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":"richcontentforminput3261936449__root","editor":"richcontentforminput3261936449__editor"};
+export var classes = {"root":"richcontentforminput2084404769__root","editor":"richcontentforminput2084404769__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_ = "richcontentformreadonlyinput4192965545";
+var _namespace_ = "richcontentformreadonlyinput2046372641";
 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":"richcontentformreadonlyinput4192965545__root"};
+export var classes = {"root":"richcontentformreadonlyinput2046372641__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_ = "fullscreenmodal2136777804";
+var _namespace_ = "fullscreenmodal494200678";
 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":"fullscreenmodal2136777804__root","modalContent":"fullscreenmodal2136777804__modalContent"};
+export var classes = {"root":"fullscreenmodal494200678__root","modalContent":"fullscreenmodal494200678__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_ = "publishloader4122031313";
+var _namespace_ = "publishloader3698165698";
 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":"publishloader4122031313__root","publishLoader":"publishloader4122031313__publishLoader"};
+export var classes = {"root":"publishloader3698165698__root","publishLoader":"publishloader3698165698__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_ = "togglefullscreenbutton118374390";
+var _namespace_ = "togglefullscreenbutton240346221";
 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":"togglefullscreenbutton118374390__root"};
+export var classes = {"root":"togglefullscreenbutton240346221__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_ = "richcontenteditor1736622042";
+var _namespace_ = "richcontenteditor1214222774";
 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":"richcontenteditor1736622042__root","toolbarContainer":"richcontenteditor1736622042__toolbarContainer","footerToolbarContainer":"richcontenteditor1736622042__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1736622042__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1736622042__editor","modalEditor":"richcontenteditor1736622042__modalEditor"};
+export var classes = {"root":"richcontenteditor1214222774__root","toolbarContainer":"richcontenteditor1214222774__toolbarContainer","footerToolbarContainer":"richcontenteditor1214222774__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1214222774__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1214222774__editor","modalEditor":"richcontenteditor1214222774__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_ = "richcontenttoolbar2377248550";
+var _namespace_ = "richcontenttoolbar647559125";
 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":"richcontenttoolbar2377248550__root","toolbar":"richcontenttoolbar2377248550__toolbar","toolbarButton":"richcontenttoolbar2377248550__toolbarButton"};
+export var classes = {"root":"richcontenttoolbar647559125__root","toolbar":"richcontenttoolbar647559125__toolbar","toolbarButton":"richcontenttoolbar647559125__toolbarButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-viewer/rich-content-viewer.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentviewer3514534486";
+var _namespace_ = "richcontentviewer4124111482";
 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":"richcontentviewer3514534486__root","viewer":"richcontentviewer3514534486__viewer","modalViewer":"richcontentviewer3514534486__modalViewer"};
+export var classes = {"root":"richcontentviewer4124111482__root","viewer":"richcontentviewer4124111482__viewer","modalViewer":"richcontentviewer4124111482__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_ = "richeditor60697488";
+var _namespace_ = "richeditor3766248638";
 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":"richeditor60697488__root","editor":"richeditor60697488__editor","header-one":"richeditor60697488__header-one","header-two":"richeditor60697488__header-two","header-three":"richeditor60697488__header-three","header-four":"richeditor60697488__header-four","header-five":"richeditor60697488__header-five","header-six":"richeditor60697488__header-six","paragraph-one":"richeditor60697488__paragraph-one","unstyled":"richeditor60697488__unstyled","paragraph-three":"richeditor60697488__paragraph-three","align-left":"richeditor60697488__align-left","align-right":"richeditor60697488__align-right","align-center":"richeditor60697488__align-center","align-justify":"richeditor60697488__align-justify","withMargin":"richeditor60697488__withMargin","dir-rtl":"richeditor60697488__dir-rtl"};
+export var classes = {"root":"richeditor3766248638__root","editor":"richeditor3766248638__editor","header-one":"richeditor3766248638__header-one","header-two":"richeditor3766248638__header-two","header-three":"richeditor3766248638__header-three","header-four":"richeditor3766248638__header-four","header-five":"richeditor3766248638__header-five","header-six":"richeditor3766248638__header-six","paragraph-one":"richeditor3766248638__paragraph-one","unstyled":"richeditor3766248638__unstyled","paragraph-three":"richeditor3766248638__paragraph-three","align-left":"richeditor3766248638__align-left","align-right":"richeditor3766248638__align-right","align-center":"richeditor3766248638__align-center","align-justify":"richeditor3766248638__align-justify","withMargin":"richeditor3766248638__withMargin","dir-rtl":"richeditor3766248638__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_ = "richtexteditor3533418776";
+var _namespace_ = "richtexteditor861894303";
 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":"richtexteditor3533418776__root","nativeInput":"richtexteditor3533418776__nativeInput","editor":"richtexteditor3533418776__editor"};
+export var classes = {"root":"richtexteditor861894303__root","nativeInput":"richtexteditor861894303__nativeInput","editor":"richtexteditor861894303__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_ = "toolbar1298222680";
+var _namespace_ = "toolbar3272803868";
 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":"toolbar1298222680__root","item":"toolbar1298222680__item","separator":"toolbar1298222680__separator","clearFormatting":"toolbar1298222680__clearFormatting","fullScreen":"toolbar1298222680__fullScreen","dropdownItemContent":"toolbar1298222680__dropdownItemContent","dropdownItemTitle":"toolbar1298222680__dropdownItemTitle","dropdownItemSubtitle":"toolbar1298222680__dropdownItemSubtitle","dropdownHeaderOne":"toolbar1298222680__dropdownHeaderOne","dropdownHeaderTwo":"toolbar1298222680__dropdownHeaderTwo","dropdownHeaderThree":"toolbar1298222680__dropdownHeaderThree","dropdownHeaderFour":"toolbar1298222680__dropdownHeaderFour","dropdownHeaderFive":"toolbar1298222680__dropdownHeaderFive","dropdownHeaderSix":"toolbar1298222680__dropdownHeaderSix","dropdownParagraphOne":"toolbar1298222680__dropdownParagraphOne","dropdownNormalText":"toolbar1298222680__dropdownNormalText","dropdownParagraphThree":"toolbar1298222680__dropdownParagraphThree"};
+export var classes = {"root":"toolbar3272803868__root","item":"toolbar3272803868__item","separator":"toolbar3272803868__separator","clearFormatting":"toolbar3272803868__clearFormatting","fullScreen":"toolbar3272803868__fullScreen","dropdownItemContent":"toolbar3272803868__dropdownItemContent","dropdownItemTitle":"toolbar3272803868__dropdownItemTitle","dropdownItemSubtitle":"toolbar3272803868__dropdownItemSubtitle","dropdownHeaderOne":"toolbar3272803868__dropdownHeaderOne","dropdownHeaderTwo":"toolbar3272803868__dropdownHeaderTwo","dropdownHeaderThree":"toolbar3272803868__dropdownHeaderThree","dropdownHeaderFour":"toolbar3272803868__dropdownHeaderFour","dropdownHeaderFive":"toolbar3272803868__dropdownHeaderFive","dropdownHeaderSix":"toolbar3272803868__dropdownHeaderSix","dropdownParagraphOne":"toolbar3272803868__dropdownParagraphOne","dropdownNormalText":"toolbar3272803868__dropdownNormalText","dropdownParagraphThree":"toolbar3272803868__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -0,0 +1,26 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  FormFieldUniDriver,
+  InputAreaUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+
+export function FormLongTextDriver(base: UniDriver, body: UniDriver) {
+  const formField = FormFieldUniDriver(base, body);
+  const inputBase = base.$(`[data-hook^="long-text-"]`);
+  const input = InputAreaUniDriver(inputBase, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: async () => {
+      const labelEl = await formField.getLabel();
+      return labelEl?.textContent ?? '';
+    },
+    getValue: () => input.getValue(),
+    enterText: (value: string) => input.enterText(value),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+    isRequired: () => formField.isRequired(),
+  };
+}

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { FormField, InputArea } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useController } from '@wix/bex-core/form';
+
+import { BaseInputProps } from '../../types/base-input';
+import { isEmpty } from '../../validations/string';
+
+export interface FormLongTextProps extends BaseInputProps<string> {}
+
+const _FormLongText = (props: FormLongTextProps) => {
+  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) => {
+        if (field.validation?.required && isEmpty(value)) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+
+        return true;
+      },
+    },
+  });
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+    >
+      <InputArea
+        value={controller.field.value}
+        onChange={(e) => controller.field.onChange?.(e.target.value)}
+        onBlur={controller.field.onBlur}
+        ref={controller.field.ref}
+        dataHook={`long-text-${field.id}`}
+      />
+    </FormField>
+  );
+};
+
+export const FormLongText = observer(_FormLongText);

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

@@ -0,0 +1,28 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  FormFieldUniDriver,
+  InputUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+
+export function FormShortTextDriver(base: UniDriver, body: UniDriver) {
+  const formField = FormFieldUniDriver(base, body);
+  const inputBase = base.$(`[data-hook^="short-text-"]`);
+  const input = InputUniDriver(inputBase, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: async () => {
+      const labelEl = await formField.getLabel();
+      return labelEl?.textContent ?? '';
+    },
+    getValue: () => input.getValue(),
+    enterText: (value: string) => input.enterText(value),
+    blur: () => input.blur(),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+    getCharCountLeft: () => formField.getLengthLeft(),
+    isRequired: () => formField.isRequired(),
+  };
+}

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { FormField, Input } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useController } from '@wix/bex-core/form';
+
+import { BaseInputProps } from '../../types/base-input';
+import { isEmpty, isLongerThan, isShorterThan } from '../../validations/string';
+
+export interface FormShortTextProps extends BaseInputProps<string> {}
+
+const _FormShortText = (props: FormShortTextProps) => {
+  const { field, dataHook, formControl, data } = props;
+
+  const { translate: t } = useWixPatternsContainer();
+
+  const stringLengthRange = field.validation?.stringLengthRange;
+  const minLength = stringLengthRange?.minLength;
+  const maxLength = stringLengthRange?.maxLength;
+
+  const controller = useController({
+    name: field.id,
+    control: formControl,
+    defaultValue: data?.[field.id],
+    rules: {
+      validate: (value) => {
+        if (field.validation?.required && isEmpty(value)) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+
+        if (value && minLength && isShorterThan(value, minLength)) {
+          return t('cairo.fieldValidation.minCharacter', {
+            charMin: minLength,
+          });
+        }
+
+        if (value && maxLength && isLongerThan(value, maxLength)) {
+          return t('cairo.fieldValidation.maxCharacter', {
+            charMax: maxLength,
+          });
+        }
+
+        return true;
+      },
+    },
+  });
+
+  const charCount = maxLength
+    ? maxLength - controller.field.value?.length
+    : undefined;
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      charCount={charCount}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+    >
+      <Input
+        value={controller.field.value}
+        onChange={(e) => controller.field.onChange?.(e.target.value)}
+        onBlur={controller.field.onBlur}
+        dataHook={`short-text-${field.id}`}
+        ref={controller.field.ref}
+      />
+    </FormField>
+  );
+};
+
+export const FormShortText = observer(_FormShortText);

package/src/components/text/index.ts

@@ -1,3 +1,5 @@
 export * from './text-view';
 export * from './cell-text-input';
 export * from './cell-autocomplete-input';
+export * from './form-long-text';
+export * from './form-short-text';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "textview846688269";
+var _namespace_ = "textview2761560688";
 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":"textview846688269__root","textView":"textview846688269__textView"};
+export var classes = {"root":"textview2761560688__root","textView":"textview2761560688__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};