@wix/patterns 1.377.0 → 1.380.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View4250323581";
+var _namespace_ = "View4217445513";
 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":"View4250323581__root"};
+export var classes = {"root":"View4217445513__root"};
 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_ = "Edit3352778691";
+var _namespace_ = "Edit692004757";
 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":"Edit3352778691__root","emailInput":"Edit3352778691__emailInput"};
+export var classes = {"root":"Edit692004757__root","emailInput":"Edit692004757__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_ = "View2375146148";
+var _namespace_ = "View1097008385";
 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":"View2375146148__root"};
+export var classes = {"root":"View1097008385__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -0,0 +1,29 @@
+import React, { useCallback } from 'react';
+import { CellImageEdit } from '@wix/patterns-fields';
+import type { CellEditProps } from '../../types';
+
+export const ImageEdit: React.FC<CellEditProps<string | null>> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  onStartEdit,
+  inputRef,
+}) => {
+  const handleChange = useCallback(
+    (uri: string | null) => onChange(uri),
+    [onChange],
+  );
+
+  return (
+    <CellImageEdit
+      value={value}
+      onChange={handleChange}
+      onCommit={onCommit}
+      onCancel={onCancel}
+      onStartEdit={onStartEdit}
+      inputRef={inputRef}
+      dataHook="image-edit"
+    />
+  );
+};

package/src/components/EditableTable/cellTypes/image/Edit.uni.driver.ts

@@ -0,0 +1,16 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function ImageEditUniDriver(base: UniDriver, _body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    hasAddButton: () => base.$('[data-hook="image-edit-add-button"]').exists(),
+    hasThumbnail: () => base.$('[data-hook="image-edit-thumbnail"]').exists(),
+    hasPasteUrlButton: () =>
+      base.$('[data-hook="image-edit-paste-url-button"]').exists(),
+    hasMoreButton: () =>
+      base.$('[data-hook="image-edit-more-button"]').exists(),
+    isLoading: () =>
+      base.$('[data-hook="image-edit"] [data-hook="loader"]').exists(),
+  };
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ImageView as FieldsImageView } from '@wix/patterns-fields';
+import type { CellViewProps } from '../../types';
+
+export const ImageView: React.FC<CellViewProps<string | null>> = ({ value }) => (
+  <FieldsImageView value={value} dataHook="image-view" />
+);

package/src/components/EditableTable/cellTypes/image/View.uni.driver.ts

@@ -0,0 +1,13 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function ImageViewUniDriver(base: UniDriver, _body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    hasThumbnail: () => base.$('[data-hook="image-thumbnail"]').exists(),
+    isEmpty: async () => {
+      const thumbnail = base.$('[data-hook="image-thumbnail"]');
+      return (await thumbnail.attr('data-empty')) === 'true';
+    },
+  };
+}

package/src/components/EditableTable/cellTypes/image/index.ts

@@ -0,0 +1,18 @@
+import { defineCellType } from '../../types';
+import { ImageView } from './View';
+import { ImageEdit } from './Edit';
+
+export { ImageView, ImageEdit };
+
+export const imageCellType = defineCellType<string | null>({
+  type: 'image',
+  ViewComponent: ImageView,
+  EditComponent: ImageEdit,
+  serialize: (value) => value ?? '',
+  clearable: true,
+  showEditWhenFocused: true,
+  // Returning undefined blocks all key presses from starting type-to-edit, but
+  // the presence of the function sets the :typeToEdit CSS modifier which keeps
+  // the selection borders visible while the cell is in edit mode (double border).
+  onTypeToEdit: () => undefined,
+});

package/src/components/EditableTable/cellTypes/index.ts

@@ -6,6 +6,7 @@ import { dateCellType } from './date';
 import { urlCellType } from './url';
 import { emailCellType } from './email';
 import { objectCellType } from './object';
