@wix/patterns-fields 1.73.0 → 1.74.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage1081502549";
+var _namespace_ = "mediaimage2756082487";
 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":"mediaimage1081502549__root"};
+export var classes = {"root":"mediaimage2756082487__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":"--mediaimage1081502549-from","to":"--mediaimage1081502549-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":"--mediaimage2756082487-from","to":"--mediaimage2756082487-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_ = "overlay1338093693";
+var _namespace_ = "overlay101189595";
 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":"overlay1338093693__root","iconOverlay":"overlay1338093693__iconOverlay"};
+export var classes = {"root":"overlay101189595__root","iconOverlay":"overlay101189595__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_ = "medialoader142891810";
+var _namespace_ = "medialoader2582308961";
 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":"medialoader142891810__root","loader":"medialoader142891810__loader"};
+export var classes = {"root":"medialoader2582308961__root","loader":"medialoader2582308961__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_ = "mediatag1597208276";
+var _namespace_ = "mediatag1371547298";
 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":"mediatag1597208276__root"};
+export var classes = {"root":"mediatag1371547298__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_ = "cellmultidocumentedit2776735104";
+var _namespace_ = "cellmultidocumentedit3805197963";
 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":"cellmultidocumentedit2776735104__root","chipTrigger":"cellmultidocumentedit2776735104__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit3805197963__root","chipTrigger":"cellmultidocumentedit3805197963__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_ = "formmultidocument857357206";
+var _namespace_ = "formmultidocument2780086059";
 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":"formmultidocument857357206__root","viewRoot":"formmultidocument857357206__viewRoot","singleViewWrapper":"formmultidocument857357206__singleViewWrapper","addDocumentButton":"formmultidocument857357206__addDocumentButton"};
+export var classes = {"root":"formmultidocument2780086059__root","viewRoot":"formmultidocument2780086059__viewRoot","singleViewWrapper":"formmultidocument2780086059__singleViewWrapper","addDocumentButton":"formmultidocument2780086059__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/multi-document-input/form-multi-document.tsx

@@ -7,6 +7,7 @@ import { useController } from '@wix/bex-core/form';
 import { BaseInputProps } from '../../../types/base-input';
 import { isEmpty } from '../../../validations/array';
 import { FormMultiDocumentField } from './form-multi-document-field';
+import { useFieldRef } from '../../../hooks';
 
 export interface FormMultiDocumentProps extends BaseInputProps<string[]> {}
 
@@ -30,6 +31,8 @@ const _FormMultiDocument = (props: FormMultiDocumentProps) => {
     },
   });
 
+  const setFieldRef = useFieldRef(controller.field.ref);
+
   return (
     <FormField
       label={field.displayName}
@@ -42,7 +45,7 @@ const _FormMultiDocument = (props: FormMultiDocumentProps) => {
         // Hand the add button to react-hook-form so
         // shouldFocusError scrolls to + focuses this field when it
         // blocks save.
-        inputRef={controller.field.ref}
+        inputRef={setFieldRef}
         data={controller.field.value}
         onChange={(value) => controller.field.onChange(value)}
         dataHook={`multi-document-${field.id}`}

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_ = "cellmultireferenceinput2676689456";
+var _namespace_ = "cellmultireferenceinput1942999998";
 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":"cellmultireferenceinput2676689456__root"};
+export var classes = {"root":"cellmultireferenceinput1942999998__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_ = "cellreferenceinput1109486214";
+var _namespace_ = "cellreferenceinput3406756589";
 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":"cellreferenceinput1109486214__root","autocomplete":"cellreferenceinput1109486214__autocomplete"};
+export var classes = {"root":"cellreferenceinput3406756589__root","autocomplete":"cellreferenceinput3406756589__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_ = "richcontentdefaultvalueinput4174470607";
+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":"richcontentdefaultvalueinput4174470607__root","richContentEditorContainer":"richcontentdefaultvalueinput4174470607__richContentEditorContainer","editor":"richcontentdefaultvalueinput4174470607__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_ = "richcontentforminput1903671592";
+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":"richcontentforminput1903671592__root","editor":"richcontentforminput1903671592__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_ = "richcontentformreadonlyinput172558332";
+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":"richcontentformreadonlyinput172558332__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_ = "fullscreenmodal208254918";
+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":"fullscreenmodal208254918__root","modalContent":"fullscreenmodal208254918__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_ = "publishloader1461570400";
+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":"publishloader1461570400__root","publishLoader":"publishloader1461570400__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_ = "togglefullscreenbutton2385173147";
+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":"togglefullscreenbutton2385173147__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_ = "richcontenteditor3535846372";
+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":"richcontenteditor3535846372__root","toolbarContainer":"richcontenteditor3535846372__toolbarContainer","footerToolbarContainer":"richcontenteditor3535846372__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3535846372__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3535846372__editor","modalEditor":"richcontenteditor3535846372__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_ = "richcontenttoolbar2126134109";
+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":"richcontenttoolbar2126134109__root","toolbar":"richcontenttoolbar2126134109__toolbar","toolbarButton":"richcontenttoolbar2126134109__toolbarButton","separator":"richcontenttoolbar2126134109__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_ = "richcontentviewer3587365751";
+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":"richcontentviewer3587365751__root","viewer":"richcontentviewer3587365751__viewer","modalViewer":"richcontentviewer3587365751__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/rich-text-input/rich-text-editor/rich-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richeditor3576807230";
+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":"richeditor3576807230__root","editor":"richeditor3576807230__editor","header-one":"richeditor3576807230__header-one","header-two":"richeditor3576807230__header-two","header-three":"richeditor3576807230__header-three","header-four":"richeditor3576807230__header-four","header-five":"richeditor3576807230__header-five","header-six":"richeditor3576807230__header-six","paragraph-one":"richeditor3576807230__paragraph-one","unstyled":"richeditor3576807230__unstyled","paragraph-three":"richeditor3576807230__paragraph-three","align-left":"richeditor3576807230__align-left","align-right":"richeditor3576807230__align-right","align-center":"richeditor3576807230__align-center","align-justify":"richeditor3576807230__align-justify","withMargin":"richeditor3576807230__withMargin","dir-rtl":"richeditor3576807230__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_ = "richtexteditor770686478";
+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":"richtexteditor770686478__root","nativeInput":"richtexteditor770686478__nativeInput","editor":"richtexteditor770686478__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_ = "toolbar4106329138";
+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":"toolbar4106329138__root","item":"toolbar4106329138__item","separator":"toolbar4106329138__separator","clearFormatting":"toolbar4106329138__clearFormatting","fullScreen":"toolbar4106329138__fullScreen","dropdownItemContent":"toolbar4106329138__dropdownItemContent","dropdownItemTitle":"toolbar4106329138__dropdownItemTitle","dropdownItemSubtitle":"toolbar4106329138__dropdownItemSubtitle","dropdownHeaderOne":"toolbar4106329138__dropdownHeaderOne","dropdownHeaderTwo":"toolbar4106329138__dropdownHeaderTwo","dropdownHeaderThree":"toolbar4106329138__dropdownHeaderThree","dropdownHeaderFour":"toolbar4106329138__dropdownHeaderFour","dropdownHeaderFive":"toolbar4106329138__dropdownHeaderFive","dropdownHeaderSix":"toolbar4106329138__dropdownHeaderSix","dropdownParagraphOne":"toolbar4106329138__dropdownParagraphOne","dropdownNormalText":"toolbar4106329138__dropdownNormalText","dropdownParagraphThree":"toolbar4106329138__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_ = "textview955586509";
+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":"textview955586509__root","textView":"textview955586509__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
   }, []);