@wix/patterns 1.213.0 → 1.214.0

package/dist/esm/components/CollectionToolbar/CollectionToolbar.js

@@ -11,19 +11,40 @@ import { CollectionToolbarActionsToolbarItemsGroup } from './CollectionToolbarAc
 import { CollectionToolbarActionsGroupResponsiveLayout } from './CollectionToolbarActionsGroupResponsiveLayout';
 import { MoreActions } from '../MoreActions';
 import { CollectionToolbarSkeletonItem } from './CollectionToolbarSkeletonItem';
+import { useIsMobile } from '../../hooks/useIsMobile';
+import { isValidElement } from '../isValidElement';
+import { CollectionSearch } from '../CollectionSearch';
 function _CollectionToolbar(props) {
     const { state, search = true, title, tabs, customColumns, multiLevelSorting, views, dataHook, filters: filtersProp, tableGridSwitchButton, exportButton, dragAndDropReorderModeToolbar, primaryActionButton, secondaryActions, moreActions, } = props;
+    const isMobile = useIsMobile();
+    const [isSearchFocused, setIsSearchFocused] = useState(false);
     assertComponentType(primaryActionButton, 'PrimaryActionButton', 'PrimaryActionButton');
     const { collection, featuredComponents, toolbar: { responsive }, } = state;
     const addDataHookToMoreActions = () => {
         return (React.createElement(MoreActions, { dataHook: "toolbar-more-actions", ...moreActions.props }));
     };
+    const searchCallbacks = useMemo(() => {
+        return {
+            onSearchClick: () => {
+                setIsSearchFocused(true);
+            },
+            onSearchBlur: () => {
+                setIsSearchFocused(false);
+            },
+        };
+    }, []);
+    const searchElement = isValidElement(search) ? React.cloneElement(search, {
+        ...searchCallbacks,
+    }) : search ? (React.createElement(CollectionSearch, { size: "small", ...searchCallbacks })) : (search);
     const MoreFiltersButton = featuredComponents.moreFiltersButton
         .value;
     const viewsToolbarItem = views && (React.createElement(ToolbarItemBox, { dataHook: "collection-table-toolbar-views-item" }, views));
     const CollectionToolbarFilters = state.tagsCollectionState?.components.CollectionToolbarFilters ||
         state.collectionDataExtension?.components.CollectionToolbarFilters;
     const filtersElement = useMemo(() => {
+        if (isMobile) {
+            return undefined;
+        }
         if (filtersProp) {
             return filtersProp;
         }
@@ -33,13 +54,20 @@ function _CollectionToolbar(props) {
         ].filter(Boolean);
         return (filtersProp ??
             (CollectionToolbarFilters && (React.createElement(CollectionToolbarFilters, { inline: 0 }, featureFilters))));
-    }, [filtersProp]);
+    }, [filtersProp, isMobile]);
     let left;
