@wix/patterns-fields 1.32.0 → 1.35.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader1457961175";
+var _namespace_ = "medialoader194269943";
 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":"medialoader1457961175__root","loader":"medialoader1457961175__loader"};
+export var classes = {"root":"medialoader194269943__root","loader":"medialoader194269943__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_ = "mediatag2697438629";
+var _namespace_ = "mediatag1044101107";
 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":"mediatag2697438629__root"};
+export var classes = {"root":"mediatag1044101107__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_ = "formmultidocument1813531360";
+var _namespace_ = "formmultidocument2601852807";
 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":"formmultidocument1813531360__root","viewRoot":"formmultidocument1813531360__viewRoot","singleViewWrapper":"formmultidocument1813531360__singleViewWrapper","addDocumentButton":"formmultidocument1813531360__addDocumentButton"};
+export var classes = {"root":"formmultidocument2601852807__root","viewRoot":"formmultidocument2601852807__viewRoot","singleViewWrapper":"formmultidocument2601852807__singleViewWrapper","addDocumentButton":"formmultidocument2601852807__addDocumentButton"};
 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_ = "cellreferenceinput121340969";
+var _namespace_ = "cellreferenceinput905880240";
 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":"cellreferenceinput121340969__root","autocomplete":"cellreferenceinput121340969__autocomplete"};
+export var classes = {"root":"cellreferenceinput905880240__root","autocomplete":"cellreferenceinput905880240__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

@@ -1,3 +1,5 @@
+@property st-global(--topToolbarHeight);
+@property st-global(--bottomToolbarHeight);
 @import "../variables.css";
 @import "../rich-content-editor/rich-content-editor.st.css";
 

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_ = "richcontentdefaultvalueinput1183094844";
+var _namespace_ = "richcontentdefaultvalueinput736114662";
 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":"richcontentdefaultvalueinput1183094844__root","richContentEditorContainer":"richcontentdefaultvalueinput1183094844__richContentEditorContainer","editor":"richcontentdefaultvalueinput1183094844__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput736114662__root","richContentEditorContainer":"richcontentdefaultvalueinput736114662__richContentEditorContainer","editor":"richcontentdefaultvalueinput736114662__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"topToolbarHeight":"--richcontentdefaultvalueinput1183094844-topToolbarHeight","bottomToolbarHeight":"--richcontentdefaultvalueinput1183094844-bottomToolbarHeight"}; 
+export var vars = {"topToolbarHeight":"--topToolbarHeight","bottomToolbarHeight":"--bottomToolbarHeight"}; 
 
 
 

package/src/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css

@@ -1,3 +1,6 @@
+@property st-global(--topToolbarHeight);
+@property st-global(--bottomToolbarHeight);
+
 @import "../variables.css";
 @import "../rich-content-editor/rich-content-editor.st.css";
 

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_ = "richcontentforminput413467513";
+var _namespace_ = "richcontentforminput3777550514";
 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":"richcontentforminput413467513__root","editor":"richcontentforminput413467513__editor"};
+export var classes = {"root":"richcontentforminput3777550514__root","editor":"richcontentforminput3777550514__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-blue-300":"--wds-color-blue-300","wds-border-radius-300":"--wds-border-radius-300","wds-color-blue-100":"--wds-color-blue-100","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard","topToolbarHeight":"--richcontentforminput413467513-topToolbarHeight","bottomToolbarHeight":"--richcontentforminput413467513-bottomToolbarHeight"}; 
+export var vars = {"topToolbarHeight":"--topToolbarHeight","bottomToolbarHeight":"--bottomToolbarHeight","wds-color-blue-300":"--wds-color-blue-300","wds-border-radius-300":"--wds-border-radius-300","wds-color-blue-100":"--wds-color-blue-100","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard"}; 
 
 
 

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_ = "richcontentformreadonlyinput1517374699";
+var _namespace_ = "richcontentformreadonlyinput3358668425";
 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":"richcontentformreadonlyinput1517374699__root"};
+export var classes = {"root":"richcontentformreadonlyinput3358668425__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_ = "fullscreenmodal2704440017";
+var _namespace_ = "fullscreenmodal3348958126";
 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":"fullscreenmodal2704440017__root","modalContent":"fullscreenmodal2704440017__modalContent"};
+export var classes = {"root":"fullscreenmodal3348958126__root","modalContent":"fullscreenmodal3348958126__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_ = "publishloader804101558";
+var _namespace_ = "publishloader3887750119";
 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":"publishloader804101558__root","publishLoader":"publishloader804101558__publishLoader"};
+export var classes = {"root":"publishloader3887750119__root","publishLoader":"publishloader3887750119__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_ = "togglefullscreenbutton2282495101";
+var _namespace_ = "togglefullscreenbutton1189231771";
 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":"togglefullscreenbutton2282495101__root"};
+export var classes = {"root":"togglefullscreenbutton1189231771__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

@@ -1,3 +1,4 @@
+@property st-global(--wds-font-family-default);
 @import "../variables.css";
 
 .root {

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_ = "richcontenteditor3635471926";
+var _namespace_ = "richcontenteditor1227167218";
 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":"richcontenteditor3635471926__root","toolbarContainer":"richcontenteditor3635471926__toolbarContainer","footerToolbarContainer":"richcontenteditor3635471926__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3635471926__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3635471926__editor","modalEditor":"richcontenteditor3635471926__modalEditor"};
+export var classes = {"root":"richcontenteditor1227167218__root","toolbarContainer":"richcontenteditor1227167218__toolbarContainer","footerToolbarContainer":"richcontenteditor1227167218__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1227167218__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1227167218__editor","modalEditor":"richcontenteditor1227167218__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-font-family-default":"--richcontenteditor3635471926-wds-font-family-default"}; 
+export var vars = {"wds-font-family-default":"--wds-font-family-default"}; 
 
 
 

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_ = "richcontenttoolbar878042027";
+var _namespace_ = "richcontenttoolbar2231298574";
 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":"richcontenttoolbar878042027__root","toolbar":"richcontenttoolbar878042027__toolbar","toolbarButton":"richcontenttoolbar878042027__toolbarButton"};
+export var classes = {"root":"richcontenttoolbar2231298574__root","toolbar":"richcontenttoolbar2231298574__toolbar","toolbarButton":"richcontenttoolbar2231298574__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_ = "richcontentviewer1805163026";
+var _namespace_ = "richcontentviewer1117074979";
 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":"richcontentviewer1805163026__root","viewer":"richcontentviewer1805163026__viewer","modalViewer":"richcontentviewer1805163026__modalViewer"};
+export var classes = {"root":"richcontentviewer1117074979__root","viewer":"richcontentviewer1117074979__viewer","modalViewer":"richcontentviewer1117074979__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

@@ -12,6 +12,9 @@
 @property st-global(--wds-font-size-500);
 @property st-global(--wds-font-line-height-300);
 
+@property st-global(--wsr-color-D10);
+@property st-global(--wsr-color-D70);
+
 @property st-global(--rt-h1-fontSize);
 @property st-global(--rt-h1-fontStyle);
 @property st-global(--rt-h1-fontWeight);

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_ = "richeditor1229681123";
+var _namespace_ = "richeditor551068837";
 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":"richeditor1229681123__root","editor":"richeditor1229681123__editor","header-one":"richeditor1229681123__header-one","header-two":"richeditor1229681123__header-two","header-three":"richeditor1229681123__header-three","header-four":"richeditor1229681123__header-four","header-five":"richeditor1229681123__header-five","header-six":"richeditor1229681123__header-six","paragraph-one":"richeditor1229681123__paragraph-one","unstyled":"richeditor1229681123__unstyled","paragraph-three":"richeditor1229681123__paragraph-three","align-left":"richeditor1229681123__align-left","align-right":"richeditor1229681123__align-right","align-center":"richeditor1229681123__align-center","align-justify":"richeditor1229681123__align-justify","withMargin":"richeditor1229681123__withMargin","dir-rtl":"richeditor1229681123__dir-rtl"};
+export var classes = {"root":"richeditor551068837__root","editor":"richeditor551068837__editor","header-one":"richeditor551068837__header-one","header-two":"richeditor551068837__header-two","header-three":"richeditor551068837__header-three","header-four":"richeditor551068837__header-four","header-five":"richeditor551068837__header-five","header-six":"richeditor551068837__header-six","paragraph-one":"richeditor551068837__paragraph-one","unstyled":"richeditor551068837__unstyled","paragraph-three":"richeditor551068837__paragraph-three","align-left":"richeditor551068837__align-left","align-right":"richeditor551068837__align-right","align-center":"richeditor551068837__align-center","align-justify":"richeditor551068837__align-justify","withMargin":"richeditor551068837__withMargin","dir-rtl":"richeditor551068837__dir-rtl"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {"fontFamilyDefault":"var(--wds-font-family-default, var(--wsr-font-family, Madefor))","h1FontSize":"var(--rt-h1-fontSize, 72px)","h1FontStyle":"var(--rt-h1-fontStyle, normal)","h1FontWeight":"var(--rt-h1-fontWeight, var(--wds-font-weight-bold, 700))","h1FontFamily":"var(--rt-h1-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h1LineHeight":"var(--rt-h1-lineHeight, 1.33)","h1Font":"var(--rt-h1-fontStyle, normal) var(--rt-h1-fontWeight, var(--wds-font-weight-bold, 700)) var(--rt-h1-fontSize, 72px)/var(--rt-h1-lineHeight, 1.33) var(--rt-h1-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h2FontSize":"var(--rt-h2-fontSize, 42px)","h2FontStyle":"var(--rt-h2-fontStyle, normal)","h2FontWeight":"var(--rt-h2-fontWeight, var(--wds-font-weight-bold, 700))","h2FontFamily":"var(--rt-h2-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h2LineHeight":"var(--rt-h2-lineHeight, 1.2)","h2Font":"var(--rt-h2-fontStyle, normal) var(--rt-h2-fontWeight, var(--wds-font-weight-bold, 700)) var(--rt-h2-fontSize, 42px)/var(--rt-h2-lineHeight, 1.2) var(--rt-h2-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h3FontSize":"var(--rt-h3-fontSize, 38px)","h3FontStyle":"var(--rt-h3-fontStyle, normal)","h3FontWeight":"var(--rt-h3-fontWeight, var(--wds-font-weight-medium, 500))","h3FontFamily":"var(--rt-h3-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h3LineHeight":"var(--rt-h3-lineHeight, 1.2)","h3Font":"var(--rt-h3-fontStyle, normal) var(--rt-h3-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-h3-fontSize, 38px)/var(--rt-h3-lineHeight, 1.2) var(--rt-h3-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h4FontSize":"var(--rt-h4-fontSize, 34px)","h4FontStyle":"var(--rt-h4-fontStyle, normal)","h4FontWeight":"var(--rt-h4-fontWeight, var(--wds-font-weight-bold, 700))","h4FontFamily":"var(--rt-h4-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h4LineHeight":"var(--rt-h4-lineHeight, 1.2)","h4Font":"var(--rt-h4-fontStyle, normal) var(--rt-h4-fontWeight, var(--wds-font-weight-bold, 700)) var(--rt-h4-fontSize, 34px)/var(--rt-h4-lineHeight, 1.2) var(--rt-h4-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h5FontSize":"var(--rt-h5-fontSize, 28px)","h5FontStyle":"var(--rt-h5-fontStyle, normal)","h5FontWeight":"var(--rt-h5-fontWeight, var(--wds-font-weight-bold, 700))","h5FontFamily":"var(--rt-h5-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h5LineHeight":"var(--rt-h5-lineHeight, 1.2)","h5Font":"var(--rt-h5-fontStyle, normal) var(--rt-h5-fontWeight, var(--wds-font-weight-bold, 700)) var(--rt-h5-fontSize, 28px)/var(--rt-h5-lineHeight, 1.2) var(--rt-h5-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h6FontSize":"var(--rt-h6-fontSize, 22px)","h6FontStyle":"var(--rt-h6-fontStyle, normal)","h6FontWeight":"var(--rt-h6-fontWeight, var(--wds-font-weight-medium, 500))","h6FontFamily":"var(--rt-h6-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h6LineHeight":"var(--rt-h6-lineHeight, 1.2)","h6Font":"var(--rt-h6-fontStyle, normal) var(--rt-h6-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-h6-fontSize, 22px)/var(--rt-h6-lineHeight, 1.2) var(--rt-h6-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","p1FontSize":"var(--rt-p1-fontSize, 18px)","p1FontStyle":"var(--rt-p1-fontStyle, normal)","p1FontWeight":"var(--rt-p1-fontWeight, var(--wds-font-weight-medium, 500))","p1FontFamily":"var(--rt-p1-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","p1LineHeight":"var(--rt-p1-lineHeight, 24px)","p1Font":"var(--rt-p1-fontStyle, normal) var(--rt-p1-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-p1-fontSize, 18px)/var(--rt-p1-lineHeight, 24px) var(--rt-p1-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","unstyledFontSize":"var(--rt-unstyled-fontSize, 16px)","unstyledFontStyle":"var(--rt-unstyled-fontStyle, normal)","unstyledFontWeight":"var(--rt-unstyled-fontWeight, var(--wds-font-weight-medium, 500))","unstyledFontFamily":"var(--rt-unstyled-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","unstyledLineHeight":"var(--rt-unstyled-lineHeight, 24px)","unstyledFont":"var(--rt-unstyled-fontStyle, normal) var(--rt-unstyled-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-unstyled-fontSize, 16px)/var(--rt-unstyled-lineHeight, 24px) var(--rt-unstyled-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","p3FontSize":"var(--rt-p3-fontSize, 14px)","p3FontStyle":"var(--rt-p3-fontStyle, normal)","p3FontWeight":"var(--rt-p3-fontWeight, var(--wds-font-weight-medium, 500))","p3FontFamily":"var(--rt-p3-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","p3LineHeight":"var(--rt-p3-lineHeight, 18px)","p3Font":"var(--rt-p3-fontStyle, normal) var(--rt-p3-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-p3-fontSize, 14px)/var(--rt-p3-lineHeight, 18px) var(--rt-p3-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))"}; 
-export var vars = {"wds-color-black-100":"--wds-color-black-100","wds-color-black-700":"--wds-color-black-700","wds-font-family-default":"--wds-font-family-default","wsr-font-family":"--wsr-font-family","wds-font-weight-medium":"--wds-font-weight-medium","wds-font-weight-bold":"--wds-font-weight-bold","wds-font-size-500":"--wds-font-size-500","wds-font-line-height-300":"--wds-font-line-height-300","rt-h1-fontSize":"--rt-h1-fontSize","rt-h1-fontStyle":"--rt-h1-fontStyle","rt-h1-fontWeight":"--rt-h1-fontWeight","rt-h1-fontFamily":"--rt-h1-fontFamily","rt-h1-lineHeight":"--rt-h1-lineHeight","rt-h2-fontSize":"--rt-h2-fontSize","rt-h2-fontStyle":"--rt-h2-fontStyle","rt-h2-fontWeight":"--rt-h2-fontWeight","rt-h2-fontFamily":"--rt-h2-fontFamily","rt-h2-lineHeight":"--rt-h2-lineHeight","rt-h3-fontSize":"--rt-h3-fontSize","rt-h3-fontStyle":"--rt-h3-fontStyle","rt-h3-fontWeight":"--rt-h3-fontWeight","rt-h3-fontFamily":"--rt-h3-fontFamily","rt-h3-lineHeight":"--rt-h3-lineHeight","rt-h4-fontSize":"--rt-h4-fontSize","rt-h4-fontStyle":"--rt-h4-fontStyle","rt-h4-fontWeight":"--rt-h4-fontWeight","rt-h4-fontFamily":"--rt-h4-fontFamily","rt-h4-lineHeight":"--rt-h4-lineHeight","rt-h5-fontSize":"--rt-h5-fontSize","rt-h5-fontStyle":"--rt-h5-fontStyle","rt-h5-fontWeight":"--rt-h5-fontWeight","rt-h5-fontFamily":"--rt-h5-fontFamily","rt-h5-lineHeight":"--rt-h5-lineHeight","rt-h6-fontSize":"--rt-h6-fontSize","rt-h6-fontStyle":"--rt-h6-fontStyle","rt-h6-fontWeight":"--rt-h6-fontWeight","rt-h6-fontFamily":"--rt-h6-fontFamily","rt-h6-lineHeight":"--rt-h6-lineHeight","rt-p1-fontSize":"--rt-p1-fontSize","rt-p1-fontStyle":"--rt-p1-fontStyle","rt-p1-fontWeight":"--rt-p1-fontWeight","rt-p1-fontFamily":"--rt-p1-fontFamily","rt-p1-lineHeight":"--rt-p1-lineHeight","rt-unstyled-fontSize":"--rt-unstyled-fontSize","rt-unstyled-fontStyle":"--rt-unstyled-fontStyle","rt-unstyled-fontWeight":"--rt-unstyled-fontWeight","rt-unstyled-fontFamily":"--rt-unstyled-fontFamily","rt-unstyled-lineHeight":"--rt-unstyled-lineHeight","rt-p3-fontSize":"--rt-p3-fontSize","rt-p3-fontStyle":"--rt-p3-fontStyle","rt-p3-fontWeight":"--rt-p3-fontWeight","rt-p3-fontFamily":"--rt-p3-fontFamily","rt-p3-lineHeight":"--rt-p3-lineHeight","wsr-color-D10":"--richeditor1229681123-wsr-color-D10","wsr-color-D70":"--richeditor1229681123-wsr-color-D70"}; 
+export var vars = {"wds-color-black-100":"--wds-color-black-100","wds-color-black-700":"--wds-color-black-700","wds-font-family-default":"--wds-font-family-default","wsr-font-family":"--wsr-font-family","wds-font-weight-medium":"--wds-font-weight-medium","wds-font-weight-bold":"--wds-font-weight-bold","wds-font-size-500":"--wds-font-size-500","wds-font-line-height-300":"--wds-font-line-height-300","wsr-color-D10":"--wsr-color-D10","wsr-color-D70":"--wsr-color-D70","rt-h1-fontSize":"--rt-h1-fontSize","rt-h1-fontStyle":"--rt-h1-fontStyle","rt-h1-fontWeight":"--rt-h1-fontWeight","rt-h1-fontFamily":"--rt-h1-fontFamily","rt-h1-lineHeight":"--rt-h1-lineHeight","rt-h2-fontSize":"--rt-h2-fontSize","rt-h2-fontStyle":"--rt-h2-fontStyle","rt-h2-fontWeight":"--rt-h2-fontWeight","rt-h2-fontFamily":"--rt-h2-fontFamily","rt-h2-lineHeight":"--rt-h2-lineHeight","rt-h3-fontSize":"--rt-h3-fontSize","rt-h3-fontStyle":"--rt-h3-fontStyle","rt-h3-fontWeight":"--rt-h3-fontWeight","rt-h3-fontFamily":"--rt-h3-fontFamily","rt-h3-lineHeight":"--rt-h3-lineHeight","rt-h4-fontSize":"--rt-h4-fontSize","rt-h4-fontStyle":"--rt-h4-fontStyle","rt-h4-fontWeight":"--rt-h4-fontWeight","rt-h4-fontFamily":"--rt-h4-fontFamily","rt-h4-lineHeight":"--rt-h4-lineHeight","rt-h5-fontSize":"--rt-h5-fontSize","rt-h5-fontStyle":"--rt-h5-fontStyle","rt-h5-fontWeight":"--rt-h5-fontWeight","rt-h5-fontFamily":"--rt-h5-fontFamily","rt-h5-lineHeight":"--rt-h5-lineHeight","rt-h6-fontSize":"--rt-h6-fontSize","rt-h6-fontStyle":"--rt-h6-fontStyle","rt-h6-fontWeight":"--rt-h6-fontWeight","rt-h6-fontFamily":"--rt-h6-fontFamily","rt-h6-lineHeight":"--rt-h6-lineHeight","rt-p1-fontSize":"--rt-p1-fontSize","rt-p1-fontStyle":"--rt-p1-fontStyle","rt-p1-fontWeight":"--rt-p1-fontWeight","rt-p1-fontFamily":"--rt-p1-fontFamily","rt-p1-lineHeight":"--rt-p1-lineHeight","rt-unstyled-fontSize":"--rt-unstyled-fontSize","rt-unstyled-fontStyle":"--rt-unstyled-fontStyle","rt-unstyled-fontWeight":"--rt-unstyled-fontWeight","rt-unstyled-fontFamily":"--rt-unstyled-fontFamily","rt-unstyled-lineHeight":"--rt-unstyled-lineHeight","rt-p3-fontSize":"--rt-p3-fontSize","rt-p3-fontStyle":"--rt-p3-fontStyle","rt-p3-fontWeight":"--rt-p3-fontWeight","rt-p3-fontFamily":"--rt-p3-fontFamily","rt-p3-lineHeight":"--rt-p3-lineHeight"}; 
 
 
 

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_ = "richtexteditor4150734";
+var _namespace_ = "richtexteditor1154821563";
 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":"richtexteditor4150734__root","nativeInput":"richtexteditor4150734__nativeInput","editor":"richtexteditor4150734__editor"};
+export var classes = {"root":"richtexteditor1154821563__root","nativeInput":"richtexteditor1154821563__nativeInput","editor":"richtexteditor1154821563__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

@@ -7,6 +7,8 @@
 @property st-global(--wds-font-weight-bold);
 @property st-global(--wds-font-size-500);
 @property st-global(--wds-font-line-height-300);
+@property st-global(--wsr-color-B40);
+@property st-global(--wsr-color-D80);
 
 .root {
     padding: 12px 18px;

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_ = "toolbar3394446967";
+var _namespace_ = "toolbar3162817796";
 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":"toolbar3394446967__root","item":"toolbar3394446967__item","separator":"toolbar3394446967__separator","clearFormatting":"toolbar3394446967__clearFormatting","fullScreen":"toolbar3394446967__fullScreen","dropdownItemContent":"toolbar3394446967__dropdownItemContent","dropdownItemTitle":"toolbar3394446967__dropdownItemTitle","dropdownItemSubtitle":"toolbar3394446967__dropdownItemSubtitle","dropdownHeaderOne":"toolbar3394446967__dropdownHeaderOne","dropdownHeaderTwo":"toolbar3394446967__dropdownHeaderTwo","dropdownHeaderThree":"toolbar3394446967__dropdownHeaderThree","dropdownHeaderFour":"toolbar3394446967__dropdownHeaderFour","dropdownHeaderFive":"toolbar3394446967__dropdownHeaderFive","dropdownHeaderSix":"toolbar3394446967__dropdownHeaderSix","dropdownParagraphOne":"toolbar3394446967__dropdownParagraphOne","dropdownNormalText":"toolbar3394446967__dropdownNormalText","dropdownParagraphThree":"toolbar3394446967__dropdownParagraphThree"};
+export var classes = {"root":"toolbar3162817796__root","item":"toolbar3162817796__item","separator":"toolbar3162817796__separator","clearFormatting":"toolbar3162817796__clearFormatting","fullScreen":"toolbar3162817796__fullScreen","dropdownItemContent":"toolbar3162817796__dropdownItemContent","dropdownItemTitle":"toolbar3162817796__dropdownItemTitle","dropdownItemSubtitle":"toolbar3162817796__dropdownItemSubtitle","dropdownHeaderOne":"toolbar3162817796__dropdownHeaderOne","dropdownHeaderTwo":"toolbar3162817796__dropdownHeaderTwo","dropdownHeaderThree":"toolbar3162817796__dropdownHeaderThree","dropdownHeaderFour":"toolbar3162817796__dropdownHeaderFour","dropdownHeaderFive":"toolbar3162817796__dropdownHeaderFive","dropdownHeaderSix":"toolbar3162817796__dropdownHeaderSix","dropdownParagraphOne":"toolbar3162817796__dropdownParagraphOne","dropdownNormalText":"toolbar3162817796__dropdownNormalText","dropdownParagraphThree":"toolbar3162817796__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-blue-400":"--wds-color-blue-400","wds-color-black-400":"--wds-color-black-400","wds-color-white":"--wds-color-white","wds-font-family-default":"--wds-font-family-default","wsr-font-family":"--wsr-font-family","wds-font-weight-medium":"--wds-font-weight-medium","wds-font-weight-bold":"--wds-font-weight-bold","wds-font-size-500":"--wds-font-size-500","wds-font-line-height-300":"--wds-font-line-height-300","wsr-color-B40":"--toolbar3394446967-wsr-color-B40","wsr-color-D80":"--toolbar3394446967-wsr-color-D80"}; 
+export var vars = {"wds-color-blue-400":"--wds-color-blue-400","wds-color-black-400":"--wds-color-black-400","wds-color-white":"--wds-color-white","wds-font-family-default":"--wds-font-family-default","wsr-font-family":"--wsr-font-family","wds-font-weight-medium":"--wds-font-weight-medium","wds-font-weight-bold":"--wds-font-weight-bold","wds-font-size-500":"--wds-font-size-500","wds-font-line-height-300":"--wds-font-line-height-300","wsr-color-B40":"--wsr-color-B40","wsr-color-D80":"--wsr-color-D80"}; 
 
 
 

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,4 @@
 export * from './text-view';
 export * from './cell-text-input';
 export * from './cell-autocomplete-input';
+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_ = "textview2456796402";
+var _namespace_ = "textview780991294";
 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":"textview2456796402__root","textView":"textview2456796402__textView"};
+export var classes = {"root":"textview780991294__root","textView":"textview780991294__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};