@wix/patterns-fields 1.72.0 → 1.74.0

package/dist/cjs/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/dist/cjs/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.js

@@ -5,30 +5,38 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "richtexteditor316354853";
+var _namespace_ = "richtexteditor4232484640";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "richtexteditor316354853__root",
-  "nativeInput": "richtexteditor316354853__nativeInput",
-  "editor": "richtexteditor316354853__editor"
+  "root": "richtexteditor4232484640__root",
+  "nativeInput": "richtexteditor4232484640__nativeInput",
+  "editor": "richtexteditor4232484640__editor"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};
 var containers = exports.containers = {};
 var stVars = exports.stVars = {};
 var vars = exports.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-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-border-radius-300": "--wds-border-radius-300"
+  "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"
 };
 //# sourceMappingURL=rich-text-editor.st.css.js.map

package/dist/cjs/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"richtexteditor316354853\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"richtexteditor316354853__root\",\"nativeInput\":\"richtexteditor316354853__nativeInput\",\"editor\":\"richtexteditor316354853__editor\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport 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\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,yBAAyB;AAC3C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,+BAA+B;EAAC,aAAa,EAAC,sCAAsC;EAAC,QAAQ,EAAC;AAAiC,CAAC;AACtJ,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,mBAAmB,EAAC,qBAAqB;EAAC,mBAAmB,EAAC,qBAAqB;EAAC,sBAAsB,EAAC,wBAAwB;EAAC,sBAAsB,EAAC,wBAAwB;EAAC,qBAAqB,EAAC,uBAAuB;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,uBAAuB,EAAC;AAAyB,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"richtexteditor4232484640\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"richtexteditor4232484640__root\",\"nativeInput\":\"richtexteditor4232484640__nativeInput\",\"editor\":\"richtexteditor4232484640__editor\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport 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\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,gCAAgC;EAAC,aAAa,EAAC,uCAAuC;EAAC,QAAQ,EAAC;AAAkC,CAAC;AACzJ,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,wBAAwB,EAAC,0BAA0B;EAAC,8BAA8B,EAAC,gCAAgC;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,oCAAoC,EAAC,sCAAsC;EAAC,gCAAgC,EAAC,kCAAkC;EAAC,wCAAwC,EAAC,0CAA0C;EAAC,+CAA+C,EAAC,iDAAiD;EAAC,2CAA2C,EAAC,6CAA6C;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,sBAAsB,EAAC,wBAAwB;EAAC,qBAAqB,EAAC;AAAuB,CAAC","ignoreList":[]}

package/dist/cjs/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.js

