@wix/patterns 1.261.0 → 1.264.0

package/src/components/CollectionTable/CollectionTableWSRTable.tsx

@@ -170,7 +170,8 @@ function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
     isMobile || showEmptyState || showLoadingState || initTask.status.isError;
 
   const showBorderBox =
-    !table.showLoadingState && (hideTitleBar || !showTitleBar);
+    (!table.showLoadingState || !showTitleBar) &&
+    (hideTitleBar || !showTitleBar);
 
   const tableColumns = isMobile
     ? [

package/src/components/CollectionTableActionsColumn.tsx

@@ -3,7 +3,8 @@ import { ItemActionsState } from '../state';
 import { CollectionItemActions } from './CollectionItemActions';
 import { CollectionState, FiltersMap, KeyedItem } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
-import { ActionCell } from './ActionCell';
+import { ActionCell, ActionCellProps } from './ActionCell';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 export interface CollectionTableActionsColumnProps<T, F extends FiltersMap> {
   keyedItem: KeyedItem<T>;
@@ -16,6 +17,10 @@ export interface CollectionTableActionsColumnProps<T, F extends FiltersMap> {
 function _CollectionTableActionsColumn<T, F extends FiltersMap>(
   props: CollectionTableActionsColumnProps<T, F>,
 ) {
+  const { experiments } = useWixPatternsContainer();
+  const isActionCellSizeSmallEnabled = experiments.enabled(
+    'specs.cairo.SmallActionCellSize',
+  );
   const { collection, index, sticky, keyedItem, actionCell, ...rest } = props;
 
   const [state] = useState(
@@ -35,6 +40,9 @@ function _CollectionTableActionsColumn<T, F extends FiltersMap>(
 
     return {
       ...actionCellProps,
+      size: isActionCellSizeSmallEnabled
+        ? 'small'
+        : (actionCellProps.size as ActionCellProps['size']),
       popoverMenuProps: {
         // Larger zIndex than Page.Sticky https://github.com/wix-private/wix-design-systems/blob/844c42de1fb6e65f62b4b32538c5923869116d3d/packages/wix-style-react/src/Page/Page.st.css#L41
         ...(sticky && { zIndex: 1200 }),

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar856652363";
+var _namespace_ = "CollectionToolbar363269901";
 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":"CollectionToolbar856652363__root","left":"CollectionToolbar856652363__left","right":"CollectionToolbar856652363__right","fullWidth":"CollectionToolbar856652363__fullWidth"};
+export var classes = {"root":"CollectionToolbar363269901__root","left":"CollectionToolbar363269901__left","right":"CollectionToolbar363269901__right","fullWidth":"CollectionToolbar363269901__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/CollectionToolbar.tsx

@@ -31,6 +31,7 @@ import { CollectionToolbarSkeletonItem } from './CollectionToolbarSkeletonItem';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { isValidElement } from '../isValidElement';
 import { CollectionSearch } from '../CollectionSearch';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 export interface CollectionToolbarProps<T, F extends FiltersMap> {
   state: ToolbarCollectionState<T, F>;
@@ -77,6 +78,8 @@ function _CollectionToolbar<T, F extends FiltersMap>(
     moreActions,
   } = props;
 
+  const { isPanelLayout } = useWixPatternsContainer();
+
   const isMobile = useIsMobile();
 
   assertComponentType(
@@ -291,7 +294,11 @@ function _CollectionToolbar<T, F extends FiltersMap>(
   return (
     <CollectionProvider value={collection}>
       <Box direction="vertical" dataHook={dataHook}>
-        <Box minHeight={title?.props.subtitle ? '78px' : '60px'}>
+        <Box
+          minHeight={
+            isPanelLayout ? '48px' : title?.props.subtitle ? '78px' : '60px'
+          }
+        >
           {state.isReorderModeToolbarVisible ? (
             dragAndDropReorderModeToolbar
           ) : (

package/src/components/CollectionToolbar/PrimaryActionButton.tsx

@@ -6,10 +6,7 @@ import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { useSelector } from '../../useSelector';
 
 export interface PrimaryActionButtonProps
-  extends Omit<
-    ButtonProps,
-    'size' | 'fullWidth' | 'dataHook' | 'skin' | 'as'
-  > {
+  extends Omit<ButtonProps, 'size' | 'fullWidth' | 'dataHook' | 'skin' | 'as'> {
   /**
    * Callback that is called each time the button is clicked.
    * @external
@@ -20,7 +17,7 @@ export interface PrimaryActionButtonProps
 export const PrimaryActionButton = (props: PrimaryActionButtonProps) => {
   const { translate: t, initTask } = useWixPatternsContainer();
   const { toolbarBIReporter } = useToolbarCollectionContext();
-  const { priority="primary" } = props;
+  const { priority = 'primary' } = props;
 
   useSelector(() => initTask.status);
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter2018705461";
+var _namespace_ = "SearchOrCustomFilter3001369942";
 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":"SearchOrCustomFilter2018705461__root","search":"SearchOrCustomFilter2018705461__search","searchMobile":"SearchOrCustomFilter2018705461__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter3001369942__root","search":"SearchOrCustomFilter3001369942__search","searchMobile":"SearchOrCustomFilter3001369942__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbars/CollectionToolbars.tsx

@@ -168,15 +168,18 @@ function _CollectionToolbars<T, F extends FiltersMap = FiltersMap>(
     <ToolbarAndTitlebarContainer state={state.toolbar}>
       {customSlot ? (
         <>
-            <BorderRadiusTopBottomCard>{toolbars}</BorderRadiusTopBottomCard>
-            <CollectionToolbarsVisualization state={state} visualization={customSlot} />
-            <BorderRadiusTopCard>{titleBar}</BorderRadiusTopCard>
+          <BorderRadiusTopBottomCard>{toolbars}</BorderRadiusTopBottomCard>
+          <CollectionToolbarsVisualization
+            state={state}
+            visualization={customSlot}
+          />
+          <BorderRadiusTopCard>{titleBar}</BorderRadiusTopCard>
         </>
       ) : (
-          <BorderRadiusTopCard>
-            {toolbars}
-            {titleBar}
-          </BorderRadiusTopCard>
+        <BorderRadiusTopCard>
+          {toolbars}
+          {titleBar}
+        </BorderRadiusTopCard>
       )}
     </ToolbarAndTitlebarContainer>
   );

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

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

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

@@ -21,13 +21,20 @@ export const CollectionViewsDropdownUniDriver = (
   const getRenameViewModal = () =>
     CollectionRenameViewModalUniDriver(base, body);
 
-  const getDropdownLayoutBase = async () =>
-    body.$(
-      `[data-content-element="${await viewsDropdownDriverBase().attr(
-        'data-content-hook',
-      )}"]`,
+  const getDropdownLayoutBase = async () => {
+    const contentDataHook = await viewsDropdownDriverBase().attr(
+      'data-content-hook',
     );
 
+    if (contentDataHook) {
+      return body.$(`[data-content-element="${contentDataHook}"]`);
+    }
+
+    const baseDataHook = await viewsDropdownDriverBase().attr('data-hook');
+
+    return body.$(`[data-hook="${baseDataHook}-content"]`);
+  };
+
   const viewsDropdownDriver = () =>
     DropdownUniDriver(viewsDropdownDriverBase(), body);
 
@@ -108,7 +115,7 @@ export const CollectionViewsDropdownUniDriver = (
       viewsDropdownDriverBase().$$('[data-hook="view-item"]').text(),
     /** Get array popover content , like empty state */
     getViewsPopoverContent: async () =>
-      viewsDropdownDriverBase().$$('[data-hook="popover-content"]').text(),
+      viewsDropdownDriver().dropdownLayoutDriver.optionsContent(),
     /** Indicates whether the dropdown is open */
     isOpen: () => viewsDropdownDriver().dropdownLayoutDriver.isShown(),
     /** Get the placeholder test of the dropdown */

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

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

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -1,4 +1,4 @@
-import { SidePanel, Box } from '@wix/design-system';
+import { Box, SidePanel } from '@wix/design-system';
 import React, { useEffect } from 'react';
 import { CustomColumnsState } from '../../state';
 import { FiltersMap, withoutDefaults } from '@wix/bex-core';
@@ -10,6 +10,7 @@ import { CustomColumnsNoResults } from './CustomColumnsNoResults';
 import { useRafRender } from '../../hooks/useRafRender';
 import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
 import { ScrollableContent } from '../ScrollableContent';
+import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
 
 export interface CustomColumnsPanelProps<T, F extends FiltersMap> {
   state: CustomColumnsState<T, F>;
@@ -39,10 +40,10 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
   const shouldShowSearch = isUsingDataExtension || totalColumns > 5;
 
   return (
-    <SidePanel
+    <PatternsSidePanel
       dataHook="custom-columns-panel"
       width="100%"
-      onCloseButtonClick={() => {
+      onClose={() => {
         table.reportBi(
           withoutDefaults(cairoFiltersPanelUsed)({
             isOpened: false,
@@ -86,7 +87,7 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
         ?.CustomColumnsAddCustomFieldCTAButton && (
         <collectionDataExtension.DataExtension.CustomColumnsAddCustomFieldCTAButton />
       )}
-    </SidePanel>
+    </PatternsSidePanel>
   );
 }
 

package/src/components/CustomColumnsPanel/CustomColumnsSearch.tsx

@@ -25,9 +25,11 @@ export function _CustomColumnsSearch<T, F extends FiltersMap>({
       onClear={() => {
         state.setSearchValue('');
       }}
-      placeholder={t('cairo.table.custom-columns.dragAndDrop.search-placeholder')}
+      placeholder={t(
+        'cairo.table.custom-columns.dragAndDrop.search-placeholder',
+      )}
     />
   );
 }
 
-export const CustomColumnsSearch = observer(_CustomColumnsSearch); 
+export const CustomColumnsSearch = observer(_CustomColumnsSearch);

package/src/components/CustomFieldsPanel/CustomFieldsPanel.tsx

@@ -9,6 +9,7 @@ import { CustomFieldsList } from './CustomFieldsList';
 import { AddCustomFieldCTAButton } from './AddCustomFieldCTAButton';
 import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
 import { CustomFieldsPanelState } from '../../state/CustomFields/CustomFieldsPanelState';
+import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
 
 export interface CustomFieldsPanelProps {
   state: CustomFieldsPanelState;
@@ -25,10 +26,10 @@ export function _CustomFieldsPanel({ state }: CustomFieldsPanelProps) {
   }
 
   return (
-    <SidePanel
+    <PatternsSidePanel
       dataHook="custom-fields-panel"
       width="100%"
-      onCloseButtonClick={() => {
+      onClose={() => {
         state.reportBi(
           withoutDefaults(cairoFiltersPanelUsed)({
             isOpened: false,
@@ -61,7 +62,7 @@ export function _CustomFieldsPanel({ state }: CustomFieldsPanelProps) {
           />
         </Box>
       </Box>
-    </SidePanel>
+    </PatternsSidePanel>
   );
 }
 

package/src/components/CustomFieldsWidget/CustomFieldsViewWidgetSection.tsx

@@ -135,7 +135,13 @@ const _CustomFieldsViewWidgetSection = ({
             gridTemplateColumns="repeat(auto-fill, minmax(248px, 1fr))"
           >
             {customFields.map((field) => (
-              <Box key={field.id} flexGrow={1} flexShrink={1} flexBasis={0} minWidth="248px">
+              <Box
+                key={field.id}
+                flexGrow={1}
+                flexShrink={1}
+                flexBasis={0}
+                minWidth="248px"
+              >
                 <CustomFieldCell
                   key={field.id}
                   field={field}

package/src/components/DateRangeFilter/DateRangeFilter.tsx

@@ -16,6 +16,7 @@ import {
   renderPresetToolbarTag,
 } from '@wix/bex-core';
 import { useDateRangeFilterState } from '../../hooks';
+import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
 
 export interface DateRangeFilterProps
   extends FilterProps<RangeItem<Date>>,
@@ -52,6 +53,9 @@ function _DateRangeFilter(props: DateRangeFilterProps) {
   } = props;
 
   const { translate: t } = useWixPatternsContainer();
+  const {
+    radioGroup: { spacing },
+  } = usePatternsTheme();
   const state = useDateRangeFilterState({
     filter,
     filterByTime,
@@ -100,6 +104,7 @@ function _DateRangeFilter(props: DateRangeFilterProps) {
           onChange={(v) =>
             v && state.dateRangePicker.onPresetChanged(v.toString())
           }
+          spacing={spacing}
           dataHook="date-range-filter-group"
         >
           {Object.values(dateRangePreset).map((preset) =>

package/src/components/DateRangePicker/DateRangeFilter.uni.driver.ts

@@ -8,6 +8,9 @@ import {
   TimeInputUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 import { baseUniDriverFactory } from '../../unidriver';
+import { DatePickerUniDriver as DatePickerUniDriverAsync } from '../../unidriver/DatePicker.uni.driver';
+import { UniDriverFactory } from '../uniDriverFactory';
+import { DatePickerUniDriver as DatePickerUniDriverFactory } from '@wix/design-system/dist/types/DatePicker/DatePicker.uni.driver';
 
 export function DateRangePickerUniDriver(base: UniDriver, body: UniDriver) {
   const getDatePickersContainer = () =>
@@ -18,8 +21,18 @@ export function DateRangePickerUniDriver(base: UniDriver, body: UniDriver) {
   const getTimeInputBase = (picker: 'from' | 'to') =>
     base.$(`[data-hook="date-range-picker-time-${picker}"]`);
 
-  const getDatePicker = (picker: 'from' | 'to') =>
-    DatePickerUniDriver(getDatePickerBase(picker), body);
+  const getDatePickerSync = (picker: 'from' | 'to') =>
+    (DatePickerUniDriver as UniDriverFactory<DatePickerUniDriverFactory>)(
+      getDatePickerBase(picker),
+      body,
+      {
+        dataHook: `date-range-picker-${picker}`,
+      },
+    );
+
+  const getDatePicker = async (picker: 'from' | 'to') =>
+    DatePickerUniDriverAsync(getDatePickerBase(picker), body);
+
   const getTimeInput = (picker: 'from' | 'to') =>
     TimeInputUniDriver(getTimeInputBase(picker), body);
 
@@ -31,14 +44,14 @@ export function DateRangePickerUniDriver(base: UniDriver, body: UniDriver) {
       body,
     );
   const openDatePicker = async (
-    datePicker: ReturnType<typeof getDatePicker>,
+    datePicker: ReturnType<typeof getDatePickerSync>,
   ) => {
     !(await datePicker.calendarDriver.exists()) &&
       (await datePicker.driver.open());
   };
   const chooseRandomDates = async () => {
-    const dateFrom = getDatePicker('from');
-    const dateTo = getDatePicker('to');
+    const dateFrom = await getDatePicker('from');
+    const dateTo = await getDatePicker('to');
     await openDatePicker(dateFrom);
     await dateFrom.calendarDriver.clickOnNthDay(1);
     await dateTo.calendarDriver.clickOnNthDay(2);
@@ -49,7 +62,7 @@ export function DateRangePickerUniDriver(base: UniDriver, body: UniDriver) {
   };
 
   const chooseDate = async (picker: 'from' | 'to', date: Date) => {
-    const datePicker = getDatePicker(picker);
+    const datePicker = await getDatePicker(picker);
     await openDatePicker(datePicker);
     await datePicker.calendarDriver.clickDay(date);
     return datePicker;
@@ -91,7 +104,7 @@ export function DateRangePickerUniDriver(base: UniDriver, body: UniDriver) {
   return {
     ...baseUniDriverFactory(base),
     _getRadioGroup: getRadioGroup,
-    getDatePicker,
+    getDatePicker: getDatePickerSync,
     getDatePickersContainer,
     getTimeInput,
     isTimeSelected: async (picker: 'from' | 'to') => {

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

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

package/src/components/DropdownFilter/CollectionDropdownFilter.uni.driver.ts

@@ -21,8 +21,16 @@ export const CollectionDropdownFilterUniDriver = <
     return optionsDriver.dropdownLayoutDriver.options();
   };
 
-  const getDropdownLayoutBase = async () =>
-    body.$(`[data-content-element="${await base.attr('data-content-hook')}"]`);
+  const getDropdownLayoutBase = async () => {
+    const contentDataHook = await base.attr('data-content-hook');
+    if (contentDataHook) {
+      return body.$(`[data-content-element="${contentDataHook}"]`);
+    }
+
+    const baseDataHook = await base.attr('data-hook');
+
+    return body.$(`[data-hook="${baseDataHook}-content"]`);
+  };
 
   const getOptions = async (ids: string[]) => {
     return ids.map(async (id) => {
@@ -174,7 +182,10 @@ export const CollectionDropdownFilterUniDriver = <
       const { page } = element;
 
       const contentHook = await base.attr('data-content-hook');
-      const contentSelector = `[data-content-element="${contentHook}"]`;
+      const baseDataHook = await base.attr('data-hook');
+      const contentSelector = contentHook
+        ? `[data-content-element="${contentHook}"]`
+        : `[data-hook="${baseDataHook}-content"]`;
 
       // puppeteer
       if (page?.evaluate) {

package/src/components/EntityPage/EntityPagePlain.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain1244331438";
+var _namespace_ = "EntityPagePlain3842564122";
 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":"EntityPagePlain1244331438__root"};
+export var classes = {"root":"EntityPagePlain3842564122__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_ = "Fade1822755885";
+var _namespace_ = "Fade1408656930";
 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":"Fade1822755885__root"};
+export var classes = {"root":"Fade1408656930__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/FiltersPanel/FilterAccordionTitle.tsx

@@ -4,6 +4,7 @@ import { Filter } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
 import { FilterProps } from '../../model';
 import { FilterToolbarState } from '../../providers';
+import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
 
 export interface FilterAccordionTitleProps<V> {
   state: FilterToolbarState;
@@ -17,11 +18,14 @@ function _FilterAccordionTitle<V>(props: FilterAccordionTitleProps<V>) {
 
   const filter = state.getPendingFilter(props.filter);
 
+  const { sizes } = usePatternsTheme();
+
   return (
     <Text
       dataHook={`accordion-item-title-${filter.name}`}
       ellipsis
       weight="normal"
+      size={sizes.medium}
     >
       {`${accordionItemProps?.label ?? ''}${
         filter.size > 0 ? ` (${filter.size})` : ''

package/src/components/FiltersPanel/FiltersPanel.tsx

@@ -1,9 +1,4 @@
-import {
-  Accordion,
-  SidePanel,
-  SidePanelProps,
-  WixStyleReactDefaultsOverrideProvider,
-} from '@wix/design-system';
+import { Accordion, SidePanel, SidePanelProps, WixStyleReactDefaultsOverrideProvider } from '@wix/design-system';
 import React, { useState } from 'react';
 import { FiltersMap } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
@@ -14,6 +9,7 @@ import { FiltersPanelState } from './FiltersPanelState';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useRafRender } from '../../hooks/useRafRender';
 import { CollectionToolbarFiltersState } from '../CollectionToolbarFilters/CollectionToolbarFiltersState';
+import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
 
 export interface FiltersPanelProps<T, F extends FiltersMap>
   extends Partial<SidePanelProps> {
@@ -61,9 +57,9 @@ function _FiltersPanel<T, F extends FiltersMap>(
   }
 
   let child = (
-    <SidePanel
+    <PatternsSidePanel
       dataHook="filters-side-panel"
-      onCloseButtonClick={filtersPanelState.onCloseButtonClick}
+      onClose={filtersPanelState.onCloseButtonClick}
       width="100%"
       {...rest}
     >
@@ -97,7 +93,7 @@ function _FiltersPanel<T, F extends FiltersMap>(
         />
       </SidePanel.Footer>
       {children}
-    </SidePanel>
+    </PatternsSidePanel>
   );
 
   child = (

package/src/components/Grid/useGridItemActions.tsx

@@ -7,6 +7,7 @@ import {
   CardGalleryItemProps,
   IconButton,
   PopoverMenu,
+  PopoverMenuItemProps,
 } from '@wix/design-system';
 import { More } from '@wix/wix-ui-icons-common';
 import {
@@ -124,12 +125,13 @@ export function useGridItemActions<T, F extends FiltersMap>(
             return <PopoverMenu.Divider key={index} />;
           }
 
-          const { icon: prefixIcon, ...rest } = action;
+          const { icon: prefixIcon, skin, ...rest } = action;
 
           return (
             <PopoverMenu.MenuItem
               key={index}
               prefixIcon={prefixIcon}
+              skin={skin as PopoverMenuItemProps['skin']}
               {...rest}
             />
           );

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading322658514";
+var _namespace_ = "Heading1971196384";
 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":"Heading322658514__root"};
+export var classes = {"root":"Heading1971196384__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_ = "InputOverflow2740037672";
+var _namespace_ = "InputOverflow1986854382";
 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":"InputOverflow2740037672__root"};
+export var classes = {"root":"InputOverflow1986854382__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Kanban/Kanban.tsx

@@ -39,7 +39,6 @@ function _Kanban<C, S, F extends FiltersMap>(props: KanbanProps<C, S, F>) {
     };
   }, [events]);
 
-
   const stages = useMemo(() => {
     return props.state.stages;
   }, [props.state.stages]);

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

@@ -100,8 +100,8 @@ export function KanbanUniDriver(base: UniDriver, body: UniDriver) {
         const { page } = (await body
           .$(`[data-hook="${scrollableElementDataHook}"]`)
           .getNative()) as {
-            page?: SledPage['page'];
-          };
+          page?: SledPage['page'];
+        };
         // puppeteer
         if (page?.evaluate) {
           await page.evaluate((_dataHook: string) => {