@wix/patterns 1.301.0 → 1.304.0

package/src/components/ArchivedItemsPanel/ArchivedItemsPanel.tsx

@@ -1,30 +1,82 @@
-import { SidePanel } from '@wix/design-system';
-import React, { CSSProperties, useMemo, useEffect, useState } from 'react';
+import { SidePanel, Text } from '@wix/design-system';
+import React, {
+  CSSProperties,
+  useMemo,
+  useEffect,
+  useState,
+  useCallback,
+} from 'react';
 import { observer } from 'mobx-react-lite';
 import { ScrollableContent } from '../ScrollableContent';
-import { ArchivedItem } from '../../utils/archivedItemsUtils';
 import { ArchivedItemsList } from './ArchivedItemsList';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { DataExtensionState } from '@wix/bex-core';
+import { MessageActionModal } from '../ActionModal/MessageActionModal';
+import type { ArchivedItem } from './types';
 
 export interface ArchivedItemsPanelProps {
   items: ArchivedItem[];
   onBackButtonClick: () => void;
   onCloseButtonClick: () => void;
+  dataExtension: DataExtensionState;
 }
 
 function _ArchivedItemsPanel({
   items,
   onBackButtonClick,
   onCloseButtonClick,
+  dataExtension,
 }: ArchivedItemsPanelProps) {
   const { translate: t } = useWixPatternsContainer();
   const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {
-    // Trigger slide-in animation
     setTimeout(() => setIsVisible(true), 10);
   }, []);
 