@@ -5,30 +5,30 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../../../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "toolbar2015891380";
+var _namespace_ = "toolbar541225243";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.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"
+  "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"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"toolbar2015891380\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport 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\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-blue-400\":\"--wds-color-blue-400\",\"wds-color-black-400\":\"--wds-color-black-400\",\"wds-color-white\":\"--wds-color-white\",\"wds-font-family-default\":\"--wds-font-family-default\",\"wsr-font-family\":\"--wsr-font-family\",\"wds-font-weight-medium\":\"--wds-font-weight-medium\",\"wds-font-weight-bold\":\"--wds-font-weight-bold\",\"wds-font-size-500\":\"--wds-font-size-500\",\"wds-font-line-height-300\":\"--wds-font-line-height-300\",\"wsr-color-B40\":\"--wsr-color-B40\",\"wsr-color-D80\":\"--wsr-color-D80\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,mBAAmB;AACrC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,yBAAyB;EAAC,MAAM,EAAC,yBAAyB;EAAC,WAAW,EAAC,8BAA8B;EAAC,iBAAiB,EAAC,oCAAoC;EAAC,YAAY,EAAC,+BAA+B;EAAC,qBAAqB,EAAC,wCAAwC;EAAC,mBAAmB,EAAC,sCAAsC;EAAC,sBAAsB,EAAC,yCAAyC;EAAC,mBAAmB,EAAC,sCAAsC;EAAC,mBAAmB,EAAC,sCAAsC;EAAC,qBAAqB,EAAC,wCAAwC;EAAC,oBAAoB,EAAC,uCAAuC;EAAC,oBAAoB,EAAC,uCAAuC;EAAC,mBAAmB,EAAC,sCAAsC;EAAC,sBAAsB,EAAC,yCAAyC;EAAC,oBAAoB,EAAC,uCAAuC;EAAC,wBAAwB,EAAC;AAA2C,CAAC;AACx8B,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,qBAAqB,EAAC,uBAAuB;EAAC,iBAAiB,EAAC,mBAAmB;EAAC,yBAAyB,EAAC,2BAA2B;EAAC,iBAAiB,EAAC,mBAAmB;EAAC,wBAAwB,EAAC,0BAA0B;EAAC,sBAAsB,EAAC,wBAAwB;EAAC,mBAAmB,EAAC,qBAAqB;EAAC,0BAA0B,EAAC,4BAA4B;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"toolbar541225243\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport 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\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-blue-400\":\"--wds-color-blue-400\",\"wds-color-black-400\":\"--wds-color-black-400\",\"wds-color-white\":\"--wds-color-white\",\"wds-font-family-default\":\"--wds-font-family-default\",\"wsr-font-family\":\"--wsr-font-family\",\"wds-font-weight-medium\":\"--wds-font-weight-medium\",\"wds-font-weight-bold\":\"--wds-font-weight-bold\",\"wds-font-size-500\":\"--wds-font-size-500\",\"wds-font-line-height-300\":\"--wds-font-line-height-300\",\"wsr-color-B40\":\"--wsr-color-B40\",\"wsr-color-D80\":\"--wsr-color-D80\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,kBAAkB;AACpC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,wBAAwB;EAAC,MAAM,EAAC,wBAAwB;EAAC,WAAW,EAAC,6BAA6B;EAAC,iBAAiB,EAAC,mCAAmC;EAAC,YAAY,EAAC,8BAA8B;EAAC,qBAAqB,EAAC,uCAAuC;EAAC,mBAAmB,EAAC,qCAAqC;EAAC,sBAAsB,EAAC,wCAAwC;EAAC,mBAAmB,EAAC,qCAAqC;EAAC,mBAAmB,EAAC,qCAAqC;EAAC,qBAAqB,EAAC,uCAAuC;EAAC,oBAAoB,EAAC,sCAAsC;EAAC,oBAAoB,EAAC,sCAAsC;EAAC,mBAAmB,EAAC,qCAAqC;EAAC,sBAAsB,EAAC,wCAAwC;EAAC,oBAAoB,EAAC,sCAAsC;EAAC,wBAAwB,EAAC;AAA0C,CAAC;AACv7B,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,qBAAqB,EAAC,uBAAuB;EAAC,iBAAiB,EAAC,mBAAmB;EAAC,yBAAyB,EAAC,2BAA2B;EAAC,iBAAiB,EAAC,mBAAmB;EAAC,wBAAwB,EAAC,0BAA0B;EAAC,sBAAsB,EAAC,wBAAwB;EAAC,mBAAmB,EAAC,qBAAqB;EAAC,0BAA0B,EAAC,4BAA4B;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}

package/dist/cjs/components/text/text-view.st.css.js

@@ -5,15 +5,15 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "textview1751545812";
+var _namespace_ = "textview2294932004";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "textview1751545812__root",
-  "textView": "textview1751545812__textView"
+  "root": "textview2294932004__root",
+  "textView": "textview2294932004__textView"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/text/text-view.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/text/text-view.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"textview1751545812\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"textview1751545812__root\",\"textView\":\"textview1751545812__textView\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,oBAAoB;AACtC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,0BAA0B;EAAC,UAAU,EAAC;AAA8B,CAAC;AAC3F,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/text/text-view.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"textview2294932004\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"textview2294932004__root\",\"textView\":\"textview2294932004__textView\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,oBAAoB;AACtC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,0BAA0B;EAAC,UAAU,EAAC;AAA8B,CAAC;AAC3F,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/time-input/form-time.js

