@wix/patterns 1.319.0 → 1.321.0

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

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

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

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

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

@@ -93,7 +93,7 @@ export function GridUniDriver(base: UniDriver, body: UniDriver) {
 
     const popoverMenu = PopoverMenuUniDriver(popoverBase, body);
 
-    const trigger = popoverBase.$$('[data-hook="popover-trigger"]').get(0);
+    const trigger = popoverBase.$$('[data-hook="popover-icon-button-trigger"]').get(0);
     const iconButton = IconButtonUniDriver(trigger, base);
 
     return {

package/src/components/Grid/useGridItemActions.tsx

@@ -99,7 +99,7 @@ export function useGridItemActions<T, F extends FiltersMap>(
         dataHook="popover"
         triggerElement={({ toggle, close }) => (
           <IconButton
-            dataHook="popover-trigger"
+            dataHook="popover-icon-button-trigger"
             onClick={(e) => {
               e.stopPropagation();
               toggle();

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow3303753817";
+var _namespace_ = "LoadingRow2450818251";
 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":"LoadingRow3303753817__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3303753817__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow2450818251__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow2450818251__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_ = "MaxHeightText2883793613";
+var _namespace_ = "MaxHeightText1534981817";
 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":"MaxHeightText2883793613__root"};
+export var classes = {"root":"MaxHeightText1534981817__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_ = "MaxLines798299606";
+var _namespace_ = "MaxLines3822062704";
 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":"MaxLines798299606__root"};
+export var classes = {"root":"MaxLines3822062704__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar1570597090";
+var _namespace_ = "MultiBulkActionToolbar3643902721";
 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":"MultiBulkActionToolbar1570597090__root","leftGroupWrapper":"MultiBulkActionToolbar1570597090__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1570597090__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1570597090__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar3643902721__root","leftGroupWrapper":"MultiBulkActionToolbar3643902721__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3643902721__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3643902721__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_ = "NestedTablePlaceholderStatesRow2455751975";
+var _namespace_ = "NestedTablePlaceholderStatesRow1713416065";
 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":"NestedTablePlaceholderStatesRow2455751975__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1713416065__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_ = "NestedTableRow3389528325";
+var _namespace_ = "NestedTableRow1651621559";
 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":"NestedTableRow3389528325__root","firstLevel":"NestedTableRow3389528325__firstLevel","placeholder":"NestedTableRow3389528325__placeholder","parentHovered":"NestedTableRow3389528325__parentHovered"};
+export var classes = {"root":"NestedTableRow1651621559__root","firstLevel":"NestedTableRow1651621559__firstLevel","placeholder":"NestedTableRow1651621559__placeholder","parentHovered":"NestedTableRow1651621559__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_ = "MultipleDragOverlayEffect4213382554";
+var _namespace_ = "MultipleDragOverlayEffect1438812587";
 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":"MultipleDragOverlayEffect4213382554__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1438812587__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_ = "NestedTableDragAndDropRow3013387861";
+var _namespace_ = "NestedTableDragAndDropRow1836350526";
 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":"NestedTableDragAndDropRow3013387861__root"};
+export var classes = {"root":"NestedTableDragAndDropRow1836350526__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_ = "PickerContent3697521998";
+var _namespace_ = "PickerContent2095471890";
 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":"PickerContent3697521998__root"};
+export var classes = {"root":"PickerContent2095471890__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContent.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType, ReactNode } from 'react';
+import React, { ComponentType } from 'react';
 import { FiltersMap, OptionalFiltersMap } from '@wix/bex-core';
 import { UsePickerContentParams } from '../../hooks/usePickerContent';
 import { PickerContentState } from '../../state';
@@ -17,9 +17,6 @@ export interface PickerContentComponentBaseProps<T, F extends FiltersMap>
    * Additional props to pass to [SelectorList](https://www.docs.wixdesignsystem.com/?path=/story/components-lists--selectorlist), i.e `imageSize`, `imageShape` etc.
    */
   selectorListProps?: Partial<SelectorListContentProps>;
-
-  /** Show a warning at the top of the list when not all available items are currently showed */
-  hiddenItemsWarningText?: ReactNode;
 }
 
 export interface PickerContentProps<T, F extends FiltersMap>
@@ -38,7 +35,6 @@ export type PickerContentComponentProps<
   | 'renderItem'
   | 'pickerContentState'
   | 'renderEmptyState'
-  | 'hiddenItemsWarningText'
   | 'renderPickerContent'
 >;
 
@@ -63,7 +59,6 @@ export function PickerContent<T, F extends FiltersMap>(
             state={state}
             multiple={fromMultipleSelectionToBoolean(props.multiple)}
             hasAdditionalStep={props.hasAdditionalStep}
-            hiddenItemsWarningText={props.hiddenItemsWarningText}
             renderItem={renderItem}
           />
         )}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep1178376272";
+var _namespace_ = "PickerContentAdditionalStep2339802600";
 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":"PickerContentAdditionalStep1178376272__root","titles":"PickerContentAdditionalStep1178376272__titles","suffix":"PickerContentAdditionalStep1178376272__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2339802600__root","titles":"PickerContentAdditionalStep2339802600__titles","suffix":"PickerContentAdditionalStep2339802600__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContentItemsSelection.tsx

@@ -155,11 +155,7 @@ function _PickerContentItemsSelection<T, F extends FiltersMap = FiltersMap>(
 
   const { picker } = state;
 
-  const { strictFiltersOnly, collection } = picker;
-
-  const {
-    result: { isEmptyAndNotFetching: isEmptyAfterStrictFilters },
-  } = strictFiltersOnly;
+  const { collection } = picker;
 
   const { bulkSelect, translate: t, showInitialLoader } = collection;
 
@@ -278,7 +274,7 @@ function _PickerContentItemsSelection<T, F extends FiltersMap = FiltersMap>(
       {...rest}
     >
       <CollectionProvider value={picker.collection}>
-        {((!isEmptyAfterStrictFilters && resolvedSearchElement) ||
+        {(resolvedSearchElement ||
           filterComponent ||
           renderCustomNotification ||
           showMaxSelection) && (

package/src/components/PickerContent/PickerContentV2.tsx

@@ -21,7 +21,6 @@ export function PickerContentV2<T, F extends FiltersMap>(
           <PickerListContent
             {...props.selectorListProps}
             state={state.picker}
-            hiddenItemsWarningText={props.hiddenItemsWarningText}
             multiple={fromMultipleSelectionToBoolean(props.multiple)}
             renderItem={(keyedItem, index) => (
               <PickerTableListItem

package/src/components/PickerListContent/PickerListContent.tsx

@@ -1,14 +1,8 @@
-import React, {
-  HTMLAttributes,
-  ReactElement,
-  ReactNode,
-  useEffect,
-  useRef,
-} from 'react';
+import React, { HTMLAttributes, ReactElement, useEffect, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import { FiltersMap, KeyedItem, PickerState } from '@wix/bex-core';
 import { useCollectionReachBottom } from '../useCollectionReachBottom';
-import { Box, FloatingNotification } from '@wix/design-system';
+import { Box } from '@wix/design-system';
 import { InfiniteScrollLoader } from '../InfiniteScrollLoader/InfiniteScrollLoader';
 import { PickerListItemProps } from '../PickerListItemProps';
 import { TransitionGroup } from 'react-transition-group';
@@ -22,7 +16,6 @@ export interface PickerListContentProps<T, F extends FiltersMap>
     keyedItem: KeyedItem<T>,
     index: number,
   ) => ReactElement<PickerListItemProps>;
-  hiddenItemsWarningText?: ReactNode;
   spacing?: 30 | 94;
   multiple?: boolean;
 }
@@ -30,16 +23,9 @@ export interface PickerListContentProps<T, F extends FiltersMap>
 function _PickerListContent<T, F extends FiltersMap = FiltersMap>(
   props: PickerListContentProps<T, F>,
 ) {
-  const {
-    state,
-    renderItem,
-    hiddenItemsWarningText,
-    spacing = 30,
-    multiple,
-    ...rest
-  } = props;
+  const { state, renderItem, spacing = 30, multiple, ...rest } = props;
 
-  const { collection, someHidden } = state;
+  const { collection } = state;
   const {
     result: { keyedItems },
   } = collection;
@@ -55,18 +41,6 @@ function _PickerListContent<T, F extends FiltersMap = FiltersMap>(
     state.updateIsScrollTop(isScrollTop);
   }, [isScrollTop]);
 
-  const notification = someHidden && hiddenItemsWarningText && (
-    <Box padding={`0 ${spacing}px 18px ${spacing}px`}>
-      <FloatingNotification
-        dataHook="floating-notification"
-        width="100%"
-        showCloseButton={false}
-        type="warning"
-        text={hiddenItemsWarningText}
-      />
-    </Box>
-  );
-
   const listItems: ReactElement[] = keyedItems.map((keyedItem, index) => {
     const { type: PickerListItem, props: pickerListItemProps } = renderItem(
       keyedItem,
@@ -95,8 +69,6 @@ function _PickerListContent<T, F extends FiltersMap = FiltersMap>(
         ...rest.style,
       }}
     >
-      {notification}
-
       <TransitionGroup>
         {listItems.flatMap((child, index, { length }) => {
           return (

package/src/components/PickerSelectorListContent/PickerSelectorListContent.tsx

@@ -1,12 +1,10 @@
 import {
-  Box,
-  FloatingNotification,
   SelectorListContent,
   SelectorListContentProps,
   SelectorListItem,
 } from '@wix/design-system';
-import React, { ReactNode, useEffect, useMemo } from 'react';
-import { FiltersMap, KeyedItem, addEventListener } from '@wix/bex-core';
+import React, { useEffect, useMemo } from 'react';
+import { addEventListener, FiltersMap, KeyedItem } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
 import { PickerContentState } from '../../state';
 
@@ -19,7 +17,6 @@ export interface PickerSelectorListContentProps<T, F extends FiltersMap>
   state: PickerContentState<T, F>;
   renderItem?: (item: T, index: number) => Partial<SelectorListItem>;
   hasAdditionalStep?: (props: { item: T }) => boolean;
-  hiddenItemsWarningText?: ReactNode;
   spacing?: 30 | 94;
 }
 
@@ -31,13 +28,12 @@ function _PickerSelectorListContent<T, F extends FiltersMap>(
     renderItem,
     multiple,
     spacing = 30,
-    hiddenItemsWarningText,
     hasAdditionalStep,
     ...rest
   } = props;
 
   const { picker } = state;
-  const { collection, someHidden } = picker;
+  const { collection } = picker;
   const {
     bulkSelect,
     result: { keyedItems },
@@ -46,12 +42,6 @@ function _PickerSelectorListContent<T, F extends FiltersMap>(
 
   const { checkedSet, indeterminateSet } = bulkSelect;
 
-  useEffect(() => {
-    if (hiddenItemsWarningText) {
-      picker.setFloatingNotificationHeight();
-    }
-  }, [hiddenItemsWarningText]);
-
   useEffect(() => {
     const disposers = [
       addEventListener(
@@ -88,18 +78,6 @@ function _PickerSelectorListContent<T, F extends FiltersMap>(
     [keyedItems, renderItem],
   );
 
-  const notification = someHidden && hiddenItemsWarningText && (
-    <Box padding={`0 ${spacing}px 18px ${spacing}px`}>
-      <FloatingNotification
-        dataHook="floating-notification"
-        width="100%"
-        showCloseButton={false}
-        type="warning"
-        text={hiddenItemsWarningText}
-      />
-    </Box>
-  );
-
   return (
     <SelectorListContent
       items={items}
@@ -109,7 +87,6 @@ function _PickerSelectorListContent<T, F extends FiltersMap>(
       }}
       searchValue=""
       loadMore={collection.fetchNextPageIfNeeded}
-      topScrollableContent={notification}
       checkIsSelected={(item) => {
         const { keyedItem } = item as KeyedItemSelectorListItem<T>;
         return checkedSet.has(keyedItem.key);

package/src/components/PickerStandalone/PickerStandalone.tsx

@@ -5,7 +5,7 @@ import {
   PickerStandaloneLayoutProps,
 } from '../PickerStandaloneLayout';
 import { Picker, PickerProps } from '../Picker';
-import React, { ReactElement, ReactNode, useEffect, useState } from 'react';
+import React, { ReactElement, useEffect, useState } from 'react';
 import { SelectorListContentProps, TextButtonProps } from '@wix/design-system';
 import { Splash } from '../Splash';
 import { CollectionProvider } from '../CollectionContext';
@@ -44,9 +44,6 @@ export interface PickerStandaloneProps<T, F extends FiltersMap>
 
   renderError: PickerProps<T, F>['renderError'];
 
-  /** Show a warning at the top of the list when not all available items are currently showed */
-  hiddenItemsWarningText?: ReactNode;
-
   /** Picker title if not provided via URL query parameter */
   defaultTitle?: string;
 
@@ -94,7 +91,6 @@ export function _PickerStandalone<T, F extends FiltersMap = FiltersMap>(
     renderItem,
     renderEmptyState,
     renderError,
-    hiddenItemsWarningText,
     selectorListProps,
     dataHook,
     height,
@@ -159,7 +155,6 @@ export function _PickerStandalone<T, F extends FiltersMap = FiltersMap>(
                 <PickerListContent
                   {...selectorListProps}
                   state={picker}
-                  hiddenItemsWarningText={hiddenItemsWarningText}
                   spacing={94}
                   renderItem={(keyedItem, index) => (
                     <PickerStandaloneTableListItem

package/src/components/PickerStandaloneLayout/PickerStandaloneLayoutHeader.tsx

@@ -28,11 +28,7 @@ function _PickerStandaloneLayoutHeader<T, F extends FiltersMap = FiltersMap>(
 
   const { picker, logoType, isMobileView, isDuringSearch } = state;
 
-  const { collection, strictFiltersOnly, isScrollTop } = picker;
-
-  const {
-    result: { isEmptyAndNotFetching: isEmptyAfterStrictFilters },
-  } = strictFiltersOnly;
+  const { collection, isScrollTop } = picker;
 
   const searchRef = useRef<HTMLInputElement>();
 
@@ -136,7 +132,7 @@ function _PickerStandaloneLayoutHeader<T, F extends FiltersMap = FiltersMap>(
           paddingBottom: 'SP3',
           gap: 'SP3',
         },
-        titleDivider: !hideSearch && !isEmptyAfterStrictFilters && (
+        titleDivider: !hideSearch && (
           <Box
             display="flex"
             direction="vertical"

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard600805724";
+var _namespace_ = "SkeletonCard2728214207";
 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":"SkeletonCard600805724__root","headerLoading":"SkeletonCard600805724__headerLoading"};
+export var classes = {"root":"SkeletonCard2728214207__root","headerLoading":"SkeletonCard2728214207__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_ = "SlidingModal3213389435";
+var _namespace_ = "SlidingModal1348364695";
 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":"SlidingModal3213389435__root"};
+export var classes = {"root":"SlidingModal1348364695__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};