+  const closeIfEmpty = () => {
+    const remainingItems = dataExtension.archivedItems;
+    if (remainingItems.length === 0) {
+      onCloseButtonClick();
+    }
+  };
+
+  const handleRestore = async (item: ArchivedItem) => {
+    await dataExtension.restoreField({
+      id: item.id,
+      origin: 'Archived items panel',
+      reportBi: dataExtension.container.createBILogger({
+        componentType: 'ArchivedItemsPanel',
+      }),
+    });
+
+    closeIfEmpty();
+  };
+
+  const handleDelete = useCallback((item: ArchivedItem) => {
+    dataExtension.openDeleteConfirmModal({
+      id: item.id,
+      origin: 'Archived items panel',
+    });
+  }, []);
+
+  const handleConfirmDelete = async () => {
+    const { id, origin } = dataExtension.deleteConfirmModal.value || {};
+    if (!id) {
+      return;
+    }
+
+    await dataExtension.deleteField({
+      id,
+      origin: origin || 'Archived items panel',
+      reportBi: dataExtension.container.createBILogger({
+        componentType: 'ArchivedItemsPanel',
+      }),
+    });
+
+    closeIfEmpty();
+  };
+
   const style = useMemo<CSSProperties>(
     () => ({
       position: 'fixed',
@@ -52,24 +104,28 @@ function _ArchivedItemsPanel({
     [isVisible],
   );
 
-  const handleBack = () => {
+  const handleBack = useCallback(() => {
     // Trigger slide-out animation
     setIsVisible(false);
     // Wait for animation to complete before calling onBackButtonClick
     setTimeout(() => {
       onBackButtonClick();
     }, 300); // Match the transition duration
-  };
+  }, [onBackButtonClick]);
 
-  const handleClose = () => {
+  const handleClose = useCallback(() => {
     // Trigger slide-out animation
     setIsVisible(false);
     // Close both panels immediately so they animate together
     onCloseButtonClick();
-  };
+  }, [onCloseButtonClick]);
 
   return (
-    <div style={style} onClick={handleClose}>
+    <div
+      style={style}
+      onClick={handleClose}
+      data-hook="archived-items-panel-container"
+    >
       <div style={slideStyle} onClick={(e) => e.stopPropagation()}>
         <SidePanel // PatternsSidePanel is overriding the back button to close the panel
           dataHook="archived-items-panel"
@@ -88,10 +144,40 @@ function _ArchivedItemsPanel({
             overflowY
             dataHook="archived-items-panel-scroll-container"
           >
-            <ArchivedItemsList items={items} />
+            <ArchivedItemsList
+              items={items}
+              onRestore={handleRestore}
+              onDelete={handleDelete}
+            />
           </ScrollableContent>
         </SidePanel>
       </div>
+      {dataExtension.deleteConfirmModal.value && (
+        <MessageActionModal
+          dataHook="archived-items-delete-confirm-modal"
+          state={dataExtension.deleteConfirmModal}
+          theme="destructive"
+          title={t('cairo.customFields.delete.modal.title', {
+            selectedField:
+              dataExtension.extractFieldValuesFromSchema(
+                dataExtension.deleteConfirmModal.value.id,
+              )?.name || '',
+          })}
+          content={
+            <Text>
+              {t('cairo.customFields.delete.modal.description', {
+                selectedField:
+                  dataExtension.extractFieldValuesFromSchema(
+                    dataExtension.deleteConfirmModal.value.id,
+                  )?.name || '',
+              })}
+            </Text>
+          }
+          primaryButtonText={t('cairo.customFields.delete.modal.delete.CTA')}
+          secondaryButtonText={t('cairo.customFields.delete.modal.cancel.CTA')}
+          primaryButtonOnClick={handleConfirmDelete}
+        />
+      )}
     </div>
   );
 }

package/src/components/ArchivedItemsPanel/ArchivedItemsPanel.uni.driver.ts

@@ -1,32 +1,54 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { SidePanelUniDriver } from '@wix/design-system/dist/testkit/unidriver';
 
-export function ArchivedItemsPanelUniDriver(base: UniDriver) {
-  const panelBase = () => base.$('[data-hook="archived-items-panel"]');
+export function ArchivedItemsPanelUniDriver(base: UniDriver, body: UniDriver) {
+  // Main container with overlay
+  const containerBase = () =>
+    base.$('[data-hook="archived-items-panel-container"]');
 
-  const getArchivedPanelBackButton = () =>
-    panelBase().$('[data-hook="sidePanel-backButton"]');
+  // The SidePanel inside the container - use the design system driver
+  const panelBase = () =>
+    containerBase().$('[data-hook="archived-items-panel"]');
+  const panel = () => SidePanelUniDriver(panelBase(), body);
 
-  const getArchivedPanelCloseButton = () =>
-    panelBase().$('[data-hook="sidePanel-closeButton"]');
+  const list = () => panelBase().$('[data-hook="archived-items-list"]');
 
+  // Get all TableListItem elements (archived items) - direct children divs
+  // Must use full selector path, not chained
   const getArchivedPanelItems = () =>
-    panelBase().$$('[data-hook="archived-columns-list"] > div');
-
-  const list = () => panelBase().$('[data-hook="archived-items-list"]');
+    panelBase().$$('[data-hook="archived-items-list"] > div');
 
   const getItemByIdBase = (id: string) =>
     list().$(`[data-hook="archived-item-${id}"]`);
 
+  const getItemMenuBase = (id: string) =>
+    panelBase().$(`[data-hook="archived-item-options-${id}"]`);
+
+  const getItemMenuTrigger = (id: string) =>
+    getItemMenuBase(id).$('[data-hook="archived-item-options-trigger"]');
+
+  // Note: The 'Restore' and 'Delete' buttons appear in the body via PopoverMenu when an item's menu is opened.
+  // Thus clickItemMenuTrigger must be invoked before so only the buttons on the relevant item's menu can be clicked
+  const getItemRestoreButton = () =>
+    body.$('[data-hook="archived-item-options-restore"]');
+
+  const getItemDeleteButton = () =>
+    body.$('[data-hook="archived-item-options-delete"]');
+
   return {
-    exists: () => panelBase().exists(),
-    isVisible: () => panelBase().exists(),
-    getTitle: () => panelBase().$('[data-hook="sidePanel-title"]').text(),
-    getSubtitle: () => panelBase().$('[data-hook="sidePanel-subtitle"]').text(),
-    backButtonExists: () => getArchivedPanelBackButton().exists(),
-    clickBackButton: () => getArchivedPanelBackButton().click(),
-    clickCloseButton: () => getArchivedPanelCloseButton().click(),
+    getContainer: () => containerBase(),
+    exists: () => containerBase().exists(),
+    isVisible: () => containerBase().exists(),
+    getTitle: () => panel().getTitleText(),
+    getSubtitle: () => panel().getSubtitleText(),
+    backButtonExists: () => panel().isBackButtonExists(),
+    clickBackButton: () => panel().clickBack(),
+    clickCloseButton: () => panel().clickClose(),
     getItemsCount: () => getArchivedPanelItems().count(),
     getItemText: (id: string) =>
-      getItemByIdBase(id).$('[data-hook="archived-column-label"]').text(),
+      getItemByIdBase(id).$('[data-hook="archived-item-label"]').text(),
+    clickItemMenuTrigger: (id: string) => getItemMenuTrigger(id).click(),
+    clickRestore: () => getItemRestoreButton().click(),
+    clickDelete: () => getItemDeleteButton().click(),
   };
 }

package/src/components/ArchivedItemsPanel/types.ts

@@ -0,0 +1,6 @@
+export interface ArchivedItem {
+  id: string;
+  label: string;
+  [key: string]: any;
+}
+

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse1816076419";
+var _namespace_ = "Collapse2235260863";
 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":"Collapse1816076419__root","exit":"Collapse1816076419__exit"};
+export var classes = {"root":"Collapse2235260863__root","exit":"Collapse2235260863__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPage1535313463";
+var _namespace_ = "CollectionPage4133424547";
 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":"CollectionPage1535313463__root"};
+export var classes = {"root":"CollectionPage4133424547__root"};
 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_ = "CollectionTable3350945893";
+var _namespace_ = "CollectionTable2075048471";
 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":"CollectionTable3350945893__root"};
+export var classes = {"root":"CollectionTable2075048471__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/buildMobileColumns.tsx

@@ -3,6 +3,14 @@ import { Box } from '@wix/design-system';
 import { KeyedItem } from '@wix/bex-core';
 import { TableColumn } from '../../model';
 
+function isFirstColumnMobileConfig<T>(
+  col: TableColumn<KeyedItem<T>>,
+): col is TableColumn<KeyedItem<T>> & {
+  mobile: { column: 'first'; order?: number };
+} {
+  return col.mobile?.column === 'first';
+}
+
 export function buildMobileColumns<T>(columns: TableColumn<KeyedItem<T>>[]) {
   const hasMobileConfig = columns.some((col) => (col as any).mobile?.column);
 
@@ -22,18 +30,14 @@ export function buildMobileColumns<T>(columns: TableColumn<KeyedItem<T>>[]) {
   }
 
   const firstColumns = columns
-    .map((col, originalIndex) => ({ col, originalIndex }))
-    .filter(({ col }) => col.mobile?.column === 'first')
+    .filter(isFirstColumnMobileConfig)
     .sort((a, b) => {
-      const orderA = a.col.mobile?.order ?? Infinity;
-      const orderB = b.col.mobile?.order ?? Infinity;
+      const orderA = a.mobile?.order ?? Infinity;
+      const orderB = b.mobile?.order ?? Infinity;
       return orderA - orderB;
-    })
-    .map(({ col }) => col);
+    });
 
-  const secondColumn = columns.find(
-    (col) => (col as any).mobile?.column === 'second',
-  );
+  const secondColumn = columns.find((col) => col.mobile?.column === 'second');
 
   const result = [];
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar3814071131";
+var _namespace_ = "CollectionToolbar1909610262";
 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":"CollectionToolbar3814071131__root","left":"CollectionToolbar3814071131__left","right":"CollectionToolbar3814071131__right","fullWidth":"CollectionToolbar3814071131__fullWidth"};
+export var classes = {"root":"CollectionToolbar1909610262__root","left":"CollectionToolbar1909610262__left","right":"CollectionToolbar1909610262__right","fullWidth":"CollectionToolbar1909610262__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter3055523513";
+var _namespace_ = "SearchOrCustomFilter1366149973";
 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":"SearchOrCustomFilter3055523513__root","search":"SearchOrCustomFilter3055523513__search","searchMobile":"SearchOrCustomFilter3055523513__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1366149973__root","search":"SearchOrCustomFilter1366149973__search","searchMobile":"SearchOrCustomFilter1366149973__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -81,10 +81,11 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
           <CustomColumnsNoResults state={state} />
         ) : (
           <>
-            {collectionDataExtension?.DataExtension
-              ?.CustomColumnsArchivedItemsCTAButton && (
-              <collectionDataExtension.DataExtension.CustomColumnsArchivedItemsCTAButton />
-            )}
+            {collectionDataExtension?.dataExtension?.shouldDisplayArchive &&
+              collectionDataExtension?.DataExtension
+                ?.CustomColumnsArchivedItemsCTAButton && (
+                <collectionDataExtension.DataExtension.CustomColumnsArchivedItemsCTAButton />
+              )}
             <ColumnsList state={state} />
           </>
         )}

package/src/components/CustomColumnsPanel/CustomColumnsPanel.uni.driver.ts

@@ -89,7 +89,7 @@ export function CustomColumnsPanelUniDriver(base: UniDriver, body: UniDriver) {
   const getArchivedItemsButton = () =>
     base.$('[data-hook="archived-items-button"]');
 
-  const getArchivedPanel = () => ArchivedItemsPanelUniDriver(base);
+  const getArchivedPanel = () => ArchivedItemsPanelUniDriver(base, body);
 
   return {
     exists: () => panelBase().exists(),

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle283894865";
+var _namespace_ = "DragHandle3572221251";
 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":"DragHandle283894865__root"};
+export var classes = {"root":"DragHandle3572221251__root"};
 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_ = "EntityPagePlain2242320061";
+var _namespace_ = "EntityPagePlain29499047";
 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":"EntityPagePlain2242320061__root"};
+export var classes = {"root":"EntityPagePlain29499047__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_ = "Fade222354217";
+var _namespace_ = "Fade613913500";
 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":"Fade222354217__root"};
+export var classes = {"root":"Fade613913500__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_ = "Heading2590859254";
+var _namespace_ = "Heading1845032430";
 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":"Heading2590859254__root"};
+export var classes = {"root":"Heading1845032430__root"};
 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_ = "InputOverflow3995330218";
+var _namespace_ = "InputOverflow475762153";
 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":"InputOverflow3995330218__root"};
+export var classes = {"root":"InputOverflow475762153__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_ = "LoadingRow3099658535";
+var _namespace_ = "LoadingRow2706506819";
 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":"LoadingRow3099658535__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3099658535__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow2706506819__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow2706506819__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_ = "MaxHeightText1264730909";
+var _namespace_ = "MaxHeightText4103111352";
 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":"MaxHeightText1264730909__root"};
+export var classes = {"root":"MaxHeightText4103111352__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

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

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

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