@@ -45,15 +45,14 @@ const _FormTime = props => {
 
   // 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 = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
-    controller.field.ref({
-      focus: () => {
-        var _timeRef$current;
-        return (_timeRef$current = timeRef.current) == null ? void 0 : _timeRef$current.focus();
-      }
-    });
+    controller.field.ref((0, _hooks.fieldRefHandle)(() => {
+      var _timeRef$current;
+      return (_timeRef$current = timeRef.current) == null ? void 0 : _timeRef$current.focus();
+    }, () => timeRef.current));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
@@ -79,14 +78,14 @@ const _FormTime = props => {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 62,
+        lineNumber: 68,
         columnNumber: 11
       }
     }),
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 51,
+      lineNumber: 57,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_formTimeInput.FormTimeInput, {
@@ -98,7 +97,7 @@ const _FormTime = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 82,
+      lineNumber: 88,
       columnNumber: 7
     }
   }));

package/dist/cjs/components/time-input/form-time.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_mobxReactLite","_react2","_form","_hooks","_validations","_string","_typeMismatchExclamation","_formTimeInput","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_FormTime","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","pt","useWixPatternsContainer","useTranslations","controller","useController","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","isEmpty","timeRef","useRef","useEffect","ref","focus","_timeRef$current","current","createElement","FormField","label","displayName","status","fieldState","error","undefined","statusMessage","message","suffix","isDataValidOrNotSet","timeValidation","TypeMismatchExclamation","typeName","clearButtonText","convertButtonText","onClear","onChange","convertDisabledText","fieldName","isConverted","isConverting","convertedValue","tooltipText","__self","__source","fileName","lineNumber","columnNumber","FormTimeInput","autoFocus","inputRef","FormTime","exports","observer"],"sources":["../../../../src/components/time-input/form-time.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { FormField } from '@wix/design-system';\nimport type { TimeInputImperativeActions } from '@wix/design-system';\nimport { observer } from 'mobx-react-lite';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { useController } from '@wix/bex-core/form';\n\nimport { BaseInputProps } from '../../types/base-input';\nimport { useTranslations } from '../../hooks';\nimport {\n  isDataValidOrNotSet,\n  timeValidation,\n} from '../../validations/validations';\nimport { isEmpty } from '../../validations/string';\nimport { TypeMismatchExclamation } from '../exclamation/type-mismatch-exclamation';\n\nimport { FormTimeInput } from './form-time-input';\n\nexport interface FormTimeProps extends BaseInputProps<string> {}\n\nconst _FormTime = (props: FormTimeProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: pt } = useWixPatternsContainer();\n  const { t } = useTranslations();\n\n  const controller = useController({\n    name: field.id,\n    control: formControl,\n    defaultValue: data?.[field.id],\n    rules: {\n      validate: (value) => {\n        if (field.validation?.required && isEmpty(value)) {\n          return pt('cairo.fieldValidation.requiredField');\n        }\n        return true;\n      },\n    },\n  });\n\n  // TimeInput has no DOM ref to hand to field.ref, so bridge its imperative\n  // focus() — lets react-hook-form's shouldFocusError scroll to this field\n  // when it blocks save.\n  const timeRef = useRef<TimeInputImperativeActions>(null);\n  useEffect(() => {\n    controller.field.ref({ focus: () => timeRef.current?.focus() });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n      suffix={\n        isDataValidOrNotSet(\n          controller.field.value,\n          timeValidation,\n        ) ? undefined : (\n          <TypeMismatchExclamation\n            typeName={t('auto-patterns.fields.field_type_time_title')}\n            clearButtonText={t('auto-patterns.fields.type_mismatch_clear')}\n            convertButtonText={t('auto-patterns.fields.type_mismatch_convert')}\n            onClear={() => controller.field.onChange(undefined)}\n            onChange={(value) => controller.field.onChange(value)}\n            convertDisabledText={t(\n              'auto-patterns.fields.type_mismatch_convert_disabled',\n            )}\n            fieldName={field.displayName}\n            isConverted={false}\n            isConverting={false}\n            convertedValue=\"00:00:00.000\"\n            tooltipText={t('auto-patterns.fields.type_mismatch_tip', {\n              typeName: 'Time',\n            })}\n          />\n        )\n      }\n    >\n      <FormTimeInput\n        autoFocus={false}\n        inputRef={timeRef}\n        data={controller.field.value}\n        onChange={(value) => controller.field.onChange(value)}\n        dataHook={`time-${field.id}`}\n      />\n    </FormField>\n  );\n};\n\nexport const FormTime = observer(_FormTime);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_mobxReactLite","_react2","_form","_hooks","_validations","_string","_typeMismatchExclamation","_formTimeInput","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_FormTime","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","pt","useWixPatternsContainer","useTranslations","controller","useController","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","isEmpty","timeRef","useRef","useEffect","ref","fieldRefHandle","_timeRef$current","current","focus","createElement","FormField","label","displayName","status","fieldState","error","undefined","statusMessage","message","suffix","isDataValidOrNotSet","timeValidation","TypeMismatchExclamation","typeName","clearButtonText","convertButtonText","onClear","onChange","convertDisabledText","fieldName","isConverted","isConverting","convertedValue","tooltipText","__self","__source","fileName","lineNumber","columnNumber","FormTimeInput","autoFocus","inputRef","FormTime","exports","observer"],"sources":["../../../../src/components/time-input/form-time.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { FormField } from '@wix/design-system';\nimport type { TimeInputImperativeActions } from '@wix/design-system';\nimport { observer } from 'mobx-react-lite';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { useController } from '@wix/bex-core/form';\n\nimport { BaseInputProps } from '../../types/base-input';\nimport { fieldRefHandle, useTranslations } from '../../hooks';\nimport {\n  isDataValidOrNotSet,\n  timeValidation,\n} from '../../validations/validations';\nimport { isEmpty } from '../../validations/string';\nimport { TypeMismatchExclamation } from '../exclamation/type-mismatch-exclamation';\n\nimport { FormTimeInput } from './form-time-input';\n\nexport interface FormTimeProps extends BaseInputProps<string> {}\n\nconst _FormTime = (props: FormTimeProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: pt } = useWixPatternsContainer();\n  const { t } = useTranslations();\n\n  const controller = useController({\n    name: field.id,\n    control: formControl,\n    defaultValue: data?.[field.id],\n    rules: {\n      validate: (value) => {\n        if (field.validation?.required && isEmpty(value)) {\n          return pt('cairo.fieldValidation.requiredField');\n        }\n        return true;\n      },\n    },\n  });\n\n  // TimeInput has no DOM ref to hand to field.ref, so bridge its imperative\n  // focus() — lets react-hook-form's shouldFocusError scroll to this field\n  // when it blocks save. TimeInputImperativeActions has no select(), so the\n  // handle absorbs the calls react-hook-form makes beyond focus.\n  const timeRef = useRef<TimeInputImperativeActions>(null);\n  useEffect(() => {\n    controller.field.ref(\n      fieldRefHandle(\n        () => timeRef.current?.focus(),\n        () => timeRef.current,\n      ),\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n      suffix={\n        isDataValidOrNotSet(\n          controller.field.value,\n          timeValidation,\n        ) ? undefined : (\n          <TypeMismatchExclamation\n            typeName={t('auto-patterns.fields.field_type_time_title')}\n            clearButtonText={t('auto-patterns.fields.type_mismatch_clear')}\n            convertButtonText={t('auto-patterns.fields.type_mismatch_convert')}\n            onClear={() => controller.field.onChange(undefined)}\n            onChange={(value) => controller.field.onChange(value)}\n            convertDisabledText={t(\n              'auto-patterns.fields.type_mismatch_convert_disabled',\n            )}\n            fieldName={field.displayName}\n            isConverted={false}\n            isConverting={false}\n            convertedValue=\"00:00:00.000\"\n            tooltipText={t('auto-patterns.fields.type_mismatch_tip', {\n              typeName: 'Time',\n            })}\n          />\n        )\n      }\n    >\n      <FormTimeInput\n        autoFocus={false}\n        inputRef={timeRef}\n        data={controller.field.value}\n        onChange={(value) => controller.field.onChange(value)}\n        dataHook={`time-${field.id}`}\n      />\n    </FormField>\n  );\n};\n\nexport const FormTime = observer(_FormTime);\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/video/form-video.js

