@wix/patterns 1.394.0 → 1.396.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3445079294";
+var _namespace_ = "Edit737468891";
 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":"Edit3445079294__root","numberInput":"Edit3445079294__numberInput"};
+export var classes = {"root":"Edit737468891__root","numberInput":"Edit737468891__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_ = "View2972152045";
+var _namespace_ = "View903115463";
 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":"View2972152045__root","textView":"View2972152045__textView"};
+export var classes = {"root":"View903115463__root","textView":"View903115463__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_ = "Edit4109658587";
+var _namespace_ = "Edit1296664024";
 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":"Edit4109658587__root","jsonInput":"Edit4109658587__jsonInput"};
+export var classes = {"root":"Edit1296664024__root","jsonInput":"Edit1296664024__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_ = "View85684431";
+var _namespace_ = "View437008383";
 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":"View85684431__root"};
+export var classes = {"root":"View437008383__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -0,0 +1,204 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Box } from '@wix/design-system';
+import {
+  CellReferenceInput,
+  type CellReferenceInputHandle,
+  type CellReferenceItem,
+} from '@wix/patterns-fields';
+import type { CellEditProps } from '../../types';
+import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
+import { useFilterCollectionStates } from '../../../../hooks/useFilterCollectionStates';
+import { FilterTranslationProvider } from '../../../../providers';
+import type { ReferenceItem, ReferenceTypeConfig } from './types';
+import { getImageFieldId } from './getImageFieldId';
+import { useCollection } from '@wix/bex-core/react';
+import { observer } from 'mobx-react-lite';
+
+type ReferenceValue = Record<string, unknown> | null;
+
+function _ReferenceEditContent({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  typeConfig,
+  editTrigger,
+  inputRef,
+}: CellEditProps<ReferenceValue>) {
+  const config = typeConfig as ReferenceTypeConfig | undefined;
+  const refSchema = config?.refSchema;
+  const acHandle = useRef<CellReferenceInputHandle | null>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  const collection = useCollection<ReferenceItem>({
+    queryName: `reference-cell-edit-${refSchema?.id ?? 'unknown'}`,
+    itemKey: (item) => item.id,
+    itemName: (item) => item.name,
+    fetchData: async (query) => {
+      if (!config?.fetchReferenceItems) {
+        return { items: [], total: 0 };
+      }
+      return config.fetchReferenceItems(query);
+    },
+  });
+
+  const initialSearchTextRef = useRef(
+    editTrigger && typeof editTrigger === 'object' && editTrigger.kind === 'type'
+      ? editTrigger.key
+      : undefined,
+  );
+  // True once the user has typed into the search input. After that, displayValue
+  // follows searchValue directly (even when empty) rather than falling back to
+  // selectedDisplayValue — prevents the input from snapping back after backspace.
+  // useState (not useRef) so that setIsSearchActive(true) triggers a re-render
+  // even when collection.search('') produces no MobX change (searchValue already '').
+  const [isSearchActive, setIsSearchActive] = useState(
+    initialSearchTextRef.current !== undefined,
+  );
+
+  useEffect(() => {
+    const dispose = collection.init();
+    if (initialSearchTextRef.current !== undefined) {
+      collection.search(initialSearchTextRef.current);
+    }
+    return dispose;
+  }, [collection]);
+
+  const keyedItems = collection.result.keyedItems;
+  const fetchedLastPage = collection.fetchedLastPage;
+  const searchValue = collection.query.search.value;
+
+  const idField = refSchema?.idField ?? '_id';
+  const displayField = refSchema?.displayField ?? 'title';
+  const imageField = getImageFieldId(refSchema?.fields);
+
+  const selectedDisplayValue = value ? String(value[displayField] ?? '') : '';
+  const displayValue = isSearchActive
+    ? searchValue
+    : searchValue || selectedDisplayValue;
+
+  const selectedImage = useMemo(() => {
+    const selectedId = value?.[idField];
+    if (!selectedId) {
+      return undefined;
+    }
+    const foundItem = keyedItems.find((ki) => ki.key === String(selectedId));
+    if (foundItem?.item.image) {
+      return foundItem.item.image;
+    }
+    if (imageField) {
+      return value?.[imageField] as string | undefined;
+    }
+    return undefined;
+  }, [value, idField, keyedItems, imageField]);
+
+  const selectedId = value ? String(value[idField] ?? '') : '';
+  const selectedItem =
+    selectedDisplayValue && !searchValue && selectedId && !isSearchActive
+      ? { id: selectedId, name: selectedDisplayValue, image: selectedImage }
+      : undefined;
+
+  const items = useMemo(
+    () =>
+      keyedItems.map((ki) => ({
+        id: String(ki.key),
+        name: ki.item.name,
+        image: ki.item.image,
+      })),
+    [keyedItems],
+  );
+
+  const handleSelect = useCallback(
+    (item: CellReferenceItem) => {
+      onChange({
+        [idField]: item.id,
+        [displayField]: item.name,
+        ...(imageField && item.image ? { [imageField]: item.image } : {}),
+      });
+      collection.clearSearch();
+      onCommit();
+    },
+    [idField, displayField, imageField, onChange, onCommit, collection],
+  );
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setIsSearchActive(true);
+      if (e.target.value) {
+        collection.search(e.target.value);
+      } else {
+        collection.clearSearch();
+      }
+    },
+    [collection],
+  );
+
+  const handleClear = useCallback(() => {
+    onChange(null);
+    collection.clearSearch();
+    onCommit();
+  }, [onChange, onCommit, collection]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        onCancel();
+      } else if (
+        (e.key === 'Backspace' || e.key === 'Delete') &&
+        value &&
+        !displayValue &&
+        !isSearchActive
+      ) {
+        onChange(null);
+        collection.clearSearch();
+        onCommit();
+      }
+    },
+    [onCancel, onChange, onCommit, value, displayValue, collection, isSearchActive],
+  );
+
+  const closeDropdown = useCallback(() => acHandle.current?.hideOptions(), []);
+  useCloseOnAncestorScroll(wrapperRef, closeDropdown, true);
+
+  const { showInitialLoader, fixedFooter } = useFilterCollectionStates({
+    collection,
+    fixedFooter: config?.renderFooter?.(),
+  });
+
+  if (!refSchema) {
+    return null;
+  }
+
+  return (
+    <Box ref={wrapperRef} width="100%" height="100%">
+      <CellReferenceInput
+        ref={acHandle}
+        items={items}
+        value={displayValue}
+        selectedItem={selectedItem}
+        onChange={handleChange}
+        onSelect={handleSelect}
+        onClear={handleClear}
+        onKeyDown={handleKeyDown}
+        clearButton={!!displayValue}
+        infiniteScroll
+        hasMore={!showInitialLoader && !fetchedLastPage}
+        loadMore={collection.fetchNextPageIfNeeded}
+        fixedFooter={fixedFooter}
+        onBlur={onCommit}
+        autoOpen={!!editTrigger}
+        inputRef={inputRef}
+      />
+    </Box>
+  );
+}
+
+const ReferenceEditContent = observer(_ReferenceEditContent);
+
+export const ReferenceEdit = (props: CellEditProps<ReferenceValue>) => (
+  <FilterTranslationProvider>
+    <ReferenceEditContent {...props} />
+  </FilterTranslationProvider>
+);

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

