@wix/patterns 1.359.0 → 1.360.0

package/src/components/CollectionViewsDropdown/viewsDropdownRenderHelpers.tsx

@@ -9,8 +9,8 @@ import {
   PrivateView,
   ViewsState,
 } from '../../index';
-import { FiltersMap } from '@wix/bex-core';
-import React from 'react';
+import { FiltersMap, TranslationsKeys } from '@wix/bex-core';
+import React, { ReactNode } from 'react';
 
 export function getCategoryName<F extends FiltersMap>({
   category,
@@ -34,14 +34,21 @@ export function buildCategoryOption<F extends FiltersMap>({
   viewsState: ViewsState<F>;
   category: BasicCategory;
 }) {
+  const { translate: t } = viewsState.collection;
+  const categoryName = getCategoryName({ category, viewsState });
+
   return listItemSectionBuilder({
     id: category.id,
-    title: getCategoryName({ category, viewsState }),
+    title: categoryName,
     type: 'subheader',
     dataHook: 'view-category',
-    suffix: category.info ? (
-      <InfoIcon {...{ size: 'small', ...category.info }} />
-    ) : undefined,
+    suffix: (
+      <InfoIcon
+        size="small"
+        content={t('cairo.viewDropdown.category.info' as TranslationsKeys)}
+        tooltipProps={{ maxWidth: 240 }}
+      />
+    ),
   });
 }
 
@@ -61,16 +68,18 @@ export function getViewName<F extends FiltersMap>({
 export function buildViewOption<F extends FiltersMap>({
   viewsState,
   view,
+  suffix,
 }: {
   viewsState: ViewsState<F>;
   view: PrivateView<F>;
+  suffix?: ReactNode;
 }) {
   const viewName = getViewName({ view, viewsState });
-
   return listItemSelectBuilder({
     id: view.id,
     title: viewName,
     label: viewName,
-    dataHook: `view-item`,
+    dataHook: 'view-item',
+    suffix,
   });
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle2342184303";
+var _namespace_ = "DragHandle2576753877";
 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":"DragHandle2342184303__root"};
+export var classes = {"root":"DragHandle2576753877__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_ = "EntityPagePlain1608197167";
+var _namespace_ = "EntityPagePlain875261530";
 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":"EntityPagePlain1608197167__root"};
+export var classes = {"root":"EntityPagePlain875261530__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_ = "Fade1887979394";
+var _namespace_ = "Fade3970104487";
 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":"Fade1887979394__root"};
+export var classes = {"root":"Fade3970104487__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_ = "Heading1786796010";
+var _namespace_ = "Heading3688798431";
 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":"Heading1786796010__root"};
+export var classes = {"root":"Heading3688798431__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload2373340862";
+var _namespace_ = "ImportStepUpload3823422815";
 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":"ImportStepUpload2373340862__root","fileUpload":"ImportStepUpload2373340862__fileUpload"};
+export var classes = {"root":"ImportStepUpload3823422815__root","fileUpload":"ImportStepUpload3823422815__fileUpload"};
 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_ = "InputOverflow121088723";
+var _namespace_ = "InputOverflow2702296081";
 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":"InputOverflow121088723__root"};
+export var classes = {"root":"InputOverflow2702296081__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_ = "LoadingRow2081649038";
+var _namespace_ = "LoadingRow1261929484";
 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":"LoadingRow2081649038__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2081649038__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1261929484__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1261929484__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_ = "MaxHeightText785378325";
+var _namespace_ = "MaxHeightText4035389596";
 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":"MaxHeightText785378325__root"};
+export var classes = {"root":"MaxHeightText4035389596__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_ = "MaxLines239794507";
+var _namespace_ = "MaxLines2995177162";
 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":"MaxLines239794507__root"};
+export var classes = {"root":"MaxLines2995177162__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_ = "MultiBulkActionToolbar963133974";
+var _namespace_ = "MultiBulkActionToolbar2064943119";
 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":"MultiBulkActionToolbar963133974__root","leftGroupWrapper":"MultiBulkActionToolbar963133974__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar963133974__selectedCountItem","selectedCountText":"MultiBulkActionToolbar963133974__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar2064943119__root","leftGroupWrapper":"MultiBulkActionToolbar2064943119__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2064943119__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2064943119__selectedCountText"};
 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_ = "NestedTablePlaceholderStatesRow3199429362";
+var _namespace_ = "NestedTablePlaceholderStatesRow312175470";
 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":"NestedTablePlaceholderStatesRow3199429362__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow312175470__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_ = "NestedTableRow2769808413";
+var _namespace_ = "NestedTableRow3006676076";
 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":"NestedTableRow2769808413__root","firstLevel":"NestedTableRow2769808413__firstLevel","placeholder":"NestedTableRow2769808413__placeholder","parentHovered":"NestedTableRow2769808413__parentHovered"};
+export var classes = {"root":"NestedTableRow3006676076__root","firstLevel":"NestedTableRow3006676076__firstLevel","placeholder":"NestedTableRow3006676076__placeholder","parentHovered":"NestedTableRow3006676076__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_ = "MultipleDragOverlayEffect3549328804";
+var _namespace_ = "MultipleDragOverlayEffect2550722252";
 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":"MultipleDragOverlayEffect3549328804__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2550722252__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_ = "NestedTableDragAndDropRow38344387";
+var _namespace_ = "NestedTableDragAndDropRow139061198";
 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":"NestedTableDragAndDropRow38344387__root"};
+export var classes = {"root":"NestedTableDragAndDropRow139061198__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent3651580276";
+var _namespace_ = "PickerContent1028485228";
 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":"PickerContent3651580276__root"};
+export var classes = {"root":"PickerContent1028485228__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_ = "PickerContentAdditionalStep3755053293";
+var _namespace_ = "PickerContentAdditionalStep1033988613";
 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":"PickerContentAdditionalStep3755053293__root","titles":"PickerContentAdditionalStep3755053293__titles","suffix":"PickerContentAdditionalStep3755053293__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1033988613__root","titles":"PickerContentAdditionalStep1033988613__titles","suffix":"PickerContentAdditionalStep1033988613__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_ = "PickerTableListItem2170258568";
+var _namespace_ = "PickerTableListItem1059866670";
 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":"PickerTableListItem2170258568__root"};
+export var classes = {"root":"PickerTableListItem1059866670__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_ = "ScrollableContent840554507";
+var _namespace_ = "ScrollableContent2688783039";
 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":"ScrollableContent840554507__root"};
+export var classes = {"root":"ScrollableContent2688783039__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_ = "SkeletonCard1942060337";
+var _namespace_ = "SkeletonCard3914436236";
 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":"SkeletonCard1942060337__root","headerLoading":"SkeletonCard1942060337__headerLoading"};
+export var classes = {"root":"SkeletonCard3914436236__root","headerLoading":"SkeletonCard3914436236__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_ = "SlidingModal3366959456";
+var _namespace_ = "SlidingModal2539920394";
 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":"SlidingModal3366959456__root"};
+export var classes = {"root":"SlidingModal2539920394__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter2590592218";
+var _namespace_ = "TabsFilter884793764";
 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":"TabsFilter2590592218__root","title":"TabsFilter2590592218__title"};
+export var classes = {"root":"TabsFilter884793764__root","title":"TabsFilter884793764__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_ = "ManageTagsModal778816229";
+var _namespace_ = "ManageTagsModal2051441849";
 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":"ManageTagsModal778816229__root"};
+export var classes = {"root":"ManageTagsModal2051441849__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem391677634";
+var _namespace_ = "ToolbarItem3509901774";
 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":"ToolbarItem391677634__root"};
+export var classes = {"root":"ToolbarItem3509901774__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_ = "ToolbarItemBox3105624724";
+var _namespace_ = "ToolbarItemBox3910797071";
 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":"ToolbarItemBox3105624724__root"};
+export var classes = {"root":"ToolbarItemBox3910797071__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_ = "common780404466";
+var _namespace_ = "common3071416596";
 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":"common780404466__root","column":"common780404466__column","fullHeight":"common780404466__fullHeight"};
+export var classes = {"root":"common3071416596__root","column":"common3071416596__column","fullHeight":"common3071416596__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/model/view.ts

@@ -30,6 +30,7 @@ export interface BasicCategory {
    */
   name: string;
   /**
+   * @deprecated Info icon is now automatically rendered by Cairo for all categories.
    * [InfoIconProps](https://www.docs.wixdesignsystem.com/?path=/story/components-form--infoicon)
    * @external
    */

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

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

package/src/state/CollectionViewsStateBIReporter.ts

@@ -6,6 +6,7 @@ import {
 } from '@wix/bex-core';
 import { action } from 'mobx';
 import {
+  cairoCtaClicked,
   cairoFiltersPanelUsed,
   cairoManageViewActionSelected,
   cairoTryAgainClicked,
@@ -82,6 +83,33 @@ export class CollectionViewsStateBIReporter<T, F extends FiltersMap> {
               origin: 'Manage Views',
             }),
           );
+
+          const isRedesignEnabled =
+            collectionViewState.table.container.internalExperiments?.enabled(
+              'specs.cairo.ViewsRedesign',
+            );
+
+          if (isRedesignEnabled) {
+            const viewId = views.currentView?.id;
+            const { viewsWithoutCategory, categories } =
+              views.localSearchState.categoriesWithViews;
+            const flatViews = [
+              ...viewsWithoutCategory,
+              ...categories.flatMap((c) => c.views),
+            ];
+            const viewIndex = viewId
+              ? flatViews.findIndex((v) => v.id === viewId)
+              : undefined;
+
+            reportBI(
+              withoutDefaults(cairoCtaClicked)({
+                ctaName: 'more_actions',
+                location: 'view_dropdown',
+                itemId: viewId,
+                itemIndex: viewIndex,
+              }),
+            );
+          }
         }),
       ),
     ];

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

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