@wix/patterns 1.484.0 → 1.485.0

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "patterns@1.484.0";
+export declare const version = "patterns@1.485.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.484.0",
+  "version": "1.485.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -227,11 +227,11 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.390.0",
-    "@wix/bex-utils": "2.177.0",
+    "@wix/bex-core": "2.391.0",
+    "@wix/bex-utils": "2.178.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.112.0",
-    "@wix/patterns-fields-utils": "1.93.0",
+    "@wix/patterns-fields": "1.113.0",
+    "@wix/patterns-fields-utils": "1.94.0",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "^3.23.1",
     "@wix/wix-ui-test-utils": "^1.1.9",
@@ -294,7 +294,7 @@
     "@wix/awaiter-utils": "^1.0.76",
     "@wix/babel-cli": "^1.11.0",
     "@wix/business-manager-api": "^1.470.0",
-    "@wix/cairo-integration-utils": "1.152.0",
+    "@wix/cairo-integration-utils": "1.153.0",
     "@wix/ci-build-info": "^1.0.0",
     "@wix/crm": "^1.0.93",
     "@wix/dashboard": "^1.3.39",
@@ -456,5 +456,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "a6a71cb481bc4c77fd26731870f4c38da6aece966207f3f09e23f188"
+  "falconPackageHash": "30930059a4f1ec30ef8685e95ab7aa46913b6f996b8270aca0fecc93"
 }