@@ -0,0 +1,41 @@
+import { fireEvent } from '@testing-library/react';
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function ReferenceEditUniDriver(base: UniDriver, body: UniDriver) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const getNativeInput = () => (base.$('input') as any).getNative() as Promise<HTMLInputElement>;
+
+  return {
+    ...baseUniDriverFactory(base),
+    hasInput: () => base.$('input').exists(),
+    getInputValue: () => base.$('input').value(),
+    typeInInput: async (value: string) => {
+      fireEvent.change(await getNativeInput(), { target: { value } });
+    },
+    pressKeyOnInput: async (key: string) => {
+      fireEvent.keyDown(await getNativeInput(), { key });
+    },
+    hasDropdown: () => base.$('[data-hook="dropdown-layout-wrapper"]').exists(),
+    hasClearButton: () =>
+      base.$('[data-hook="input-clear-button"]').exists(),
+    clickClearButton: async () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const el = (base.$('[data-hook="input-clear-button"]') as any).getNative() as Promise<HTMLElement>;
+      fireEvent.click(await el);
+    },
+    hasAvatarPrefix: () =>
+      base.$('[data-hook="reference-input-avatar-prefix"]').exists(),
+    hasInitialLoader: () => body.$('[data-hook="initial-loader"]').exists(),
+    // Dropdown is portal-mounted to document.body, so search in body, not base.
+    getOptionCount: async () => body.$$('[data-hook="list-item-select"]').count(),
+    getOptionTitleByIndex: async (index: number) => {
+      const option = await body.$$('[data-hook="list-item-select"]').get(index);
+      return option.$('[data-hook="list-item-select-title"]').text();
+    },
+    clickOptionByIndex: async (index: number) => {
+      const option = await body.$$('[data-hook="list-item-select"]').get(index);
+      return option.click();
+    },
+  };
+}

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { CellReferenceView } from '@wix/patterns-fields';
+import type { CellViewProps } from '../../types';
+import { CellViewLayout } from '../CellViewLayout';
+import type { ReferenceTypeConfig } from './types';
+import { getImageFieldId } from './getImageFieldId';
+
+type ReferenceValue = Record<string, unknown> | null;
+
+export const ReferenceView: React.FC<CellViewProps<ReferenceValue>> = ({
+  value,
+  typeConfig,
+}) => {
+  const config = typeConfig as ReferenceTypeConfig | undefined;
+  if (!value || !config?.refSchema) {
+    return <CellViewLayout>{null}</CellViewLayout>;
+  }
+
+  const { displayField, fields } = config.refSchema;
+  const imageField = getImageFieldId(fields);
+  const name = String(value[displayField] ?? '');
+  const imageUrl = imageField
+    ? (value[imageField] as string | undefined)
+    : undefined;
+
+  return (
+    <CellReferenceView
+      name={name}
+      imageUrl={imageUrl}
+      dataHook="reference-view"
+    />
+  );
+};

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

