@wix/patterns 1.483.0 → 1.485.0

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_ = "EditableCell3309682090";
+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":"EditableCell3309682090__root","errorMessage":"EditableCell3309682090__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_ = "HeaderActionsPopover338227680";
+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":"HeaderActionsPopover338227680__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_ = "CellViewLayout3647193528";
+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":"CellViewLayout3647193528__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;
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "JsonInputEdit1882126219";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"JsonInputEdit1882126219__root","jsonInput":"JsonInputEdit1882126219__jsonInput"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-border-radius-0":"--wds-border-radius-0","wds-input-area-padding-left-small":"--wds-input-area-padding-left-small","wds-input-area-padding-right-small":"--wds-input-area-padding-right-small","wds-input-area-border-radius-default-medium":"--wds-input-area-border-radius-default-medium","wds-input-border-color":"--wds-input-border-color","wds-input-background-fill-default":"--wds-input-background-fill-default","wds-input-background-fill-hover":"--wds-input-background-fill-hover","wds-shadow-fill-input":"--wds-shadow-fill-input","wds-color-border-standard-secondary-active":"--wds-color-border-standard-secondary-active"}; 
+
+
+
+

package/src/components/EditableTable/cellTypes/address/Edit.st.css

@@ -4,8 +4,6 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  padding-left: 8px;
-  padding-right: 8px;
   min-width: 0;
   overflow: hidden;
 }

package/src/components/EditableTable/cellTypes/address/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2465882765";
+var _namespace_ = "Edit3793023793";
 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":"Edit2465882765__root","addressInput":"Edit2465882765__addressInput"};
+export var classes = {"root":"Edit3793023793__root","addressInput":"Edit3793023793__addressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/array/Edit.tsx

@@ -4,7 +4,7 @@ import { Box } from '@wix/design-system';
 import { CellJsonInput } from '@wix/patterns-fields';
 import type { CellEditProps } from '../../types';
 import { useMultilineEditKeyboard } from '../useMultilineEditKeyboard';
-import { classes } from './Edit.st.css.js';
+import { classes } from '../JsonInputEdit.st.css.js';
 
 export const ArrayEdit: React.FC<CellEditProps<unknown[]>> = ({
   value,

package/src/components/EditableTable/cellTypes/boolean/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit553149446";
+var _namespace_ = "Edit789714172";
 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":"Edit553149446__root","booleanEdit":"Edit553149446__booleanEdit"};
+export var classes = {"root":"Edit789714172__root","booleanEdit":"Edit789714172__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2780809279";
+var _namespace_ = "View862316425";
 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":"View2780809279__root","booleanView":"View2780809279__booleanView"};
+export var classes = {"root":"View862316425__root","booleanView":"View862316425__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/color/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3124814383";
+var _namespace_ = "Edit2553639337";
 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":"Edit3124814383__root"};
+export var classes = {"root":"Edit2553639337__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3869966854";
+var _namespace_ = "Edit4031010177";
 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":"Edit3869966854__root","dateInput":"Edit3869966854__dateInput"};
+export var classes = {"root":"Edit4031010177__root","dateInput":"Edit4031010177__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View4175531701";
+var _namespace_ = "View3168339956";
 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":"View4175531701__root"};
+export var classes = {"root":"View3168339956__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/datetime/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3230846280";
+var _namespace_ = "Edit2778560207";
 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":"Edit3230846280__root","half":"Edit3230846280__half","dateHalf":"Edit3230846280__dateHalf Edit3230846280__half","timeHalf":"Edit3230846280__timeHalf Edit3230846280__half","divider":"Edit3230846280__divider","passiveText":"Edit3230846280__passiveText","placeholderText":"Edit3230846280__placeholderText Edit3230846280__passiveText"};
+export var classes = {"root":"Edit2778560207__root","half":"Edit2778560207__half","dateHalf":"Edit2778560207__dateHalf Edit2778560207__half","timeHalf":"Edit2778560207__timeHalf Edit2778560207__half","divider":"Edit2778560207__divider","passiveText":"Edit2778560207__passiveText","placeholderText":"Edit2778560207__placeholderText Edit2778560207__passiveText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/datetime/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3043169916";
+var _namespace_ = "View1905707745";
 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":"View3043169916__root","leaf":"View3043169916__leaf","datePart":"View3043169916__datePart View3043169916__leaf","timePart":"View3043169916__timePart View3043169916__leaf","placeholder":"View3043169916__placeholder View3043169916__leaf","divider":"View3043169916__divider"};
+export var classes = {"root":"View1905707745__root","leaf":"View1905707745__leaf","datePart":"View1905707745__datePart View1905707745__leaf","timePart":"View1905707745__timePart View1905707745__leaf","placeholder":"View1905707745__placeholder View1905707745__leaf","divider":"View1905707745__divider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit755446550";
+var _namespace_ = "Edit3664547810";
 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":"Edit755446550__root","emailInput":"Edit755446550__emailInput"};
+export var classes = {"root":"Edit3664547810__root","emailInput":"Edit3664547810__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3810151596";
+var _namespace_ = "View3690544830";
 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":"View3810151596__root"};
+export var classes = {"root":"View3690544830__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/image/View.tsx

@@ -4,4 +4,4 @@ import type { CellViewProps } from '../../types';
 
 export const ImageView: React.FC<CellViewProps<string | null>> = ({
   value,
-}) => <FieldsImageView value={value} dataHook="image-view" />;
+}) => <FieldsImageView value={value} size={24} dataHook="image-view" />;

package/src/components/EditableTable/cellTypes/number/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2979442439";
+var _namespace_ = "Edit1789937491";
 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":"Edit2979442439__root","numberInput":"Edit2979442439__numberInput"};
+export var classes = {"root":"Edit1789937491__root","numberInput":"Edit1789937491__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2569538802";
+var _namespace_ = "View3020671023";
 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":"View2569538802__root","textView":"View2569538802__textView"};
+export var classes = {"root":"View3020671023__root","textView":"View3020671023__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/Edit.tsx

@@ -4,7 +4,7 @@ import { Box } from '@wix/design-system';
 import { CellJsonInput } from '@wix/patterns-fields';
 import type { CellEditProps } from '../../types';
 import { useMultilineEditKeyboard } from '../useMultilineEditKeyboard';
-import { classes } from './Edit.st.css.js';
+import { classes } from '../JsonInputEdit.st.css.js';
 
 export const ObjectEdit: React.FC<CellEditProps<Record<string, unknown>>> = ({
   value,

package/src/components/EditableTable/cellTypes/object/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View280324629";
+var _namespace_ = "View2623365625";
 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":"View280324629__root"};
+export var classes = {"root":"View2623365625__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/select/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1954678177";
+var _namespace_ = "Edit3044343873";
 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":"Edit1954678177__root","selectInput":"Edit1954678177__selectInput"};
+export var classes = {"root":"Edit3044343873__root","selectInput":"Edit3044343873__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit888514343";
+var _namespace_ = "Edit1327435256";
 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":"Edit888514343__root","editWrapper":"Edit888514343__editWrapper","inputArea":"Edit888514343__inputArea"};
+export var classes = {"root":"Edit1327435256__root","editWrapper":"Edit1327435256__editWrapper","inputArea":"Edit1327435256__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View458797571";
+var _namespace_ = "View2201467031";
 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":"View458797571__root"};
+export var classes = {"root":"View2201467031__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};