@wix/patterns-fields 1.18.0 → 1.20.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_ = "formmediagalleryfield896548020";
 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":"formmediagalleryfield896548020__root","container":"formmediagalleryfield896548020__container","viewBox":"formmediagalleryfield896548020__viewBox","addItemWrapper":"formmediagalleryfield896548020__addItemWrapper","addItem":"formmediagalleryfield896548020__addItem","overlay":"formmediagalleryfield896548020__overlay","image":"formmediagalleryfield896548020__image","previewImage":"formmediagalleryfield896548020__previewImage","previewVideo":"formmediagalleryfield896548020__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_ = "mediaimage3815000853";
 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":"mediaimage3815000853__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":"--mediaimage3815000853-from","to":"--mediaimage3815000853-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_ = "overlay289352330";
 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":"overlay289352330__root","iconOverlay":"overlay289352330__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":"--overlay289352330-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_ = "medialoader1955011350";
 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":"medialoader1955011350__root","loader":"medialoader1955011350__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_ = "mediatag562852759";
 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":"mediatag562852759__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_ = "formmultidocument3080137474";
 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":"formmultidocument3080137474__root","viewRoot":"formmultidocument3080137474__viewRoot","singleViewWrapper":"formmultidocument3080137474__singleViewWrapper","addDocumentButton":"formmultidocument3080137474__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_ = "richcontentdefaultvalueinput2409703277";
 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":"richcontentdefaultvalueinput2409703277__root","richContentEditorContainer":"richcontentdefaultvalueinput2409703277__richContentEditorContainer","editor":"richcontentdefaultvalueinput2409703277__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":"--richcontentdefaultvalueinput2409703277-topToolbarHeight","bottomToolbarHeight":"--richcontentdefaultvalueinput2409703277-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_ = "richcontentforminput3363858406";
 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":"richcontentforminput3363858406__root","editor":"richcontentforminput3363858406__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":"--richcontentforminput3363858406-topToolbarHeight","bottomToolbarHeight":"--richcontentforminput3363858406-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_ = "richcontentformreadonlyinput1336939944";
 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":"richcontentformreadonlyinput1336939944__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_ = "fullscreenmodal1258825866";
 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":"fullscreenmodal1258825866__root","modalContent":"fullscreenmodal1258825866__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_ = "publishloader3959048671";
 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":"publishloader3959048671__root","publishLoader":"publishloader3959048671__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_ = "togglefullscreenbutton4151648232";
 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":"togglefullscreenbutton4151648232__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_ = "richcontenteditor3989221434";
 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":"richcontenteditor3989221434__root","toolbarContainer":"richcontenteditor3989221434__toolbarContainer","footerToolbarContainer":"richcontenteditor3989221434__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3989221434__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3989221434__editor","modalEditor":"richcontenteditor3989221434__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":"--richcontenteditor3989221434-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_ = "richcontenttoolbar3885793659";
 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":"richcontenttoolbar3885793659__root","toolbar":"richcontenttoolbar3885793659__toolbar","toolbarButton":"richcontenttoolbar3885793659__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_ = "richcontentviewer666651414";
 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":"richcontentviewer666651414__root","viewer":"richcontentviewer666651414__viewer","modalViewer":"richcontentviewer666651414__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_ = "richeditor1108902122";
 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":"richeditor1108902122__root","editor":"richeditor1108902122__editor","header-one":"richeditor1108902122__header-one","header-two":"richeditor1108902122__header-two","header-three":"richeditor1108902122__header-three","header-four":"richeditor1108902122__header-four","header-five":"richeditor1108902122__header-five","header-six":"richeditor1108902122__header-six","paragraph-one":"richeditor1108902122__paragraph-one","unstyled":"richeditor1108902122__unstyled","paragraph-three":"richeditor1108902122__paragraph-three","align-left":"richeditor1108902122__align-left","align-right":"richeditor1108902122__align-right","align-center":"richeditor1108902122__align-center","align-justify":"richeditor1108902122__align-justify","withMargin":"richeditor1108902122__withMargin","dir-rtl":"richeditor1108902122__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":"--richeditor1108902122-wsr-color-D10","wsr-color-D70":"--richeditor1108902122-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_ = "richtexteditor681555492";
 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":"richtexteditor681555492__root","nativeInput":"richtexteditor681555492__nativeInput","editor":"richtexteditor681555492__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_ = "toolbar3885570681";
 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":"toolbar3885570681__root","item":"toolbar3885570681__item","separator":"toolbar3885570681__separator","clearFormatting":"toolbar3885570681__clearFormatting","fullScreen":"toolbar3885570681__fullScreen","dropdownItemContent":"toolbar3885570681__dropdownItemContent","dropdownItemTitle":"toolbar3885570681__dropdownItemTitle","dropdownItemSubtitle":"toolbar3885570681__dropdownItemSubtitle","dropdownHeaderOne":"toolbar3885570681__dropdownHeaderOne","dropdownHeaderTwo":"toolbar3885570681__dropdownHeaderTwo","dropdownHeaderThree":"toolbar3885570681__dropdownHeaderThree","dropdownHeaderFour":"toolbar3885570681__dropdownHeaderFour","dropdownHeaderFive":"toolbar3885570681__dropdownHeaderFive","dropdownHeaderSix":"toolbar3885570681__dropdownHeaderSix","dropdownParagraphOne":"toolbar3885570681__dropdownParagraphOne","dropdownNormalText":"toolbar3885570681__dropdownNormalText","dropdownParagraphThree":"toolbar3885570681__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":"--toolbar3885570681-wsr-color-B40","wsr-color-D80":"--toolbar3885570681-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_ = "textview2328621760";
 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":"textview2328621760__root","textView":"textview2328621760__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 };
+}