@wix/patterns-fields 1.69.0 → 1.71.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview817981137";
+var _namespace_ = "colorview1899380221";
 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":"colorview817981137__root","view":"colorview817981137__view","fillPreview":"colorview817981137__fillPreview"};
+export var classes = {"root":"colorview1899380221__root","view":"colorview1899380221__view","fillPreview":"colorview1899380221__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/delete-dialog/delete-dialog.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog408938770";
+var _namespace_ = "deletedialog2731005548";
 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":"deletedialog408938770__root","layout":"deletedialog408938770__layout"};
+export var classes = {"root":"deletedialog2731005548__root","layout":"deletedialog2731005548__layout"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield2177310312";
+var _namespace_ = "formdocumentfield1775343895";
 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":"formdocumentfield2177310312__root","viewWrapper":"formdocumentfield2177310312__viewWrapper","textWidth":"formdocumentfield2177310312__textWidth","documentLoader":"formdocumentfield2177310312__documentLoader","addDocument":"formdocumentfield2177310312__addDocument","addItemWrapper":"formdocumentfield2177310312__addItemWrapper"};
+export var classes = {"root":"formdocumentfield1775343895__root","viewWrapper":"formdocumentfield1775343895__viewWrapper","textWidth":"formdocumentfield1775343895__textWidth","documentLoader":"formdocumentfield1775343895__documentLoader","addDocument":"formdocumentfield1775343895__addDocument","addItemWrapper":"formdocumentfield1775343895__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_ = "exclamation2027571059";
+var _namespace_ = "exclamation2710007777";
 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":"exclamation2027571059__root","exclamation":"exclamation2027571059__exclamation","actions":"exclamation2027571059__actions","action":"exclamation2027571059__action"};
+export var classes = {"root":"exclamation2710007777__root","exclamation":"exclamation2710007777__exclamation","actions":"exclamation2710007777__actions","action":"exclamation2710007777__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext1122139301";
+var _namespace_ = "highlightedtext892833628";
 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":"highlightedtext1122139301__root","substring":"highlightedtext1122139301__substring"};
-export var keyframes = {"highlighted":"highlightedtext1122139301__highlighted","highlighted-match":"highlightedtext1122139301__highlighted-match"}; 
+export var classes = {"root":"highlightedtext892833628__root","substring":"highlightedtext892833628__substring"};
+export var keyframes = {"highlighted":"highlightedtext892833628__highlighted","highlighted-match":"highlightedtext892833628__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_ = "thumbnailreplaceoverlay1940077031";
+var _namespace_ = "thumbnailreplaceoverlay1764449080";
 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":"thumbnailreplaceoverlay1940077031__root","icon":"thumbnailreplaceoverlay1940077031__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay1764449080__root","icon":"thumbnailreplaceoverlay1764449080__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_ = "cellmediaeditshell3435278209";
+var _namespace_ = "cellmediaeditshell679088465";
 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":"cellmediaeditshell3435278209__root"};
+export var classes = {"root":"cellmediaeditshell679088465__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_ = "pasteurlbutton3946610193";
+var _namespace_ = "pasteurlbutton277900972";
 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":"pasteurlbutton3946610193__root","iconButtonTooltip":"pasteurlbutton3946610193__iconButtonTooltip","iconButton":"pasteurlbutton3946610193__iconButton"};
+export var classes = {"root":"pasteurlbutton277900972__root","iconButtonTooltip":"pasteurlbutton277900972__iconButtonTooltip","iconButton":"pasteurlbutton277900972__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_ = "formmediagalleryfield3402837750";
+var _namespace_ = "formmediagalleryfield1468350743";
 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":"formmediagalleryfield3402837750__root","container":"formmediagalleryfield3402837750__container","viewBox":"formmediagalleryfield3402837750__viewBox","addItemWrapper":"formmediagalleryfield3402837750__addItemWrapper","addItem":"formmediagalleryfield3402837750__addItem","overlay":"formmediagalleryfield3402837750__overlay","image":"formmediagalleryfield3402837750__image","previewImage":"formmediagalleryfield3402837750__previewImage","previewVideo":"formmediagalleryfield3402837750__previewVideo"};
+export var classes = {"root":"formmediagalleryfield1468350743__root","container":"formmediagalleryfield1468350743__container","viewBox":"formmediagalleryfield1468350743__viewBox","addItemWrapper":"formmediagalleryfield1468350743__addItemWrapper","addItem":"formmediagalleryfield1468350743__addItem","overlay":"formmediagalleryfield1468350743__overlay","image":"formmediagalleryfield1468350743__image","previewImage":"formmediagalleryfield1468350743__previewImage","previewVideo":"formmediagalleryfield1468350743__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_ = "mediaimage2460203500";
+var _namespace_ = "mediaimage32296048";
 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":"mediaimage2460203500__root"};
+export var classes = {"root":"mediaimage32296048__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":"--mediaimage2460203500-from","to":"--mediaimage2460203500-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":"--mediaimage32296048-from","to":"--mediaimage32296048-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_ = "overlay2424204993";
+var _namespace_ = "overlay604534348";
 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":"overlay2424204993__root","iconOverlay":"overlay2424204993__iconOverlay"};
+export var classes = {"root":"overlay604534348__root","iconOverlay":"overlay604534348__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_ = "medialoader1444243674";
+var _namespace_ = "medialoader737517012";
 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":"medialoader1444243674__root","loader":"medialoader1444243674__loader"};
+export var classes = {"root":"medialoader737517012__root","loader":"medialoader737517012__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_ = "mediatag3080889074";
+var _namespace_ = "mediatag3986082280";
 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":"mediatag3080889074__root"};
+export var classes = {"root":"mediatag3986082280__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_ = "cellmultidocumentedit350711416";
+var _namespace_ = "cellmultidocumentedit30390028";
 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":"cellmultidocumentedit350711416__root","chipTrigger":"cellmultidocumentedit350711416__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit30390028__root","chipTrigger":"cellmultidocumentedit30390028__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_ = "formmultidocument3383679491";
+var _namespace_ = "formmultidocument1609371478";
 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":"formmultidocument3383679491__root","viewRoot":"formmultidocument3383679491__viewRoot","singleViewWrapper":"formmultidocument3383679491__singleViewWrapper","addDocumentButton":"formmultidocument3383679491__addDocumentButton"};
+export var classes = {"root":"formmultidocument1609371478__root","viewRoot":"formmultidocument1609371478__viewRoot","singleViewWrapper":"formmultidocument1609371478__singleViewWrapper","addDocumentButton":"formmultidocument1609371478__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_ = "cellmultireferenceinput1783819093";
+var _namespace_ = "cellmultireferenceinput2603991496";
 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":"cellmultireferenceinput1783819093__root"};
+export var classes = {"root":"cellmultireferenceinput2603991496__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_ = "cellreferenceinput2032272670";
+var _namespace_ = "cellreferenceinput1254621145";
 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":"cellreferenceinput2032272670__root","autocomplete":"cellreferenceinput2032272670__autocomplete"};
+export var classes = {"root":"cellreferenceinput1254621145__root","autocomplete":"cellreferenceinput1254621145__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/form-multi-reference.tsx

@@ -225,6 +225,10 @@ const _FormMultiReference = (props: FormMultiReferenceProps) => {
         hasMore={hasMore}
         loadMore={loadMore}
         fixedFooter={combinedFooter}
+        // Hand the input to react-hook-form so shouldFocusError scrolls to +
+        // focuses this field when it blocks save. The component ref is typed
+        // `never` by WDS, but `inputRef` reaches the real input.
+        inputRef={controller.field.ref}
         dataHook={`multi-reference-input-${field.id}`}
       />
     </FormField>

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_ = "richcontentdefaultvalueinput418937268";
+var _namespace_ = "richcontentdefaultvalueinput2923565181";
 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":"richcontentdefaultvalueinput418937268__root","richContentEditorContainer":"richcontentdefaultvalueinput418937268__richContentEditorContainer","editor":"richcontentdefaultvalueinput418937268__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput2923565181__root","richContentEditorContainer":"richcontentdefaultvalueinput2923565181__richContentEditorContainer","editor":"richcontentdefaultvalueinput2923565181__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_ = "richcontentforminput793565906";
+var _namespace_ = "richcontentforminput1152158009";
 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":"richcontentforminput793565906__root","editor":"richcontentforminput793565906__editor"};
+export var classes = {"root":"richcontentforminput1152158009__root","editor":"richcontentforminput1152158009__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_ = "richcontentformreadonlyinput1815514758";
+var _namespace_ = "richcontentformreadonlyinput755695367";
 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":"richcontentformreadonlyinput1815514758__root"};
+export var classes = {"root":"richcontentformreadonlyinput755695367__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_ = "fullscreenmodal521352342";
+var _namespace_ = "fullscreenmodal740246259";
 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":"fullscreenmodal521352342__root","modalContent":"fullscreenmodal521352342__modalContent"};
+export var classes = {"root":"fullscreenmodal740246259__root","modalContent":"fullscreenmodal740246259__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_ = "publishloader1839970854";
+var _namespace_ = "publishloader2959702806";
 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":"publishloader1839970854__root","publishLoader":"publishloader1839970854__publishLoader"};
+export var classes = {"root":"publishloader2959702806__root","publishLoader":"publishloader2959702806__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_ = "togglefullscreenbutton3351700300";
+var _namespace_ = "togglefullscreenbutton1348532638";
 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":"togglefullscreenbutton3351700300__root"};
+export var classes = {"root":"togglefullscreenbutton1348532638__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_ = "richcontenteditor3731308093";
+var _namespace_ = "richcontenteditor1768344113";
 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":"richcontenteditor3731308093__root","toolbarContainer":"richcontenteditor3731308093__toolbarContainer","footerToolbarContainer":"richcontenteditor3731308093__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3731308093__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3731308093__editor","modalEditor":"richcontenteditor3731308093__modalEditor"};
+export var classes = {"root":"richcontenteditor1768344113__root","toolbarContainer":"richcontenteditor1768344113__toolbarContainer","footerToolbarContainer":"richcontenteditor1768344113__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1768344113__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1768344113__editor","modalEditor":"richcontenteditor1768344113__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_ = "richcontenttoolbar2725024624";
+var _namespace_ = "richcontenttoolbar1954829146";
 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":"richcontenttoolbar2725024624__root","toolbar":"richcontenttoolbar2725024624__toolbar","toolbarButton":"richcontenttoolbar2725024624__toolbarButton","separator":"richcontenttoolbar2725024624__separator"};
+export var classes = {"root":"richcontenttoolbar1954829146__root","toolbar":"richcontenttoolbar1954829146__toolbar","toolbarButton":"richcontenttoolbar1954829146__toolbarButton","separator":"richcontenttoolbar1954829146__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_ = "richcontentviewer4224465162";
+var _namespace_ = "richcontentviewer1006954306";
 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":"richcontentviewer4224465162__root","viewer":"richcontentviewer4224465162__viewer","modalViewer":"richcontentviewer4224465162__modalViewer"};
+export var classes = {"root":"richcontentviewer1006954306__root","viewer":"richcontentviewer1006954306__viewer","modalViewer":"richcontentviewer1006954306__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_ = "richeditor1602234583";
+var _namespace_ = "richeditor2160040063";
 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":"richeditor1602234583__root","editor":"richeditor1602234583__editor","header-one":"richeditor1602234583__header-one","header-two":"richeditor1602234583__header-two","header-three":"richeditor1602234583__header-three","header-four":"richeditor1602234583__header-four","header-five":"richeditor1602234583__header-five","header-six":"richeditor1602234583__header-six","paragraph-one":"richeditor1602234583__paragraph-one","unstyled":"richeditor1602234583__unstyled","paragraph-three":"richeditor1602234583__paragraph-three","align-left":"richeditor1602234583__align-left","align-right":"richeditor1602234583__align-right","align-center":"richeditor1602234583__align-center","align-justify":"richeditor1602234583__align-justify","withMargin":"richeditor1602234583__withMargin","dir-rtl":"richeditor1602234583__dir-rtl"};
+export var classes = {"root":"richeditor2160040063__root","editor":"richeditor2160040063__editor","header-one":"richeditor2160040063__header-one","header-two":"richeditor2160040063__header-two","header-three":"richeditor2160040063__header-three","header-four":"richeditor2160040063__header-four","header-five":"richeditor2160040063__header-five","header-six":"richeditor2160040063__header-six","paragraph-one":"richeditor2160040063__paragraph-one","unstyled":"richeditor2160040063__unstyled","paragraph-three":"richeditor2160040063__paragraph-three","align-left":"richeditor2160040063__align-left","align-right":"richeditor2160040063__align-right","align-center":"richeditor2160040063__align-center","align-justify":"richeditor2160040063__align-justify","withMargin":"richeditor2160040063__withMargin","dir-rtl":"richeditor2160040063__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_ = "richtexteditor442780177";
+var _namespace_ = "richtexteditor1882302467";
 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":"richtexteditor442780177__root","nativeInput":"richtexteditor442780177__nativeInput","editor":"richtexteditor442780177__editor"};
+export var classes = {"root":"richtexteditor1882302467__root","nativeInput":"richtexteditor1882302467__nativeInput","editor":"richtexteditor1882302467__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_ = "toolbar2837474177";
+var _namespace_ = "toolbar2816839705";
 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":"toolbar2837474177__root","item":"toolbar2837474177__item","separator":"toolbar2837474177__separator","clearFormatting":"toolbar2837474177__clearFormatting","fullScreen":"toolbar2837474177__fullScreen","dropdownItemContent":"toolbar2837474177__dropdownItemContent","dropdownItemTitle":"toolbar2837474177__dropdownItemTitle","dropdownItemSubtitle":"toolbar2837474177__dropdownItemSubtitle","dropdownHeaderOne":"toolbar2837474177__dropdownHeaderOne","dropdownHeaderTwo":"toolbar2837474177__dropdownHeaderTwo","dropdownHeaderThree":"toolbar2837474177__dropdownHeaderThree","dropdownHeaderFour":"toolbar2837474177__dropdownHeaderFour","dropdownHeaderFive":"toolbar2837474177__dropdownHeaderFive","dropdownHeaderSix":"toolbar2837474177__dropdownHeaderSix","dropdownParagraphOne":"toolbar2837474177__dropdownParagraphOne","dropdownNormalText":"toolbar2837474177__dropdownNormalText","dropdownParagraphThree":"toolbar2837474177__dropdownParagraphThree"};
+export var classes = {"root":"toolbar2816839705__root","item":"toolbar2816839705__item","separator":"toolbar2816839705__separator","clearFormatting":"toolbar2816839705__clearFormatting","fullScreen":"toolbar2816839705__fullScreen","dropdownItemContent":"toolbar2816839705__dropdownItemContent","dropdownItemTitle":"toolbar2816839705__dropdownItemTitle","dropdownItemSubtitle":"toolbar2816839705__dropdownItemSubtitle","dropdownHeaderOne":"toolbar2816839705__dropdownHeaderOne","dropdownHeaderTwo":"toolbar2816839705__dropdownHeaderTwo","dropdownHeaderThree":"toolbar2816839705__dropdownHeaderThree","dropdownHeaderFour":"toolbar2816839705__dropdownHeaderFour","dropdownHeaderFive":"toolbar2816839705__dropdownHeaderFive","dropdownHeaderSix":"toolbar2816839705__dropdownHeaderSix","dropdownParagraphOne":"toolbar2816839705__dropdownParagraphOne","dropdownNormalText":"toolbar2816839705__dropdownNormalText","dropdownParagraphThree":"toolbar2816839705__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "textview1114971065";
+var _namespace_ = "textview178656895";
 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":"textview1114971065__root","textView":"textview1114971065__textView"};
+export var classes = {"root":"textview178656895__root","textView":"textview178656895__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/video/form-video.tsx

@@ -202,6 +202,9 @@ const _FormVideo = (props: FormVideoProps) => {
       ) : (
         <Box width="100%" maxWidth={MEDIA_MAX_WIDTH}>
           <ImageViewer
+            // Only the empty state can fail `required`, so the add button is
+            // always the right target for react-hook-form's shouldFocusError.
+            ref={controller.field.ref}
             dataHook={`video-${field.id}`}
             onAddImage={isMobile ? undefined : () => openMedia()}
             addImageInfo={t('auto-patterns.fields.add_video_tooltip')}