@@ -0,0 +1,11 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function ReferenceViewUniDriver(base: UniDriver, _body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    isEmpty: async () => !(await base.$('[data-hook="reference-view"]').exists()),
+    getName: () => base.$('[data-hook="reference-view"]').text(),
+    hasAvatar: () => base.$('[data-hook="reference-view"] [data-hook="avatar"]').exists(),
+  };
+}

package/src/components/EditableTable/cellTypes/reference/getImageFieldId.ts

@@ -0,0 +1,6 @@
+import type { RefSchemaField } from './types';
+
+export const getImageFieldId = (
+  fields: Record<string, RefSchemaField | undefined> | undefined,
+): string | undefined =>
+  Object.entries(fields ?? {}).find(([, f]) => f?.type === 'IMAGE')?.[0];

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

@@ -0,0 +1,30 @@
+import { defineCellType } from '../../types';
+import { ReferenceView } from './View';
+import { ReferenceEdit } from './Edit';
+
+export { ReferenceView, ReferenceEdit };
+export type { ReferenceItem, RefSchema, ReferenceTypeConfig } from './types';
+
+type ReferenceValue = Record<string, unknown> | null;
+
+export const referenceCellType = defineCellType<ReferenceValue>({
+  type: 'reference',
+  ViewComponent: ReferenceView,
+  EditComponent: ReferenceEdit,
+  serialize: (value) => (value ? JSON.stringify(value) : ''),
+  deserialize: (raw) => {
+    if (!raw) {
+      return null;
+    }
+    try {
+      const parsed = JSON.parse(raw);
+      if (parsed && typeof parsed === 'object') {
+        return parsed;
+      }
+    } catch {}
+    return null;
+  },
+  editable: true,
+  clearable: true,
+  onTypeToEdit: () => ({}),
+});