+import { imageCellType } from './image';
 
 export {
   textCellType,
@@ -15,6 +16,7 @@ export {
   urlCellType,
   emailCellType,
   objectCellType,
+  imageCellType,
 };
 
 /** All built-in cell types */
@@ -26,4 +28,5 @@ export const builtInCellTypes: CellType[] = [
   urlCellType,
   emailCellType,
   objectCellType,
+  imageCellType,
 ];

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1556339613";
+var _namespace_ = "Edit3435911774";
 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":"Edit1556339613__root","numberInput":"Edit1556339613__numberInput"};
+export var classes = {"root":"Edit3435911774__root","numberInput":"Edit3435911774__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_ = "View2548840183";
+var _namespace_ = "View461917263";
 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":"View2548840183__root","textView":"View2548840183__textView"};
+export var classes = {"root":"View461917263__root","textView":"View461917263__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3112699959";
+var _namespace_ = "Edit694882749";
 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":"Edit3112699959__root","jsonInput":"Edit3112699959__jsonInput"};
+export var classes = {"root":"Edit694882749__root","jsonInput":"Edit694882749__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1785259297";
+var _namespace_ = "View353106294";
 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":"View1785259297__root"};
+export var classes = {"root":"View353106294__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_ = "Edit1889865253";
+var _namespace_ = "Edit2552462695";
 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":"Edit1889865253__root","selectInput":"Edit1889865253__selectInput"};
+export var classes = {"root":"Edit2552462695__root","selectInput":"Edit2552462695__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_ = "Edit1726914236";
+var _namespace_ = "Edit3751560672";
 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":"Edit1726914236__root","editWrapper":"Edit1726914236__editWrapper","inputArea":"Edit1726914236__inputArea"};
+export var classes = {"root":"Edit3751560672__root","editWrapper":"Edit3751560672__editWrapper","inputArea":"Edit3751560672__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_ = "View3940841785";
+var _namespace_ = "View1879678415";
 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":"View3940841785__root"};
+export var classes = {"root":"View1879678415__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1746178889";
+var _namespace_ = "Edit113419719";
 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":"Edit1746178889__root","urlInput":"Edit1746178889__urlInput"};
+export var classes = {"root":"Edit113419719__root","urlInput":"Edit113419719__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1214063703";
+var _namespace_ = "View3499712186";
 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":"View1214063703__root","textView":"View1214063703__textView","urlText":"View1214063703__urlText","suffix":"View1214063703__suffix"};
+export var classes = {"root":"View3499712186__root","textView":"View3499712186__textView","urlText":"View3499712186__urlText","suffix":"View3499712186__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/types.ts

@@ -10,34 +10,58 @@ export interface Focusable {
   focus: () => void;
 }
 
+export type EditTrigger =
+  | { kind: 'type'; key: string }
+  | 'enter'
+  | 'click'
+  | 'doubleClick';
+
 export interface CellEditProps<V> {
   value: V;
   onChange: (value: V) => void;
   onCommit: () => void;
   onCancel: () => void;
+  /**
+   * Signals that the cell is starting an editing operation that will move focus
+   * outside the table (e.g., opening a media manager or a modal). Calling this
+   * sets isEditing=true so useClearFocusOnBlur does not clear cell focus while
+   * the external UI is open. Pair with onCommit (after the operation succeeds)
+   * or onCancel (if the user dismisses without a value change).
+   */
+  onStartEdit?: () => void;
   /** Ref to the focusable input element. Used for type-to-edit (focusing the input when user starts typing on a focused cell). */
   inputRef?: React.MutableRefObject<Focusable | undefined | null>;
   typeConfig?: unknown;
   /** How edit mode was triggered. Edit components can use this to customize behavior (e.g., date picker auto-opens on 'type'). */
-  editTrigger?: { kind: 'type'; key: string } | 'enter' | 'doubleClick' | null;
+  editTrigger?: EditTrigger | null;
   /** Column-level validation rules. Edit components can derive UI behavior (e.g., maxLength blocking/tooltip) from these. */
   validation?: ValidationRule[];
 }
 
-/** Type-safe factory for defining cell types. V ensures all value-typed fields are consistent. */
-export function defineCellType<V>(cellType: {
+/**
+ * Type-safe definition for a cell type. Non-value-typed props are derived
+ * directly from CellType via Pick so new additions propagate automatically.
+ */
+export type CellTypeDefinition<V> = Pick<
+  CellType,
+  'editable' | 'clearable' | 'showEditWhenFocused'
+> & {
   type: CellType['type'];
   ViewComponent: React.ComponentType<CellViewProps<V>>;
   EditComponent?: React.ComponentType<CellEditProps<V>>;
   serialize?: (value: V) => string;
   deserialize?: (raw: string) => V;
   validate?: (value: V, rules?: ValidationRule[]) => string | null;
-  editable?: boolean;
-  clearable?: boolean;
   toggleValue?: (value: V) => V;
-  onTypeToEdit?: (params: { key: string; validation?: ValidationRule[] }) => { value?: V } | undefined;
+  editOnClick?: (value: V) => boolean;
+  onTypeToEdit?: (params: {
+    key: string;
+    validation?: ValidationRule[];
+  }) => { value?: V } | undefined;
   normalizeOnCommit?: (value: V) => V;
-}): CellType {
-  return cellType;
-}
+};
 
+/** Type-safe factory for defining cell types. V ensures all value-typed fields are consistent. */
+export function defineCellType<V>(cellType: CellTypeDefinition<V>): CellType {
+  return cellType as CellType;
+}

package/src/components/EditableTable/useAddRow.ts

@@ -0,0 +1,39 @@
+import { useCallback, useRef } from 'react';
+import type { FiltersMap } from '@wix/bex-core';
+import type { EditableTableState } from '../../state/EditableTable';
+
+export function useAddRow<T, F extends FiltersMap>(
+  state: EditableTableState<T, F>,
+) {
+  const firstEditableColId = state.editableColumns.find(
+    (col) => col.editable !== false && !!col.setValue,
+  )?.id;
+
+  // Cached anchor so chained afterItemKey deps are avoided —
+  // prepareItemsToMergeIntoPage reverses createdPatches, so chained anchors
+  // would strand later items at the top of the table.
+  const addItemAnchorRef = useRef<string | undefined>(undefined);
+
+  const handleAddItem = useCallback(() => {
+    // Refresh the anchor if it's missing or no longer in the current page
+    // (e.g. after query/filter/pagination changes moved it off-page).
+    const isAnchorStale =
+      !addItemAnchorRef.current ||
+      !state.keyedItems.some((ki) => ki.key === addItemAnchorRef.current);
+    if (isAnchorStale) {
+      addItemAnchorRef.current =
+        state.keyedItems[state.keyedItems.length - 1]?.key;
+    }
+    const newKey = state.addItem(addItemAnchorRef.current);
+    if (!newKey || !firstEditableColId) return;
+    // RAF gives React one frame to render the new row before we try to focus it.
+    requestAnimationFrame(() => {
+      state.cellInteraction.startEdit(newKey, firstEditableColId, 'enter');
+    });
+  }, [state, firstEditableColId]);
+
+  const showAddItemRow =
+    !state.addItemDisabled && state.collection.initTask.status.isSuccess;
+
+  return { showAddItemRow, handleAddItem };
+}

package/src/components/EditableTable/useCellFocusAndEditing.ts

@@ -77,8 +77,12 @@ export function useCellFocusAndEditing<T, F extends FiltersMap>({
         input.setSelectionRange(len, len);
       }, 0);
     } else {
-      // Let CellInteractionState own scroll positioning for the focused cell.
-      cellRef.current?.focus({ preventScroll: true });
+      // Don't steal focus if a descendant already has it (e.g. image cell's
+      // inner-focus buttons). The gridcell only needs focusing when it isn't
+      // already within the active focus subtree.
+      if (!cellRef.current?.contains(document.activeElement)) {
+        cellRef.current?.focus({ preventScroll: true });
+      }
     }
   }, [isFocused, isEditing, cellRef, editInputRef]);
 
@@ -102,7 +106,16 @@ export function useCellFocusAndEditing<T, F extends FiltersMap>({
 
       if (e.key === 'Enter') {
         e.preventDefault();
-        handleActivate();
+        if (resolved?.showEditWhenFocused) {
+          // EditComponent is always visible. Focus into its first interactive
+          // element (inner focus) rather than entering full edit mode now —
+          // the cell type calls onStartEdit() itself right before any external
+          // UI (media manager / modal) opens, which is the only time isEditing
+          // needs to be true for useClearFocusOnBlur protection.
+          editInputRef.current?.focus();
+        } else {
+          handleActivate();
+        }
         return;
       }
 

package/src/components/EditableTable/useClearFocusOnBlur.ts

@@ -4,6 +4,12 @@ import type { CellInteractionState } from '../../state/EditableTable/CellInterac
 
 /**
  * Clears cell focus when the user clicks outside the table container.
+ *
+ * Skips clearFocus() while isEditing=true so that portaled editors (date
+ * picker, select dropdown, media manager) can take focus without causing the
+ * cell to lose its editing state. Cell types that open external UI are
+ * responsible for calling onStartEdit() before the modal opens (which sets
+ * isEditing=true) and onCancel()/onCommit() when it closes.
  */
 export function useClearFocusOnBlur<T, F extends FiltersMap>(
   cellInteraction: CellInteractionState<T, F>,

package/src/components/EntityPage/EntityPagePlain.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain1477466796";
+var _namespace_ = "EntityPagePlain2356357517";
 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":"EntityPagePlain1477466796__root"};
+export var classes = {"root":"EntityPagePlain2356357517__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Fade3161725745";
+var _namespace_ = "Fade525406167";
 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":"Fade3161725745__root"};
+export var classes = {"root":"Fade525406167__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading4066011626";
+var _namespace_ = "Heading2420251234";
 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":"Heading4066011626__root"};
+export var classes = {"root":"Heading2420251234__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload3407014856";
+var _namespace_ = "ImportStepUpload962406613";
 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":"ImportStepUpload3407014856__root","fileUpload":"ImportStepUpload3407014856__fileUpload"};
+export var classes = {"root":"ImportStepUpload962406613__root","fileUpload":"ImportStepUpload962406613__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow796619643";
+var _namespace_ = "InputOverflow2186178642";
 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":"InputOverflow796619643__root"};
+export var classes = {"root":"InputOverflow2186178642__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};