@wix/patterns 1.321.0 → 1.322.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse274480059";
+var _namespace_ = "Collapse2707841607";
 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":"Collapse274480059__root","exit":"Collapse274480059__exit"};
+export var classes = {"root":"Collapse2707841607__root","exit":"Collapse2707841607__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

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

package/src/components/CollectionSearch.tsx

@@ -9,7 +9,6 @@ export interface CollectionSearchProps extends Partial<SearchProps> {
   onSearchChange?: (value: string) => unknown;
   onSearchClick?: () => unknown;
   onSearchBlur?: (value: string) => unknown;
-  onExpandChange?: (isExpanded: boolean) => unknown;
   visibility?: CSSProperties['visibility'];
 }
 
@@ -20,7 +19,6 @@ export const CollectionSearch = observer(function CollectionSearch<
   onSearchChange,
   onSearchClick,
   onSearchBlur,
-  onExpandChange,
   visibility,
   expandable,
   ...rest
@@ -33,15 +31,8 @@ export const CollectionSearch = observer(function CollectionSearch<
 
   const isMobile = useIsMobile();
   const [isSearchExpanded, setIsSearchExpanded] = useState(!!search.value);
-  const searchInputRef = useRef<Search>(null);
 
-  const updateExpandedState = useCallback(
-    (isExpanded: boolean) => {
-      setIsSearchExpanded(isExpanded);
-      onExpandChange?.(isExpanded);
-    },
-    [onExpandChange],
-  );
+  const searchInputRef = useRef<Search>(null);
 
   const handleCancel = useCallback(() => {
     collection.clearSearch();
@@ -49,10 +40,9 @@ export const CollectionSearch = observer(function CollectionSearch<
 
     if (searchInputRef.current) {
       searchInputRef.current.blur();
+      setIsSearchExpanded(false);
     }
-
-    updateExpandedState(false);
-  }, [collection, onSearchChange, updateExpandedState]);
+  }, [collection, onSearchChange]);
 
   const showCancelButton = isMobile && isSearchExpanded;
 
@@ -74,15 +64,14 @@ export const CollectionSearch = observer(function CollectionSearch<
       expandable={expandable}
       expandDirection={isMobile ? 'left' : undefined}
       placeholder={t('cairo.searchPlaceholder', { defaultValue: '' })}
-      onInputClicked={() => {
-        updateExpandedState(true);
-        onSearchClick?.();
-      }}
       textOverflow="ellipsis"
+      onFocus={() => {
+        setIsSearchExpanded(true);
+      }}
       onBlur={(e) => {
         const value = e.target.value;
         if (!value) {
-          updateExpandedState(false);
+          setIsSearchExpanded(false);
         }
         onSearchBlur?.(value);
       }}

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar3036910620";
+var _namespace_ = "CollectionToolbar54365146";
 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":"CollectionToolbar3036910620__root","left":"CollectionToolbar3036910620__left","right":"CollectionToolbar3036910620__right","fullWidth":"CollectionToolbar3036910620__fullWidth"};
+export var classes = {"root":"CollectionToolbar54365146__root","left":"CollectionToolbar54365146__left","right":"CollectionToolbar54365146__right","fullWidth":"CollectionToolbar54365146__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/CollectionToolbar.tsx

@@ -1,4 +1,5 @@
 import React, {
+  cloneElement,
   FunctionComponent,
   ReactElement,
   useEffect,
@@ -105,7 +106,7 @@ function _CollectionToolbar<T, F extends FiltersMap>(
   };
 
   const searchElement = isPanelLayout ? undefined : isValidElement(search) ? (
-    React.cloneElement(search as CollectionSearchElement, {
+    cloneElement(search as CollectionSearchElement, {
       expandable:
         searchIsExpandable ??
         (search as CollectionSearchElement).props.expandable,

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

@@ -7,15 +7,14 @@
 .searchMobile {
   -st-states: expandable, expanded;
   justify-content: flex-end;
+  position: absolute;
+  right: 18px;
 }
 
 .searchMobile:not(:expandable) {
-  width: 100%;
+  left: 18px;
 }
 
 .searchMobile:expandable:expanded {
-  position: absolute;
-  right: 18px;
   left: 18px;
 }
-

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter3542072153";
+var _namespace_ = "SearchOrCustomFilter1560324690";
 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":"SearchOrCustomFilter3542072153__root","search":"SearchOrCustomFilter3542072153__search","searchMobile":"SearchOrCustomFilter3542072153__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1560324690__root","search":"SearchOrCustomFilter1560324690__search","searchMobile":"SearchOrCustomFilter1560324690__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.tsx

@@ -1,5 +1,5 @@
 import { Box, TableToolbar } from '@wix/design-system';
-import React, { useMemo } from 'react';
+import React, { cloneElement, Fragment, isValidElement, useMemo } from 'react';
 import { classes, st } from './SearchOrCustomFilter.st.css.js';
 import { ToolbarBaseProps } from '../ToolbarCollection';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
@@ -31,31 +31,67 @@ function _SearchOrCustomFilter(props: SearchOrCustomFilterProps) {
 
   const isSearchExpanded = state._searchExpanded;
 
-  const onSearchExpandChange = (expanded: boolean) => {
-    runInAction(() => {
-      state._searchExpanded = expanded;
-    });
-  };
-
-  const [search, isExpandable] = useMemo(() => {
-    if (!React.isValidElement(_search)) {
-      return [_search, false];
+  const { search, isExpandable } = useMemo(() => {
+    if (!isValidElement(_search)) {
+      return {
+        search: _search,
+        isExpandable: false,
+      };
     }
-    const element = React.cloneElement(_search as CollectionSearchElement, {
-      onExpandChange: onSearchExpandChange,
+    const element = cloneElement(_search as CollectionSearchElement, {
+      onExpandTransitionStart: (collapsed?: boolean) => {
+        runInAction(() => {
+          if (!collapsed) {
+            state._searchExpanded = true;
+          }
+        });
+      },
+      onExpandTransitionEnd: (collapsed?: boolean) => {
+        runInAction(() => {
+          if (collapsed) {
+            state._searchExpanded = false;
+          }
+        });
+      },
     });
-    return [element, element.props.expandable];
-  }, [_search, onSearchExpandChange]);
+    return {
+      search: element,
+      isExpandable: element.props.expandable,
+    };
+  }, [_search]);
 
   if (responsiveDisabled || isMobile) {
+    let child = search;
+
+    if (isMobile) {
+      child = (
+        <Fragment>
+          {isMobile && isValidElement(_search) && (
+            <Box visibility="hidden">
+              {/* render extra hidden search for measurement as the actual search is positioned absolutely */}
+              {cloneElement(_search as CollectionSearchElement, {
+                dataHook: `collection-search-mobile-measurement`,
+                // bypass stateful behavior on mobile for measurement
+                value: '',
+                onChange: () => {},
+              })}
+            </Box>
+          )}
+          <Box
+            className={st(classes.searchMobile, {
+              expandable: isExpandable,
+              expanded: isSearchExpanded,
+            })}
+          >
+            {search}
+          </Box>
+        </Fragment>
+      );
+    }
+
     return (
-      <TableToolbar.Item
-        className={st(isMobile ? classes.searchMobile : classes.search, {
-          expandable: isExpandable,
-          expanded: isSearchExpanded,
-        })}
-      >
-        {search}
+      <TableToolbar.Item className={st(isMobile ? undefined : classes.search)}>
+        {child}
       </TableToolbar.Item>
     );
   }

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

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

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

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

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading2321278140";
+var _namespace_ = "Heading2862719035";
 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":"Heading2321278140__root"};
+export var classes = {"root":"Heading2862719035__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_ = "InputOverflow341534247";
+var _namespace_ = "InputOverflow575606197";
 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":"InputOverflow341534247__root"};
+export var classes = {"root":"InputOverflow575606197__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_ = "LoadingRow2450818251";
+var _namespace_ = "LoadingRow1978011329";
 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":"LoadingRow2450818251__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2450818251__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1978011329__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1978011329__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_ = "MaxHeightText1534981817";
+var _namespace_ = "MaxHeightText3073310878";
 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":"MaxHeightText1534981817__root"};
+export var classes = {"root":"MaxHeightText3073310878__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_ = "MaxLines3822062704";
+var _namespace_ = "MaxLines3577512410";
 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":"MaxLines3822062704__root"};
+export var classes = {"root":"MaxLines3577512410__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_ = "MultiBulkActionToolbar3643902721";
+var _namespace_ = "MultiBulkActionToolbar719948023";
 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":"MultiBulkActionToolbar3643902721__root","leftGroupWrapper":"MultiBulkActionToolbar3643902721__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3643902721__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3643902721__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar719948023__root","leftGroupWrapper":"MultiBulkActionToolbar719948023__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar719948023__selectedCountItem","selectedCountText":"MultiBulkActionToolbar719948023__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_ = "NestedTablePlaceholderStatesRow1713416065";
+var _namespace_ = "NestedTablePlaceholderStatesRow3564216652";
 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":"NestedTablePlaceholderStatesRow1713416065__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow3564216652__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_ = "NestedTableRow1651621559";
+var _namespace_ = "NestedTableRow444394540";
 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":"NestedTableRow1651621559__root","firstLevel":"NestedTableRow1651621559__firstLevel","placeholder":"NestedTableRow1651621559__placeholder","parentHovered":"NestedTableRow1651621559__parentHovered"};
+export var classes = {"root":"NestedTableRow444394540__root","firstLevel":"NestedTableRow444394540__firstLevel","placeholder":"NestedTableRow444394540__placeholder","parentHovered":"NestedTableRow444394540__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_ = "MultipleDragOverlayEffect1438812587";
+var _namespace_ = "MultipleDragOverlayEffect2651584198";
 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":"MultipleDragOverlayEffect1438812587__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2651584198__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_ = "NestedTableDragAndDropRow1836350526";
+var _namespace_ = "NestedTableDragAndDropRow2434494815";
 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":"NestedTableDragAndDropRow1836350526__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2434494815__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_ = "PickerContent2095471890";
+var _namespace_ = "PickerContent603656923";
 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":"PickerContent2095471890__root"};
+export var classes = {"root":"PickerContent603656923__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_ = "PickerContentAdditionalStep2339802600";
+var _namespace_ = "PickerContentAdditionalStep2352911284";
 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":"PickerContentAdditionalStep2339802600__root","titles":"PickerContentAdditionalStep2339802600__titles","suffix":"PickerContentAdditionalStep2339802600__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2352911284__root","titles":"PickerContentAdditionalStep2352911284__titles","suffix":"PickerContentAdditionalStep2352911284__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_ = "PickerTableListItem3790055251";
+var _namespace_ = "PickerTableListItem2083694027";
 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":"PickerTableListItem3790055251__root"};
+export var classes = {"root":"PickerTableListItem2083694027__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_ = "ScrollableContent2106769415";
+var _namespace_ = "ScrollableContent1926770345";
 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":"ScrollableContent2106769415__root"};
+export var classes = {"root":"ScrollableContent1926770345__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};