package/src/components/EditableTable/cellTypes/reference/types.ts

@@ -0,0 +1,29 @@
+import type React from 'react';
+import { ComputedQuery } from '@wix/bex-core';
+
+export interface ReferenceItem {
+  id: string;
+  name: string;
+  image?: string;
+}
+
+export type RefFieldType = 'IMAGE';
+
+export interface RefSchemaField {
+  type: RefFieldType;
+}
+
+export interface RefSchema {
+  id: string;
+  displayField: string;
+  idField: string;
+  fields?: Record<string, RefSchemaField | undefined>;
+}
+
+export interface ReferenceTypeConfig {
+  refSchema: RefSchema;
+  fetchReferenceItems: (
+    query: ComputedQuery,
+  ) => Promise<{ items: ReferenceItem[]; total: number }>;
+  renderFooter?: () => React.ReactNode;
+}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit726422225";
+var _namespace_ = "Edit1642995125";
 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":"Edit726422225__root","selectInput":"Edit726422225__selectInput"};
+export var classes = {"root":"Edit1642995125__root","selectInput":"Edit1642995125__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_ = "Edit3885633040";
+var _namespace_ = "Edit3900930784";
 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":"Edit3885633040__root","editWrapper":"Edit3885633040__editWrapper","inputArea":"Edit3885633040__inputArea"};
+export var classes = {"root":"Edit3900930784__root","editWrapper":"Edit3900930784__editWrapper","inputArea":"Edit3900930784__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_ = "View702287077";
+var _namespace_ = "View350961446";
 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":"View702287077__root"};
+export var classes = {"root":"View350961446__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_ = "Edit99930963";
+var _namespace_ = "Edit2616508223";
 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":"Edit99930963__root","urlInput":"Edit99930963__urlInput"};
+export var classes = {"root":"Edit2616508223__root","urlInput":"Edit2616508223__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_ = "View3488769363";
+var _namespace_ = "View1876394791";
 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":"View3488769363__root","textView":"View3488769363__textView","urlText":"View3488769363__urlText","suffix":"View3488769363__suffix"};
+export var classes = {"root":"View1876394791__root","textView":"View1876394791__textView","urlText":"View1876394791__urlText","suffix":"View1876394791__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain2028930317";
+var _namespace_ = "EntityPagePlain2511895562";
 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":"EntityPagePlain2028930317__root"};
+export var classes = {"root":"EntityPagePlain2511895562__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_ = "Fade3290219237";
+var _namespace_ = "Fade466847378";
 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":"Fade3290219237__root"};
+export var classes = {"root":"Fade466847378__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_ = "Heading3899538723";
+var _namespace_ = "Heading960239612";
 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":"Heading3899538723__root"};
+export var classes = {"root":"Heading960239612__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_ = "ImportStepUpload2796037763";
+var _namespace_ = "ImportStepUpload112089049";
 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":"ImportStepUpload2796037763__root","fileUpload":"ImportStepUpload2796037763__fileUpload"};
+export var classes = {"root":"ImportStepUpload112089049__root","fileUpload":"ImportStepUpload112089049__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_ = "InputOverflow686475165";
+var _namespace_ = "InputOverflow1496299731";
 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":"InputOverflow686475165__root"};
+export var classes = {"root":"InputOverflow1496299731__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow3793731906";
+var _namespace_ = "LoadingRow3229587494";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow3793731906__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3793731906__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow3229587494__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow3229587494__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

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