@wix/patterns 1.427.0 → 1.430.0

package/src/components/LayoutSwitch/LayoutSwitch.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useMemo } from 'react';
+import React, { ReactElement, Suspense, useEffect, useMemo } from 'react';
 import { FiltersMap } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
 import { Table, TableProps } from '../Table';
@@ -16,6 +16,13 @@ const LazyEditableTable = React.lazy(() =>
 
 export interface LayoutSwitchProps<T, F extends FiltersMap> {
   state: ILayoutSwitchState<T, F>;
+  /**
+   * An `<ImportButton />` element added to the toolbar of whichever layout is
+   * shown. Set it here once instead of repeating it in each layout's props. A
+   * layout's own `importButton` (in `tableProps`/`gridProps`/`spreadsheetProps`)
+   * takes precedence over this one.
+   */
+  importButton?: ReactElement;
   tableProps?: Omit<TableProps<T, F>, 'tableGridSwitchButton'>;
   gridProps?: Omit<GridProps<T, F>, 'tableGridSwitchButton'>;
   spreadsheetProps?: Omit<EditableTableProps<T, F>, 'tableGridSwitchButton'>;
@@ -23,6 +30,7 @@ export interface LayoutSwitchProps<T, F extends FiltersMap> {
 
 function _LayoutSwitch<T, F extends FiltersMap>({
   state,
+  importButton,
   tableProps,
   gridProps,
   spreadsheetProps,
@@ -87,7 +95,11 @@ function _LayoutSwitch<T, F extends FiltersMap>({
   if (activeView === 'table') {
     return (
       <div data-hook="layout-view-table" style={{ display: 'contents' }}>
-        <Table {...tableProps!} tableGridSwitchButton={layoutSwitchButton} />
+        <Table
+          {...tableProps!}
+          importButton={tableProps!.importButton ?? importButton}
+          tableGridSwitchButton={layoutSwitchButton}
+        />
       </div>
     );
   }
@@ -95,7 +107,11 @@ function _LayoutSwitch<T, F extends FiltersMap>({
   if (activeView === 'grid') {
     return (
       <div data-hook="layout-view-grid" style={{ display: 'contents' }}>
-        <Grid {...gridProps!} tableGridSwitchButton={layoutSwitchButton} />
+        <Grid
+          {...gridProps!}
+          importButton={gridProps!.importButton ?? importButton}
+          tableGridSwitchButton={layoutSwitchButton}
+        />
       </div>
     );
   }
@@ -108,6 +124,7 @@ function _LayoutSwitch<T, F extends FiltersMap>({
         >
           <LazyEditableTable
             {...spreadsheetProps!}
+            importButton={spreadsheetProps!.importButton ?? importButton}
             tableGridSwitchButton={layoutSwitchButton}
           />
         </Suspense>

package/src/components/LayoutSwitchButton/LayoutSwitchButton.tsx

@@ -10,6 +10,7 @@ import {
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { ViewType, ViewTypeState } from '../../state/ViewTypeState';
 import { layoutConfig } from './layoutConfig';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface LayoutSwitchButtonProps {
   state: ViewTypeState;
@@ -23,6 +24,7 @@ function _LayoutSwitchButton({ state, options }: LayoutSwitchButtonProps) {
   const isLayoutToggleRedesignEnabled = internalExperiments?.enabled(
     'specs.cairo.layout-toggle.redesign',
   );
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const dropdownOptions = useMemo(
     () =>
@@ -40,7 +42,7 @@ function _LayoutSwitchButton({ state, options }: LayoutSwitchButtonProps) {
   if (!isLayoutToggleRedesignEnabled) {
     return (
       <SegmentedToggle
-        size="small"
+        size={isBmHarmonyTheme ? 'tiny' : 'small'}
         dataHook="layout-switch-toggle-button"
         selected={viewType}
         onClick={(_, value) => {

package/src/components/LayoutSwitchButton/layoutConfig.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import {
   TableChart,
   LayoutGallery,
-  LayoutSplit,
-} from '@wix/wix-ui-icons-common';
+  LayoutThreeRows,
+} from '@wix/wix-ui-icons-common/lazy';
 import { TranslationsKeys } from '@wix/bex-core';
 import { ViewType } from '../../state/ViewTypeState';
 
@@ -12,7 +12,7 @@ export const layoutConfig: Record<
   { icon: React.ReactNode; translationKey: TranslationsKeys }
 > = {
   table: {
-    icon: <LayoutSplit />,
+    icon: <LayoutThreeRows />,
     translationKey: 'cairo.table.layout.table',
   },
   grid: {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow59215511";
+var _namespace_ = "LoadingRow491026576";
 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":"LoadingRow59215511__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow59215511__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow491026576__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow491026576__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_ = "MaxHeightText1409616332";
+var _namespace_ = "MaxHeightText3754196047";
 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":"MaxHeightText1409616332__root"};
+export var classes = {"root":"MaxHeightText3754196047__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_ = "MaxLines2439770051";
+var _namespace_ = "MaxLines3268543179";
 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":"MaxLines2439770051__root"};
+export var classes = {"root":"MaxLines3268543179__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MoreActions/MoreActionsIcon.tsx

@@ -5,11 +5,13 @@ import { observer } from 'mobx-react-lite';
 import { MoreActionsBase } from './MoreActionsBase';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { MoreActionsProps } from './MoreActionsProps';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface MoreActionsIconProps extends MoreActionsProps {}
 
 function _MoreActionsIcon(params: MoreActionsIconProps) {
   const { translate: t } = useWixPatternsContainer();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   return (
     <Box
@@ -21,7 +23,7 @@ function _MoreActionsIcon(params: MoreActionsIconProps) {
           triggerElement={
             <IconButton
               dataHook="more-actions-popover-button"
-              priority="secondary"
+              priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
             >
               <More />
             </IconButton>

package/src/components/MoreFiltersCTA/MoreFiltersCTA.tsx

@@ -1,9 +1,11 @@
 import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { ContentFilter } from '@wix/wix-ui-icons-common';
+import { FilterSmall, ContentFilter } from '@wix/wix-ui-icons-common/lazy';
+import { Box, CounterBadge } from '@wix/design-system';
 import { CounterBadgeButton } from '../CounterBadgeButton';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 const _MoreFiltersCTA = () => {
   const state = useToolbarCollectionContext();
@@ -12,24 +14,51 @@ const _MoreFiltersCTA = () => {
     container: { translate: t },
     toolbarFiltersState,
   } = state;
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+
+  const count = state.collection.query.nonPersistentCustomFiltersCount;
+
+  if (!isBmHarmonyTheme) {
+    return (
+      <CounterBadgeButton dataHook="more-filters-button-counter" count={count}>
+        <ResponsiveButton
+          ref={toolbarFiltersState?.moreFiltersButtonRef}
+          state={responsive.filters}
+          shouldShrink={false}
+          key="more-filters-button"
+          dataHook="more-filters-button"
+          icon={<ContentFilter />}
+          onClick={toolbarFiltersState?.onFiltersButtonClick}
+        >
+          {t('cairo.toolbar.moreFiltersButton', { defaultValue: '' })}
+        </ResponsiveButton>
+      </CounterBadgeButton>
+    );
+  }
 
   return (
-    <CounterBadgeButton
-      dataHook="more-filters-button-counter"
-      count={state.collection.query.nonPersistentCustomFiltersCount}
+    <ResponsiveButton
+      ref={toolbarFiltersState?.moreFiltersButtonRef}
+      state={responsive.filters}
+      shouldShrink={false}
+      key="more-filters-button"
+      dataHook="more-filters-button"
+      icon={<FilterSmall />}
+      onClick={toolbarFiltersState?.onFiltersButtonClick}
     >
-      <ResponsiveButton
-        ref={toolbarFiltersState?.moreFiltersButtonRef}
-        state={responsive.filters}
-        shouldShrink={false}
-        key="more-filters-button"
-        dataHook="more-filters-button"
-        icon={<ContentFilter />}
-        onClick={toolbarFiltersState?.onFiltersButtonClick}
-      >
+      <Box gap="SP1" verticalAlign="middle" display="inline-flex">
         {t('cairo.toolbar.moreFiltersButton', { defaultValue: '' })}
-      </ResponsiveButton>
-    </CounterBadgeButton>
+        {count > 0 && (
+          <CounterBadge
+            dataHook="more-filters-button-counter"
+            skin="general"
+            size="tiny"
+          >
+            {count}
+          </CounterBadge>
+        )}
+      </Box>
+    </ResponsiveButton>
   );
 };
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar1544486444";
+var _namespace_ = "MultiBulkActionToolbar4197357314";
 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":"MultiBulkActionToolbar1544486444__root","leftGroupWrapper":"MultiBulkActionToolbar1544486444__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1544486444__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1544486444__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar4197357314__root","leftGroupWrapper":"MultiBulkActionToolbar4197357314__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar4197357314__selectedCountItem","selectedCountText":"MultiBulkActionToolbar4197357314__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MultiBulkActionToolbar/MultiBulkActionToolbar.tsx

@@ -17,6 +17,7 @@ import { useExtensionMenuItems } from '../../hooks/useExtensionMenuItems';
 import { BulkActionContainer } from './BulkActionContainer';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { useBulkActionMobileGroups } from '../../hooks/useBulkActionMobileGroups';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface MultiBulkActionToolbarProps {
   /**
@@ -65,6 +66,7 @@ function _MultiBulkActionToolbar(props: MultiBulkActionToolbarProps) {
     containerProps,
   });
   const isMobile = useIsMobile();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const [state] = useState(
     () =>
@@ -125,7 +127,10 @@ function _MultiBulkActionToolbar(props: MultiBulkActionToolbarProps) {
   const bulkActionButtonsDesktop = (
     <>
       <Box alignSelf="stretch" marginLeft="SP4" marginRight="SP2">
-        <Divider direction="vertical" />
+        <Divider
+          direction="vertical"
+          skin={isBmHarmonyTheme ? 'light' : undefined}
+        />
       </Box>
 
       <Box gap="SP1" className={st(classes.root)}>

package/src/components/MultiLevelSorting/MultiLevelSortingCTAButton.tsx

@@ -2,12 +2,13 @@ import React, { useEffect, useState } from 'react';
 import { runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { FiltersMap } from '@wix/bex-core';
-import { ChangeOrderSmall } from '@wix/wix-ui-icons-common';
+import { ChangeOrderSmall, ReorderSmall } from '@wix/wix-ui-icons-common/lazy';
 import { MultiLevelSortingState, ToolbarCollectionState } from '../../state';
 import { MultiLevelSortingPanelEntry } from '../MultiLevelSortingPanel';
 import { CounterBadgeButton } from '../CounterBadgeButton';
 import { usePageContext } from '@wix/bex-core/react';
 import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface MultiLevelSortingCTAButtonProps<T, F extends FiltersMap> {
   state: ToolbarCollectionState<T, F>;
@@ -24,6 +25,7 @@ export function _MultiLevelSortingCTAButton<T, F extends FiltersMap>(
   } = state;
 
   const { modalsContainerRef } = usePageContext();
+  const isHarmonyTheme = useBmHarmonyTheme();
 
   const [multiLevelSortingState] = useState(() =>
     runInAction(
@@ -50,7 +52,7 @@ export function _MultiLevelSortingCTAButton<T, F extends FiltersMap>(
       <ResponsiveButton
         state={responsive.actions}
         shouldShrink={!isPanelLayout}
-        icon={<ChangeOrderSmall />}
+        icon={isHarmonyTheme ? <ReorderSmall /> : <ChangeOrderSmall />}
         dataHook="multi-level-sorting-button"
         onClick={() => {
           const isOpen = panels.toggleSidePanel('multiLevelSorting');

package/src/components/MultiSelectCheckboxFilterBase/MultiSelectCheckboxFilterBase.tsx

@@ -9,6 +9,7 @@ import { KeyedItem } from '@wix/bex-core';
 import { DropdownSelectState } from '../../state';
 import { FilterProps } from '../../model';
 import { useWindowFlipPopoverProps } from '../../utils/useWindowFlipPopoverProps';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { useDropdownTranslationContext } from '../../providers';
 
 export type KeyedItemOption<T> = DropdownLayoutOption & {
@@ -52,6 +53,7 @@ function _MultiSelectCheckboxFilterBase<V>(
   const { windowFlipPopoverProps, inputRef } = useWindowFlipPopoverProps({
     popoverProps,
   });
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   return (
     <MultiSelectCheckbox
@@ -59,7 +61,7 @@ function _MultiSelectCheckboxFilterBase<V>(
         inputRef.current = ref;
       }}
       dataHook={`collection-filter-${filter.name}`}
-      border="round"
+      border={isBmHarmonyTheme ? undefined : 'round'}
       textOverflow="ellipsis"
       options={options}
       placeholder={placeholder ?? translate('placeholder')}

package/src/components/MultiSelectFilterBase/MultiSelectFilterBase.tsx

@@ -14,6 +14,7 @@ import { DropdownSelectState } from '../../state';
 import { FilterProps } from '../../model';
 import { useFilterRenderingContext } from '../FilterRenderingContext';
 import { useWindowFlipPopoverProps } from '../../utils/useWindowFlipPopoverProps';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { useDropdownTranslationContext } from '../../providers';
 
 export type KeyedItemOption<T> = DropdownLayoutOption & {
@@ -59,6 +60,7 @@ function _MultiSelectCheckboxFilterBase<V>(
   const { windowFlipPopoverProps, inputRef } = useWindowFlipPopoverProps({
     popoverProps,
   });
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const effectiveSize: InputSize =
     size || (location === 'panel' ? 'small' : 'medium');
@@ -85,7 +87,7 @@ function _MultiSelectCheckboxFilterBase<V>(
         inputRef.current = ref;
       }}
       dataHook={`collection-filter-${filter.name}`}
-      border="round"
+      border={isBmHarmonyTheme ? undefined : 'round'}
       placeholder={translate('placeholder')}
       tags={tags}
       size={size}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow419327296";
+var _namespace_ = "NestedTablePlaceholderStatesRow1512195112";
 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":"NestedTablePlaceholderStatesRow419327296__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1512195112__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_ = "NestedTableRow1478356820";
+var _namespace_ = "NestedTableRow758756333";
 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":"NestedTableRow1478356820__root","firstLevel":"NestedTableRow1478356820__firstLevel","placeholder":"NestedTableRow1478356820__placeholder","parentHovered":"NestedTableRow1478356820__parentHovered"};
+export var classes = {"root":"NestedTableRow758756333__root","firstLevel":"NestedTableRow758756333__firstLevel","placeholder":"NestedTableRow758756333__placeholder","parentHovered":"NestedTableRow758756333__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_ = "MultipleDragOverlayEffect1868700924";
+var _namespace_ = "MultipleDragOverlayEffect1567357389";
 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":"MultipleDragOverlayEffect1868700924__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1567357389__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_ = "NestedTableDragAndDropRow2309849426";
+var _namespace_ = "NestedTableDragAndDropRow273561805";
 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":"NestedTableDragAndDropRow2309849426__root"};
+export var classes = {"root":"NestedTableDragAndDropRow273561805__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_ = "PickerContent3692401186";
+var _namespace_ = "PickerContent2095613214";
 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":"PickerContent3692401186__root"};
+export var classes = {"root":"PickerContent2095613214__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_ = "PickerContentAdditionalStep363356966";
+var _namespace_ = "PickerContentAdditionalStep1102083508";
 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":"PickerContentAdditionalStep363356966__root","titles":"PickerContentAdditionalStep363356966__titles","suffix":"PickerContentAdditionalStep363356966__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1102083508__root","titles":"PickerContentAdditionalStep1102083508__titles","suffix":"PickerContentAdditionalStep1102083508__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_ = "PickerTableListItem1449050524";
+var _namespace_ = "PickerTableListItem1050306693";
 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":"PickerTableListItem1449050524__root"};
+export var classes = {"root":"PickerTableListItem1050306693__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ResponsiveButton/ResponsiveButton.tsx

@@ -11,6 +11,7 @@ import { observer } from 'mobx-react-lite';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { ToolbarResponsivePriorityState } from '../../state/Toolbar/ToolbarResponsivePriorityState';
 import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export type ResponsiveButtonProps = ButtonAsButtonProps<{
   dataHook?: string;
@@ -41,6 +42,7 @@ const _ResponsiveButton = forwardRef<Button, ResponsiveButtonProps>(
     } = useToolbarCollectionContext();
 
     const { responsiveDisabled } = responsive;
+    const isBmHarmonyTheme = useBmHarmonyTheme();
 
     const shouldShrink = responsiveDisabled
       ? shouldShrinkProp
@@ -55,9 +57,9 @@ const _ResponsiveButton = forwardRef<Button, ResponsiveButtonProps>(
           <IconButton
             ref={ref}
             {...rest}
+            priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
             dataHook={dataHook}
             size={sizes.small}
-            priority="secondary"
           >
             {icon}
           </IconButton>
@@ -71,7 +73,7 @@ const _ResponsiveButton = forwardRef<Button, ResponsiveButtonProps>(
           {...rest}
           dataHook={dataHook}
           size={sizes.small}
-          priority="secondary"
+          priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
           prefixIcon={icon}
           suffixIcon={button.suffix}
         >