@wix/patterns 1.415.0 → 1.416.0

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

@@ -0,0 +1,265 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Box } from '@wix/design-system';
+import {
+  CellMultiReferenceInput,
+  type CellMultiReferenceInputHandle,
+  type CellMultiReferenceItem,
+} from '@wix/patterns-fields';
+import { observer } from 'mobx-react-lite';
+import { useCollection } from '@wix/bex-core/react';
+import type { CellEditProps } from '../../types';
+import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
+import { useFilterCollectionStates } from '../../../../hooks/useFilterCollectionStates';
+import { FilterTranslationProvider } from '../../../../providers';
+import { getImageFieldId } from '../reference/getImageFieldId';
+import { useOpenReferencedCollection } from '../reference/openCollectionContext';
+import type {
+  MultiReferenceValue,
+  ReferenceItem,
+  ReferenceTypeConfig,
+} from './types';
+
+function _MultiReferenceEditContent({
+  value,
+  onChange,
+  onCommit,
+  typeConfig,
+  editTrigger,
+  inputRef,
+}: CellEditProps<MultiReferenceValue>) {
+  const config = typeConfig as ReferenceTypeConfig | undefined;
+  const refSchema = config?.refSchema;
+  const acHandle = useRef<CellMultiReferenceInputHandle | null>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  // Opener provided by ReferenceEditWrapper (a stable ancestor) so the
+  // navigation + return-to-foreground subscription survive this editor
+  // unmounting when the overlay opens.
+  const openReferencedCollection = useOpenReferencedCollection();
+
+  const idField = refSchema?.idField ?? '_id';
+  const displayField = refSchema?.displayField ?? 'title';
+  const imageField = getImageFieldId(refSchema?.fields);
+
+  const collection = useCollection<ReferenceItem>({
+    queryName: `multi-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,
+  );
+
+  useEffect(() => {
+    const dispose = collection.init();
+    if (initialSearchTextRef.current !== undefined) {
+      collection.search(initialSearchTextRef.current, { clearResult: true });
+    }
+    // Seed editingValue with the current value so a no-op edit commits the same
+    // list back instead of `undefined` (which would clear the cell).
+    onChange(value ?? []);
+    return dispose;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [collection]);
+
+  const selectedRefs = value ?? [];
+
+  const selectedItems = useMemo<CellMultiReferenceItem[]>(
+    () =>
+      selectedRefs.map((ref, i) => ({
+        id: String(ref[idField] ?? i),
+        name: String(ref[displayField] ?? ''),
+        image: imageField ? (ref[imageField] as string | undefined) : undefined,
+      })),
+    [selectedRefs, idField, displayField, imageField],
+  );
+
+  const selectedIds = useMemo(
+    () => new Set(selectedItems.map((item) => item.id)),
+    [selectedItems],
+  );
+
+  const keyedItems = collection.result.keyedItems;
+  const fetchedLastPage = collection.fetchedLastPage;
+  const searchValue = collection.query.search.value;
+
+  // Exclude already-selected references from the dropdown options.
+  const items = useMemo<CellMultiReferenceItem[]>(
+    () =>
+      keyedItems
+        .map((ki) => ({
+          id: String(ki.key),
+          name: ki.item.name,
+          image: ki.item.image,
+        }))
+        .filter((item) => !selectedIds.has(item.id)),
+    [keyedItems, selectedIds],
+  );
+
+  const handleSelect = useCallback(
+    (item: CellMultiReferenceItem) => {
+      const next = [
+        ...selectedRefs,
+        {
+          [idField]: item.id,
+          [displayField]: item.name,
+          ...(imageField && item.image ? { [imageField]: item.image } : {}),
+        },
+      ];
+      onChange(next);
+      collection.clearSearch();
+    },
+    [selectedRefs, idField, displayField, imageField, onChange, collection],
+  );
+
+  const handleRemoveTag = useCallback(
+    (id: string) => {
+      const next = selectedRefs.filter(
+        (ref) => String(ref[idField] ?? '') !== id,
+      );
+      onChange(next.length ? next : null);
+    },
+    [selectedRefs, idField, onChange],
+  );
+
+  const handleSearchChange = useCallback(
+    (search: string) => {
+      if (search) {
+        collection.search(search, { clearResult: true });
+      } else {
+        collection.clearSearch();
+      }
+    },
+    [collection],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      // Production should commit (not revert) on Escape — close the editor and
+      // keep the current selection. Stop propagation so the framework's default
+      // cancel-on-Escape doesn't also fire.
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        onCommit();
+      }
+    },
+    [onCommit],
+  );
+
+  const closeDropdown = useCallback(() => acHandle.current?.hideOptions(), []);
+  useCloseOnAncestorScroll(wrapperRef, closeDropdown, true);
+
+  // Commit on blur, unless focus moved into the portaled dropdown / popover.
+  const handleBlur = useCallback(() => {
+    requestAnimationFrame(() => {
+      const active = document.activeElement as HTMLElement | null;
+      if (!active) {
+        onCommit();
+        return;
+      }
+      if (wrapperRef.current?.contains(active)) {
+        return;
+      }
+      if (
+        active.closest(
+          '[role="listbox"], [role="dialog"], [data-hook*="popover"]',
+        )
+      ) {
+        return;
+      }
+      onCommit();
+    });
+  }, [onCommit]);
+
+  // Click-outside fallback. Empty cells often never get a focused descendant,
+  // so onBlur on the wrapper never fires.
+  useEffect(() => {
+    const handleDocMouseDown = (e: MouseEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (!target) {
+        return;
+      }
+      if (wrapperRef.current?.contains(target)) {
+        return;
+      }
+      if (
+        target.closest?.(
+          '[role="listbox"], [role="dialog"], [data-hook*="popover"]',
+        )
+      ) {
+        return;
+      }
+      onCommit();
+    };
+    document.addEventListener('mousedown', handleDocMouseDown);
+    return () => document.removeEventListener('mousedown', handleDocMouseDown);
+  }, [onCommit]);
+
+  const { showInitialLoader, fixedFooter } = useFilterCollectionStates({
+    collection,
+    fixedFooter: config?.renderFooter?.(),
+  });
+
+  // Refresh this editor's dropdown options when the overlay closes — force
+  // invalidates the shared query cache (keyed by queryName), so even after this
+  // editor has unmounted the next open refetches fresh.
+  const handleOpenCollection = useMemo(
+    () =>
+      openReferencedCollection
+        ? () =>
+            openReferencedCollection(() =>
+              collection.clearResultAndMoveToStart({ force: true }),
+            )
+        : undefined,
+    [openReferencedCollection, collection],
+  );
+
+  if (!refSchema) {
+    return null;
+  }
+
+  return (
+    <Box ref={wrapperRef} width="100%" height="100%">
+      <CellMultiReferenceInput
+        ref={acHandle}
+        items={items}
+        selectedItems={selectedItems}
+        value={searchValue}
+        onChange={handleSearchChange}
+        onSelect={handleSelect}
+        onRemoveTag={handleRemoveTag}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        infiniteScroll
+        hasMore={!showInitialLoader && !fetchedLastPage}
+        loadMore={collection.fetchNextPageIfNeeded}
+        fixedFooter={fixedFooter}
+        onOpenCollection={handleOpenCollection}
+        autoOpen={!!editTrigger}
+        inputRef={inputRef}
+        dataHook="multi-reference-edit"
+      />
+    </Box>
+  );
+}
+
+const MultiReferenceEditContent = observer(_MultiReferenceEditContent);
+
+export const MultiReferenceEdit = (
+  props: CellEditProps<MultiReferenceValue>,
+) => (
+  <FilterTranslationProvider>
+    <MultiReferenceEditContent {...props} />
+  </FilterTranslationProvider>
+);

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

@@ -0,0 +1,52 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+const { fireEvent = null } =
+  process.env.NODE_ENV === 'test'
+    ? (() => {
+        try {
+          return require('@testing-library/react');
+        } catch {}
+        return {};
+      })()
+    : {};
+
+export function MultiReferenceEditUniDriver(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(),
+    getTagsCount: () =>
+      base.$$('[data-hook="multi-reference-edit-tag"]').count(),
+    typeInInput: async (value: string) => {
+      fireEvent.change(await getNativeInput(), { target: { value } });
+    },
+    pressKeyOnInput: async (key: string) => {
+      fireEvent.keyDown(await getNativeInput(), { key });
+    },
+    // Dropdown options are portal-mounted to document.body, so search in body.
+    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();
+    },
+    hasOpenCollectionButton: () =>
+      body.$('[data-hook="reference-open-collection"]').exists(),
+    clickOpenCollection: async () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const el = (
+        body.$('[data-hook="reference-open-collection"]') as any
+      ).getNative() as Promise<HTMLElement>;
+      fireEvent.click(await el);
+    },
+  };
+}

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { CellMultiReferenceView } from '@wix/patterns-fields';
+import type { CellMultiReferenceItem } from '@wix/patterns-fields';
+import type { CellViewProps } from '../../types';
+import { getImageFieldId } from '../reference/getImageFieldId';
+import type { MultiReferenceValue, ReferenceTypeConfig } from './types';
+
+export const MultiReferenceView: React.FC<
+  CellViewProps<MultiReferenceValue>
+> = ({ value, typeConfig, columnId, rowKey }) => {
+  const config = typeConfig as ReferenceTypeConfig | undefined;
+  const refs = value ?? [];
+  if (refs.length === 0 || !config?.refSchema) {
+    return null;
+  }
+
+  const { displayField, idField } = config.refSchema;
+  const imageField = getImageFieldId(config.refSchema.fields);
+
+  const items: CellMultiReferenceItem[] = refs.map((ref, i) => ({
+    id: String(ref[idField] ?? i),
+    name: String(ref[displayField] ?? ''),
+    image: imageField ? (ref[imageField] as string | undefined) : undefined,
+  }));
+
+  return (
+    <CellMultiReferenceView
+      items={items}
+      dataHook="multi-reference-view"
+      fieldId={`multi-reference-view-${columnId}-${rowKey}`}
+    />
+  );
+};

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

@@ -0,0 +1,16 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function MultiReferenceViewUniDriver(base: UniDriver, _body: UniDriver) {
+  const tags = () => base.$$('[data-hook="cell-multi-reference-tag"]');
+  const overflow = () => base.$('[data-hook="tag-list-overflow-chip"]');
+  return {
+    ...baseUniDriverFactory(base),
+    hasTags: async () => (await tags().count()) > 0,
+    getTagsCount: () => tags().count(),
+    isEmpty: async () =>
+      !(await base.$('[data-hook="cell-multi-reference-tags"]').exists()),
+    hasOverflowChip: () => overflow().exists(),
+    getOverflowChipText: async () => (await overflow().text()) ?? '',
+  };
+}

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

@@ -0,0 +1,41 @@
+import { defineCellType } from '../../types';
+import { ReferenceEditWrapper } from '../reference/ReferenceEditWrapper';
+import { MultiReferenceView } from './View';
+import { MultiReferenceEdit } from './Edit';
+import type { MultiReferenceValue } from './types';
+
+export { MultiReferenceView, MultiReferenceEdit };
+export type {
+  MultiReferenceValue,
+  ReferenceItem,
+  RefSchema,
+  ReferenceTypeConfig,
+} from './types';
+
+export const multiReferenceCellType = defineCellType<MultiReferenceValue>({
+  type: 'multiReference',
+  ViewComponent: MultiReferenceView,
+  EditComponent: MultiReferenceEdit,
+  EditWrapper: ReferenceEditWrapper,
+  // Compact, single-line JSON for clipboard TSV (no pretty-printing).
+  serialize: (value) => (value && value.length ? JSON.stringify(value) : ''),
+  deserialize: (raw) => {
+    if (!raw) {
+      return null;
+    }
+    try {
+      const parsed = JSON.parse(raw);
+      if (Array.isArray(parsed)) {
+        return parsed;
+      }
+    } catch {}
+    return null;
+  },
+  editable: true,
+  clearable: true,
+  // Single click opens the chip editor (parity with the UX handoff).
+  editOnClick: () => true,
+  // Enter edit on a printable key without clearing the existing chips — the
+  // MultiSelect input takes over typing once edit opens.
+  onTypeToEdit: () => ({}),
+});

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

@@ -0,0 +1,15 @@
+import type {
+  ReferenceItem,
+  RefSchema,
+  ReferenceTypeConfig,
+} from '../reference/types';
+
+export type { ReferenceItem, RefSchema, ReferenceTypeConfig };
+
+/**
+ * A multi-reference cell holds an array of denormalized reference objects —
+ * the plural sibling of the `reference` cell's `Record<string, unknown> | null`.
+ * Each object carries the schema's `idField`, `displayField` and (optionally)
+ * the image field, so the view renders without re-fetching.
+ */
+export type MultiReferenceValue = Record<string, unknown>[] | null;

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3997170827";
+var _namespace_ = "Edit3213260238";
 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":"Edit3997170827__root","numberInput":"Edit3997170827__numberInput"};
+export var classes = {"root":"Edit3213260238__root","numberInput":"Edit3213260238__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_ = "View3717091114";
+var _namespace_ = "View1484387196";
 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":"View3717091114__root","textView":"View3717091114__textView"};
+export var classes = {"root":"View1484387196__root","textView":"View1484387196__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_ = "Edit1884076868";
+var _namespace_ = "Edit490034775";
 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":"Edit1884076868__root","jsonInput":"Edit1884076868__jsonInput"};
+export var classes = {"root":"Edit490034775__root","jsonInput":"Edit490034775__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_ = "View4108766999";
+var _namespace_ = "View3440349551";
 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":"View4108766999__root"};
+export var classes = {"root":"View3440349551__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_ = "Edit1063584883";
+var _namespace_ = "Edit3980015914";
 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":"Edit1063584883__root","selectInput":"Edit1063584883__selectInput"};
+export var classes = {"root":"Edit3980015914__root","selectInput":"Edit3980015914__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_ = "Edit2539786971";
+var _namespace_ = "Edit1573713769";
 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":"Edit2539786971__root","editWrapper":"Edit2539786971__editWrapper","inputArea":"Edit2539786971__inputArea"};
+export var classes = {"root":"Edit1573713769__root","editWrapper":"Edit1573713769__editWrapper","inputArea":"Edit1573713769__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_ = "View109019798";
+var _namespace_ = "View1438796715";
 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":"View109019798__root"};
+export var classes = {"root":"View1438796715__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3891897524";
+var _namespace_ = "Edit298992382";
 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":"Edit3891897524__root","wrapper":"Edit3891897524__wrapper","overlay":"Edit3891897524__overlay"};
+export var classes = {"root":"Edit298992382__root","wrapper":"Edit298992382__wrapper","overlay":"Edit298992382__overlay"};
 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_ = "Edit3618082279";
+var _namespace_ = "Edit3843989486";
 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":"Edit3618082279__root","urlInput":"Edit3618082279__urlInput"};
+export var classes = {"root":"Edit3843989486__root","urlInput":"Edit3843989486__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_ = "View1464552216";
+var _namespace_ = "View3560436886";
 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":"View1464552216__root","textView":"View1464552216__textView","urlText":"View1464552216__urlText","suffix":"View1464552216__suffix"};
+export var classes = {"root":"View3560436886__root","textView":"View3560436886__textView","urlText":"View3560436886__urlText","suffix":"View3560436886__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_ = "EntityPagePlain583315663";
+var _namespace_ = "EntityPagePlain1073958480";
 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":"EntityPagePlain583315663__root"};
+export var classes = {"root":"EntityPagePlain1073958480__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_ = "Fade68256681";
+var _namespace_ = "Fade1719716815";
 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":"Fade68256681__root"};
+export var classes = {"root":"Fade1719716815__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_ = "Heading1825965899";
+var _namespace_ = "Heading694489876";
 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":"Heading1825965899__root"};
+export var classes = {"root":"Heading694489876__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};