@wix/patterns 1.299.0 → 1.300.0

package/src/components/AppliedFiltersTagList/AppliedFiltersTagListState.tsx

@@ -187,10 +187,13 @@ export class AppliedFiltersTagListState<T, F extends FiltersMap> {
   ) {
     return {
       children: (
-        <FilterTagContent
-          filterProps={filterProps}
-          values={filterValuesGroup}
-        />
+        <FilterTagContent filterProps={filterProps}>
+          {filterValuesGroup
+            .map(({ filter, value }: FilterTagValue<V>) =>
+              filter.itemName(value),
+            )
+            .join(', ')}
+        </FilterTagContent>
       ),
       key: filterProps?.filter.name!,
       filterProps,

package/src/components/AppliedFiltersTagList/FilterTagContent.tsx

@@ -1,13 +1,12 @@
-import React from 'react';
-import { FilterTagValue } from './AppliedFiltersTagListState';
+import React, { ReactNode } from 'react';
 import { FilterProps } from '../../model';
 
 export function FilterTagContent<V>({
   filterProps,
-  values,
+  children,
 }: {
   filterProps?: FilterProps<V>;
-  values: FilterTagValue<V>[];
+  children?: ReactNode;
 }) {
   const filterName =
     filterProps?.toolbarTagProps?.label ??
@@ -18,9 +17,7 @@ export function FilterTagContent<V>({
       {filterName && (
         <span style={{ fontWeight: 530 }}>{`${filterName}: `}</span>
       )}
-      {values
-        .map(({ filter, value }: FilterTagValue<V>) => filter.itemName(value))
-        .join(', ')}
+      {children}
     </>
   );
 }

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse927227220";
+var _namespace_ = "Collapse2752988996";
 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":"Collapse927227220__root","exit":"Collapse927227220__exit"};
+export var classes = {"root":"Collapse2752988996__root","exit":"Collapse2752988996__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_ = "CollectionPage4051539634";
+var _namespace_ = "CollectionPage275142463";
 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":"CollectionPage4051539634__root"};
+export var classes = {"root":"CollectionPage275142463__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTable1041352952";
+var _namespace_ = "CollectionTable645875702";
 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":"CollectionTable1041352952__root"};
+export var classes = {"root":"CollectionTable645875702__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_ = "CollectionToolbar2670806627";
+var _namespace_ = "CollectionToolbar3486302085";
 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":"CollectionToolbar2670806627__root","left":"CollectionToolbar2670806627__left","right":"CollectionToolbar2670806627__right","fullWidth":"CollectionToolbar2670806627__fullWidth"};
+export var classes = {"root":"CollectionToolbar3486302085__root","left":"CollectionToolbar3486302085__left","right":"CollectionToolbar3486302085__right","fullWidth":"CollectionToolbar3486302085__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter2119113276";
+var _namespace_ = "SearchOrCustomFilter3061739824";
 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":"SearchOrCustomFilter2119113276__root","search":"SearchOrCustomFilter2119113276__search","searchMobile":"SearchOrCustomFilter2119113276__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter3061739824__root","search":"SearchOrCustomFilter3061739824__search","searchMobile":"SearchOrCustomFilter3061739824__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbarFilters/CollectionToolbarFilters.tsx

@@ -150,7 +150,10 @@ function _CollectionToolbarFilters(props: CollectionToolbarFiltersProps) {
             toolbarTagProps,
             accordionItemProps,
             renderToolbarTag:
-              renderToolbarTag ?? type.renderPresetToolbarTag?.(container),
+              renderToolbarTag ??
+              type.renderPresetToolbarTag?.(container, {
+                filterProps: filterChildProps,
+              }),
           };
         }),
         {

package/src/components/CollectionToolbarFilters/useFiltersSyncProps.ts

@@ -1,7 +1,7 @@
 import { Children } from 'react';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { FilterElement } from './filterElement';
-import type { renderPresetToolbarTag } from '@wix/bex-core';
+import type { renderPresetToolbarTag } from '../DateRangeFilter/renderPresetToolbarTag';
 
 type FilterChild = FilterElement | undefined | boolean;
 type FilterChildren = FilterChild | FilterChild[];

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly1244923733";
+var _namespace_ = "AutoCompleteReadonly1904272586";
 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":"AutoCompleteReadonly1244923733__root"};
+export var classes = {"root":"AutoCompleteReadonly1904272586__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_ = "ViewsDropdown328358500";
+var _namespace_ = "ViewsDropdown1265254409";
 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":"ViewsDropdown328358500__root"};
+export var classes = {"root":"ViewsDropdown1265254409__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/DateRangeFilter/DateRangeFilter.tsx

@@ -13,10 +13,10 @@ import {
   DefaultDateRangePreset,
   MAP_DATE_PRESET_TO_KEY,
   RangeItem,
-  renderPresetToolbarTag,
 } from '@wix/bex-core';
 import { useDateRangeFilterState } from '../../hooks';
 import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
+import { renderPresetToolbarTag } from './renderPresetToolbarTag';
 
 export interface DateRangeFilterProps
   extends FilterProps<RangeItem<Date>>,

package/src/components/DateRangeFilter/renderPresetToolbarTag.ts

@@ -0,0 +1,64 @@
+import {
+  FilterItem,
+  MAP_DATE_PRESET_TO_KEY,
+  presetToDaysAmount,
+  RangeItem,
+  Translate,
+} from '@wix/bex-core';
+import { createElement } from 'react';
+import { FilterProps } from '../../model';
+import { FilterTagContent } from '../AppliedFiltersTagList/FilterTagContent';
+
+export const renderPresetToolbarTag = (
+  container: {
+    translate: Translate;
+    dateFormatters: {
+      medium: Intl.DateTimeFormat;
+      mediumTime: Intl.DateTimeFormat;
+    };
+  },
+  params: {
+    filterProps: FilterProps<any>;
+  },
+) => {
+  return <V>(filter: FilterItem<V>) => {
+    const { filterProps } = params;
+    const { translate: t, dateFormatters } = container;
+    const { preset } = filter as FilterItem<RangeItem<Date>>;
+    if (!preset || !presetToDaysAmount[preset]) {
+      return {
+        children: createElement(
+          FilterTagContent,
+          { filterProps },
+          getDateRangeLabel(filter as RangeItem<Date>, {
+            dateFormatters,
+          }),
+        ),
+      };
+    }
+    return {
+      children: createElement(
+        FilterTagContent,
+        { filterProps },
+        t(MAP_DATE_PRESET_TO_KEY[preset]),
+      ),
+    };
+  };
+};
+
+const getDateRangeLabel = (
+  item: RangeItem<Date>,
+  {
+    dateFormatters,
+  }: {
+    dateFormatters: {
+      medium: Intl.DateTimeFormat;
+      mediumTime: Intl.DateTimeFormat;
+    };
+  },
+) => {
+  return [item.from, item.to]
+    .filter(Boolean as unknown as (d: Date | null) => d is Date)
+    .map((date) => dateFormatters.mediumTime.format(date))
+    .join(' - ');
+};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle4010270607";
+var _namespace_ = "DragHandle1096016990";
 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":"DragHandle4010270607__root"};
+export var classes = {"root":"DragHandle1096016990__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_ = "EntityPagePlain2079523194";
+var _namespace_ = "EntityPagePlain1062936786";
 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":"EntityPagePlain2079523194__root"};
+export var classes = {"root":"EntityPagePlain1062936786__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_ = "Fade2255177420";
+var _namespace_ = "Fade964856991";
 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":"Fade2255177420__root"};
+export var classes = {"root":"Fade964856991__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_ = "Heading1638966174";
+var _namespace_ = "Heading399993216";
 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":"Heading1638966174__root"};
+export var classes = {"root":"Heading399993216__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_ = "InputOverflow2900630128";
+var _namespace_ = "InputOverflow2161395937";
 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":"InputOverflow2900630128__root"};
+export var classes = {"root":"InputOverflow2161395937__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_ = "LoadingRow2559945235";
+var _namespace_ = "LoadingRow187712777";
 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":"LoadingRow2559945235__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2559945235__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow187712777__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow187712777__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_ = "MaxHeightText3715018248";
+var _namespace_ = "MaxHeightText676620238";
 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":"MaxHeightText3715018248__root"};
+export var classes = {"root":"MaxHeightText676620238__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_ = "MaxLines1884325501";
+var _namespace_ = "MaxLines1573183086";
 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":"MaxLines1884325501__root"};
+export var classes = {"root":"MaxLines1573183086__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_ = "MultiBulkActionToolbar1383912363";
+var _namespace_ = "MultiBulkActionToolbar3157796139";
 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":"MultiBulkActionToolbar1383912363__root"};
+export var classes = {"root":"MultiBulkActionToolbar3157796139__root"};
 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_ = "NestedTablePlaceholderStatesRow613004709";
+var _namespace_ = "NestedTablePlaceholderStatesRow2811655784";
 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":"NestedTablePlaceholderStatesRow613004709__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow2811655784__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_ = "NestedTableRow2976448891";
+var _namespace_ = "NestedTableRow93200331";
 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":"NestedTableRow2976448891__root","firstLevel":"NestedTableRow2976448891__firstLevel","placeholder":"NestedTableRow2976448891__placeholder","parentHovered":"NestedTableRow2976448891__parentHovered"};
+export var classes = {"root":"NestedTableRow93200331__root","firstLevel":"NestedTableRow93200331__firstLevel","placeholder":"NestedTableRow93200331__placeholder","parentHovered":"NestedTableRow93200331__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_ = "MultipleDragOverlayEffect874100797";
+var _namespace_ = "MultipleDragOverlayEffect1498887663";
 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":"MultipleDragOverlayEffect874100797__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1498887663__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_ = "NestedTableDragAndDropRow1698105103";
+var _namespace_ = "NestedTableDragAndDropRow2564206690";
 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":"NestedTableDragAndDropRow1698105103__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2564206690__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_ = "PickerContent3078262274";
+var _namespace_ = "PickerContent2909552611";
 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":"PickerContent3078262274__root"};
+export var classes = {"root":"PickerContent2909552611__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_ = "PickerContentAdditionalStep3902626640";
+var _namespace_ = "PickerContentAdditionalStep2417369187";
 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":"PickerContentAdditionalStep3902626640__root","titles":"PickerContentAdditionalStep3902626640__titles","suffix":"PickerContentAdditionalStep3902626640__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2417369187__root","titles":"PickerContentAdditionalStep2417369187__titles","suffix":"PickerContentAdditionalStep2417369187__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_ = "PickerTableListItem1977648805";
+var _namespace_ = "PickerTableListItem3972443579";
 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":"PickerTableListItem1977648805__root"};
+export var classes = {"root":"PickerTableListItem3972443579__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_ = "ScrollableContent1510175626";
+var _namespace_ = "ScrollableContent2892148242";
 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":"ScrollableContent1510175626__root"};
+export var classes = {"root":"ScrollableContent2892148242__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_ = "SkeletonCard786624872";
+var _namespace_ = "SkeletonCard693890713";
 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":"SkeletonCard786624872__root","headerLoading":"SkeletonCard786624872__headerLoading"};
+export var classes = {"root":"SkeletonCard693890713__root","headerLoading":"SkeletonCard693890713__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};