@wix/patterns 1.300.0 → 1.301.0

package/src/components/ArchivedItemsPanel/ArchivedItemsPanel.tsx

@@ -0,0 +1,99 @@
+import { SidePanel } from '@wix/design-system';
+import React, { CSSProperties, useMemo, useEffect, useState } 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';
+
+export interface ArchivedItemsPanelProps {
+  items: ArchivedItem[];
+  onBackButtonClick: () => void;
+  onCloseButtonClick: () => void;
+}
+
+function _ArchivedItemsPanel({
+  items,
+  onBackButtonClick,
+  onCloseButtonClick,
+}: ArchivedItemsPanelProps) {
+  const { translate: t } = useWixPatternsContainer();
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Trigger slide-in animation
+    setTimeout(() => setIsVisible(true), 10);
+  }, []);
+
+  const style = useMemo<CSSProperties>(
+    () => ({
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 10000,
+      display: 'flex',
+      justifyContent: 'flex-end',
+    }),
+    [],
+  );
+
+  const slideStyle = useMemo<CSSProperties>(
+    () => ({
+      width: '100%',
+      maxWidth: '600px',
+      backgroundColor: 'white',
+      transform: isVisible ? 'translateX(0)' : 'translateX(100%)',
+      transition: 'transform 0.3s ease-out',
+      display: 'flex',
+      flexDirection: 'column',
+    }),
+    [isVisible],
+  );
+
+  const handleBack = () => {
+    // Trigger slide-out animation
+    setIsVisible(false);
+    // Wait for animation to complete before calling onBackButtonClick
+    setTimeout(() => {
+      onBackButtonClick();
+    }, 300); // Match the transition duration
+  };
+
+  const handleClose = () => {
+    // Trigger slide-out animation
+    setIsVisible(false);
+    // Close both panels immediately so they animate together
+    onCloseButtonClick();
+  };
+
+  return (
+    <div style={style} onClick={handleClose}>
+      <div style={slideStyle} onClick={(e) => e.stopPropagation()}>
+        <SidePanel // PatternsSidePanel is overriding the back button to close the panel
+          dataHook="archived-items-panel"
+          width="100%"
+          closeButtonProps={{ onClick: handleClose }}
+          onBackButtonClick={handleBack}
+          backButtonProps={{
+            description: t('cairo.archivedFields.back.custom-columns.tooltip'),
+          }}
+        >
+          <SidePanel.Header
+            title={t('cairo.archivedFields.title')}
+            subtitle={t('cairo.archivedFields.subtitle')}
+          />
+          <ScrollableContent
+            overflowY
+            dataHook="archived-items-panel-scroll-container"
+          >
+            <ArchivedItemsList items={items} />
+          </ScrollableContent>
+        </SidePanel>
+      </div>
+    </div>
+  );
+}
+
+export const ArchivedItemsPanel = observer(_ArchivedItemsPanel);

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

@@ -0,0 +1,32 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+
+export function ArchivedItemsPanelUniDriver(base: UniDriver) {
+  const panelBase = () => base.$('[data-hook="archived-items-panel"]');
+
+  const getArchivedPanelBackButton = () =>
+    panelBase().$('[data-hook="sidePanel-backButton"]');
+
+  const getArchivedPanelCloseButton = () =>
+    panelBase().$('[data-hook="sidePanel-closeButton"]');
+
+  const getArchivedPanelItems = () =>
+    panelBase().$$('[data-hook="archived-columns-list"] > div');
+
+  const list = () => panelBase().$('[data-hook="archived-items-list"]');
+
+  const getItemByIdBase = (id: string) =>
+    list().$(`[data-hook="archived-item-${id}"]`);
+
+  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(),
+    getItemsCount: () => getArchivedPanelItems().count(),
+    getItemText: (id: string) =>
+      getItemByIdBase(id).$('[data-hook="archived-column-label"]').text(),
+  };
+}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer96728732";
+var _namespace_ = "CardContainer1330514190";
 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":"CardContainer96728732__root"};