package/src/components/CardContainer/CardContainer.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer3678434129";
+var _namespace_ = "CardContainer2355255340";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CardContainer3678434129__root"};
+export var classes = {"root":"CardContainer2355255340__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldForm.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldForm3936567206";
+var _namespace_ = "CmsFieldForm3002616328";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CmsFieldForm3936567206__root","fullBleedDivider":"CmsFieldForm3936567206__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm3002616328__root","fullBleedDivider":"CmsFieldForm3002616328__fullBleedDivider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal3253218955";
+var _namespace_ = "CmsFieldModal68229072";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CmsFieldModal3253218955__root","modal":"CmsFieldModal3253218955__modal"};
+export var classes = {"root":"CmsFieldModal68229072__root","modal":"CmsFieldModal68229072__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection2450393427";
+var _namespace_ = "ValidationAndDefaultsSection155636651";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ValidationAndDefaultsSection2450393427__root","accordionWrapper":"ValidationAndDefaultsSection2450393427__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection155636651__root","accordionWrapper":"ValidationAndDefaultsSection155636651__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Collapse/Collapse.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse2891229446";
+var _namespace_ = "Collapse206202394";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Collapse2891229446__root","exit":"Collapse2891229446__exit"};
+export var classes = {"root":"Collapse206202394__root","exit":"Collapse206202394__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPage835856032";
+var _namespace_ = "CollectionPage492482884";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionPage835856032__root"};
+export var classes = {"root":"CollectionPage492482884__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionSectionHeader/CollectionSectionHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader306165560";
+var _namespace_ = "CollectionSectionHeader3814835760";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionSectionHeader306165560__root","summaryIcon":"CollectionSectionHeader306165560__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader3814835760__root","summaryIcon":"CollectionSectionHeader3814835760__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTable.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTable2140308736";
+var _namespace_ = "CollectionTable1974065091";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionTable2140308736__root"};
+export var classes = {"root":"CollectionTable1974065091__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTableWSRTable.st.css

@@ -10,3 +10,15 @@
   right: -4px !important;
   z-index: 1;
 }
+
+.titlebar {
+  -st-states: harmony;
+}
+
+/* WDS sizes a header cell in a virtual (flex) row as 24px + padding: 36px
+   under odeditor, in a 48px header row, which leaves a strip under the header.
+   Remove once WDS sizes these cells to the header row. */
+.titlebar:harmony :global(th) {
+  height: auto;
+  align-self: stretch;
+}

package/src/components/CollectionTable/CollectionTableWSRTable.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTableWSRTable1223842600";
+var _namespace_ = "CollectionTableWSRTable2872234387";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionTableWSRTable1223842600__root"};
+export var classes = {"root":"CollectionTableWSRTable2872234387__root","titlebar":"CollectionTableWSRTable2872234387__titlebar"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTableWSRTable.tsx

@@ -313,6 +313,9 @@ function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
               {!hideTitleBar && (
                 <div
                   data-hook="titlebar-a11y-wrapper"
+                  className={wsrTableSt(wsrTableClasses.titlebar, {
+                    harmony: isBmHarmonyTheme,
+                  })}
                   ref={(el) => {
                     table.headerElement = el;
                   }}

package/src/components/CollectionToolbar/CollectionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar3189405654";
+var _namespace_ = "CollectionToolbar3055898300";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionToolbar3189405654__root","right":"CollectionToolbar3189405654__right","left":"CollectionToolbar3189405654__left","fullWidth":"CollectionToolbar3189405654__fullWidth"};
+export var classes = {"root":"CollectionToolbar3055898300__root","right":"CollectionToolbar3055898300__right","left":"CollectionToolbar3055898300__left","fullWidth":"CollectionToolbar3055898300__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter2928054447";
+var _namespace_ = "SearchOrCustomFilter2789013570";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SearchOrCustomFilter2928054447__root","search":"SearchOrCustomFilter2928054447__search","searchMobile":"SearchOrCustomFilter2928054447__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter2789013570__root","search":"SearchOrCustomFilter2789013570__search","searchMobile":"SearchOrCustomFilter2789013570__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly3591822730";
+var _namespace_ = "AutoCompleteReadonly3864785655";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"AutoCompleteReadonly3591822730__root"};
+export var classes = {"root":"AutoCompleteReadonly3864785655__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ViewsDropdown1229304281";
+var _namespace_ = "ViewsDropdown916947380";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ViewsDropdown1229304281__root"};
+export var classes = {"root":"ViewsDropdown916947380__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomColumnsPanel/FieldIndications.tsx

@@ -45,7 +45,11 @@ function _FieldIndications({ column }: FieldIndicationsProps) {
           content={t('cairo.table.custom-columns.indication.primary.tooltip')}
           appendTo="window"
         >
-          <Box align="center" verticalAlign="middle">
+          <Box
+            align="center"
+            verticalAlign="middle"
+            dataHook="field-indication-primary"
+          >
             <FlagFilledSmall />
           </Box>
         </Tooltip>

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CustomFieldFormPiiFields3603077507";
+var _namespace_ = "CustomFieldFormPiiFields2578249532";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CustomFieldFormPiiFields3603077507__root","tooltipText":"CustomFieldFormPiiFields3603077507__tooltipText"};
+export var classes = {"root":"CustomFieldFormPiiFields2578249532__root","tooltipText":"CustomFieldFormPiiFields2578249532__tooltipText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/DragHandle/DragHandle.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle1292511267";
+var _namespace_ = "DragHandle3351900768";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"DragHandle1292511267__root"};
+export var classes = {"root":"DragHandle3351900768__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.st.css

@@ -20,12 +20,49 @@
 @property st-global(--wds-color-black-700);
 @property st-global(--wsr-color-D10-30);
 @property st-global(--wsr-color-D70);
+@property st-global(--wds-input-value-font-size-small);
+@property st-global(--wds-input-value-font-line-height-small);
+@property st-global(--wds-font-size-body-small);
+@property st-global(--wds-font-line-height-body-small);
+@property st-global(--wsr-text-font-size-small);
+@property st-global(--wsr-text-line-height-small);
+@property st-global(--wds-input-padding-horizontal-small);
 
 :global(td):has(> .root) {
   position: relative;
   overflow: visible;
 }
 
+:global(td):has(> .root:harmony) {
+  overflow: hidden;
+  background: var(
+    --wds-color-fill-surface-raised,
+    var(--wsr-color-D80, #ffffff)
+  );
+}
+
+:global(td):has(> .root:harmony:rangeSelected),
+:global(td):has(> .root:harmony:hover),
+:global(td):has(> .root:harmony:invalid),
+:global(td):has(> .root:harmony:focused),
+:global(td):has(> .root:harmony:editing),
+:global(td):has(> .root:harmony [data-inner-focused]) {
+  overflow: visible;
+}
+
+:global(td):has(> .root:harmony:focused),
+:global(td):has(> .root:harmony:editing),
+:global(td):has(> .root:harmony [data-inner-focused]) {
+  z-index: 4;
+}
+
+:global(tr):has(.root:harmony:focused),
+:global(tr):has(.root:harmony:editing),
+:global(tr):has(.root:harmony [data-inner-focused]) {
+  position: relative;
+  z-index: 4;
+}
+
 /* WDS DataTable sets the row height through td padding (rowVerticalPadding),
    which adds to the cell height instead of containing it. Zero it on the whole
    row — the checkbox and row-number cells keep the row tall otherwise. */
@@ -36,7 +73,7 @@
 }
 
 .root {
-  -st-states: editing, focused, rowActive, rangeSelected, invalid, readOnly,
+  -st-states: harmony, editing, focused, rowActive, rangeSelected, invalid, readOnly,
     showEditWhenFocused, growable, selectionTop, selectionBottom, selectionLeft,
     selectionRight, copiedTop, copiedBottom, copiedLeft, copiedRight;
   display: flex;
@@ -62,12 +99,40 @@
     var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #dfe5eb));
 }
 
+.root:harmony {
+  left: 0;
+  --wds-input-value-font-size-small: var(
+    --wds-font-size-body-small,
+    var(--wsr-text-font-size-small, 14px)
+  );
+  --wds-input-value-font-line-height-small: var(
+    --wds-font-line-height-body-small,
+    var(--wsr-text-line-height-small, 18px)
+  );
+  --wds-input-padding-horizontal-small: 8px;
+}
+
+:global(td):has(> .root:harmony) ~ :global(td):has(> .root:harmony) > .root:harmony {
+  left: -1px;
+}
+
 /* The sticky header paints over the pixel the first row borrows above itself,
    which would swallow that row's top border. */
 :global(tr:first-child) > :global(td) > .root {
   top: 0;
 }
 
+:global(tr[data-index='index-0']) > :global(td) > .root:harmony {
+  top: 0;
+}
+
+:global(tr:first-child) > :global(td)
+  > .root:harmony:not(:focused):not(:editing):not(:invalid):not(:rowActive):not(:rangeSelected):not(:selectionTop):not(:copiedTop):not(:has([data-inner-focused])),
+:global(tr[data-index='index-0']) > :global(td)
+  > .root:harmony:not(:focused):not(:editing):not(:invalid):not(:rowActive):not(:rangeSelected):not(:selectionTop):not(:copiedTop):not(:has([data-inner-focused])) {
+  border-top-color: transparent;
+}
+
 /* A multi-cell range keeps the range look, so every single-cell state below
    opts out of it. */
 .root:hover:not(:rowActive):not(:rangeSelected) {
@@ -88,6 +153,10 @@
   box-shadow: inset 0 8px 6px -6px rgba(0, 6, 36, 0.05);
 }
 
+.root:harmony:rowActive:hover:not(:focused):not(:rangeSelected):not(:readOnly) {
+  z-index: 2;
+}
+
 /* WDS <Text> sets its own colour, so the token it reads has to be overridden;
    color: then carries the same value to the datetime view's raw spans, which
    set none. */
@@ -122,6 +191,10 @@
   z-index: 2;
 }
 
+.root:harmony:focused:not(:rangeSelected) {
+  z-index: 4;
+}
+
 .root:editing {
   z-index: 3;
   user-select: auto;
@@ -133,6 +206,10 @@
   );
 }
 
+.root:harmony:editing {
+  z-index: 4;
+}
+
 /* showEditWhenFocused cells (e.g. image) stay within their row bounds when
    editing — the EditComponent is always visible so no height expansion is needed. */
 .root:editing:not(:showEditWhenFocused) {
@@ -149,6 +226,10 @@
   z-index: 3;
 }
 
+.root:harmony:focused:growable {
+  z-index: 4;
+}
+
 /* showEditWhenFocused cells: when a button inside has focus (inner focus),
    show the focus border and allow button focus rings to render unclipped.
    isEditing is false here, so we use data-inner-focused set by the EditComponent. */
@@ -162,6 +243,10 @@
   box-shadow: inset 0 8px 6px -6px rgba(0, 6, 36, 0.05);
 }
 
+.root:harmony:has([data-inner-focused]) {
+  z-index: 4;
+}
+
 .root:rangeSelected {
   background: rgba(56, 153, 236, 0.08);
 }
@@ -204,6 +289,10 @@
   z-index: 1;
 }
 
+.root:harmony:invalid:not(:focused):not(:editing) {
+  z-index: 3;
+}
+
 .errorMessage {
   position: absolute;
   top: calc(100% + 4px);

package/src/components/EditableTable/EditableCell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell2930480912";
+var _namespace_ = "EditableCell3628418493";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EditableCell2930480912__root","errorMessage":"EditableCell2930480912__errorMessage"};
+export var classes = {"root":"EditableCell3628418493__root","errorMessage":"EditableCell3628418493__errorMessage"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-fill-surface-raised":"--wds-color-fill-surface-raised","wds-color-border-dark-secondary":"--wds-color-border-dark-secondary","wds-color-black-750":"--wds-color-black-750","wds-color-red-100":"--wds-color-red-100","wds-color-fill-surface-overlay":"--wds-color-fill-surface-overlay","wds-input-border-color-hover":"--wds-input-border-color-hover","wds-input-border-color-focus":"--wds-input-border-color-focus","wds-border-width-default":"--wds-border-width-default","wds-border-radius-400":"--wds-border-radius-400","wds-popover-fill":"--wds-popover-fill","wds-popover-border-radius":"--wds-popover-border-radius","wds-shadow-surface-overlay":"--wds-shadow-surface-overlay","wsr-color-B10":"--wsr-color-B10","wsr-color-B40":"--wsr-color-B40","wsr-color-D60":"--wsr-color-D60","wsr-color-D80":"--wsr-color-D80","wsr-color-R10":"--wsr-color-R10","wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-color-text-disabled":"--wds-color-text-disabled","wds-color-black-700":"--wds-color-black-700","wsr-color-D10-30":"--wsr-color-D10-30","wsr-color-D70":"--wsr-color-D70"}; 
+export var vars = {"wds-color-fill-surface-raised":"--wds-color-fill-surface-raised","wds-color-border-dark-secondary":"--wds-color-border-dark-secondary","wds-color-black-750":"--wds-color-black-750","wds-color-red-100":"--wds-color-red-100","wds-color-fill-surface-overlay":"--wds-color-fill-surface-overlay","wds-input-border-color-hover":"--wds-input-border-color-hover","wds-input-border-color-focus":"--wds-input-border-color-focus","wds-border-width-default":"--wds-border-width-default","wds-border-radius-400":"--wds-border-radius-400","wds-popover-fill":"--wds-popover-fill","wds-popover-border-radius":"--wds-popover-border-radius","wds-shadow-surface-overlay":"--wds-shadow-surface-overlay","wsr-color-B10":"--wsr-color-B10","wsr-color-B40":"--wsr-color-B40","wsr-color-D60":"--wsr-color-D60","wsr-color-D80":"--wsr-color-D80","wsr-color-R10":"--wsr-color-R10","wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-color-text-disabled":"--wds-color-text-disabled","wds-color-black-700":"--wds-color-black-700","wsr-color-D10-30":"--wsr-color-D10-30","wsr-color-D70":"--wsr-color-D70","wds-input-value-font-size-small":"--wds-input-value-font-size-small","wds-input-value-font-line-height-small":"--wds-input-value-font-line-height-small","wds-font-size-body-small":"--wds-font-size-body-small","wds-font-line-height-body-small":"--wds-font-line-height-body-small","wsr-text-font-size-small":"--wsr-text-font-size-small","wsr-text-line-height-small":"--wsr-text-line-height-small","wds-input-padding-horizontal-small":"--wds-input-padding-horizontal-small"}; 
 
 
 

package/src/components/EditableTable/EditableCell.tsx

@@ -4,6 +4,7 @@ import type { FiltersMap } from '@wix/bex-core';
 import { Text } from '@wix/design-system';
 import { st, classes } from './EditableCell.st.css.js';
 import type { EditableTableState } from '../../state/EditableTable';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { useCellFocusAndEditing } from './useCellFocusAndEditing';
 import { Focusable } from './types';
 
@@ -21,6 +22,7 @@ function _EditableCell<T, F extends FiltersMap>({
   onFocus,
 }: EditableCellProps<T, F>) {
   const { cellInteraction, clipboard } = state;
+  const isBmHarmonyTheme = useBmHarmonyTheme();
   const cellRef = useRef<HTMLDivElement | null>(null);
   const editInputRef = useRef<Focusable>();
 
@@ -200,6 +202,7 @@ function _EditableCell<T, F extends FiltersMap>({
       <div
         ref={cellRef}
         className={st(classes.root, {
+          harmony: isBmHarmonyTheme,
           editing: isEditing,
           focused: isFocused,
           rowActive: isRowActive,

package/src/components/EditableTable/HeaderActionsPopover.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover605437348";
+var _namespace_ = "HeaderActionsPopover1372624413";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"HeaderActionsPopover605437348__root"};
+export var classes = {"root":"HeaderActionsPopover1372624413__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/CellViewLayout.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CellViewLayout138794368";
+var _namespace_ = "CellViewLayout481048214";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CellViewLayout138794368__root"};
+export var classes = {"root":"CellViewLayout481048214__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/JsonInputEdit.st.css

@@ -0,0 +1,25 @@
+@property st-global(--wds-border-radius-0);
+@property st-global(--wds-input-area-padding-left-small);
+@property st-global(--wds-input-area-padding-right-small);
+@property st-global(--wds-input-area-border-radius-default-medium);
+@property st-global(--wds-input-border-color);
+@property st-global(--wds-input-background-fill-default);
+@property st-global(--wds-input-background-fill-hover);
+@property st-global(--wds-shadow-fill-input);
+@property st-global(--wds-color-border-standard-secondary-active);
+
+/* Shared by the array and object cell editors — both render CellJsonInput.
+   Strip the InputArea chrome so the editor fills the cell like the other
+   cell types: no border, no radius, no focus ring, no background. */
+.jsonInput {
+  width: 100%;
+  height: 100%;
+  --wds-input-area-padding-left-small: 8px;
+  --wds-input-area-padding-right-small: 8px;
+  --wds-input-area-border-radius-default-medium: var(--wds-border-radius-0, 0px);
+  --wds-input-border-color: transparent;
+  --wds-input-background-fill-default: transparent;
+  --wds-input-background-fill-hover: transparent;
+  --wds-shadow-fill-input: transparent;
+  --wds-color-border-standard-secondary-active: transparent;
+}