@wix/patterns 1.422.0 → 1.424.0

package/src/components/ArchivedItemsPanel/ArchivedItemsPanel.tsx

@@ -10,14 +10,16 @@ import { observer } from 'mobx-react-lite';
 import { ScrollableContent } from '../ScrollableContent';
 import { ArchivedItemsList } from './ArchivedItemsList';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
-import { DataExtensionState } from '@wix/bex-core';
+import type { DeleteFieldModalState, FieldArchive } from '@wix/bex-core';
 import type { ArchivedItem } from './types';
 
 export interface ArchivedItemsPanelProps {
   items: ArchivedItem[];
   onBackButtonClick: () => void;
   onCloseButtonClick: () => void;
-  dataExtension: DataExtensionState;
+  archive: FieldArchive;
+  /** The shared delete-field modal, opened when an archived field is deleted. */
+  deleteFieldModal: DeleteFieldModalState;
   dataHook?: string;
 }
 
@@ -25,7 +27,8 @@ function _ArchivedItemsPanel({
   items,
   onBackButtonClick,
   onCloseButtonClick,
-  dataExtension,
+  archive,
+  deleteFieldModal,
   dataHook = 'custom-columns',
 }: ArchivedItemsPanelProps) {
   const { translate: t } = useWixPatternsContainer();
@@ -36,32 +39,25 @@ function _ArchivedItemsPanel({
   }, []);
 
   const closeIfEmpty = () => {
-    const remainingItems = dataExtension.archivedItems;
-    if (remainingItems.length === 0) {
+    if (archive.items.length === 0) {
       handleBack();
     }
   };
 
   const handleRestore = async (item: ArchivedItem) => {
-    await dataExtension.restoreField({
-      id: item.id,
-      origin: 'Archived items panel',
-      reportBi: dataExtension.container.createBILogger({
-        componentType: 'ArchivedItemsPanel',
-      }),
-    });
-
+    await archive.restoreField(item.id, 'Archived items panel');
     closeIfEmpty();
   };
 
   const handleDelete = useCallback(
     (item: ArchivedItem) => {
-      dataExtension.deleteFieldModal?.modal.open({
+      deleteFieldModal.modal.open({
         id: item.id,
         origin: 'Archived items panel',
+        fieldName: archive.fieldName(item.id),
       });
     },
-    [dataExtension],
+    [archive, deleteFieldModal],
   );
 
   const slideStyle = useMemo<CSSProperties>(

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldForm1028387146";
+var _namespace_ = "CmsFieldForm1100768566";
 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":"CmsFieldForm1028387146__root","fullBleedDivider":"CmsFieldForm1028387146__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm1100768566__root","fullBleedDivider":"CmsFieldForm1100768566__fullBleedDivider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal651521319";
+var _namespace_ = "CmsFieldModal2245593888";
 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":"CmsFieldModal651521319__root","modal":"CmsFieldModal651521319__modal"};
+export var classes = {"root":"CmsFieldModal2245593888__root","modal":"CmsFieldModal2245593888__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFormState.ts

@@ -14,7 +14,10 @@ import type {
 } from './types';
 
 export interface CmsFormStateParams {
-  schemaConfig: SchemaConfig;
+  // Optional: the form itself never reads the schema (it's pure form state). It's
+  // kept for callers that want to associate one, but a schema-less editor (e.g.
+  // the pure FieldEditorModal) can omit it.
+  schemaConfig?: SchemaConfig;
   getValidationRules: (t: SelectableFieldTypes) => ValidationRule[];
   mode?: 'new' | 'edit';
   editingFieldId?: string;
@@ -33,7 +36,7 @@ function defaultProperties(): FieldPropertiesState {
 const NAME_MAX_LENGTH = 50;
 
 export class CmsFormState {
-  readonly schemaConfig: SchemaConfig;
+  readonly schemaConfig?: SchemaConfig;
   readonly getValidationRules: (t: SelectableFieldTypes) => ValidationRule[];
 
   properties: FieldPropertiesState = defaultProperties();
@@ -72,6 +75,7 @@ export class CmsFormState {
       enableShowValidationError: action,
       setMode: action,
       setErrorToastConfig: action,
+      prefill: action,
       loadField: action,
       reset: action,
 
@@ -195,32 +199,44 @@ export class CmsFormState {
     this.setProperty('helpText', v);
   }
 
-  loadField(field: Field) {
-    const mappedType: SelectableFieldTypes | undefined = isSelectableFieldType(
-      field.type,
-    )
-      ? field.type
-      : undefined;
+  // Populate the form from a field's values, without binding to a specific
+  // existing field id. Used both by `loadField` (edit an existing field) and by
+  // schema-less editors that pre-fill a draft (e.g. the import field editor).
+  prefill(values: {
+    type?: Field['type'];
+    displayName?: string;
+    isPii?: boolean;
+    helpText?: string;
+    validation?: Field['validation'];
+  }) {
+    const mappedType: SelectableFieldTypes | undefined =
+      values.type && isSelectableFieldType(values.type)
+        ? values.type
+        : undefined;
     this.properties = {
       type: mappedType,
-      name: field.displayName,
-      isPii: field.isPii ?? false,
-      helpText: field.helpText ?? '',
+      name: values.displayName ?? '',
+      isPii: values.isPii ?? false,
+      helpText: values.helpText ?? '',
     };
     this.fieldRules = {
       validationRules: {
-        ...(field.validation?.required !== undefined && {
-          required: field.validation.required,
+        ...(values.validation?.required !== undefined && {
+          required: values.validation.required,
         }),
-        ...(field.validation?.stringLengthRange !== undefined && {
-          charactersLimit: field.validation.stringLengthRange,
+        ...(values.validation?.stringLengthRange !== undefined && {
+          charactersLimit: values.validation.stringLengthRange,
         }),
       },
     };
-    this.editingFieldId = field.id;
     this.errorToastConfig = undefined;
   }
 
+  loadField(field: Field) {
+    this.prefill(field);
+    this.editingFieldId = field.id;
+  }
+
   private _onTypeChange(newType: SelectableFieldTypes) {
     const supported = new Set(this.getValidationRules(newType));
     this.fieldRules = {

package/src/components/CmsFieldManagement/FieldEditorModal.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { CustomActionModal } from '../ActionModal';
+import { CmsFieldForm } from './CmsFieldForm';
+import { FieldEditorModalState } from './FieldEditorModalState';
+import { classes } from './CmsFieldModal.st.css.js';
+
+export interface FieldEditorModalProps {
+  state: FieldEditorModalState;
+  /** Modal title. Required so callers pass a localized string. */
+  title: string;
+  /** Confirm button label (localized). */
+  primaryButtonText: string;
+  /** Cancel button label (localized). */
+  secondaryButtonText: string;
+  dataHook?: string;
+}
+
+/**
+ * Pure field editor: the same form as `CmsFieldModal` but with no server side
+ * effect. On Save it returns the edited field spec via `state.onSubmit` instead
+ * of creating/updating a field through a schema. All button/title labels are
+ * passed in (already translated) so the modal stays localized for the surface
+ * that renders it.
+ */
+export const FieldEditorModal = observer(
+  ({
+    state,
+    title,
+    primaryButtonText,
+    secondaryButtonText,
+    dataHook = 'field-editor-modal',
+  }: FieldEditorModalProps) => {
+    const { formState } = state;
+
+    return (
+      <CustomActionModal
+        dataHook={dataHook}
+        state={state.modal}
+        onAfterClose={() => state.reset()}
+        title={title}
+        content={formState ? <CmsFieldForm state={formState} /> : null}
+        primaryButtonText={primaryButtonText}
+        secondaryButtonText={secondaryButtonText}
+        width={600}
+        showFooterDivider
+        className={classes.modal}
+      />
+    );
+  },
+);

package/src/components/CmsFieldManagement/FieldEditorModalState.ts

@@ -0,0 +1,66 @@
+import { action, makeObservable, observable } from 'mobx';
+import { ConditionalModalState } from '@wix/bex-core';
+import type { FieldSpec } from '../../types/SchemaConfig';
+import { CmsFormState } from './CmsFormState';
+import { toFieldSpec } from './toFieldSpec';
+import { getFieldTypeValidationRulesList } from './fieldValidationRulesMap';
+
+/**
+ * Pure field-editor modal state. Opens the CMS field form pre-filled from a
+ * field draft and, on confirm, hands the edited field spec to `onSubmit`. Unlike
+ * `CmsFieldModalState` it has no server side effect — it never calls
+ * `fieldActions` and needs no schema. It's a plain input (draft) → output
+ * (spec) editor; the consumer decides what to do with the result (e.g. the CSV
+ * import captures it into a column's pending new field).
+ */
+export interface FieldEditorModalStateProps {
+  /** Receives the edited field spec on confirm. Pure — no server side effect. */
+  onSubmit: (field: FieldSpec) => void;
+}
+
+export class FieldEditorModalState {
+  readonly modal: ConditionalModalState<null>;
+  formState: CmsFormState | null = null;
+  private readonly onSubmit: (field: FieldSpec) => void;
+
+  constructor(props: FieldEditorModalStateProps) {
+    this.onSubmit = props.onSubmit;
+    this.modal = new ConditionalModalState({
+      onConfirm: () => this.submit(),
+    });
+
+    makeObservable(this, {
+      formState: observable.ref,
+      open: action,
+      reset: action,
+    });
+  }
+
+  open(draft: FieldSpec) {
+    this.formState = new CmsFormState({
+      getValidationRules: getFieldTypeValidationRulesList,
+    });
+    this.formState.prefill(draft);
+    this.modal.open(null);
+  }
+
+  reset() {
+    this.formState = null;
+  }
+
+  private submit() {
+    const { formState } = this;
+    if (!formState) {
+      return;
+    }
+
+    if (formState.hasInvalidFields || !formState.properties.type) {
+      formState.enableShowValidationError();
+      // Throwing keeps the modal open (ModalState.confirm swallows it).
+      throw new Error('validation');
+    }
+
+    const { type, ...rest } = formState.properties;
+    this.onSubmit(toFieldSpec({ ...rest, type }, formState.fieldRules));
+  }
+}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection839011583";
+var _namespace_ = "ValidationAndDefaultsSection2664226512";
 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":"ValidationAndDefaultsSection839011583__root","accordionWrapper":"ValidationAndDefaultsSection839011583__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection2664226512__root","accordionWrapper":"ValidationAndDefaultsSection2664226512__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/formFields/CharactersLimitInput.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CharactersLimitInput919383244";
+var _namespace_ = "CharactersLimitInput3216958284";
 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":"CharactersLimitInput919383244__root","field":"CharactersLimitInput919383244__field"};
+export var classes = {"root":"CharactersLimitInput3216958284__root","field":"CharactersLimitInput3216958284__field"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/formFields/FieldNameInput.tsx

@@ -24,6 +24,7 @@ export const FieldNameInput = ({
     statusMessage={error}
   >
     <Input
+      dataHook="cms-field-name-input"
       placeholder="Enter a name"
       value={value}
       onChange={(e) => onChange(e.target.value)}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse1326337320";
+var _namespace_ = "Collapse1046907253";
 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":"Collapse1326337320__root","exit":"Collapse1326337320__exit"};
+export var classes = {"root":"Collapse1046907253__root","exit":"Collapse1046907253__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionCard/CollectionCard.tsx

@@ -10,13 +10,11 @@ import { NavigationModal } from '../NavigationModal';
 import { WixPatternsModalsContainer } from '../WixPatternsModalsContainer';
 import { usePageContext } from '../../providers';
 import { MultiCollectionSupportProvider } from '../MultiCollectionSupportProvider';
-import type { DataExtensionType } from '../DataExtension';
 import { classes, st } from '../common.st.css.js';
 import { ErrorState } from '../ErrorState';
 import type { TagsElement } from '../Tags';
 import { WixPatternsPanelModalsContainer } from '../WixPatternsPanelModalsContainer';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
-import { DeleteFieldModal } from '../ArchivedItemsPanel/DeleteFieldModal';
 
 export interface CollectionCardProps<T, F extends FiltersMap>
   extends CardProps {
@@ -31,7 +29,6 @@ export interface CollectionCardProps<T, F extends FiltersMap>
           retry: () => void;
         },
       ) => ReactElement);
-  dataExtension?: DataExtensionType;
   tags?: TagsElement<T, F>;
 }
 
@@ -53,7 +50,7 @@ function _CollectionCard<T, F extends FiltersMap>({
     initTask,
     bulk,
     AddApplyFiltersButton,
-    collectionDataExtension,
+    collectionFieldsSource,
     tagsCollectionState,
   } = state;
   const { modals } = bulk;
@@ -94,22 +91,10 @@ function _CollectionCard<T, F extends FiltersMap>({
         </Card>
 
         <NavigationModal />
-        {collectionDataExtension?.dataExtension && (
-          <>
-            <collectionDataExtension.DataExtension.CustomFieldModal
-              state={collectionDataExtension.customFieldsPanel.customFieldModal}
-            />
-            <collectionDataExtension.DataExtension.ArchiveFieldModal
-              state={
-                collectionDataExtension.customFieldsPanel.archiveFieldModal
-              }
-            />
-            {collectionDataExtension.dataExtension.deleteFieldModal && (
-              <DeleteFieldModal
-                state={collectionDataExtension.dataExtension.deleteFieldModal}
-              />
-            )}
-          </>
+        {collectionFieldsSource && (
+          <collectionFieldsSource.components.FieldManagementModals
+            source={collectionFieldsSource}
+          />
         )}
 
         <CollectionProvider value={collection}>{tags}</CollectionProvider>

package/src/components/CollectionMultiSelectCheckbox/CollectionMultiSelectCheckbox.tsx

@@ -43,6 +43,14 @@ export interface CollectionMultiSelectCheckboxProps<
    * A function that returns a [ListItemSelectProps](https://www.docs.wixdesignsystem.com/?path=/story/components-form-dropdownlistitems--listitemselect) (Optional)
    */
   renderItem?: (item: V, index: number) => ListItem;
+  /**
+   * The maximum number of items that can be selected. Once reached, every
+   * unselected option becomes disabled (already-selected options stay
+   * deselectable). When undefined, selection is unbounded.
+   *
+   * Read once on mount — later changes to this prop are ignored. (Optional)
+   */
+  maxSelected?: number;
 }
 
 function _CollectionMultiSelectCheckbox<V, F extends FiltersMap = FiltersMap>(
@@ -57,6 +65,7 @@ function _CollectionMultiSelectCheckbox<V, F extends FiltersMap = FiltersMap>(
     onOptionsShow,
     onDeselect,
     placeholder: placeholderProp,
+    maxSelected,
     ...rest
   } = props;
 
@@ -80,6 +89,7 @@ function _CollectionMultiSelectCheckbox<V, F extends FiltersMap = FiltersMap>(
         collectionFilter,
         container,
         toolbar,
+        maxSelected,
       }),
   );
 

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader16174633";
+var _namespace_ = "CollectionSectionHeader3174480100";
 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":"CollectionSectionHeader16174633__root","summaryIcon":"CollectionSectionHeader16174633__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader3174480100__root","summaryIcon":"CollectionSectionHeader3174480100__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/CollectionTable/CollectionTable.tsx

@@ -23,14 +23,13 @@ import {
 import { CollectionTableActionCellProps } from './CollectionTableBaseCommonProps';
 import {
   type DataExtensionElement,
-  DataExtensionProps,
   type DataExtensionType,
 } from '../DataExtension';
+import type { FieldsSourceProvider } from '../fieldsSourceProvider';
 import { useCreateWSRColumnBase } from '../../hooks/useCreateWSRColumnBase';
 import type { TagsElement } from '../Tags';
 import { TablePlaceholderStates } from '../TablePlaceholderStates/TablePlaceholderStates';
 import { useScrollableContentContext } from '../../providers';
-import { isValidElement } from '../isValidElement';
 import { st, classes } from './CollectionTable.st.css.js';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { useCollectionTableResize } from '../../hooks/useCollectionTableResize';
@@ -75,6 +74,15 @@ export interface CollectionTableBaseProps<T, F extends FiltersMap>
    */
   dataExtension?: DataExtensionType | DataExtensionElement;
 
+  /**
+   * Attaches a field source to the table — the way to add a source's fields,
+   * filters, and field management. Build it with `tableSchemaSource(...)` for a
+   * schema source (also spread its `collectionConfig` into the collection hook),
+   * or `dataExtensionTableSource(...)` for DataExtension, which extends the
+   * consumer's own collection.
+   */
+  fieldsSource?: FieldsSourceProvider;
+
   tags?: TagsElement<T, F>;
 
   forceResize?: boolean;
@@ -129,7 +137,6 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
     filters,
     title,
     tabs,
-    customColumns: customColumnsProp,
     multiLevelSorting: multiLevelSortingProp,
     dataExtension,
     tags,
@@ -188,13 +195,6 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
     ...rest
   } = props;
 
-  const dataExtensionType = isValidElement<
-    DataExtensionProps,
-    DataExtensionType
-  >(dataExtension)
-    ? dataExtension.type
-    : dataExtension;
-
   const state = tableState.toolbar;
 
   const horizontalScroll =
@@ -207,9 +207,7 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
 
   const sticky = stickyProp ?? scrollableContentRef?.current != null;
 
-  const customColumns =
-    props.customColumns ||
-    (dataExtensionType && <dataExtensionType.CustomColumns />);
+  const customColumns = props.customColumns;
 
   const isMobile = useIsMobile();
 
@@ -412,7 +410,6 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
       errorState={errorState}
       state={state}
       dataHook={dataHook}
-      dataExtension={dataExtensionType}
       tags={tags}
       {...cardProps}
     >

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

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