@wix/patterns-fields 1.18.0 → 1.22.0

package/src/components/media-gallery/form-media-gallery-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formmediagalleryfield1578519398";
+var _namespace_ = "formmediagalleryfield3082623780";
 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":"formmediagalleryfield1578519398__root","container":"formmediagalleryfield1578519398__container","viewBox":"formmediagalleryfield1578519398__viewBox","addItemWrapper":"formmediagalleryfield1578519398__addItemWrapper","addItem":"formmediagalleryfield1578519398__addItem","overlay":"formmediagalleryfield1578519398__overlay","image":"formmediagalleryfield1578519398__image","previewImage":"formmediagalleryfield1578519398__previewImage","previewVideo":"formmediagalleryfield1578519398__previewVideo"};
+export var classes = {"root":"formmediagalleryfield3082623780__root","container":"formmediagalleryfield3082623780__container","viewBox":"formmediagalleryfield3082623780__viewBox","addItemWrapper":"formmediagalleryfield3082623780__addItemWrapper","addItem":"formmediagalleryfield3082623780__addItem","overlay":"formmediagalleryfield3082623780__overlay","image":"formmediagalleryfield3082623780__image","previewImage":"formmediagalleryfield3082623780__previewImage","previewVideo":"formmediagalleryfield3082623780__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/index.ts

@@ -1 +1,3 @@
 export * from './media-gallery-view';
+export * from './cell-media-gallery-view';
+export * from './cell-media-gallery-edit';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage701414124";
+var _namespace_ = "mediaimage324551135";
 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":"mediaimage701414124__root"};
+export var classes = {"root":"mediaimage324551135__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":"--mediaimage701414124-from","to":"--mediaimage701414124-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":"--mediaimage324551135-from","to":"--mediaimage324551135-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_ = "overlay564791231";
+var _namespace_ = "overlay603764848";
 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":"overlay564791231__root","iconOverlay":"overlay564791231__iconOverlay"};
+export var classes = {"root":"overlay603764848__root","iconOverlay":"overlay603764848__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {"iconShadow":"drop-shadow(0 1px 1px rgba(22, 45, 61, 0.6))"}; 
-export var vars = {"wds-color-white":"--wds-color-white","wsr-color-D80":"--overlay564791231-wsr-color-D80"}; 
+export var vars = {"wds-color-white":"--wds-color-white","wsr-color-D80":"--overlay603764848-wsr-color-D80"}; 
 
 
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader4170719626";
+var _namespace_ = "medialoader2898430672";
 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":"medialoader4170719626__root","loader":"medialoader4170719626__loader"};
+export var classes = {"root":"medialoader2898430672__root","loader":"medialoader2898430672__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_ = "mediatag3281460592";
+var _namespace_ = "mediatag3237684830";
 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":"mediatag3281460592__root"};
+export var classes = {"root":"mediatag3237684830__root"};
 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_ = "formmultidocument970791185";
+var _namespace_ = "formmultidocument3521372623";
 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":"formmultidocument970791185__root","viewRoot":"formmultidocument970791185__viewRoot","singleViewWrapper":"formmultidocument970791185__singleViewWrapper","addDocumentButton":"formmultidocument970791185__addDocumentButton"};
+export var classes = {"root":"formmultidocument3521372623__root","viewRoot":"formmultidocument3521372623__viewRoot","singleViewWrapper":"formmultidocument3521372623__singleViewWrapper","addDocumentButton":"formmultidocument3521372623__addDocumentButton"};
 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_ = "richcontentdefaultvalueinput2964969043";
+var _namespace_ = "richcontentdefaultvalueinput2245609424";
 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":"richcontentdefaultvalueinput2964969043__root","richContentEditorContainer":"richcontentdefaultvalueinput2964969043__richContentEditorContainer","editor":"richcontentdefaultvalueinput2964969043__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput2245609424__root","richContentEditorContainer":"richcontentdefaultvalueinput2245609424__richContentEditorContainer","editor":"richcontentdefaultvalueinput2245609424__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"topToolbarHeight":"--richcontentdefaultvalueinput2964969043-topToolbarHeight","bottomToolbarHeight":"--richcontentdefaultvalueinput2964969043-bottomToolbarHeight"}; 
+export var vars = {"topToolbarHeight":"--richcontentdefaultvalueinput2245609424-topToolbarHeight","bottomToolbarHeight":"--richcontentdefaultvalueinput2245609424-bottomToolbarHeight"}; 
 
 
 

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_ = "richcontentforminput1732387906";
+var _namespace_ = "richcontentforminput1787148726";
 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":"richcontentforminput1732387906__root","editor":"richcontentforminput1732387906__editor"};
+export var classes = {"root":"richcontentforminput1787148726__root","editor":"richcontentforminput1787148726__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"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","topToolbarHeight":"--richcontentforminput1732387906-topToolbarHeight","bottomToolbarHeight":"--richcontentforminput1732387906-bottomToolbarHeight"}; 
+export var vars = {"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","topToolbarHeight":"--richcontentforminput1787148726-topToolbarHeight","bottomToolbarHeight":"--richcontentforminput1787148726-bottomToolbarHeight"}; 
 
 
 

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_ = "richcontentformreadonlyinput2090554515";
+var _namespace_ = "richcontentformreadonlyinput3965701049";
 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":"richcontentformreadonlyinput2090554515__root"};
+export var classes = {"root":"richcontentformreadonlyinput3965701049__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_ = "fullscreenmodal4100765582";
+var _namespace_ = "fullscreenmodal1344240352";
 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":"fullscreenmodal4100765582__root","modalContent":"fullscreenmodal4100765582__modalContent"};
+export var classes = {"root":"fullscreenmodal1344240352__root","modalContent":"fullscreenmodal1344240352__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_ = "publishloader2391227011";
+var _namespace_ = "publishloader818072853";
 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":"publishloader2391227011__root","publishLoader":"publishloader2391227011__publishLoader"};
+export var classes = {"root":"publishloader818072853__root","publishLoader":"publishloader818072853__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_ = "togglefullscreenbutton2566773121";
+var _namespace_ = "togglefullscreenbutton458759831";
 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":"togglefullscreenbutton2566773121__root"};
+export var classes = {"root":"togglefullscreenbutton458759831__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_ = "richcontenteditor837972361";
+var _namespace_ = "richcontenteditor1271347708";
 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":"richcontenteditor837972361__root","toolbarContainer":"richcontenteditor837972361__toolbarContainer","footerToolbarContainer":"richcontenteditor837972361__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor837972361__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor837972361__editor","modalEditor":"richcontenteditor837972361__modalEditor"};
+export var classes = {"root":"richcontenteditor1271347708__root","toolbarContainer":"richcontenteditor1271347708__toolbarContainer","footerToolbarContainer":"richcontenteditor1271347708__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1271347708__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1271347708__editor","modalEditor":"richcontenteditor1271347708__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-font-family-default":"--richcontenteditor837972361-wds-font-family-default"}; 
+export var vars = {"wds-font-family-default":"--richcontenteditor1271347708-wds-font-family-default"}; 
 
 
 

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_ = "richcontenttoolbar664632995";
+var _namespace_ = "richcontenttoolbar2855371315";
 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":"richcontenttoolbar664632995__root","toolbar":"richcontenttoolbar664632995__toolbar","toolbarButton":"richcontenttoolbar664632995__toolbarButton"};
+export var classes = {"root":"richcontenttoolbar2855371315__root","toolbar":"richcontenttoolbar2855371315__toolbar","toolbarButton":"richcontenttoolbar2855371315__toolbarButton"};
 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_ = "richcontentviewer1273185044";
+var _namespace_ = "richcontentviewer2625203391";
 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":"richcontentviewer1273185044__root","viewer":"richcontentviewer1273185044__viewer","modalViewer":"richcontentviewer1273185044__modalViewer"};
+export var classes = {"root":"richcontentviewer2625203391__root","viewer":"richcontentviewer2625203391__viewer","modalViewer":"richcontentviewer2625203391__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_ = "richeditor3609789040";
+var _namespace_ = "richeditor3146811653";
 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":"richeditor3609789040__root","editor":"richeditor3609789040__editor","header-one":"richeditor3609789040__header-one","header-two":"richeditor3609789040__header-two","header-three":"richeditor3609789040__header-three","header-four":"richeditor3609789040__header-four","header-five":"richeditor3609789040__header-five","header-six":"richeditor3609789040__header-six","paragraph-one":"richeditor3609789040__paragraph-one","unstyled":"richeditor3609789040__unstyled","paragraph-three":"richeditor3609789040__paragraph-three","align-left":"richeditor3609789040__align-left","align-right":"richeditor3609789040__align-right","align-center":"richeditor3609789040__align-center","align-justify":"richeditor3609789040__align-justify","withMargin":"richeditor3609789040__withMargin","dir-rtl":"richeditor3609789040__dir-rtl"};
+export var classes = {"root":"richeditor3146811653__root","editor":"richeditor3146811653__editor","header-one":"richeditor3146811653__header-one","header-two":"richeditor3146811653__header-two","header-three":"richeditor3146811653__header-three","header-four":"richeditor3146811653__header-four","header-five":"richeditor3146811653__header-five","header-six":"richeditor3146811653__header-six","paragraph-one":"richeditor3146811653__paragraph-one","unstyled":"richeditor3146811653__unstyled","paragraph-three":"richeditor3146811653__paragraph-three","align-left":"richeditor3146811653__align-left","align-right":"richeditor3146811653__align-right","align-center":"richeditor3146811653__align-center","align-justify":"richeditor3146811653__align-justify","withMargin":"richeditor3146811653__withMargin","dir-rtl":"richeditor3146811653__dir-rtl"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {"fontFamilyDefault":"var(--wds-font-family-default, var(--wsr-font-family, Madefor))","h1FontSize":"var(--rt-h1-fontSize, 72px)","h1FontStyle":"var(--rt-h1-fontStyle, normal)","h1FontWeight":"var(--rt-h1-fontWeight, var(--wds-font-weight-bold, 700))","h1FontFamily":"var(--rt-h1-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h1LineHeight":"var(--rt-h1-lineHeight, 1.33)","h1Font":"var(--rt-h1-fontStyle, normal) var(--rt-h1-fontWeight, var(--wds-font-weight-bold, 700)) var(--rt-h1-fontSize, 72px)/var(--rt-h1-lineHeight, 1.33) var(--rt-h1-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h2FontSize":"var(--rt-h2-fontSize, 42px)","h2FontStyle":"var(--rt-h2-fontStyle, normal)","h2FontWeight":"var(--rt-h2-fontWeight, var(--wds-font-weight-bold, 700))","h2FontFamily":"var(--rt-h2-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h2LineHeight":"var(--rt-h2-lineHeight, 1.2)","h2Font":"var(--rt-h2-fontStyle, normal) var(--rt-h2-fontWeight, var(--wds-font-weight-bold, 700)) var(--rt-h2-fontSize, 42px)/var(--rt-h2-lineHeight, 1.2) var(--rt-h2-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h3FontSize":"var(--rt-h3-fontSize, 38px)","h3FontStyle":"var(--rt-h3-fontStyle, normal)","h3FontWeight":"var(--rt-h3-fontWeight, var(--wds-font-weight-medium, 500))","h3FontFamily":"var(--rt-h3-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h3LineHeight":"var(--rt-h3-lineHeight, 1.2)","h3Font":"var(--rt-h3-fontStyle, normal) var(--rt-h3-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-h3-fontSize, 38px)/var(--rt-h3-lineHeight, 1.2) var(--rt-h3-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h4FontSize":"var(--rt-h4-fontSize, 34px)","h4FontStyle":"var(--rt-h4-fontStyle, normal)","h4FontWeight":"var(--rt-h4-fontWeight, var(--wds-font-weight-bold, 700))","h4FontFamily":"var(--rt-h4-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h4LineHeight":"var(--rt-h4-lineHeight, 1.2)","h4Font":"var(--rt-h4-fontStyle, normal) var(--rt-h4-fontWeight, var(--wds-font-weight-bold, 700)) var(--rt-h4-fontSize, 34px)/var(--rt-h4-lineHeight, 1.2) var(--rt-h4-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h5FontSize":"var(--rt-h5-fontSize, 28px)","h5FontStyle":"var(--rt-h5-fontStyle, normal)","h5FontWeight":"var(--rt-h5-fontWeight, var(--wds-font-weight-bold, 700))","h5FontFamily":"var(--rt-h5-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h5LineHeight":"var(--rt-h5-lineHeight, 1.2)","h5Font":"var(--rt-h5-fontStyle, normal) var(--rt-h5-fontWeight, var(--wds-font-weight-bold, 700)) var(--rt-h5-fontSize, 28px)/var(--rt-h5-lineHeight, 1.2) var(--rt-h5-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h6FontSize":"var(--rt-h6-fontSize, 22px)","h6FontStyle":"var(--rt-h6-fontStyle, normal)","h6FontWeight":"var(--rt-h6-fontWeight, var(--wds-font-weight-medium, 500))","h6FontFamily":"var(--rt-h6-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h6LineHeight":"var(--rt-h6-lineHeight, 1.2)","h6Font":"var(--rt-h6-fontStyle, normal) var(--rt-h6-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-h6-fontSize, 22px)/var(--rt-h6-lineHeight, 1.2) var(--rt-h6-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","p1FontSize":"var(--rt-p1-fontSize, 18px)","p1FontStyle":"var(--rt-p1-fontStyle, normal)","p1FontWeight":"var(--rt-p1-fontWeight, var(--wds-font-weight-medium, 500))","p1FontFamily":"var(--rt-p1-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","p1LineHeight":"var(--rt-p1-lineHeight, 24px)","p1Font":"var(--rt-p1-fontStyle, normal) var(--rt-p1-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-p1-fontSize, 18px)/var(--rt-p1-lineHeight, 24px) var(--rt-p1-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","unstyledFontSize":"var(--rt-unstyled-fontSize, 16px)","unstyledFontStyle":"var(--rt-unstyled-fontStyle, normal)","unstyledFontWeight":"var(--rt-unstyled-fontWeight, var(--wds-font-weight-medium, 500))","unstyledFontFamily":"var(--rt-unstyled-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","unstyledLineHeight":"var(--rt-unstyled-lineHeight, 24px)","unstyledFont":"var(--rt-unstyled-fontStyle, normal) var(--rt-unstyled-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-unstyled-fontSize, 16px)/var(--rt-unstyled-lineHeight, 24px) var(--rt-unstyled-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","p3FontSize":"var(--rt-p3-fontSize, 14px)","p3FontStyle":"var(--rt-p3-fontStyle, normal)","p3FontWeight":"var(--rt-p3-fontWeight, var(--wds-font-weight-medium, 500))","p3FontFamily":"var(--rt-p3-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","p3LineHeight":"var(--rt-p3-lineHeight, 18px)","p3Font":"var(--rt-p3-fontStyle, normal) var(--rt-p3-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-p3-fontSize, 14px)/var(--rt-p3-lineHeight, 18px) var(--rt-p3-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))"}; 
-export var vars = {"wds-color-black-100":"--wds-color-black-100","wds-color-black-700":"--wds-color-black-700","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","rt-h1-fontSize":"--rt-h1-fontSize","rt-h1-fontStyle":"--rt-h1-fontStyle","rt-h1-fontWeight":"--rt-h1-fontWeight","rt-h1-fontFamily":"--rt-h1-fontFamily","rt-h1-lineHeight":"--rt-h1-lineHeight","rt-h2-fontSize":"--rt-h2-fontSize","rt-h2-fontStyle":"--rt-h2-fontStyle","rt-h2-fontWeight":"--rt-h2-fontWeight","rt-h2-fontFamily":"--rt-h2-fontFamily","rt-h2-lineHeight":"--rt-h2-lineHeight","rt-h3-fontSize":"--rt-h3-fontSize","rt-h3-fontStyle":"--rt-h3-fontStyle","rt-h3-fontWeight":"--rt-h3-fontWeight","rt-h3-fontFamily":"--rt-h3-fontFamily","rt-h3-lineHeight":"--rt-h3-lineHeight","rt-h4-fontSize":"--rt-h4-fontSize","rt-h4-fontStyle":"--rt-h4-fontStyle","rt-h4-fontWeight":"--rt-h4-fontWeight","rt-h4-fontFamily":"--rt-h4-fontFamily","rt-h4-lineHeight":"--rt-h4-lineHeight","rt-h5-fontSize":"--rt-h5-fontSize","rt-h5-fontStyle":"--rt-h5-fontStyle","rt-h5-fontWeight":"--rt-h5-fontWeight","rt-h5-fontFamily":"--rt-h5-fontFamily","rt-h5-lineHeight":"--rt-h5-lineHeight","rt-h6-fontSize":"--rt-h6-fontSize","rt-h6-fontStyle":"--rt-h6-fontStyle","rt-h6-fontWeight":"--rt-h6-fontWeight","rt-h6-fontFamily":"--rt-h6-fontFamily","rt-h6-lineHeight":"--rt-h6-lineHeight","rt-p1-fontSize":"--rt-p1-fontSize","rt-p1-fontStyle":"--rt-p1-fontStyle","rt-p1-fontWeight":"--rt-p1-fontWeight","rt-p1-fontFamily":"--rt-p1-fontFamily","rt-p1-lineHeight":"--rt-p1-lineHeight","rt-unstyled-fontSize":"--rt-unstyled-fontSize","rt-unstyled-fontStyle":"--rt-unstyled-fontStyle","rt-unstyled-fontWeight":"--rt-unstyled-fontWeight","rt-unstyled-fontFamily":"--rt-unstyled-fontFamily","rt-unstyled-lineHeight":"--rt-unstyled-lineHeight","rt-p3-fontSize":"--rt-p3-fontSize","rt-p3-fontStyle":"--rt-p3-fontStyle","rt-p3-fontWeight":"--rt-p3-fontWeight","rt-p3-fontFamily":"--rt-p3-fontFamily","rt-p3-lineHeight":"--rt-p3-lineHeight","wsr-color-D10":"--richeditor3609789040-wsr-color-D10","wsr-color-D70":"--richeditor3609789040-wsr-color-D70"}; 
+export var vars = {"wds-color-black-100":"--wds-color-black-100","wds-color-black-700":"--wds-color-black-700","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","rt-h1-fontSize":"--rt-h1-fontSize","rt-h1-fontStyle":"--rt-h1-fontStyle","rt-h1-fontWeight":"--rt-h1-fontWeight","rt-h1-fontFamily":"--rt-h1-fontFamily","rt-h1-lineHeight":"--rt-h1-lineHeight","rt-h2-fontSize":"--rt-h2-fontSize","rt-h2-fontStyle":"--rt-h2-fontStyle","rt-h2-fontWeight":"--rt-h2-fontWeight","rt-h2-fontFamily":"--rt-h2-fontFamily","rt-h2-lineHeight":"--rt-h2-lineHeight","rt-h3-fontSize":"--rt-h3-fontSize","rt-h3-fontStyle":"--rt-h3-fontStyle","rt-h3-fontWeight":"--rt-h3-fontWeight","rt-h3-fontFamily":"--rt-h3-fontFamily","rt-h3-lineHeight":"--rt-h3-lineHeight","rt-h4-fontSize":"--rt-h4-fontSize","rt-h4-fontStyle":"--rt-h4-fontStyle","rt-h4-fontWeight":"--rt-h4-fontWeight","rt-h4-fontFamily":"--rt-h4-fontFamily","rt-h4-lineHeight":"--rt-h4-lineHeight","rt-h5-fontSize":"--rt-h5-fontSize","rt-h5-fontStyle":"--rt-h5-fontStyle","rt-h5-fontWeight":"--rt-h5-fontWeight","rt-h5-fontFamily":"--rt-h5-fontFamily","rt-h5-lineHeight":"--rt-h5-lineHeight","rt-h6-fontSize":"--rt-h6-fontSize","rt-h6-fontStyle":"--rt-h6-fontStyle","rt-h6-fontWeight":"--rt-h6-fontWeight","rt-h6-fontFamily":"--rt-h6-fontFamily","rt-h6-lineHeight":"--rt-h6-lineHeight","rt-p1-fontSize":"--rt-p1-fontSize","rt-p1-fontStyle":"--rt-p1-fontStyle","rt-p1-fontWeight":"--rt-p1-fontWeight","rt-p1-fontFamily":"--rt-p1-fontFamily","rt-p1-lineHeight":"--rt-p1-lineHeight","rt-unstyled-fontSize":"--rt-unstyled-fontSize","rt-unstyled-fontStyle":"--rt-unstyled-fontStyle","rt-unstyled-fontWeight":"--rt-unstyled-fontWeight","rt-unstyled-fontFamily":"--rt-unstyled-fontFamily","rt-unstyled-lineHeight":"--rt-unstyled-lineHeight","rt-p3-fontSize":"--rt-p3-fontSize","rt-p3-fontStyle":"--rt-p3-fontStyle","rt-p3-fontWeight":"--rt-p3-fontWeight","rt-p3-fontFamily":"--rt-p3-fontFamily","rt-p3-lineHeight":"--rt-p3-lineHeight","wsr-color-D10":"--richeditor3146811653-wsr-color-D10","wsr-color-D70":"--richeditor3146811653-wsr-color-D70"}; 
 
 
 

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_ = "richtexteditor4023643757";
+var _namespace_ = "richtexteditor1339543282";
 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":"richtexteditor4023643757__root","nativeInput":"richtexteditor4023643757__nativeInput","editor":"richtexteditor4023643757__editor"};
+export var classes = {"root":"richtexteditor1339543282__root","nativeInput":"richtexteditor1339543282__nativeInput","editor":"richtexteditor1339543282__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "toolbar384511078";
+var _namespace_ = "toolbar1095006553";
 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":"toolbar384511078__root","item":"toolbar384511078__item","separator":"toolbar384511078__separator","clearFormatting":"toolbar384511078__clearFormatting","fullScreen":"toolbar384511078__fullScreen","dropdownItemContent":"toolbar384511078__dropdownItemContent","dropdownItemTitle":"toolbar384511078__dropdownItemTitle","dropdownItemSubtitle":"toolbar384511078__dropdownItemSubtitle","dropdownHeaderOne":"toolbar384511078__dropdownHeaderOne","dropdownHeaderTwo":"toolbar384511078__dropdownHeaderTwo","dropdownHeaderThree":"toolbar384511078__dropdownHeaderThree","dropdownHeaderFour":"toolbar384511078__dropdownHeaderFour","dropdownHeaderFive":"toolbar384511078__dropdownHeaderFive","dropdownHeaderSix":"toolbar384511078__dropdownHeaderSix","dropdownParagraphOne":"toolbar384511078__dropdownParagraphOne","dropdownNormalText":"toolbar384511078__dropdownNormalText","dropdownParagraphThree":"toolbar384511078__dropdownParagraphThree"};
+export var classes = {"root":"toolbar1095006553__root","item":"toolbar1095006553__item","separator":"toolbar1095006553__separator","clearFormatting":"toolbar1095006553__clearFormatting","fullScreen":"toolbar1095006553__fullScreen","dropdownItemContent":"toolbar1095006553__dropdownItemContent","dropdownItemTitle":"toolbar1095006553__dropdownItemTitle","dropdownItemSubtitle":"toolbar1095006553__dropdownItemSubtitle","dropdownHeaderOne":"toolbar1095006553__dropdownHeaderOne","dropdownHeaderTwo":"toolbar1095006553__dropdownHeaderTwo","dropdownHeaderThree":"toolbar1095006553__dropdownHeaderThree","dropdownHeaderFour":"toolbar1095006553__dropdownHeaderFour","dropdownHeaderFive":"toolbar1095006553__dropdownHeaderFive","dropdownHeaderSix":"toolbar1095006553__dropdownHeaderSix","dropdownParagraphOne":"toolbar1095006553__dropdownParagraphOne","dropdownNormalText":"toolbar1095006553__dropdownNormalText","dropdownParagraphThree":"toolbar1095006553__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export 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":"--toolbar384511078-wsr-color-B40","wsr-color-D80":"--toolbar384511078-wsr-color-D80"}; 
+export 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":"--toolbar1095006553-wsr-color-B40","wsr-color-D80":"--toolbar1095006553-wsr-color-D80"}; 
 
 
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "textview1395270151";
+var _namespace_ = "textview1640588425";
 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":"textview1395270151__root","textView":"textview1395270151__textView"};
+export var classes = {"root":"textview1640588425__root","textView":"textview1640588425__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/index.ts

@@ -6,3 +6,4 @@ export * from './use-open-state';
 export * from './use-translations';
 export * from './use-with-callback';
 export * from './use-resize-effect';
+export * from './use-cell-edit-keyboard';

package/src/hooks/use-cell-edit-keyboard.ts

@@ -0,0 +1,109 @@
+import { useCallback, useEffect } from 'react';
+import React from 'react';
+
+interface UseCellEditKeyboardOptions {
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  onCancel?: () => void;
+  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;
+}
+
+interface UseCellEditKeyboardResult {
+  handleContainerFocus: () => void;
+  handleContainerBlur: (e: React.FocusEvent) => void;
+}
+
+/**
+ * Shared keyboard/focus wiring for cell-edit components that contain buttons.
+ *
+ * - Wires inputRef so the parent table can focus the first button on Enter.
+ * - Sets/removes data-inner-focused on the container for CSS styling.
+ * - Native keydown handler: Escape → onCancel + return focus to gridcell;
+ *   Tab / Shift+Tab → cycle through buttons, Tab off last returns to gridcell.
+ *
+ * Must use a native listener (not React onKeyDown) so stopPropagation fires
+ * before the React root's useKeyboardNavigation intercepts Tab.
+ */
+export function useCellEditKeyboard({
+  containerRef,
+  onCancel,
+  inputRef,
+}: UseCellEditKeyboardOptions): UseCellEditKeyboardResult {
+  useEffect(() => {
+    if (!inputRef) return;
+    inputRef.current = {
+      focus: () => {
+        const first =
+          containerRef.current?.querySelectorAll<HTMLElement>('button')[0];
+        first?.focus();
+      },
+    };
+    return () => {
+      inputRef.current = null;
+    };
+  }, [inputRef, containerRef]);
+
+  const handleContainerFocus = useCallback(() => {
+    containerRef.current?.setAttribute('data-inner-focused', '');
+  }, [containerRef]);
+
+  const handleContainerBlur = useCallback(
+    (e: React.FocusEvent) => {
+      if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
+        containerRef.current?.removeAttribute('data-inner-focused');
+      }
+    },
+    [containerRef],
+  );
+
+  const focusCell = useCallback(() => {
+    const cellDiv = containerRef.current?.closest(
+      '[role="gridcell"]',
+    ) as HTMLElement | null;
+    cellDiv?.focus({ preventScroll: true });
+  }, [containerRef]);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        onCancel?.();
+        focusCell();
+        return;
+      }
+
+      if (e.key === 'Tab') {
+        const buttons = Array.from(el.querySelectorAll<HTMLElement>('button'));
+        const currentIdx = buttons.indexOf(
+          document.activeElement as HTMLElement,
+        );
+        if (currentIdx === -1) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (!e.shiftKey) {
+          if (currentIdx >= buttons.length - 1) {
+            focusCell();
+          } else {
+            buttons[currentIdx + 1]?.focus();
+          }
+        } else {
+          if (currentIdx <= 0) {
+            focusCell();
+          } else {
+            buttons[currentIdx - 1]?.focus();
+          }
+        }
+      }
+    };
+
+    el.addEventListener('keydown', handleKeyDown);
+    return () => el.removeEventListener('keydown', handleKeyDown);
+  }, [focusCell, onCancel, containerRef]);
+
+  return { handleContainerFocus, handleContainerBlur };
+}