@wix/patterns-fields 1.72.0 → 1.74.0

package/src/components/rich-content/form-rich-content.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormField } from '@wix/design-system';
+import { Box, FormField } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
 import type {
   RichContent as RichContentType,
@@ -11,7 +11,7 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController } from '@wix/bex-core/form';
 
 import { BaseInputProps } from '../../types/base-input';
-import { useTranslations } from '../../hooks';
+import { useScrollToErrorRef, useTranslations } from '../../hooks';
 import { isEmpty } from '../../validations/string';
 import {
   isDataValidOrNotSet,
@@ -49,6 +49,14 @@ const _FormRichContent = (props: FormRichContentProps) => {
     richContentValidation,
   );
 
+  // The editor is lazy and exposes no focus handle, so hand react-hook-form
+  // a wrapper it can bring into view instead. The wrapper stays mounted even
+  // when the value is the wrong type and the editor is not rendered.
+  const setScrollToErrorRef = useScrollToErrorRef<HTMLDivElement>(
+    controller.field.ref,
+    '[contenteditable]',
+  );
+
   return (
     <FormField
       label={field.displayName}
@@ -78,18 +86,20 @@ const _FormRichContent = (props: FormRichContentProps) => {
         )
       }
     >
-      {isValueValid ? (
-        <FormRichContentInput
-          autoFocus={false}
-          data={controller.field.value}
-          onChange={(value) => controller.field.onChange?.(value)}
-          dataHook={`rich-content-${field.id}`}
-          field={field.id}
-          theme={theme}
-          experiments={ricosExperiments}
-          isSiteMetadataLoading={false}
-        />
-      ) : null}
+      <Box direction="vertical" width="100%" ref={setScrollToErrorRef}>
+        {isValueValid ? (
+          <FormRichContentInput
+            autoFocus={false}
+            data={controller.field.value}
+            onChange={(value) => controller.field.onChange?.(value)}
+            dataHook={`rich-content-${field.id}`}
+            field={field.id}
+            theme={theme}
+            experiments={ricosExperiments}
+            isSiteMetadataLoading={false}
+          />
+        ) : null}
+      </Box>
     </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_ = "richcontentdefaultvalueinput2495321966";
+var _namespace_ = "richcontentdefaultvalueinput1176116246";
 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":"richcontentdefaultvalueinput2495321966__root","richContentEditorContainer":"richcontentdefaultvalueinput2495321966__richContentEditorContainer","editor":"richcontentdefaultvalueinput2495321966__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput1176116246__root","richContentEditorContainer":"richcontentdefaultvalueinput1176116246__richContentEditorContainer","editor":"richcontentdefaultvalueinput1176116246__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

@@ -4,21 +4,29 @@
 @import "../variables.css";
 @import "../rich-content-editor/rich-content-editor.st.css";
 
-@property st-global(--wds-color-blue-300);
-@property st-global(--wds-border-radius-300);
-@property st-global(--wds-color-blue-100);
+/* The border needs the same fallback chain WDS Input itself uses. A `var()`
+   with no fallback that resolves to nothing makes the whole declaration
+   invalid, and the editor renders with no border at all — which is what it did
+   outside the theme that defines the --wds-color-* palette. See CAIRO-4561. */
+@property st-global(--wds-input-border-color);
+@property st-global(--wds-input-border-color-focus);
 @property st-global(--wds-input-shadow-focus-standard);
+@property st-global(--wds-input-border-radius-default-medium);
+@property st-global(--wsr-color-B10);
+@property st-global(--wsr-color-B40);
+@property st-global(--wsr-color-F00);
+@property st-global(--wsr-border-radius-06);
 
 .root {
     outline: 0;
     box-sizing: border-box;
-    border: 1px solid var(--wds-color-blue-300);
-    border-radius: var(--wds-border-radius-300);
+    border: 1px solid var(--wds-input-border-color, var(--wsr-color-B40, #D6E6FE));
+    border-radius: var(--wds-input-border-radius-default-medium, var(--wsr-border-radius-06, 6px));
 }
 
 .root:focus-within {
-    border: 1px solid var(--wds-color-blue-100);
-    box-shadow: var(--wds-input-shadow-focus-standard);
+    border: 1px solid var(--wds-input-border-color-focus, var(--wsr-color-B10, #116DFF));
+    box-shadow: var(--wds-input-shadow-focus-standard, 0 0 0 3px var(--wsr-color-F00, #A6D0FF));
 }
 
 .root .editor {

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_ = "richcontentforminput602859887";
+var _namespace_ = "richcontentforminput1413552636";
 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":"richcontentforminput602859887__root","editor":"richcontentforminput602859887__editor"};
+export var classes = {"root":"richcontentforminput1413552636__root","editor":"richcontentforminput1413552636__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-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"}; 
+export var vars = {"topToolbarHeight":"--topToolbarHeight","bottomToolbarHeight":"--bottomToolbarHeight","wds-input-border-color":"--wds-input-border-color","wds-input-border-color-focus":"--wds-input-border-color-focus","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard","wds-input-border-radius-default-medium":"--wds-input-border-radius-default-medium","wsr-color-B10":"--wsr-color-B10","wsr-color-B40":"--wsr-color-B40","wsr-color-F00":"--wsr-color-F00","wsr-border-radius-06":"--wsr-border-radius-06"}; 
 
 
 

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_ = "richcontentformreadonlyinput558638497";
+var _namespace_ = "richcontentformreadonlyinput3469320707";
 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":"richcontentformreadonlyinput558638497__root"};
+export var classes = {"root":"richcontentformreadonlyinput3469320707__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_ = "fullscreenmodal764723727";
+var _namespace_ = "fullscreenmodal121150353";
 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":"fullscreenmodal764723727__root","modalContent":"fullscreenmodal764723727__modalContent"};
+export var classes = {"root":"fullscreenmodal121150353__root","modalContent":"fullscreenmodal121150353__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_ = "publishloader2401052820";
+var _namespace_ = "publishloader3536264979";
 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":"publishloader2401052820__root","publishLoader":"publishloader2401052820__publishLoader"};
+export var classes = {"root":"publishloader3536264979__root","publishLoader":"publishloader3536264979__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_ = "togglefullscreenbutton3370326329";
+var _namespace_ = "togglefullscreenbutton2020405308";
 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":"togglefullscreenbutton3370326329__root"};
+export var classes = {"root":"togglefullscreenbutton2020405308__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_ = "richcontenteditor351007601";
+var _namespace_ = "richcontenteditor3175937956";
 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":"richcontenteditor351007601__root","toolbarContainer":"richcontenteditor351007601__toolbarContainer","footerToolbarContainer":"richcontenteditor351007601__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor351007601__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor351007601__editor","modalEditor":"richcontenteditor351007601__modalEditor"};
+export var classes = {"root":"richcontenteditor3175937956__root","toolbarContainer":"richcontenteditor3175937956__toolbarContainer","footerToolbarContainer":"richcontenteditor3175937956__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3175937956__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3175937956__editor","modalEditor":"richcontenteditor3175937956__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_ = "richcontenttoolbar2679013044";
+var _namespace_ = "richcontenttoolbar2225509028";
 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":"richcontenttoolbar2679013044__root","toolbar":"richcontenttoolbar2679013044__toolbar","toolbarButton":"richcontenttoolbar2679013044__toolbarButton","separator":"richcontenttoolbar2679013044__separator"};
+export var classes = {"root":"richcontenttoolbar2225509028__root","toolbar":"richcontenttoolbar2225509028__toolbar","toolbarButton":"richcontenttoolbar2225509028__toolbarButton","separator":"richcontenttoolbar2225509028__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_ = "richcontentviewer253217533";
+var _namespace_ = "richcontentviewer818683085";
 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":"richcontentviewer253217533__root","viewer":"richcontentviewer253217533__viewer","modalViewer":"richcontentviewer253217533__modalViewer"};
+export var classes = {"root":"richcontentviewer818683085__root","viewer":"richcontentviewer818683085__viewer","modalViewer":"richcontentviewer818683085__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import { FormField } from '@wix/design-system';
+import { Box, FormField } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController } from '@wix/bex-core/form';
 
 import { BaseInputProps } from '../../types/base-input';
-import { useTranslations } from '../../hooks';
+import { useScrollToErrorRef, useTranslations } from '../../hooks';
 import { isEmpty } from '../../validations/string';
 import {
   isDataValidOrNotSet,
@@ -36,6 +36,13 @@ const _FormRichText = (props: FormRichTextProps) => {
     },
   });
 
+  // The editor is lazy and exposes no focus handle, so hand react-hook-form
+  // a wrapper it can bring into view instead.
+  const setScrollToErrorRef = useScrollToErrorRef<HTMLDivElement>(
+    controller.field.ref,
+    '[contenteditable]',
+  );
+
   return (
     <FormField
       label={field.displayName}
@@ -68,13 +75,15 @@ const _FormRichText = (props: FormRichTextProps) => {
         )
       }
     >
-      <FormRichTextInput
-        autoFocus={false}
-        data={controller.field.value}
-        onChange={(value) => controller.field.onChange?.(value)}
-        dataHook={`rich-text-${field.id}`}
-        field={field.id}
-      />
+      <Box width="100%" ref={setScrollToErrorRef}>
+        <FormRichTextInput
+          autoFocus={false}
+          data={controller.field.value}
+          onChange={(value) => controller.field.onChange?.(value)}
+          dataHook={`rich-text-${field.id}`}
+          field={field.id}
+        />
+      </Box>
     </FormField>
   );
 };

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_ = "richeditor3731566269";
+var _namespace_ = "richeditor207855410";
 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":"richeditor3731566269__root","editor":"richeditor3731566269__editor","header-one":"richeditor3731566269__header-one","header-two":"richeditor3731566269__header-two","header-three":"richeditor3731566269__header-three","header-four":"richeditor3731566269__header-four","header-five":"richeditor3731566269__header-five","header-six":"richeditor3731566269__header-six","paragraph-one":"richeditor3731566269__paragraph-one","unstyled":"richeditor3731566269__unstyled","paragraph-three":"richeditor3731566269__paragraph-three","align-left":"richeditor3731566269__align-left","align-right":"richeditor3731566269__align-right","align-center":"richeditor3731566269__align-center","align-justify":"richeditor3731566269__align-justify","withMargin":"richeditor3731566269__withMargin","dir-rtl":"richeditor3731566269__dir-rtl"};
+export var classes = {"root":"richeditor207855410__root","editor":"richeditor207855410__editor","header-one":"richeditor207855410__header-one","header-two":"richeditor207855410__header-two","header-three":"richeditor207855410__header-three","header-four":"richeditor207855410__header-four","header-five":"richeditor207855410__header-five","header-six":"richeditor207855410__header-six","paragraph-one":"richeditor207855410__paragraph-one","unstyled":"richeditor207855410__unstyled","paragraph-three":"richeditor207855410__paragraph-three","align-left":"richeditor207855410__align-left","align-right":"richeditor207855410__align-right","align-center":"richeditor207855410__align-center","align-justify":"richeditor207855410__align-justify","withMargin":"richeditor207855410__withMargin","dir-rtl":"richeditor207855410__dir-rtl"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css

@@ -1,12 +1,25 @@
-@property st-global(--wds-color-blue-100);
-@property st-global(--wds-color-blue-300);
-@property st-global(--wds-color-red-100);
-@property st-global(--wds-color-red-300);
-@property st-global(--wds-color-yellow-100);
-@property st-global(--wds-color-yellow-300);
-@property st-global(--wds-color-black-700);
+/* Every border declaration below needs the same fallback chain WDS Input
+   itself uses. A `var()` with no fallback that resolves to nothing makes the
+   whole declaration invalid, and the element renders with no border at all —
+   which is what these editors did outside the theme that defines the
+   --wds-color-* palette. See CAIRO-4561. */
+@property st-global(--wds-input-border-color);
+@property st-global(--wds-input-border-color-focus);
 @property st-global(--wds-input-shadow-focus-standard);
-@property st-global(--wds-border-radius-300);
+@property st-global(--wds-input-shadow-focus-destructive);
+@property st-global(--wds-input-shadow-focus-warning);
+@property st-global(--wds-input-border-radius-default-medium);
+@property st-global(--wds-color-border-destructive-secondary-active);
+@property st-global(--wds-color-border-warning-secondary-active);
+@property st-global(--wsr-color-B10);
+@property st-global(--wsr-color-B40);
+@property st-global(--wsr-color-R10);
+@property st-global(--wsr-color-R40);
+@property st-global(--wsr-color-Y10);
+@property st-global(--wsr-color-Y40);
+@property st-global(--wsr-color-F00);
+@property st-global(--wsr-border-radius-06);
+@property st-global(--wds-color-black-700);
 
 /* Cannot import Editor from rich-editor.st.css - causes Stylable build error
 :import {
@@ -24,37 +37,37 @@
     box-sizing: border-box;
     outline: 0;
     overflow: hidden;
-    border-radius: var(--wds-border-radius-300);
+    border-radius: var(--wds-input-border-radius-default-medium, var(--wsr-border-radius-06, 6px));
 }
 
 .root:border(none) {
     border: none;
 }
 .root:border(standard) {
-    border: 1px solid var(--wds-color-blue-300);
+    border: 1px solid var(--wds-input-border-color, var(--wsr-color-B40, #D6E6FE));
 }
 .root:border(standard):focus,
 .root:border(standard):focus-within {
-    border: 1px solid var(--wds-color-blue-100);
-    box-shadow: var(--wds-input-shadow-focus-standard);
+    border: 1px solid var(--wds-input-border-color-focus, var(--wsr-color-B10, #116DFF));
+    box-shadow: var(--wds-input-shadow-focus-standard, 0 0 0 3px var(--wsr-color-F00, #A6D0FF));
 }
 
 .root:border(standard):status(error) {
-    border: 1px solid var(--wds-color-red-100);
+    border: 1px solid var(--wds-color-border-destructive-secondary-active, var(--wsr-color-R10, #E62214));
 }
 .root:border(standard):status(error):focus,
 .root:border(standard):status(error):focus-within {
-    border: 1px solid var(--wds-color-red-100);
-    box-shadow: 0 0 0 3px var(--wds-color-red-300);
+    border: 1px solid var(--wds-color-border-destructive-secondary-active, var(--wsr-color-R10, #E62214));
+    box-shadow: var(--wds-input-shadow-focus-destructive, 0 0 0 3px var(--wsr-color-R40, #FBD0CD));
 }
 
 .root:border(standard):status(warning) {
-    border: 1px solid var(--wds-color-yellow-100);
+    border: 1px solid var(--wds-color-border-warning-secondary-active, var(--wsr-color-Y10, #FFB700));
 }
 .root:border(standard):status(warning):focus,
 .root:border(standard):status(warning):focus-within {
-    border: 1px solid var(--wds-color-yellow-100);
-    box-shadow: 0 0 0 3px var(--wds-color-yellow-300);
+    border: 1px solid var(--wds-color-border-warning-secondary-active, var(--wsr-color-Y10, #FFB700));
+    box-shadow: var(--wds-input-shadow-focus-warning, 0 0 0 3px var(--wsr-color-Y40, #FFE2A5));
 }
 
 .nativeInput {
@@ -78,7 +91,7 @@
     overflow: hidden;
     box-sizing: border-box;
     flex-direction: row;
-    border-radius: var(--wds-border-radius-300);
+    border-radius: var(--wds-input-border-radius-default-medium, var(--wsr-border-radius-06, 6px));
 }
 .editor:isFullScreen {
     max-width: 782px;

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_ = "richtexteditor316354853";
+var _namespace_ = "richtexteditor4232484640";
 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":"richtexteditor316354853__root","nativeInput":"richtexteditor316354853__nativeInput","editor":"richtexteditor316354853__editor"};
+export var classes = {"root":"richtexteditor4232484640__root","nativeInput":"richtexteditor4232484640__nativeInput","editor":"richtexteditor4232484640__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-blue-100":"--wds-color-blue-100","wds-color-blue-300":"--wds-color-blue-300","wds-color-red-100":"--wds-color-red-100","wds-color-red-300":"--wds-color-red-300","wds-color-yellow-100":"--wds-color-yellow-100","wds-color-yellow-300":"--wds-color-yellow-300","wds-color-black-700":"--wds-color-black-700","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard","wds-border-radius-300":"--wds-border-radius-300"}; 
+export var vars = {"wds-input-border-color":"--wds-input-border-color","wds-input-border-color-focus":"--wds-input-border-color-focus","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard","wds-input-shadow-focus-destructive":"--wds-input-shadow-focus-destructive","wds-input-shadow-focus-warning":"--wds-input-shadow-focus-warning","wds-input-border-radius-default-medium":"--wds-input-border-radius-default-medium","wds-color-border-destructive-secondary-active":"--wds-color-border-destructive-secondary-active","wds-color-border-warning-secondary-active":"--wds-color-border-warning-secondary-active","wsr-color-B10":"--wsr-color-B10","wsr-color-B40":"--wsr-color-B40","wsr-color-R10":"--wsr-color-R10","wsr-color-R40":"--wsr-color-R40","wsr-color-Y10":"--wsr-color-Y10","wsr-color-Y40":"--wsr-color-Y40","wsr-color-F00":"--wsr-color-F00","wsr-border-radius-06":"--wsr-border-radius-06","wds-color-black-700":"--wds-color-black-700"}; 
 
 
 

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_ = "toolbar2015891380";
+var _namespace_ = "toolbar541225243";
 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":"toolbar2015891380__root","item":"toolbar2015891380__item","separator":"toolbar2015891380__separator","clearFormatting":"toolbar2015891380__clearFormatting","fullScreen":"toolbar2015891380__fullScreen","dropdownItemContent":"toolbar2015891380__dropdownItemContent","dropdownItemTitle":"toolbar2015891380__dropdownItemTitle","dropdownItemSubtitle":"toolbar2015891380__dropdownItemSubtitle","dropdownHeaderOne":"toolbar2015891380__dropdownHeaderOne","dropdownHeaderTwo":"toolbar2015891380__dropdownHeaderTwo","dropdownHeaderThree":"toolbar2015891380__dropdownHeaderThree","dropdownHeaderFour":"toolbar2015891380__dropdownHeaderFour","dropdownHeaderFive":"toolbar2015891380__dropdownHeaderFive","dropdownHeaderSix":"toolbar2015891380__dropdownHeaderSix","dropdownParagraphOne":"toolbar2015891380__dropdownParagraphOne","dropdownNormalText":"toolbar2015891380__dropdownNormalText","dropdownParagraphThree":"toolbar2015891380__dropdownParagraphThree"};
+export var classes = {"root":"toolbar541225243__root","item":"toolbar541225243__item","separator":"toolbar541225243__separator","clearFormatting":"toolbar541225243__clearFormatting","fullScreen":"toolbar541225243__fullScreen","dropdownItemContent":"toolbar541225243__dropdownItemContent","dropdownItemTitle":"toolbar541225243__dropdownItemTitle","dropdownItemSubtitle":"toolbar541225243__dropdownItemSubtitle","dropdownHeaderOne":"toolbar541225243__dropdownHeaderOne","dropdownHeaderTwo":"toolbar541225243__dropdownHeaderTwo","dropdownHeaderThree":"toolbar541225243__dropdownHeaderThree","dropdownHeaderFour":"toolbar541225243__dropdownHeaderFour","dropdownHeaderFive":"toolbar541225243__dropdownHeaderFive","dropdownHeaderSix":"toolbar541225243__dropdownHeaderSix","dropdownParagraphOne":"toolbar541225243__dropdownParagraphOne","dropdownNormalText":"toolbar541225243__dropdownNormalText","dropdownParagraphThree":"toolbar541225243__dropdownParagraphThree"};
 export var 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_ = "textview1751545812";
+var _namespace_ = "textview2294932004";
 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":"textview1751545812__root","textView":"textview1751545812__textView"};
+export var classes = {"root":"textview2294932004__root","textView":"textview2294932004__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -6,7 +6,7 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController } from '@wix/bex-core/form';
 
 import { BaseInputProps } from '../../types/base-input';
-import { useTranslations } from '../../hooks';
+import { fieldRefHandle, useTranslations } from '../../hooks';
 import {
   isDataValidOrNotSet,
   timeValidation,
@@ -40,10 +40,16 @@ const _FormTime = (props: FormTimeProps) => {
 
   // TimeInput has no DOM ref to hand to field.ref, so bridge its imperative
   // focus() — lets react-hook-form's shouldFocusError scroll to this field
-  // when it blocks save.
+  // when it blocks save. TimeInputImperativeActions has no select(), so the
+  // handle absorbs the calls react-hook-form makes beyond focus.
   const timeRef = useRef<TimeInputImperativeActions>(null);
   useEffect(() => {
-    controller.field.ref({ focus: () => timeRef.current?.focus() });
+    controller.field.ref(
+      fieldRefHandle(
+        () => timeRef.current?.focus(),
+        () => timeRef.current,
+      ),
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

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

@@ -22,7 +22,7 @@ import { observer } from 'mobx-react-lite';
 import { useIsMobile, useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController } from '@wix/bex-core/form';
 import { BaseInputProps } from '../../types/base-input';
-import { useTranslations } from '../../hooks';
+import { useFieldRef, useTranslations } from '../../hooks';
 import { isEmpty } from '../../validations/string';
 import { isDataValidOrNotSet } from '../../validations/validations';
 import * as videoValidation from '../../validations/video';
@@ -64,6 +64,8 @@ const _FormVideo = (props: FormVideoProps) => {
     },
   });
 
+  const setFieldRef = useFieldRef(controller.field.ref);
+
   async function openMedia() {
     if (!openMediaManager) return;
     try {
@@ -204,7 +206,7 @@ const _FormVideo = (props: FormVideoProps) => {
           <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}
+            ref={setFieldRef}
             dataHook={`video-${field.id}`}
             onAddImage={isMobile ? undefined : () => openMedia()}
             addImageInfo={t('auto-patterns.fields.add_video_tooltip')}

package/src/hooks/index.ts

@@ -7,3 +7,6 @@ export * from './use-translations';
 export * from './use-with-callback';
 export * from './use-resize-effect';
 export * from './use-cell-edit-keyboard';
+export * from './use-field-ref';
+export * from './use-merged-ref';
+export * from './use-scroll-to-error-ref';