@@ -48,6 +48,7 @@ const _FormVideo = props => {
       }
     }
   });
+  const setFieldRef = (0, _hooks.useFieldRef)(controller.field.ref);
   async function openMedia() {
     if (!openMediaManager) return;
     try {
@@ -98,14 +99,14 @@ const _FormVideo = props => {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 108,
+        lineNumber: 110,
         columnNumber: 11
       }
     }),
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 97,
+      lineNumber: 99,
       columnNumber: 5
     }
   }, controller.field.value ? /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -115,7 +116,7 @@ const _FormVideo = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 129,
+      lineNumber: 131,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.MediaOverlay, {
@@ -129,14 +130,14 @@ const _FormVideo = props => {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 134,
+        lineNumber: 136,
         columnNumber: 15
       }
     }),
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 130,
+      lineNumber: 132,
       columnNumber: 11
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.MediaOverlay.Content, {
@@ -145,7 +146,7 @@ const _FormVideo = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 142,
+      lineNumber: 144,
       columnNumber: 13
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -153,7 +154,7 @@ const _FormVideo = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 143,
+      lineNumber: 145,
       columnNumber: 15
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
@@ -161,7 +162,7 @@ const _FormVideo = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 144,
+      lineNumber: 146,
       columnNumber: 17
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
@@ -174,14 +175,14 @@ const _FormVideo = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 147,
+      lineNumber: 149,
       columnNumber: 19
     }
   }, /*#__PURE__*/_react.default.createElement(_lazy.Replace, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 155,
+      lineNumber: 157,
       columnNumber: 21
     }
   }))), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu, {
@@ -192,7 +193,7 @@ const _FormVideo = props => {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 160,
+        lineNumber: 162,
         columnNumber: 21
       }
     }, /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
