@wix/patterns 1.478.0 → 1.480.0

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

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

package/src/components/MoreActions/MoreActionsIcon.tsx

@@ -6,30 +6,44 @@ import { MoreActionsBase } from './MoreActionsBase';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { MoreActionsProps } from './MoreActionsProps';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
+import { useIsMobile } from '../../hooks/useIsMobile';
 
 export interface MoreActionsIconProps extends MoreActionsProps {}
 
 function _MoreActionsIcon(params: MoreActionsIconProps) {
   const { translate: t } = useWixPatternsContainer();
   const isBmHarmonyTheme = useBmHarmonyTheme();
+  const isMobile = useIsMobile();
+
+  const menu = (
+    <MoreActionsBase
+      {...params}
+      triggerElement={
+        <IconButton
+          dataHook="more-actions-popover-button"
+          priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
+        >
+          <More />
+        </IconButton>
+      }
+    />
+  );
 
   return (
     <Box
     // Box is needed to wrap the MoreActionsBase component to avoid extra gap between elements
     >
-      <Tooltip content={t('cairo.moreActions')} dataHook="more-actions-tooltip">
-        <MoreActionsBase
-          {...params}
-          triggerElement={
-            <IconButton
-              dataHook="more-actions-popover-button"
-              priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
-            >
-              <More />
-            </IconButton>
-          }
-        />
-      </Tooltip>
+      {/* On touch the tooltip opens on tap and stays open over the menu. */}
+      {isMobile ? (
+        menu
+      ) : (
+        <Tooltip
+          content={t('cairo.moreActions')}
+          dataHook="more-actions-tooltip"
+        >
+          {menu}
+        </Tooltip>
+      )}
     </Box>
   );
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar4024882803";
+var _namespace_ = "MultiBulkActionToolbar721027204";
 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":"MultiBulkActionToolbar4024882803__root","leftGroupWrapper":"MultiBulkActionToolbar4024882803__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar4024882803__selectedCountItem","selectedCountText":"MultiBulkActionToolbar4024882803__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar721027204__root","leftGroupWrapper":"MultiBulkActionToolbar721027204__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar721027204__selectedCountItem","selectedCountText":"MultiBulkActionToolbar721027204__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_ = "NestedTablePlaceholderStatesRow2386184459";
+var _namespace_ = "NestedTablePlaceholderStatesRow2413296369";
 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":"NestedTablePlaceholderStatesRow2386184459__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow2413296369__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_ = "NestedTableRow3747661608";
+var _namespace_ = "NestedTableRow1562035783";
 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":"NestedTableRow3747661608__root","firstLevel":"NestedTableRow3747661608__firstLevel","placeholder":"NestedTableRow3747661608__placeholder","parentHovered":"NestedTableRow3747661608__parentHovered"};
+export var classes = {"root":"NestedTableRow1562035783__root","firstLevel":"NestedTableRow1562035783__firstLevel","placeholder":"NestedTableRow1562035783__placeholder","parentHovered":"NestedTableRow1562035783__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_ = "MultipleDragOverlayEffect3362159254";
+var _namespace_ = "MultipleDragOverlayEffect2388374358";
 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":"MultipleDragOverlayEffect3362159254__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2388374358__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_ = "NestedTableDragAndDropRow1383889673";
+var _namespace_ = "NestedTableDragAndDropRow840932573";
 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":"NestedTableDragAndDropRow1383889673__root"};
+export var classes = {"root":"NestedTableDragAndDropRow840932573__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PageSubTitle/PageSubTitle.tsx

@@ -54,26 +54,30 @@ export const PageSubTitle = ({ text, learnMore }: PageSubTitleProps) => {
     : 'medium';
 
   const learnMoreSuffix = learnMore ? (
-    <TextButton
-      dataHook="subtitle-learn-more-cta"
-      as="a"
-      rel="noopener"
-      target="_blank"
-      href={learnMore.url}
-      size={learnMoreSize}
-      style={{ marginLeft: '6px' }}
-      onClick={() => {
-        bi?.reportBI(
-          withoutDefaults(cairoPageCtaClicked)({
-            location: 'Collection Page Header',
-            ctaType: 'link',
-            ctaName: 'Learn more',
-          }),
-        );
-      }}
-    >
-      {learnMore.label ?? t('cairo.subtitle.learnMore')}
-    </TextButton>
+    <>
+      {/* A space, unlike a margin, is dropped when the link wraps to its own line. */}
+      {isMobile && ' '}
+      <TextButton
+        dataHook="subtitle-learn-more-cta"
+        as="a"
+        rel="noopener"
+        target="_blank"
+        href={learnMore.url}
+        size={learnMoreSize}
+        style={isMobile ? undefined : { marginLeft: '6px' }}
+        onClick={() => {
+          bi?.reportBI(
+            withoutDefaults(cairoPageCtaClicked)({
+              location: 'Collection Page Header',
+              ctaType: 'link',
+              ctaName: 'Learn more',
+            }),
+          );
+        }}
+      >
+        {learnMore.label ?? t('cairo.subtitle.learnMore')}
+      </TextButton>
+    </>
   ) : undefined;
 
   return (

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent3516515489";
+var _namespace_ = "PickerContent322007735";
 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":"PickerContent3516515489__root"};
+export var classes = {"root":"PickerContent322007735__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_ = "PickerContentAdditionalStep154265560";
+var _namespace_ = "PickerContentAdditionalStep4139521200";
 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":"PickerContentAdditionalStep154265560__root","titles":"PickerContentAdditionalStep154265560__titles","suffix":"PickerContentAdditionalStep154265560__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep4139521200__root","titles":"PickerContentAdditionalStep4139521200__titles","suffix":"PickerContentAdditionalStep4139521200__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_ = "PickerTableListItem1307611848";
+var _namespace_ = "PickerTableListItem573958891";
 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":"PickerTableListItem1307611848__root"};
+export var classes = {"root":"PickerTableListItem573958891__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PrimaryActions/PrimaryActions.tsx

@@ -25,7 +25,6 @@ export function PrimaryActions({ subItems, ...props }: ActionSubitem) {
 
   return (
     <ActionControl
-      size={isMobile ? 'small' : undefined}
       fullWidth={isMobile}
       onPopoverClick={() => {
         reportBi(

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget2418838366";
+var _namespace_ = "SetupWidget2732674619";
 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":"SetupWidget2418838366__root","row":"SetupWidget2418838366__row","completedCta":"SetupWidget2418838366__completedCta","secondaryCta":"SetupWidget2418838366__secondaryCta","card":"SetupWidget2418838366__card","stepIcon":"SetupWidget2418838366__stepIcon","chevron":"SetupWidget2418838366__chevron","chevronDisabled":"SetupWidget2418838366__chevronDisabled","inProgressLabel":"SetupWidget2418838366__inProgressLabel"};
+export var classes = {"root":"SetupWidget2732674619__root","row":"SetupWidget2732674619__row","completedCta":"SetupWidget2732674619__completedCta","secondaryCta":"SetupWidget2732674619__secondaryCta","card":"SetupWidget2732674619__card","stepIcon":"SetupWidget2732674619__stepIcon","chevron":"SetupWidget2732674619__chevron","chevronDisabled":"SetupWidget2732674619__chevronDisabled","inProgressLabel":"SetupWidget2732674619__inProgressLabel"};
 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_ = "SkeletonCard2955302995";
+var _namespace_ = "SkeletonCard1596130277";
 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":"SkeletonCard2955302995__root","headerLoading":"SkeletonCard2955302995__headerLoading"};
+export var classes = {"root":"SkeletonCard1596130277__root","headerLoading":"SkeletonCard1596130277__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_ = "SlidingModal1730162231";
+var _namespace_ = "SlidingModal2106370411";
 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":"SlidingModal1730162231__root"};
+export var classes = {"root":"SlidingModal2106370411__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader3509584085";
+var _namespace_ = "AddFieldColumnHeader3336770253";
 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":"AddFieldColumnHeader3509584085__root","anchorLayer":"AddFieldColumnHeader3509584085__anchorLayer","popover":"AddFieldColumnHeader3509584085__popover","title":"AddFieldColumnHeader3509584085__title","hoverBridge":"AddFieldColumnHeader3509584085__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader3336770253__root","anchorLayer":"AddFieldColumnHeader3336770253__anchorLayer","popover":"AddFieldColumnHeader3336770253__popover","title":"AddFieldColumnHeader3336770253__title","hoverBridge":"AddFieldColumnHeader3336770253__hoverBridge"};
 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_ = "TabsFilter1936161386";
+var _namespace_ = "TabsFilter797547015";
 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":"TabsFilter1936161386__root","titleBox":"TabsFilter1936161386__titleBox"};
+export var classes = {"root":"TabsFilter797547015__root","titleBox":"TabsFilter797547015__titleBox"};
 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_ = "ManageTagsModal1039381983";
+var _namespace_ = "ManageTagsModal393458239";
 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":"ManageTagsModal1039381983__root"};
+export var classes = {"root":"ManageTagsModal393458239__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ToolbarCollection/ToolbarCollection.tsx

@@ -159,7 +159,7 @@ export interface ToolbarCollectionBaseProps<T, F extends FiltersMap>
    * Accepts a [`CollectionNoResultsState`](./?path=/story/features-display-empty-states--collectionnoresultsstate) component,
    * or a function that accepts the following parameters:
    * - `hasAvailableItems`: Indicates whether other items may be shown using other filter or search parameters.
-   * - `query`: An instance of [`ComputedQuery`](./?path=/story/common-models--computedquery) representing the query that resulted in the empty state.
+   * - `query`: An instance of [`ComputedQuery`](./?path=/story/common-types--computedquery) representing the query that resulted in the empty state.
    * The function should return [`CollectionNoResultsState`](./?path=/story/features-display-empty-states--collectionnoresultsstate).
    * @external
    * @overrideType [CollectionNoResultsState](./?path=/story/features-display-empty-states--collectionnoresultsstate)
@@ -249,8 +249,8 @@ export interface ToolbarCollectionBaseProps<T, F extends FiltersMap>
   dragAndDropReorderModeToolbar?: ReorderModeToolbarElement | null;
 
   /**
-   * Adds functionality to allow visitors to create choose which columns to display and in what order. Accepts a [CustomColumns](./?path=/story/features-display--customcolumns) component.
-   * @overrideType [CustomColumns](./?path=/story/features-display--customcolumns)
+   * Adds functionality to allow visitors to create choose which columns to display and in what order. Accepts a [CustomColumns](./?path=/story/features-display-custom-columns--customcolumns) component.
+   * @overrideType [CustomColumns](./?path=/story/features-display-custom-columns--customcolumns)
    * @external
    */
   customColumns?: CustomColumnsElement | null;
@@ -265,15 +265,15 @@ export interface ToolbarCollectionBaseProps<T, F extends FiltersMap>
 
   /**
    * Adds functionality for a primary action button in the toolbar.
-   * Accepts a [PrimaryActionButton](./?path=/story/features-actions-primary-actions--primary-action-button) component.
+   * Accepts a [PrimaryActionButton](./?path=/story/features-actions-primaryactions--primaryactionbutton) component.
    * @external
-   * @overrideType [PrimaryActionButton](./?path=/story/features-actions-primary-actions--primary-action-button)
+   * @overrideType [PrimaryActionButton](./?path=/story/features-actions-primaryactions--primaryactionbutton)
    */
   primaryActionButton?: PrimaryActionButtonElement;
 
   /**
    * Secondary buttons w/o PopoverMenu component to be rendered on the toolbar.
-   * @overrideType [ToolbarSecondaryActions](./?path=/story/features-actions-secondary-actions--toolbar-secondary-actions)
+   * @overrideType [ToolbarSecondaryActions](./?path=/story/features-actions-secondaryactions--toolbarsecondaryactions)
    * @external
    */
   secondaryActions?: ToolbarSecondaryActionsElement;

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem2278610119";
+var _namespace_ = "ToolbarItem18100771";
 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":"ToolbarItem2278610119__root"};
+export var classes = {"root":"ToolbarItem18100771__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_ = "ToolbarItemBox4122681719";
+var _namespace_ = "ToolbarItemBox3338974518";
 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":"ToolbarItemBox4122681719__root"};
+export var classes = {"root":"ToolbarItemBox3338974518__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_ = "common3747721368";
+var _namespace_ = "common3005467811";
 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":"common3747721368__root","column":"common3747721368__column","fullHeight":"common3747721368__fullHeight"};
+export var classes = {"root":"common3005467811__root","column":"common3005467811__column","fullHeight":"common3005467811__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/useCollectionPageChild/useCollectionPageChild.tsx

@@ -1,4 +1,5 @@
 import React, { isValidElement, Children, ReactNode } from 'react';
+import { Page } from '@wix/design-system';
 import {
   CollectionPageHeader,
   CollectionPageHeaderElement,
@@ -11,10 +12,22 @@ import {
   CollectionPageFooter,
   CollectionPageFooterElement,
 } from '../../components/CollectionPageFooter';
+import { MobilePrimaryActionBar } from '../../state/CollectionPage/MobilePrimaryActionBar';
+import { useIsMobile } from '../useIsMobile';
 
 export function useCollectionPageChild(children: ReactNode) {
+  const isMobile = useIsMobile();
+  const childrenArr = Children.toArray(children);
+  const headerChild = childrenArr.find(
+    (child): child is CollectionPageHeaderElement =>
+      isValidElement(child) && child.type === CollectionPageHeader,
+  );
+  const mobilePrimaryAction = isMobile
+    ? headerChild?.props.primaryAction
+    : undefined;
+
   // Mapping to raw WDS components since original Page filtering none expected components: https://github.com/wix-private/wix-design-systems/blob/master/packages/wix-style-react/src/Page/Page.js#L626
-  return Children.toArray(children)
+  const mapped = childrenArr
     .map((child, index) => {
       let newChild = null;
       if (isValidElement(child)) {
@@ -43,4 +56,16 @@ export function useCollectionPageChild(children: ReactNode) {
       return React.cloneElement(newChild, { key: index });
     })
     .filter((c) => c);
+
+  // On mobile the primary action moves from the header to the page's fixed
+  // footer.
+  if (mobilePrimaryAction) {
+    mapped.push(
+      <Page.FixedFooter key="mobile-primary-action">
+        <MobilePrimaryActionBar>{mobilePrimaryAction}</MobilePrimaryActionBar>
+      </Page.FixedFooter>,
+    );
+  }
+
+  return mapped;
 }

package/src/hooks/useLayoutSwitchCollection.ts

@@ -6,6 +6,7 @@ import {
   useCreateCollection,
   useCreateOptimisticActions,
 } from '@wix/bex-core/react';
+import type { ViewType } from '../state/ViewTypeState';
 import {
   LayoutSwitchState,
   LayoutSwitchStateParams,
@@ -22,6 +23,11 @@ export type LayoutSwitchCollectionConfig<
   table?: TableLayoutConfig;
   grid?: GridLayoutConfig;
   spreadsheet?: Omit<SpreadsheetLayoutConfig<T, F>, 'createOptimisticActions'>;
+  /** Layout shown while the user has no saved choice; a saved choice wins and
+   *  the default is never saved. Ignored when not an enabled layout. Read on
+   *  mount, so later changes have no effect. Without it, the first enabled
+   *  layout in table, grid, spreadsheet order. */
+  defaultViewType?: ViewType;
 };
 
 export const useLayoutSwitchCollection = <
@@ -53,6 +59,7 @@ export const useLayoutSwitchCollection = <
       table: config.table,
       grid: config.grid,
       spreadsheet,
+      defaultViewType: config.defaultViewType,
     });
   });
 

package/src/hooks/usePickerModal/UsePickerModalParamsBase.ts

@@ -107,7 +107,7 @@ export interface UsePickerModalParamsBase<T, F extends FiltersMap> {
    * Accepts the following parameters:
    * - `query`: A [ComputedQuery](./?path=/story/common-types--computedquery)  instance. Holds all the relevant variables to query the server API with.
    *
-   * The function must return a promise of [DataResultRaw](./?path=/story/common-models--dataresultraw)
+   * The function must return a promise of [DataResultRaw](./?path=/story/common-types--dataresultraw)
    */
   fetchData?: (query: ComputedQuery<F>) => Promise<DataResultRaw<T>>;
 

package/src/index.ts

@@ -199,6 +199,7 @@ export {
 } from '@wix/bex-core';
 export * from './state/LayoutSwitchState';
 export * from './state/ILayoutSwitchState';
+export type { ViewType } from './state/ViewTypeState';
 export { DateRangeFilterStateParams } from './state/DateRangeFilterState';
 
 export { TableDragAndDrop } from './components/TableDragAndDrop';