+export var classes = {"root":"CardContainer1330514190__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_ = "Collapse2752988996";
+var _namespace_ = "Collapse1816076419";
 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":"Collapse2752988996__root","exit":"Collapse2752988996__exit"};
+export var classes = {"root":"Collapse1816076419__root","exit":"Collapse1816076419__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,10 +1,15 @@
 @property st-global(--wds-page-header-padding-horizontal);
 @property st-global(--wds-color-fill-surface-sunken);
+@property st-global(--wds-space-300);
 
 .root {
   -st-states: mobile, panel;
 }
 
+.root [data-hook="page-header-wrapper"] {
+  --wds-space-300: 18px;
+}
+
 .root:mobile {
   --wds-page-header-padding-horizontal: 0;
   --wds-color-fill-surface-sunken: #ffffff;

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPage275142463";
+var _namespace_ = "CollectionPage1535313463";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionPage275142463__root"};
+export var classes = {"root":"CollectionPage1535313463__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-page-header-padding-horizontal":"--wds-page-header-padding-horizontal","wds-color-fill-surface-sunken":"--wds-color-fill-surface-sunken"}; 
+export var vars = {"wds-page-header-padding-horizontal":"--wds-page-header-padding-horizontal","wds-color-fill-surface-sunken":"--wds-color-fill-surface-sunken","wds-space-300":"--wds-space-300"}; 
 
 
 

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar3486302085";
+var _namespace_ = "CollectionToolbar3814071131";
 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":"CollectionToolbar3486302085__root","left":"CollectionToolbar3486302085__left","right":"CollectionToolbar3486302085__right","fullWidth":"CollectionToolbar3486302085__fullWidth"};
+export var classes = {"root":"CollectionToolbar3814071131__root","left":"CollectionToolbar3814071131__left","right":"CollectionToolbar3814071131__right","fullWidth":"CollectionToolbar3814071131__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_ = "SearchOrCustomFilter3061739824";
+var _namespace_ = "SearchOrCustomFilter3055523513";
 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":"SearchOrCustomFilter3061739824__root","search":"SearchOrCustomFilter3061739824__search","searchMobile":"SearchOrCustomFilter3061739824__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter3055523513__root","search":"SearchOrCustomFilter3055523513__search","searchMobile":"SearchOrCustomFilter3055523513__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_ = "AutoCompleteReadonly1904272586";
+var _namespace_ = "AutoCompleteReadonly2924374283";
 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":"AutoCompleteReadonly1904272586__root"};
+export var classes = {"root":"AutoCompleteReadonly2924374283__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_ = "ViewsDropdown1265254409";
+var _namespace_ = "ViewsDropdown327953971";
 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":"ViewsDropdown1265254409__root"};
+export var classes = {"root":"ViewsDropdown327953971__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -80,7 +80,13 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
         {hasSearchValue && !hasSearchResults ? (
           <CustomColumnsNoResults state={state} />
         ) : (
-          <ColumnsList state={state} />
+          <>
+            {collectionDataExtension?.DataExtension
+              ?.CustomColumnsArchivedItemsCTAButton && (
+              <collectionDataExtension.DataExtension.CustomColumnsArchivedItemsCTAButton />
+            )}
+            <ColumnsList state={state} />
+          </>
         )}
       </ScrollableContent>
       {collectionDataExtension?.DataExtension

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

@@ -11,6 +11,7 @@ import { DragAndDropUniDriver } from '../DragAndDrop/DragAndDrop.uni.driver';
 import { CustomFieldPopoverUniDriver } from '../CustomFieldsPanel/CustomFieldPopover.uni.driver';
 import { CustomFieldsDisabledHintUniDriver } from '../CustomFields/CustomFieldsDisabledHint.uni.driver';
 import { EmptyStateUniDriver } from '../EmptyState/EmptyState.uni.driver';
+import { ArchivedItemsPanelUniDriver } from '../ArchivedItemsPanel/ArchivedItemsPanel.uni.driver';
 
 export function CustomColumnsPanelUniDriver(base: UniDriver, body: UniDriver) {
   const panelBase = () => base.$('[data-hook="custom-columns-panel"]');
@@ -84,6 +85,12 @@ export function CustomColumnsPanelUniDriver(base: UniDriver, body: UniDriver) {
   const addNewExists = () => addItem().exists();
   const clickAddNew = () => addItem().click();
 
+  // Archived items functionality
+  const getArchivedItemsButton = () =>
+    base.$('[data-hook="archived-items-button"]');
+
+  const getArchivedPanel = () => ArchivedItemsPanelUniDriver(base);
+
   return {
     exists: () => panelBase().exists(),
     isOpen: () =>
@@ -151,5 +158,11 @@ export function CustomColumnsPanelUniDriver(base: UniDriver, body: UniDriver) {
       panelBase().$('[data-hook="custom-columns-no-results-subtitle"]').text(),
     getNoResultsResetButton: () =>
       getNoResults().getButton('custom-columns-no-results-reset-button'),
+    // Archived items functionality
+    archivedItemsButtonExists: () => getArchivedItemsButton().exists(),
+    clickArchivedItemsButton: () => getArchivedItemsButton().click(),
+    getArchivedItemsButtonText: () =>
+      getArchivedItemsButton().$('[data-hook="tableListItem-label"]').text(),
+    getArchivedPanel: () => getArchivedPanel(),
   };
 }

package/src/components/CustomFieldsPanel/ArchiveFieldModal.tsx

@@ -12,17 +12,38 @@ export const _ArchiveFieldModal = ({
 }) => {
   const container = useWixPatternsContainer();
   const { translate: t } = container;
+  const { dataExtension, modal } = state;
+
+  const getModalTitle = () => {
+    const fieldId = modal.value?.id;
+    if (dataExtension.enableArchive && fieldId) {
+      const fieldValues = dataExtension.extractFieldValuesFromSchema(fieldId);
+      if (fieldValues?.name) {
+        return t('cairo.customFields.archive.modal.title.enabled', {
+          selectedField: fieldValues.name,
+        });
+      }
+    }
+    return t('cairo.customFields.archive.modal.title');
+  };
+
+  const getModalDescription = () => {
+    if (dataExtension.enableArchive) {
+      return t('cairo.customFields.archive.modal.description.enabled');
+    }
+    return t('cairo.customFields.archive.modal.description');
+  };
 
   return (
     <CustomActionModal
       dataHook="archive-custom-field-modal"
       state={state.modal}
-      title={t('cairo.customFields.archive.modal.title')}
+      title={getModalTitle()}
       primaryButtonText={t('cairo.customFields.archive.modal.CTA')}
       secondaryButtonText={t('cairo.customFields.archive.modal.cancel.CTA')}
       content={
         <Text dataHook="archive-custom-field-body">
-          {t('cairo.customFields.archive.modal.description')}
+          {getModalDescription()}
         </Text>
       }
       theme="destructive"

package/src/components/CustomFieldsPanel/ArchiveFieldModal.uni.driver.ts

@@ -14,10 +14,15 @@ export function ArchiveFieldModalUniDriver(_base: UniDriver, body: UniDriver) {
       .getPrimaryButtonDriver()
       .then((driver: any) => driver.click());
   const clickClose = () => getArchiveFieldModal().clickCloseButton();
+  const getModalTitle = () => getArchiveFieldModal().getTitleText();
+  const getModalBody = () =>
+    body.$('[data-hook="archive-custom-field-body"]').text();
 
   return {
     exists,
     clickConfirm,
     clickClose,
+    getModalTitle,
+    getModalBody,
   };
 }

package/src/components/CustomFieldsPanel/ManageFieldsPopoverMenu.tsx

@@ -1,4 +1,4 @@
-import { IconButton, PopoverMenu } from '@wix/design-system';
+import { IconButton, PopoverMenu, Tooltip } from '@wix/design-system';
 import React from 'react';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { ArchiveSmall, EditSmall, MoreSmall } from '@wix/wix-ui-icons-common';
@@ -75,13 +75,15 @@ function _ManageFieldsPopoverMenu({
       dataHook="custom-field-options"
       onShow={onTriggerMenu}
       triggerElement={
-        <IconButton
-          size="tiny"
-          dataHook="custom-field-options-trigger"
-          skin="light"
-        >
-          <MoreSmall />
-        </IconButton>
+        <Tooltip content={t('cairo.custom-columns.more-actions.tooltip')}>
+          <IconButton
+            size="tiny"
+            dataHook="custom-field-options-trigger"
+            skin="light"
+          >
+            <MoreSmall />
+          </IconButton>
+        </Tooltip>
       }
     >
       <PopoverMenu.MenuItem

package/src/components/DataExtension/CollectionDataExtensionState.ts

@@ -65,6 +65,7 @@ export class CollectionDataExtensionState<T, F extends FiltersMap> {
       filterable: params.filterable,
       containsPii: params.containsPii,
       defaultPermissions: params.defaultPermissions,
+      enableArchive: params.enableArchive,
     });
 
     this.customFieldsPanel = new CustomFieldsPanelState({

package/src/components/DataExtension/DataExtension.ts

@@ -10,6 +10,7 @@ import { CustomColumnsFull } from '../CustomColumns';
 import { ArchiveFieldModal } from '../CustomFieldsPanel/ArchiveFieldModal';
 import { CustomColumnsAddCustomFieldCTAButton } from '../CustomFieldsPanel/CustomColumnsAddCustomFieldCTAButton';
 import { CustomColumnsEditCustomFieldCTAButton } from '../CustomFieldsPanel/CustomColumnsEditCustomFieldCTAButton';
+import { ArchivedItemsCTAButton } from '../ArchivedItemsPanel/ArchivedItemsCTAButton';
 import { CollectionDataExtensionState } from './CollectionDataExtensionState';
 import { ReactElement } from 'react';
 import { FileCardList } from '../FileCard/FileCardList';
@@ -28,6 +29,7 @@ export type DataExtensionObjectType = {
   CustomColumns: typeof CustomColumnsFull;
   CustomColumnsAddCustomFieldCTAButton: typeof CustomColumnsAddCustomFieldCTAButton;
   CustomColumnsEditCustomFieldCTAButton: typeof CustomColumnsEditCustomFieldCTAButton;
+  CustomColumnsArchivedItemsCTAButton: typeof ArchivedItemsCTAButton;
   syncTableCollectionProps: (state: ToolbarCollectionState<any, any>) => void;
   manageCustomFieldsPageAction: (params: {
     pageState: CollectionPageState;
@@ -66,6 +68,7 @@ DataExtension.CustomColumnsAddCustomFieldCTAButton =
   CustomColumnsAddCustomFieldCTAButton;
 DataExtension.CustomColumnsEditCustomFieldCTAButton =
   CustomColumnsEditCustomFieldCTAButton;
+DataExtension.CustomColumnsArchivedItemsCTAButton = ArchivedItemsCTAButton;
 DataExtension.syncTableCollectionProps = (
   state: ToolbarCollectionState<any>,
 ) => {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle1096016990";
+var _namespace_ = "DragHandle283894865";
 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":"DragHandle1096016990__root"};
+export var classes = {"root":"DragHandle283894865__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_ = "EntityPagePlain1062936786";
+var _namespace_ = "EntityPagePlain2242320061";
 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":"EntityPagePlain1062936786__root"};
+export var classes = {"root":"EntityPagePlain2242320061__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_ = "Fade964856991";
+var _namespace_ = "Fade222354217";
 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":"Fade964856991__root"};
+export var classes = {"root":"Fade222354217__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_ = "Heading399993216";
+var _namespace_ = "Heading2590859254";
 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":"Heading399993216__root"};
+export var classes = {"root":"Heading2590859254__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_ = "InputOverflow2161395937";
+var _namespace_ = "InputOverflow3995330218";
 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":"InputOverflow2161395937__root"};
+export var classes = {"root":"InputOverflow3995330218__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_ = "LoadingRow187712777";
+var _namespace_ = "LoadingRow3099658535";
 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":"LoadingRow187712777__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow187712777__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow3099658535__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow3099658535__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_ = "MaxHeightText676620238";
+var _namespace_ = "MaxHeightText1264730909";
 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":"MaxHeightText676620238__root"};
+export var classes = {"root":"MaxHeightText1264730909__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_ = "MaxLines1573183086";
+var _namespace_ = "MaxLines54330796";
 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":"MaxLines1573183086__root"};
+export var classes = {"root":"MaxLines54330796__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_ = "MultiBulkActionToolbar3157796139";
+var _namespace_ = "MultiBulkActionToolbar938081982";
 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":"MultiBulkActionToolbar3157796139__root"};
+export var classes = {"root":"MultiBulkActionToolbar938081982__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};