-    if (tabs) {
-        left = (React.createElement(ToolbarItemBox, { removeStartPadding: true, expandable: true, layout: "button" }, tabs));
+    if (isMobile) {
+        if (title && !isSearchFocused) {
+            left = title;
+        }
     }
-    else if (title) {
-        left = title;
+    else {
+        if (tabs) {
+            left = (React.createElement(ToolbarItemBox, { removeStartPadding: true, expandable: true, layout: "button" }, tabs));
+        }
+        else if (title) {
+            left = title;
+        }
     }
     useCollectionToolbarSyncedProps({
         left,
@@ -56,7 +84,7 @@ function _CollectionToolbar(props) {
                 state.toolbarFiltersState?.totalInlineFilters.value !== null &&
                 state.toolbarFiltersState?.totalInlineFilters.value > 0));
     }, [left, viewsToolbarItem, state.toolbarFiltersStateInitialized]);
-    const shouldAddDivider = tableGridSwitchButton && (search || MoreFiltersButton);
+    const shouldAddDivider = tableGridSwitchButton && (searchElement || MoreFiltersButton);
     const analyticsCustomColumnsDiscoverability = state.container.experiments?.get('specs.analytics.CustomColumnsWithLabelAndNewIcon');
     const showCustomColumnsOnTheLeft = analyticsCustomColumnsDiscoverability === 'b' ||
         analyticsCustomColumnsDiscoverability === 'c';
@@ -69,8 +97,8 @@ function _CollectionToolbar(props) {
         React.createElement(TableToolbar.ItemGroup, { position: "start", className: st(classes.left, { expandable: !!tabs }), dataHook: "collection-table-toolbar-filters" }, left ?? (React.createElement(React.Fragment, null,
             viewsToolbarItem && (React.createElement(InitialLoadingConditional, { state: state, loadingElement: React.createElement(CollectionToolbarSkeletonItem, { dataHook: "toolbar-views-skeleton", width: "100px" }) }, viewsToolbarItem)),
             !viewsToolbarItem ? filtersElement : undefined))),
-        React.createElement(TableToolbar.ItemGroup, { position: "end", className: st(classes.right, {}, ...[rendersStart ? undefined : classes.fullWidth]) },
-            React.createElement(CollectionToolbarActionsGroup, { viewsToolbarItem: viewsToolbarItem, filtersElement: filtersElement, MoreFiltersButton: MoreFiltersButton, multiLevelSorting: multiLevelSorting, customColumns: customColumns, exportButton: exportButton, search: search, showCustomColumnsOnTheLeft: showCustomColumnsOnTheLeft, left: left }),
+        React.createElement(TableToolbar.ItemGroup, { position: isMobile && isSearchFocused ? undefined : 'end', className: st(classes.right, {}, ...[rendersStart ? undefined : classes.fullWidth]) },
+            React.createElement(CollectionToolbarActionsGroup, { viewsToolbarItem: viewsToolbarItem, filtersElement: filtersElement, MoreFiltersButton: MoreFiltersButton, multiLevelSorting: multiLevelSorting, customColumns: isMobile ? undefined : customColumns, exportButton: exportButton, search: searchElement, showCustomColumnsOnTheLeft: showCustomColumnsOnTheLeft, left: left }),
             primaryActionButton && (React.createElement(TableToolbar.Item, null, primaryActionButton)),
             moreActions && (React.createElement(TableToolbar.Item, null, addDataHookToMoreActions())),
             secondaryActions && (React.createElement(TableToolbar.Item, null, secondaryActions)),

package/dist/esm/components/CollectionToolbar/CollectionToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionToolbar.js","sourceRoot":"","sources":["../../../../src/components/CollectionToolbar/CollectionToolbar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CollectionToolbar.js","sourceRoot":"","sources":["../../../../src/components/CollectionToolbar/CollectionToolbar.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/CollectionToolbar/CollectionToolbar.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CollectionToolbar3402133796";
+var _namespace_ = "CollectionToolbar2427766201";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CollectionToolbar3402133796__root", "left": "CollectionToolbar3402133796__left", "right": "CollectionToolbar3402133796__right", "fullWidth": "CollectionToolbar3402133796__fullWidth" };
+export var classes = { "root": "CollectionToolbar2427766201__root", "left": "CollectionToolbar2427766201__left", "right": "CollectionToolbar2427766201__right", "fullWidth": "CollectionToolbar2427766201__fullWidth" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CollectionToolbar/SearchOrCustomFilter.js

@@ -1,27 +1,21 @@
 import { Box, TableToolbar } from '@wix/design-system';
-import { CollectionSearch } from '../CollectionSearch';
 import React from 'react';
 import { classes, st } from './SearchOrCustomFilter.st.css.js';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { observer } from 'mobx-react-lite';
+import { useIsMobile } from '../../hooks/useIsMobile';
 function _SearchOrCustomFilter(props) {
     const { search } = props;
     const { toolbar: { responsive }, } = useToolbarCollectionContext();
     const { _nextToShrink, search: searchResponsive, responsiveDisabled, } = responsive;
-    let child;
-    if (search === true) {
-        child = React.createElement(CollectionSearch, { size: "small" });
-    }
-    else {
-        child = search;
-    }
-    if (responsiveDisabled) {
-        return (React.createElement(TableToolbar.Item, { className: st(classes.search) }, child));
+    const isMobile = useIsMobile();
+    if (responsiveDisabled || isMobile) {
+        return (React.createElement(TableToolbar.Item, { className: st(isMobile ? classes.searchMobile : classes.search) }, search));
     }
     const shouldShrink = _nextToShrink._count >= searchResponsive._count &&
         searchResponsive._shouldShrink;
     return (React.createElement(Box, { direction: "horizontal", maxWidth: "240px", minWidth: shouldShrink ? '139px' : '140px' },
-        React.createElement(Box, { width: shouldShrink ? '140px' : '240px' }, child)));
+        React.createElement(Box, { width: shouldShrink ? '140px' : '240px' }, search)));
 }
 export const SearchOrCustomFilter = observer(_SearchOrCustomFilter);
 //# sourceMappingURL=SearchOrCustomFilter.js.map

package/dist/esm/components/CollectionToolbar/SearchOrCustomFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchOrCustomFilter.js","sourceRoot":"","sources":["../../../../src/components/CollectionToolbar/SearchOrCustomFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,kCAAkC,CAAC;AAE/D,OAAO,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAM3C,SAAS,qBAAqB,CAAC,KAAgC;IAC7D,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEzB,MAAM,EACJ,OAAO,EAAE,EAAE,UAAU,EAAE,GACxB,GAAG,2BAA2B,EAAE,CAAC;IAElC,MAAM,EACJ,aAAa,EACb,MAAM,EAAE,gBAAgB,EACxB,kBAAkB,GACnB,GAAG,UAAU,CAAC;IAEf,IAAI,KAAK,CAAC;IAEV,IAAI,MAAM,KAAK,IAAI,EAAE;QACnB,KAAK,GAAG,oBAAC,gBAAgB,IAAC,IAAI,EAAC,OAAO,GAAG,CAAC;KAC3C;SAAM;QACL,KAAK,GAAG,MAAM,CAAC;KAChB;IAED,IAAI,kBAAkB,EAAE;QACtB,OAAO,CACL,oBAAC,YAAY,CAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,IAC7C,KAAK,CACY,CACrB,CAAC;KACH;IAED,MAAM,YAAY,GAChB,aAAa,CAAC,MAAM,IAAI,gBAAgB,CAAC,MAAM;QAC/C,gBAAgB,CAAC,aAAa,CAAC;IAEjC,OAAO,CACL,oBAAC,GAAG,IACF,SAAS,EAAC,YAAY,EACtB,QAAQ,EAAC,OAAO,EAChB,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;QAE1C,oBAAC,GAAG,IAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,IAAG,KAAK,CAAO,CACvD,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,QAAQ,CAAC,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"SearchOrCustomFilter.js","sourceRoot":"","sources":["../../../../src/components/CollectionToolbar/SearchOrCustomFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,kCAAkC,CAAC;AAE/D,OAAO,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAMtD,SAAS,qBAAqB,CAAC,KAAgC;IAC7D,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEzB,MAAM,EACJ,OAAO,EAAE,EAAE,UAAU,EAAE,GACxB,GAAG,2BAA2B,EAAE,CAAC;IAClC,MAAM,EACJ,aAAa,EACb,MAAM,EAAE,gBAAgB,EACxB,kBAAkB,GACnB,GAAG,UAAU,CAAC;IAEf,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,IAAI,kBAAkB,IAAI,QAAQ,EAAE;QAClC,OAAO,CACL,oBAAC,YAAY,CAAC,IAAI,IAChB,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,IAE9D,MAAM,CACW,CACrB,CAAC;KACH;IAED,MAAM,YAAY,GAChB,aAAa,CAAC,MAAM,IAAI,gBAAgB,CAAC,MAAM;QAC/C,gBAAgB,CAAC,aAAa,CAAC;IAEjC,OAAO,CACL,oBAAC,GAAG,IACF,SAAS,EAAC,YAAY,EACtB,QAAQ,EAAC,OAAO,EAChB,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;QAE1C,oBAAC,GAAG,IAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,IAAG,MAAM,CAAO,CACxD,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,QAAQ,CAAC,qBAAqB,CAAC,CAAC"}

package/dist/esm/components/CollectionToolbar/SearchOrCustomFilter.st.css

@@ -3,3 +3,8 @@
   max-width: 240px;
   flex: 1 0;
 }
+
+.searchMobile {
+  width: 100%;
+  justify-content: flex-end;
+}

package/dist/esm/components/CollectionToolbar/SearchOrCustomFilter.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "SearchOrCustomFilter612147629";
+var _namespace_ = "SearchOrCustomFilter151868873";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "SearchOrCustomFilter612147629__root", "search": "SearchOrCustomFilter612147629__search" };
+export var classes = { "root": "SearchOrCustomFilter151868873__root", "search": "SearchOrCustomFilter151868873__search", "searchMobile": "SearchOrCustomFilter151868873__searchMobile" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CollectionToolbar/SearchOrCustomFilter.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchOrCustomFilter.st.css.js","sourceRoot":"","sources":["../../../../src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,+BAA+B,CAAC;AAClD,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,qCAAqC,EAAC,QAAQ,EAAC,uCAAuC,EAAC,CAAC;AACrH,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}
+{"version":3,"file":"SearchOrCustomFilter.st.css.js","sourceRoot":"","sources":["../../../../src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,+BAA+B,CAAC;AAClD,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,qCAAqC,EAAC,QAAQ,EAAC,uCAAuC,EAAC,cAAc,EAAC,6CAA6C,EAAC,CAAC;AAClL,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "AutoCompleteReadonly4102105229";
+var _namespace_ = "AutoCompleteReadonly3019942609";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "AutoCompleteReadonly4102105229__root" };
+export var classes = { "root": "AutoCompleteReadonly3019942609__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CollectionViewsDropdown/ViewsDropdown.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "ViewsDropdown3659202630";
+var _namespace_ = "ViewsDropdown2566353492";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "ViewsDropdown3659202630__root" };
+export var classes = { "root": "ViewsDropdown2566353492__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/DragHandle/DragHandle.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "DragHandle2505483177";
+var _namespace_ = "DragHandle1851905475";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "DragHandle2505483177__root" };
+export var classes = { "root": "DragHandle1851905475__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/EntityPage/EntityPagePlain.js

@@ -2,10 +2,13 @@ import { Page } from '@wix/design-system';
 import React, { useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useEntityPageChild } from '../../hooks';
+import { useIsMobile } from '../../hooks/useIsMobile';
+import { st, classes } from './EntityPagePlain.st.css.js';
 function _EntityPagePlain({ state, children, ...rest }) {
     const [scrollableRef, setScrollableRef] = useState(null);
     const childrenArr = useEntityPageChild(children, scrollableRef);
-    return (React.createElement(Page, { scrollableContentRef: setScrollableRef, ...rest }, childrenArr));
+    const isMobile = useIsMobile();
+    return (React.createElement(Page, { className: st(classes.root, { mobile: isMobile }), minWidth: isMobile ? 0 : undefined, scrollableContentRef: setScrollableRef, ...rest }, childrenArr));
 }
 export const EntityPagePlain = observer(_EntityPagePlain);
 //# sourceMappingURL=EntityPagePlain.js.map

package/dist/esm/components/EntityPage/EntityPagePlain.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityPagePlain.js","sourceRoot":"","sources":["../../../../src/components/EntityPage/EntityPagePlain.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAOjD,SAAS,gBAAgB,CAAyC,EAChE,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACoB;IAC3B,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAC7E,MAAM,WAAW,GAAG,kBAAkB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;IAEhE,OAAO,CACL,oBAAC,IAAI,IAAC,oBAAoB,EAAE,gBAAgB,KAAM,IAAI,IACnD,WAAW,CACP,CACR,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"EntityPagePlain.js","sourceRoot":"","sources":["../../../../src/components/EntityPage/EntityPagePlain.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAK1D,SAAS,gBAAgB,CAAyC,EAChE,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACoB;IAC3B,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAC7E,MAAM,WAAW,GAAG,kBAAkB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;IAChE,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,OAAO,CACL,oBAAC,IAAI,IACH,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EACjD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAClC,oBAAoB,EAAE,gBAAgB,KAClC,IAAI,IAEP,WAAW,CACP,CACR,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC"}

package/dist/esm/components/EntityPage/EntityPagePlain.st.css

@@ -0,0 +1,9 @@
+@property st-global(--wds-page-header-padding-horizontal);
+
+.root {
+  -st-states: mobile;
+}
+
+.root:mobile {
+  --wds-page-header-padding-horizontal: 24px;
+}

package/dist/esm/components/EntityPage/EntityPagePlain.st.css.js

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+var _namespace_ = "EntityPagePlain4024963659";
+var _style_ = classesRuntime.bind(null, _namespace_);
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st = _style_;
+export var namespace = _namespace_;
+export var classes = { "root": "EntityPagePlain4024963659__root" };
+export var keyframes = {};
+export var layers = {};
+export var containers = {};
+export var stVars = {};
+export var vars = { "wds-page-header-padding-horizontal": "--wds-page-header-padding-horizontal" };
+//# sourceMappingURL=EntityPagePlain.st.css.js.map

package/dist/esm/components/EntityPage/EntityPagePlain.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityPagePlain.st.css.js","sourceRoot":"","sources":["../../../../src/components/EntityPage/EntityPagePlain.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,2BAA2B,CAAC;AAC9C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,iCAAiC,EAAC,CAAC;AAChE,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAC,oCAAoC,EAAC,sCAAsC,EAAC,CAAC"}

package/dist/esm/components/Fade/Fade.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "Fade4021757298";
+var _namespace_ = "Fade3865436704";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "Fade4021757298__root" };
+export var classes = { "root": "Fade3865436704__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/FormPage/FormPageActionsBar.js

@@ -4,16 +4,18 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useFormPageContext } from '../../providers';
 import { observer } from 'mobx-react-lite';
 import { ctaKeys } from '@wix/bex-core';
+import { useIsMobile } from '../../hooks/useIsMobile';
 export function _FormPageActionsBar({ moreActions, onCancel, onSave, actionsBarConfig, }) {
     const { translate: t, initTask } = useWixPatternsContainer();
     const state = useFormPageContext();
+    const isMobile = useIsMobile();
     if (!initTask.status.isSuccess) {
         return null;
     }
     return (React.createElement(Box, { gap: "SP2" },
-        moreActions,
-        React.createElement(Button, { priority: "secondary", dataHook: "form-page-cancel-btn", onClick: onCancel }, t('cairo.entityPage.header.cancel.CTA')),
-        React.createElement(Button, { dataHook: "form-page-save-btn", onClick: onSave }, state.submitTask.status.isLoading ? (React.createElement(Loader, { size: "tiny" })) : (t(ctaKeys[actionsBarConfig?.saveCta?.text ?? 'SAVE'])))));
+        isMobile ? undefined : moreActions,
+        React.createElement(Button, { priority: "secondary", fullWidth: isMobile, size: isMobile ? 'small' : 'medium', dataHook: "form-page-cancel-btn", onClick: onCancel }, t('cairo.entityPage.header.cancel.CTA')),
+        React.createElement(Button, { fullWidth: isMobile, size: isMobile ? 'small' : 'medium', dataHook: "form-page-save-btn", onClick: onSave }, state.submitTask.status.isLoading ? (React.createElement(Loader, { size: "tiny" })) : (t(ctaKeys[actionsBarConfig?.saveCta?.text ?? 'SAVE'])))));
 }
 export const FormPageActionsBar = observer(_FormPageActionsBar);
 //# sourceMappingURL=FormPageActionsBar.js.map

package/dist/esm/components/FormPage/FormPageActionsBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormPageActionsBar.js","sourceRoot":"","sources":["../../../../src/components/FormPage/FormPageActionsBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAoB,OAAO,EAAE,MAAM,eAAe,CAAC;AAS1D,MAAM,UAAU,mBAAmB,CAAC,EAClC,WAAW,EACX,QAAQ,EACR,MAAM,EACN,gBAAgB,GACQ;IACxB,MAAM,EAAE,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAC7D,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAC;IAEnC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,SAAS,EAAE;QAC9B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,GAAG,IAAC,GAAG,EAAC,KAAK;QACX,WAAW;QACZ,oBAAC,MAAM,IACL,QAAQ,EAAC,WAAW,EACpB,QAAQ,EAAC,sBAAsB,EAC/B,OAAO,EAAE,QAAQ,IAEhB,CAAC,CAAC,oCAAoC,CAAC,CACjC;QACT,oBAAC,MAAM,IAAC,QAAQ,EAAC,oBAAoB,EAAC,OAAO,EAAE,MAAM,IAClD,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CACnC,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,GAAG,CACvB,CAAC,CAAC,CAAC,CACF,CAAC,CAAC,OAAO,CAAC,gBAAgB,EAAE,OAAO,EAAE,IAAI,IAAI,MAAM,CAAC,CAAC,CACtD,CACM,CACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"FormPageActionsBar.js","sourceRoot":"","sources":["../../../../src/components/FormPage/FormPageActionsBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAoB,OAAO,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAStD,MAAM,UAAU,mBAAmB,CAAC,EAClC,WAAW,EACX,QAAQ,EACR,MAAM,EACN,gBAAgB,GACQ;IACxB,MAAM,EAAE,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAC7D,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAC;IACnC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,SAAS,EAAE;QAC9B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,GAAG,IAAC,GAAG,EAAC,KAAK;QACX,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW;QACnC,oBAAC,MAAM,IACL,QAAQ,EAAC,WAAW,EACpB,SAAS,EAAE,QAAQ,EACnB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EACnC,QAAQ,EAAC,sBAAsB,EAC/B,OAAO,EAAE,QAAQ,IAEhB,CAAC,CAAC,oCAAoC,CAAC,CACjC;QACT,oBAAC,MAAM,IACL,SAAS,EAAE,QAAQ,EACnB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EACnC,QAAQ,EAAC,oBAAoB,EAC7B,OAAO,EAAE,MAAM,IAEd,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CACnC,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,GAAG,CACvB,CAAC,CAAC,CAAC,CACF,CAAC,CAAC,OAAO,CAAC,gBAAgB,EAAE,OAAO,EAAE,IAAI,IAAI,MAAM,CAAC,CAAC,CACtD,CACM,CACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC"}

package/dist/esm/components/FormPageAdditionalContent/FormPageAdditionalContent.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Box, Cell } from '@wix/design-system';
+import { useIsMobile } from '../../hooks/useIsMobile';
 export function FormPageAdditionalContent(props) {
+    const isMobile = useIsMobile();
     const { children, ...rest } = props;
-    return (React.createElement(Cell, { span: 4, ...rest },
+    return (React.createElement(Cell, { span: isMobile ? 12 : 4, ...rest },
         React.createElement(Box, { direction: "vertical", gap: "SP4" }, children)));
 }
 FormPageAdditionalContent.displayName = 'FormPageAdditionalContent';

package/dist/esm/components/FormPageAdditionalContent/FormPageAdditionalContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormPageAdditionalContent.js","sourceRoot":"","sources":["../../../../src/components/FormPageAdditionalContent/FormPageAdditionalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAU/C,MAAM,UAAU,yBAAyB,CACvC,KAAqC;IAErC,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACpC,OAAO,CACL,oBAAC,IAAI,IAAC,IAAI,EAAE,CAAC,KAAM,IAAI;QACrB,oBAAC,GAAG,IAAC,SAAS,EAAC,UAAU,EAAC,GAAG,EAAC,KAAK,IAChC,QAAQ,CACL,CACD,CACR,CAAC;AACJ,CAAC;AAED,yBAAyB,CAAC,WAAW,GAAG,2BAA2B,CAAC"}
+{"version":3,"file":"FormPageAdditionalContent.js","sourceRoot":"","sources":["../../../../src/components/FormPageAdditionalContent/FormPageAdditionalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAUtD,MAAM,UAAU,yBAAyB,CACvC,KAAqC;IAErC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACpC,OAAO,CACL,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAM,IAAI;QACrC,oBAAC,GAAG,IAAC,SAAS,EAAC,UAAU,EAAC,GAAG,EAAC,KAAK,IAChC,QAAQ,CACL,CACD,CACR,CAAC;AACJ,CAAC;AAED,yBAAyB,CAAC,WAAW,GAAG,2BAA2B,CAAC"}

package/dist/esm/components/FormPageMainContent/FormPageMainContent.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Box, Cell } from '@wix/design-system';
+import { useIsMobile } from '../../hooks/useIsMobile';
 export function FormPageMainContent(props) {
     const { children, ...rest } = props;
-    return (React.createElement(Cell, { ...rest },
+    const isMobile = useIsMobile();
+    return (React.createElement(Cell, { span: isMobile ? 12 : undefined, ...rest },
         React.createElement(Box, { direction: "vertical", gap: "SP4" }, children)));
 }
 FormPageMainContent.displayName = 'FormPageMainContent';

package/dist/esm/components/FormPageMainContent/FormPageMainContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormPageMainContent.js","sourceRoot":"","sources":["../../../../src/components/FormPageMainContent/FormPageMainContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAU/C,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACpC,OAAO,CACL,oBAAC,IAAI,OAAK,IAAI;QACZ,oBAAC,GAAG,IAAC,SAAS,EAAC,UAAU,EAAC,GAAG,EAAC,KAAK,IAChC,QAAQ,CACL,CACD,CACR,CAAC;AACJ,CAAC;AAED,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC"}
+{"version":3,"file":"FormPageMainContent.js","sourceRoot":"","sources":["../../../../src/components/FormPageMainContent/FormPageMainContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAUtD,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACpC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,OAAO,CACL,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,KAAM,IAAI;QAC7C,oBAAC,GAAG,IAAC,SAAS,EAAC,UAAU,EAAC,GAAG,EAAC,KAAK,IAChC,QAAQ,CACL,CACD,CACR,CAAC;AACJ,CAAC;AAED,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC"}

package/dist/esm/components/Heading/Heading.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "Heading2354856498";
+var _namespace_ = "Heading1882774573";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "Heading2354856498__root" };
+export var classes = { "root": "Heading1882774573__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/InputOverflow/InputOverflow.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "InputOverflow3335741566";
+var _namespace_ = "InputOverflow2235828534";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "InputOverflow3335741566__root" };
+export var classes = { "root": "InputOverflow2235828534__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/LoadingRow/LoadingRow.st.css.js

@@ -1,13 +1,13 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "LoadingRow1534194502";
+var _namespace_ = "LoadingRow3607542296";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "LoadingRow1534194502__root" };
-export var keyframes = { "gradientSwoosh": "LoadingRow1534194502__gradientSwoosh" };
+export var classes = { "root": "LoadingRow3607542296__root" };
+export var keyframes = { "gradientSwoosh": "LoadingRow3607542296__gradientSwoosh" };
 export var layers = {};
 export var containers = {};
 export var stVars = {};

package/dist/esm/components/MaxHeightText/MaxHeightText.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "MaxHeightText2648108780";
+var _namespace_ = "MaxHeightText1017006677";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "MaxHeightText2648108780__root" };
+export var classes = { "root": "MaxHeightText1017006677__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/MaxLines/MaxLines.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "MaxLines837426918";
+var _namespace_ = "MaxLines1357754376";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "MaxLines837426918__root" };
+export var classes = { "root": "MaxLines1357754376__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/MaxLines/MaxLines.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"MaxLines.st.css.js","sourceRoot":"","sources":["../../../../src/components/MaxLines/MaxLines.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,mBAAmB,CAAC;AACtC,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,yBAAyB,EAAC,CAAC;AACxD,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}
+{"version":3,"file":"MaxLines.st.css.js","sourceRoot":"","sources":["../../../../src/components/MaxLines/MaxLines.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,oBAAoB,CAAC;AACvC,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,0BAA0B,EAAC,CAAC;AACzD,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/MultiBulkActionToolbar/MultiBulkActionToolbar.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "MultiBulkActionToolbar4278063084";
+var _namespace_ = "MultiBulkActionToolbar3159440338";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "MultiBulkActionToolbar4278063084__root" };
+export var classes = { "root": "MultiBulkActionToolbar3159440338__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "NestedTablePlaceholderStatesRow1534067256";
+var _namespace_ = "NestedTablePlaceholderStatesRow1051446419";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "NestedTablePlaceholderStatesRow1534067256__root" };
+export var classes = { "root": "NestedTablePlaceholderStatesRow1051446419__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/NestedTable/NestedTableRow.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "NestedTableRow2329497725";
+var _namespace_ = "NestedTableRow3676145886";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "NestedTableRow2329497725__root", "firstLevel": "NestedTableRow2329497725__firstLevel", "placeholder": "NestedTableRow2329497725__placeholder", "parentHovered": "NestedTableRow2329497725__parentHovered" };
+export var classes = { "root": "NestedTableRow3676145886__root", "firstLevel": "NestedTableRow3676145886__firstLevel", "placeholder": "NestedTableRow3676145886__placeholder", "parentHovered": "NestedTableRow3676145886__parentHovered" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "MultipleDragOverlayEffect13053153";
+var _namespace_ = "MultipleDragOverlayEffect237718440";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "MultipleDragOverlayEffect13053153__root" };
+export var classes = { "root": "MultipleDragOverlayEffect237718440__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultipleDragOverlayEffect.st.css.js","sourceRoot":"","sources":["../../../../src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,mCAAmC,CAAC;AACtD,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,yCAAyC,EAAC,CAAC;AACxE,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}
+{"version":3,"file":"MultipleDragOverlayEffect.st.css.js","sourceRoot":"","sources":["../../../../src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,oCAAoC,CAAC;AACvD,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,0CAA0C,EAAC,CAAC;AACzE,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "NestedTableDragAndDropRow2693329400";
+var _namespace_ = "NestedTableDragAndDropRow2656180038";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "NestedTableDragAndDropRow2693329400__root" };
+export var classes = { "root": "NestedTableDragAndDropRow2656180038__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/PageSubTitle/PageSubTitle.js

@@ -4,6 +4,7 @@ import { useCollectionPageContext, useWixPatternsContainer, } from '@wix/bex-cor
 import { useSelector } from '../../useSelector';
 import { withoutDefaults } from '@wix/bex-core';
 import { cairoPageCtaClicked } from '@wix/bex-core/bi';
+import { useIsMobile } from '../../hooks/useIsMobile';
 /**
  * Renders a page subtitle with an optional learn more button
  * @component
@@ -17,11 +18,12 @@ export const PageSubTitle = ({ text, learnMore }) => {
     const { translate: t, initTask } = useWixPatternsContainer();
     const { bi } = useCollectionPageContext();
     useSelector(() => initTask.status);
+    const isMobile = useIsMobile();
     return (React.createElement(Box, { dataHook: "page-subtitle", display: "inline" },
         text,
         learnMore && (React.createElement(React.Fragment, null,
             React.createElement(Box, { inline: true, marginLeft: "SP1" }),
-            React.createElement(TextButton, { dataHook: "subtitle-learn-more-cta", as: "a", rel: "noopener", target: "_blank", href: learnMore.url, onClick: () => {
+            React.createElement(TextButton, { dataHook: "subtitle-learn-more-cta", as: "a", rel: "noopener", target: "_blank", href: learnMore.url, size: isMobile ? 'small' : 'medium', onClick: () => {
                     bi?.reportBI(withoutDefaults(cairoPageCtaClicked)({
                         location: 'Collection Page Header',
                         ctaType: 'link',