@wix/patterns 1.357.0 → 1.359.0

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow1442655286";
+var _namespace_ = "NestedTableRow2769808413";
 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":"NestedTableRow1442655286__root","firstLevel":"NestedTableRow1442655286__firstLevel","placeholder":"NestedTableRow1442655286__placeholder","parentHovered":"NestedTableRow1442655286__parentHovered"};
+export var classes = {"root":"NestedTableRow2769808413__root","firstLevel":"NestedTableRow2769808413__firstLevel","placeholder":"NestedTableRow2769808413__placeholder","parentHovered":"NestedTableRow2769808413__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

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

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

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

package/src/components/OperatorFilterPicker/OperatorFilterPicker.tsx

@@ -73,6 +73,10 @@ function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
           selectedId={state.operator}
           onSelect={(option) => state.setOperator(option.id as FilterOperator)}
           dataHook="operator-picker-operator-dropdown"
+          appendTo="window"
+          flip
+          fixed
+          placement="bottom-start"
         >
           {({ toggle }) => (
             <TextButton

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

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

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep3632134261";
+var _namespace_ = "PickerContentAdditionalStep3755053293";
 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":"PickerContentAdditionalStep3632134261__root","titles":"PickerContentAdditionalStep3632134261__titles","suffix":"PickerContentAdditionalStep3632134261__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep3755053293__root","titles":"PickerContentAdditionalStep3755053293__titles","suffix":"PickerContentAdditionalStep3755053293__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard753207785";
+var _namespace_ = "SkeletonCard1942060337";
 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":"SkeletonCard753207785__root","headerLoading":"SkeletonCard753207785__headerLoading"};
+export var classes = {"root":"SkeletonCard1942060337__root","headerLoading":"SkeletonCard1942060337__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/TableFolders/TableFolders.tsx

@@ -33,6 +33,7 @@ function _TableFolders<T1, F1 extends FiltersMap, T2, F2 extends FiltersMap>(
     rowHeight,
     estimatedRowHeight,
     exportModal,
+    importModal,
     bulkActionModal,
   } = props;
 
@@ -76,6 +77,7 @@ function _TableFolders<T1, F1 extends FiltersMap, T2, F2 extends FiltersMap>(
         <TableFoldersContent {...props} />
       </TableProvider>
       {exportModal ?? state.toolbar.featuredComponents.exportModal.value}
+      {importModal ?? state.toolbar.featuredComponents.importModal.value}
       {bulkActionModal && (
         <MultiCollectionBulkActionModal
           state={state.toolbar}

package/src/components/TableGridSwitchButton/TableGridSwitchButton.tsx

@@ -1,48 +1,129 @@
 import { observer } from 'mobx-react-lite';
-import React from 'react';
-import { SegmentedToggle } from '@wix/design-system';
-import { LayoutGallery, LayoutList } from '@wix/wix-ui-icons-common';
+import React, { useMemo } from 'react';
+import {
+  DropdownBase,
+  IconButton,
+  listItemSelectBuilder,
+  SegmentedToggle,
+  Tooltip,
+} from '@wix/design-system';
+import {
+  LayoutGallery,
+  LayoutList,
+  LayoutSplit,
+} from '@wix/wix-ui-icons-common';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { TranslationsKeys } from '@wix/bex-core';
+import { ViewType, ViewTypeState } from '../../state/ViewTypeState';
+
+const layoutOptions: ViewType[] = ['table', 'grid'];
 
 export interface TableGridSwitchButtonProps {
-  state: {
-    viewType: 'table' | 'grid';
-    changeViewType: (viewType: string) => void;
-  };
+  state: ViewTypeState;
 }
 
+const layoutConfig: Record<
+  ViewType,
+  { icon: React.ReactNode; translationKey: TranslationsKeys }
+> = {
+  table: {
+    icon: <LayoutSplit />,
+    translationKey: 'cairo.table.layout.table' as TranslationsKeys,
+  },
+  grid: {
+    icon: <LayoutGallery />,
+    translationKey: 'cairo.table.layout.grid' as TranslationsKeys,
+  },
+};
+
 function _TableGridSwitchButton(props: TableGridSwitchButtonProps) {
-  const { translate: t } = useWixPatternsContainer();
+  const { translate: t, experiments } = useWixPatternsContainer();
   const { state } = props;
   const { viewType } = state;
 
+  const isLayoutToggleRedesignEnabled = experiments.enabled(
+    'specs.cairo.layout-toggle.redesign',
+  );
+
+  const options = useMemo(
+    () =>
+      layoutOptions.map((option) =>
+        listItemSelectBuilder({
+          id: option,
+          title: t(layoutConfig[option].translationKey),
+          prefix: layoutConfig[option].icon,
+          dataHook: `layout-option-${option}`,
+        }),
+      ),
+    [t],
+  );
+
+  if (!isLayoutToggleRedesignEnabled) {
+    return (
+      <SegmentedToggle
+        size="small"
+        dataHook="table-grid-switch-toggle-button"
+        selected={viewType}
+        onClick={(_, value) => {
+          if (state.viewType === value) {
+            return;
+          }
+          state.changeViewType(value as ViewType);
+        }}
+      >
+        <SegmentedToggle.Icon
+          value="grid"
+          dataHook="toggle-option-grid"
+          tooltipText={t('cairo.table.gridView' as TranslationsKeys)}
+        >
+          <LayoutGallery />
+        </SegmentedToggle.Icon>
+        <SegmentedToggle.Icon
+          value="table"
+          dataHook="toggle-option-table"
+          tooltipText={t('cairo.table.listView' as TranslationsKeys)}
+        >
+          <LayoutList />
+        </SegmentedToggle.Icon>
+      </SegmentedToggle>
+    );
+  }
+
   return (
-    <SegmentedToggle
-      size="small"
-      dataHook="table-grid-switch-toggle-button"
-      selected={viewType}
-      onClick={(_, value) => {
-        if (state.viewType === value) {
-          return;
+    <DropdownBase
+      dataHook="layout-switch-popover"
+      options={options}
+      selectedId={viewType}
+      showArrow
+      onSelect={(option) => {
+        const selectedOption = option.id as ViewType;
+        const index = layoutOptions.indexOf(selectedOption);
+        state.reportLayoutOptionClicked(selectedOption, index);
+        if (viewType !== selectedOption) {
+          state.changeViewType(selectedOption);
         }
-        state.changeViewType(value);
       }}
     >
-      <SegmentedToggle.Icon
-        value="grid"
-        dataHook="toggle-option-grid"
-        tooltipText={t('cairo.table.gridView')}
-      >
-        <LayoutGallery />
-      </SegmentedToggle.Icon>
-      <SegmentedToggle.Icon
-        value="table"
-        dataHook="toggle-option-table"
-        tooltipText={t('cairo.table.listView')}
-      >
-        <LayoutList />
-      </SegmentedToggle.Icon>
-    </SegmentedToggle>
+      {({ toggle }) => (
+        <Tooltip
+          content={t('cairo.table.layout.switchLayout' as TranslationsKeys)}
+          size="medium"
+        >
+          <IconButton
+            dataHook="layout-switch-button"
+            size="small"
+            priority="secondary"
+            aria-haspopup="menu"
+            onClick={() => {
+              state.reportLayoutSwitch();
+              toggle();
+            }}
+          >
+            {layoutConfig[viewType].icon}
+          </IconButton>
+        </Tooltip>
+      )}
+    </DropdownBase>
   );
 }
 

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

@@ -1,4 +1,7 @@
-import { SegmentedToggleUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import {
+  DropdownBaseUniDriver,
+  SegmentedToggleUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 
 export function TableGridSwitchButtonUniDriver(
@@ -7,10 +10,29 @@ export function TableGridSwitchButtonUniDriver(
 ) {
   const getSegmented = () => SegmentedToggleUniDriver(base, body);
 
+  // New DropdownBase driver (experiment enabled)
+  const getDropdown = () =>
+    DropdownBaseUniDriver(body.$('[data-hook="layout-switch-popover"]'), body);
+
+  const getLayoutSwitchButton = () =>
+    body.$('[data-hook="layout-switch-button"]');
+
   return {
     ...getSegmented(),
+    /** Check if the SegmentedToggle (old UI) exists */
+    exists: () => base.exists(),
+    /** Click table button in SegmentedToggle (old UI) */
     clickTableButton: () => base.$$(`[data-hook="toggle-icon"]`).get(1).click(),
+    /** Click grid button in SegmentedToggle (old UI) */
     clickGridButton: () => base.$$(`[data-hook="toggle-icon"]`).get(0).click(),
+
+    popoverExists: () => getDropdown().exists(),
+    layoutSwitchButtonExists: () => getLayoutSwitchButton().exists(),
+    openPopover: () => getLayoutSwitchButton().click(),
+    isPopoverOpen: () => getDropdown().isDropdownShown(),
+    clickLayoutOption: (option: 'table' | 'grid') =>
+      getDropdown().selectOptionByDataHook(`layout-option-${option}`),
+    getLayoutOptionsCount: () => getDropdown().optionsCount(),
   };
 }
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter2131627215";
+var _namespace_ = "TabsFilter2590592218";
 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":"TabsFilter2131627215__root","title":"TabsFilter2131627215__title"};
+export var classes = {"root":"TabsFilter2590592218__root","title":"TabsFilter2590592218__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal1153576203";
+var _namespace_ = "ManageTagsModal778816229";
 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":"ManageTagsModal1153576203__root"};
+export var classes = {"root":"ManageTagsModal778816229__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ToolbarCollection/ToolbarCollection.tsx

@@ -63,11 +63,19 @@ export interface ToolbarBaseProps {
    * A [`<ExportButton />`](./?path=/story/features-export--exportto) react element to be added to the toolbar
    */
   exportButton?: ReactElement;
+  /**
+   * A [`<ImportButton />`] react element to be added to the toolbar.
+   */
+  importButton?: ReactElement;
 
   /**
    * A [`<ExportModal />`](./?path=/story/features-export--exportto#CTA_is_out_of_the_table) react element to be rendered in table's context.
    */
   exportModal?: ReactElement;
+  /**
+   * A [`<ImportModal />`] react element to be rendered in table's context.
+   */
+  importModal?: ReactElement;
 }
 
 export interface ToolbarCollectionBaseProps<T, F extends FiltersMap>
@@ -321,6 +329,7 @@ export function ToolbarCollection<T, F extends FiltersMap>(
     children,
     tableGridSwitchButton,
     exportButton,
+    importButton,
     primaryActionButton,
     secondaryActions,
     moreActions,
@@ -355,6 +364,7 @@ export function ToolbarCollection<T, F extends FiltersMap>(
         extraToolbar={extraToolbar}
         tableGridSwitchButton={tableGridSwitchButton}
         exportButton={exportButton}
+        importButton={importButton}
         primaryActionButton={primaryActionButton}
         secondaryActions={secondaryActions}
         moreActions={moreActions}

package/src/components/ToolbarCollection/useToolbarCollectionSyncProps.ts

@@ -22,6 +22,7 @@ export function useToolbarCollectionSyncProps<T, F extends FiltersMap>(
     views,
     tabs,
     exportButton,
+    importButton,
     dragAndDropCategories,
     maxSelection,
     search,
@@ -102,6 +103,16 @@ export function useToolbarCollectionSyncProps<T, F extends FiltersMap>(
     };
   }, [exportButton]);
 
+  useEffect(() => {
+    if (importButton) {
+      state.featuredComponents.importButton.set(importButton);
+    }
+
+    return () => {
+      state.featuredComponents.importButton.set(null);
+    };
+  }, [importButton]);
+
   const tabsFilterProps = useMemo(() => {
     return tabs?.props
       ? {

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common1299980458";
+var _namespace_ = "common780404466";
 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":"common1299980458__root","column":"common1299980458__column","fullHeight":"common1299980458__fullHeight"};
+export var classes = {"root":"common780404466__root","column":"common780404466__column","fullHeight":"common780404466__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/exports/bi.ts

@@ -1,3 +1 @@
 export * from '@wix/bex-utils/@wix/bi-logger-os-data/v2';
-export * from '@wix/bex-utils/@wix/bi-logger-os-data/testkit/client';
-export { default as biTestkit } from '@wix/bex-utils/@wix/bi-logger-os-data/testkit/client';

package/src/exports/testkit/bi.ts

@@ -0,0 +1,2 @@
+export * from '@wix/bex-utils/@wix/bi-logger-os-data/testkit/client';
+export { default as biTestkit } from '@wix/bex-utils/@wix/bi-logger-os-data/testkit/client';

package/src/index.ts

@@ -32,6 +32,7 @@ export {
 export * from './components/PrimaryActions';
 export * from './components/SecondaryActions';
 export * from './components/ExportButton';
+export * from './components/ImportButton';
 export * from './components/BulkActionButton';
 export * from './components/ActionCell';
 export * from './components/WixPatternsTestProvider';
@@ -205,6 +206,11 @@ export {
   withDashboard,
 } from '@wix/bex-core/react';
 
+export { useCreateImport } from '@wix/bex-core';
+export type { BackupFn } from '@wix/bex-core';
+export { useImportConfig } from '@wix/bex-core';
+export type { UseImportConfigParams } from '@wix/bex-core';
+
 export {
   QueryCache,
   CollectionState,

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

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

package/src/state/FormPage/FormPageHeader.st.css.ts

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

package/src/state/TableGridSwitchFoldersState.ts

@@ -10,7 +10,7 @@ import { TableFoldersState } from './TableFoldersState';
 import { runInAction, makeObservable, computed } from 'mobx';
 import { ToolbarCollectionState } from './ToolbarCollectionState';
 import { PartialAllFilters } from './FoldersAndItemsCollectionsState';
-import { ViewTypeState } from './ViewTypeState';
+import { ViewTypeState, ViewType } from './ViewTypeState';
 import { ICollectionComponentState } from './ICollectionComponentState';
 
 export interface TableGridSwitchStateFoldersParams<
@@ -24,7 +24,6 @@ export interface TableGridSwitchStateFoldersParams<
   readonly container: WixPatternsContainer;
   readonly containerOverrides: Partial<WixPatternsContainerParams>;
 }
-type ViewType = 'table' | 'grid';
 export class TableGridSwitchFoldersState<
   T1,
   F1 extends FiltersMap,