@@ -204,21 +205,21 @@ const _FormVideo = props => {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 163,
+        lineNumber: 165,
         columnNumber: 23
       }
     }, /*#__PURE__*/_react.default.createElement(_lazy.More, {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 172,
+        lineNumber: 174,
         columnNumber: 25
       }
     }))),
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 158,
+      lineNumber: 160,
       columnNumber: 17
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.MenuItem, {
@@ -226,7 +227,7 @@ const _FormVideo = props => {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 178,
+        lineNumber: 180,
         columnNumber: 33
       }
     }),
@@ -237,7 +238,7 @@ const _FormVideo = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 177,
+      lineNumber: 179,
       columnNumber: 19
     }
   }), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.MenuItem, {
@@ -245,7 +246,7 @@ const _FormVideo = props => {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 185,
+        lineNumber: 187,
         columnNumber: 33
       }
     }),
@@ -255,14 +256,14 @@ const _FormVideo = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 184,
+      lineNumber: 186,
       columnNumber: 19
     }
   }), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.Divider, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 190,
+      lineNumber: 192,
       columnNumber: 19
     }
   }), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.MenuItem, {
@@ -270,7 +271,7 @@ const _FormVideo = props => {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 192,
+        lineNumber: 194,
         columnNumber: 33
       }
     }),
@@ -280,7 +281,7 @@ const _FormVideo = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 191,
+      lineNumber: 193,
       columnNumber: 19
     }
   })))))) : /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -289,14 +290,14 @@ const _FormVideo = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 203,
+      lineNumber: 205,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.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'),
@@ -305,7 +306,7 @@ const _FormVideo = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 204,
+      lineNumber: 206,
       columnNumber: 11
     }
   })), isPreviewOpen && /*#__PURE__*/_react.default.createElement(_designSystem.Modal, {
@@ -314,7 +315,7 @@ const _FormVideo = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 217,
+      lineNumber: 219,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.CustomModalLayout, {
@@ -329,7 +330,7 @@ const _FormVideo = props => {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 222,
+        lineNumber: 224,
         columnNumber: 15
       }
     }, /*#__PURE__*/_react.default.createElement("video", {
@@ -343,7 +344,7 @@ const _FormVideo = props => {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 229,
+        lineNumber: 231,
         columnNumber: 17
       }
     }, videoUrl && /*#__PURE__*/_react.default.createElement("source", {
@@ -352,14 +353,14 @@ const _FormVideo = props => {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 235,
+        lineNumber: 237,
         columnNumber: 32
       }
     }), "Your browser does not support the video tag.")),
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 218,
+      lineNumber: 220,
       columnNumber: 11
     }
   })));