@wix/patterns-fields 1.93.0 → 1.94.0

package/src/components/document/form-document-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield804310977";
+var _namespace_ = "formdocumentfield1976509087";
 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":"formdocumentfield804310977__root","viewWrapper":"formdocumentfield804310977__viewWrapper","textWidth":"formdocumentfield804310977__textWidth","documentLoader":"formdocumentfield804310977__documentLoader","addDocument":"formdocumentfield804310977__addDocument","addItemWrapper":"formdocumentfield804310977__addItemWrapper"};
+export var classes = {"root":"formdocumentfield1976509087__root","viewWrapper":"formdocumentfield1976509087__viewWrapper","textWidth":"formdocumentfield1976509087__textWidth","documentLoader":"formdocumentfield1976509087__documentLoader","addDocument":"formdocumentfield1976509087__addDocument","addItemWrapper":"formdocumentfield1976509087__addItemWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/exclamation/exclamation.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "exclamation1896828739";
+var _namespace_ = "exclamation3877731892";
 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":"exclamation1896828739__root","exclamation":"exclamation1896828739__exclamation","actions":"exclamation1896828739__actions","action":"exclamation1896828739__action"};
+export var classes = {"root":"exclamation3877731892__root","exclamation":"exclamation3877731892__exclamation","actions":"exclamation3877731892__actions","action":"exclamation3877731892__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/field-validation-settings/field-validation-settings-input.tsx

@@ -335,10 +335,16 @@ export const FieldValidationSettingsInput = ({
   );
 
   const renderPattern = (rule: PatternFieldValidationRuleConfig) => {
-    const invalidPatternViolation = violations.find(
+    const patternViolation = violations.find(
       (violation) =>
-        violation.rule === 'pattern' && violation.type === 'invalidPattern',
+        violation.rule === 'pattern' &&
+        (violation.type === 'invalidPattern' ||
+          violation.type === 'unsafePattern'),
     );
+    const patternError =
+      patternViolation?.type === 'unsafePattern'
+        ? rule.unsafeError ?? rule.invalidError
+        : rule.invalidError;
 
     return (
       <Box key="pattern" direction="vertical" gap="SP2">
@@ -360,13 +366,11 @@ export const FieldValidationSettingsInput = ({
               value={data.pattern}
               disabled={isRuleDisabled('pattern')}
               status={
-                hasUnattributedInvalidState || invalidPatternViolation
+                hasUnattributedInvalidState || patternViolation
                   ? 'error'
                   : undefined
               }
-              statusMessage={
-                invalidPatternViolation ? rule.invalidError : undefined
-              }
+              statusMessage={patternViolation ? patternError : undefined}
               onChange={(event) => update({ pattern: event.target.value })}
             />
           </FormField>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext1731226782";
+var _namespace_ = "highlightedtext336599750";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"highlightedtext1731226782__root","substring":"highlightedtext1731226782__substring"};
-export var keyframes = {"highlighted":"highlightedtext1731226782__highlighted","highlighted-match":"highlightedtext1731226782__highlighted-match"}; 
+export var classes = {"root":"highlightedtext336599750__root","substring":"highlightedtext336599750__substring"};
+export var keyframes = {"highlighted":"highlightedtext336599750__highlighted","highlighted-match":"highlightedtext336599750__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/image/thumbnail-replace-overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay2969543324";
+var _namespace_ = "thumbnailreplaceoverlay4087281964";
 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":"thumbnailreplaceoverlay2969543324__root","icon":"thumbnailreplaceoverlay2969543324__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay4087281964__root","icon":"thumbnailreplaceoverlay4087281964__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/cell-media-edit-shell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmediaeditshell2246956053";
+var _namespace_ = "cellmediaeditshell2326789165";
 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":"cellmediaeditshell2246956053__root"};
+export var classes = {"root":"cellmediaeditshell2326789165__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "pasteurlbutton3033417606";
+var _namespace_ = "pasteurlbutton1933392353";
 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":"pasteurlbutton3033417606__root","iconButtonTooltip":"pasteurlbutton3033417606__iconButtonTooltip","iconButton":"pasteurlbutton3033417606__iconButton"};
+export var classes = {"root":"pasteurlbutton1933392353__root","iconButtonTooltip":"pasteurlbutton1933392353__iconButtonTooltip","iconButton":"pasteurlbutton1933392353__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_ = "formmediagalleryfield2856102327";
+var _namespace_ = "formmediagalleryfield3998473428";
 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":"formmediagalleryfield2856102327__root","container":"formmediagalleryfield2856102327__container","viewBox":"formmediagalleryfield2856102327__viewBox","addItemWrapper":"formmediagalleryfield2856102327__addItemWrapper","addItem":"formmediagalleryfield2856102327__addItem","overlay":"formmediagalleryfield2856102327__overlay","image":"formmediagalleryfield2856102327__image","previewImage":"formmediagalleryfield2856102327__previewImage","previewVideo":"formmediagalleryfield2856102327__previewVideo"};
+export var classes = {"root":"formmediagalleryfield3998473428__root","container":"formmediagalleryfield3998473428__container","viewBox":"formmediagalleryfield3998473428__viewBox","addItemWrapper":"formmediagalleryfield3998473428__addItemWrapper","addItem":"formmediagalleryfield3998473428__addItem","overlay":"formmediagalleryfield3998473428__overlay","image":"formmediagalleryfield3998473428__image","previewImage":"formmediagalleryfield3998473428__previewImage","previewVideo":"formmediagalleryfield3998473428__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_ = "mediaimage575688067";
+var _namespace_ = "mediaimage3148041009";
 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":"mediaimage575688067__root"};
+export var classes = {"root":"mediaimage3148041009__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":"--mediaimage575688067-from","to":"--mediaimage575688067-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":"--mediaimage3148041009-from","to":"--mediaimage3148041009-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_ = "overlay3237573833";
+var _namespace_ = "overlay2129544777";
 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":"overlay3237573833__root","iconOverlay":"overlay3237573833__iconOverlay"};
+export var classes = {"root":"overlay2129544777__root","iconOverlay":"overlay2129544777__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_ = "medialoader3150794118";
+var _namespace_ = "medialoader598775488";
 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":"medialoader3150794118__root","loader":"medialoader3150794118__loader"};
+export var classes = {"root":"medialoader598775488__root","loader":"medialoader598775488__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_ = "mediatag4017133899";
+var _namespace_ = "mediatag1682102498";
 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":"mediatag4017133899__root"};
+export var classes = {"root":"mediatag1682102498__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_ = "cellmultidocumentedit3280386035";
+var _namespace_ = "cellmultidocumentedit1914587532";
 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":"cellmultidocumentedit3280386035__root","chipTrigger":"cellmultidocumentedit3280386035__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit1914587532__root","chipTrigger":"cellmultidocumentedit1914587532__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_ = "formmultidocument4041194483";
+var _namespace_ = "formmultidocument3094149956";
 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":"formmultidocument4041194483__root","viewRoot":"formmultidocument4041194483__viewRoot","singleViewWrapper":"formmultidocument4041194483__singleViewWrapper","addDocumentButton":"formmultidocument4041194483__addDocumentButton"};
+export var classes = {"root":"formmultidocument3094149956__root","viewRoot":"formmultidocument3094149956__viewRoot","singleViewWrapper":"formmultidocument3094149956__singleViewWrapper","addDocumentButton":"formmultidocument3094149956__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmultireferenceinput741540104";
+var _namespace_ = "cellmultireferenceinput3144614699";
 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":"cellmultireferenceinput741540104__root"};
+export var classes = {"root":"cellmultireferenceinput3144614699__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_ = "cellreferenceinput1420854928";
+var _namespace_ = "cellreferenceinput3062114626";
 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":"cellreferenceinput1420854928__root","autocomplete":"cellreferenceinput1420854928__autocomplete"};
+export var classes = {"root":"cellreferenceinput3062114626__root","autocomplete":"cellreferenceinput3062114626__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_ = "richcontentdefaultvalueinput619135962";
+var _namespace_ = "richcontentdefaultvalueinput2404149612";
 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":"richcontentdefaultvalueinput619135962__root","richContentEditorContainer":"richcontentdefaultvalueinput619135962__richContentEditorContainer","editor":"richcontentdefaultvalueinput619135962__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput2404149612__root","richContentEditorContainer":"richcontentdefaultvalueinput2404149612__richContentEditorContainer","editor":"richcontentdefaultvalueinput2404149612__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_ = "richcontentforminput4180188257";
+var _namespace_ = "richcontentforminput1162537413";
 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":"richcontentforminput4180188257__root","editor":"richcontentforminput4180188257__editor"};
+export var classes = {"root":"richcontentforminput1162537413__root","editor":"richcontentforminput1162537413__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_ = "richcontentformreadonlyinput1140181712";
+var _namespace_ = "richcontentformreadonlyinput1239757923";
 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":"richcontentformreadonlyinput1140181712__root"};
+export var classes = {"root":"richcontentformreadonlyinput1239757923__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_ = "fullscreenmodal2151045318";
+var _namespace_ = "fullscreenmodal3071761638";
 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":"fullscreenmodal2151045318__root","modalContent":"fullscreenmodal2151045318__modalContent"};
+export var classes = {"root":"fullscreenmodal3071761638__root","modalContent":"fullscreenmodal3071761638__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_ = "publishloader1390420435";
+var _namespace_ = "publishloader2836839240";
 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":"publishloader1390420435__root","publishLoader":"publishloader1390420435__publishLoader"};
+export var classes = {"root":"publishloader2836839240__root","publishLoader":"publishloader2836839240__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_ = "togglefullscreenbutton3027331515";
+var _namespace_ = "togglefullscreenbutton2223387734";
 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":"togglefullscreenbutton3027331515__root"};
+export var classes = {"root":"togglefullscreenbutton2223387734__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_ = "richcontenteditor3930503777";
+var _namespace_ = "richcontenteditor2863737128";
 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":"richcontenteditor3930503777__root","toolbarContainer":"richcontenteditor3930503777__toolbarContainer","footerToolbarContainer":"richcontenteditor3930503777__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3930503777__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3930503777__editor","modalEditor":"richcontenteditor3930503777__modalEditor"};
+export var classes = {"root":"richcontenteditor2863737128__root","toolbarContainer":"richcontenteditor2863737128__toolbarContainer","footerToolbarContainer":"richcontenteditor2863737128__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor2863737128__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor2863737128__editor","modalEditor":"richcontenteditor2863737128__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_ = "richcontenttoolbar2503951607";
+var _namespace_ = "richcontenttoolbar2262554924";
 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":"richcontenttoolbar2503951607__root","toolbar":"richcontenttoolbar2503951607__toolbar","toolbarButton":"richcontenttoolbar2503951607__toolbarButton","separator":"richcontenttoolbar2503951607__separator"};
+export var classes = {"root":"richcontenttoolbar2262554924__root","toolbar":"richcontenttoolbar2262554924__toolbar","toolbarButton":"richcontenttoolbar2262554924__toolbarButton","separator":"richcontenttoolbar2262554924__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_ = "richcontentviewer1643674328";
+var _namespace_ = "richcontentviewer3183431663";
 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":"richcontentviewer1643674328__root","viewer":"richcontentviewer1643674328__viewer","modalViewer":"richcontentviewer1643674328__modalViewer"};
+export var classes = {"root":"richcontentviewer3183431663__root","viewer":"richcontentviewer3183431663__viewer","modalViewer":"richcontentviewer3183431663__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_ = "richeditor2184311873";
+var _namespace_ = "richeditor1940630501";
 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":"richeditor2184311873__root","editor":"richeditor2184311873__editor","header-one":"richeditor2184311873__header-one","header-two":"richeditor2184311873__header-two","header-three":"richeditor2184311873__header-three","header-four":"richeditor2184311873__header-four","header-five":"richeditor2184311873__header-five","header-six":"richeditor2184311873__header-six","paragraph-one":"richeditor2184311873__paragraph-one","unstyled":"richeditor2184311873__unstyled","paragraph-three":"richeditor2184311873__paragraph-three","align-left":"richeditor2184311873__align-left","align-right":"richeditor2184311873__align-right","align-center":"richeditor2184311873__align-center","align-justify":"richeditor2184311873__align-justify","withMargin":"richeditor2184311873__withMargin","dir-rtl":"richeditor2184311873__dir-rtl"};
+export var classes = {"root":"richeditor1940630501__root","editor":"richeditor1940630501__editor","header-one":"richeditor1940630501__header-one","header-two":"richeditor1940630501__header-two","header-three":"richeditor1940630501__header-three","header-four":"richeditor1940630501__header-four","header-five":"richeditor1940630501__header-five","header-six":"richeditor1940630501__header-six","paragraph-one":"richeditor1940630501__paragraph-one","unstyled":"richeditor1940630501__unstyled","paragraph-three":"richeditor1940630501__paragraph-three","align-left":"richeditor1940630501__align-left","align-right":"richeditor1940630501__align-right","align-center":"richeditor1940630501__align-center","align-justify":"richeditor1940630501__align-justify","withMargin":"richeditor1940630501__withMargin","dir-rtl":"richeditor1940630501__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_ = "richtexteditor3970979290";
+var _namespace_ = "richtexteditor667105446";
 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":"richtexteditor3970979290__root","nativeInput":"richtexteditor3970979290__nativeInput","editor":"richtexteditor3970979290__editor"};
+export var classes = {"root":"richtexteditor667105446__root","nativeInput":"richtexteditor667105446__nativeInput","editor":"richtexteditor667105446__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_ = "toolbar1380510888";
+var _namespace_ = "toolbar3247736524";
 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":"toolbar1380510888__root","item":"toolbar1380510888__item","separator":"toolbar1380510888__separator","clearFormatting":"toolbar1380510888__clearFormatting","fullScreen":"toolbar1380510888__fullScreen","dropdownItemContent":"toolbar1380510888__dropdownItemContent","dropdownItemTitle":"toolbar1380510888__dropdownItemTitle","dropdownItemSubtitle":"toolbar1380510888__dropdownItemSubtitle","dropdownHeaderOne":"toolbar1380510888__dropdownHeaderOne","dropdownHeaderTwo":"toolbar1380510888__dropdownHeaderTwo","dropdownHeaderThree":"toolbar1380510888__dropdownHeaderThree","dropdownHeaderFour":"toolbar1380510888__dropdownHeaderFour","dropdownHeaderFive":"toolbar1380510888__dropdownHeaderFive","dropdownHeaderSix":"toolbar1380510888__dropdownHeaderSix","dropdownParagraphOne":"toolbar1380510888__dropdownParagraphOne","dropdownNormalText":"toolbar1380510888__dropdownNormalText","dropdownParagraphThree":"toolbar1380510888__dropdownParagraphThree"};
+export var classes = {"root":"toolbar3247736524__root","item":"toolbar3247736524__item","separator":"toolbar3247736524__separator","clearFormatting":"toolbar3247736524__clearFormatting","fullScreen":"toolbar3247736524__fullScreen","dropdownItemContent":"toolbar3247736524__dropdownItemContent","dropdownItemTitle":"toolbar3247736524__dropdownItemTitle","dropdownItemSubtitle":"toolbar3247736524__dropdownItemSubtitle","dropdownHeaderOne":"toolbar3247736524__dropdownHeaderOne","dropdownHeaderTwo":"toolbar3247736524__dropdownHeaderTwo","dropdownHeaderThree":"toolbar3247736524__dropdownHeaderThree","dropdownHeaderFour":"toolbar3247736524__dropdownHeaderFour","dropdownHeaderFive":"toolbar3247736524__dropdownHeaderFive","dropdownHeaderSix":"toolbar3247736524__dropdownHeaderSix","dropdownParagraphOne":"toolbar3247736524__dropdownParagraphOne","dropdownNormalText":"toolbar3247736524__dropdownNormalText","dropdownParagraphThree":"toolbar3247736524__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -6,6 +6,7 @@ import { useController } from '@wix/bex-core/form';
 
 import { BaseInputProps } from '../../types/base-input';
 import { isEmpty } from '../../validations/string';
+import { compilePattern } from '../../validations/field-validation-settings';
 
 export interface FormLongTextProps extends BaseInputProps<string> {}
 
@@ -13,6 +14,10 @@ const _FormLongText = (props: FormLongTextProps) => {
   const { field, dataHook, formControl, data } = props;
 
   const { translate: t } = useWixPatternsContainer();
+  const patternRegex = React.useMemo(
+    () => compilePattern(field.validation?.pattern),
+    [field.validation?.pattern],
+  );
 
   const controller = useController({
     name: field.id,
@@ -24,6 +29,10 @@ const _FormLongText = (props: FormLongTextProps) => {
           return t('cairo.fieldValidation.requiredField');
         }
 
+        if (value && patternRegex && !patternRegex.test(value)) {
+          return t('cairo.fieldValidation.patternMismatch');
+        }
+
         return true;
       },
     },

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

@@ -6,6 +6,7 @@ import { useController } from '@wix/bex-core/form';
 
 import { BaseInputProps } from '../../types/base-input';
 import { isEmpty, isLongerThan, isShorterThan } from '../../validations/string';
+import { compilePattern } from '../../validations/field-validation-settings';
 import { useTranslations } from '../../hooks/use-translations';
 import { FormShortTextInput } from './form-short-text-input';
 
@@ -24,6 +25,10 @@ const _FormShortText = (props: FormShortTextProps) => {
   const minLength = stringLengthRange?.minLength;
   const maxLength = stringLengthRange?.maxLength;
   const specificValues = field.validation?.specificValues;
+  const patternRegex = React.useMemo(
+    () => compilePattern(field.validation?.pattern),
+    [field.validation?.pattern],
+  );
 
   const controller = useController({
     name: field.id,
@@ -55,6 +60,10 @@ const _FormShortText = (props: FormShortTextProps) => {
           return specificValuesMessage(field.displayName);
         }
 
+        if (value && patternRegex && !patternRegex.test(value)) {
+          return t('cairo.fieldValidation.patternMismatch');
+        }
+
         return true;
       },
     },