@wix/patterns 1.413.0 → 1.414.0

package/src/components/FiltersPanel/FiltersPanel.tsx

@@ -1,4 +1,10 @@
-import { Accordion, SidePanel, SidePanelProps, WixStyleReactDefaultsOverrideProvider } from '@wix/design-system';
+import {
+  Accordion,
+  Box,
+  SidePanel,
+  SidePanelProps,
+  WixStyleReactDefaultsOverrideProvider,
+} from '@wix/design-system';
 import React, { useState } from 'react';
 import { FiltersMap } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
@@ -6,11 +12,15 @@ import { useBuildAccordionItems } from '../../hooks/useBuildAccordionItems';
 import { FiltersPanelFooter } from './FiltersPanelFooter';
 import { FilterRenderingContextProvider } from '../FilterRenderingContext';
 import { FiltersPanelState } from './FiltersPanelState';
+import { FiltersPanelSearch } from './FiltersPanelSearch';
+import { FiltersPanelSearchNoResults } from './FiltersPanelSearchNoResults';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useRafRender } from '../../hooks/useRafRender';
 import { CollectionToolbarFiltersState } from '../CollectionToolbarFilters/CollectionToolbarFiltersState';
 import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
 
+const FILTER_SEARCH_THRESHOLD = 7;
+
 export interface FiltersPanelProps<T, F extends FiltersMap>
   extends Partial<SidePanelProps> {
   state: CollectionToolbarFiltersState<T, F>;
@@ -26,8 +36,6 @@ function _FiltersPanel<T, F extends FiltersMap>(
     totalInlineFilters: { value: totalInlineFilters },
   } = state;
 
-  const accordionItems = useBuildAccordionItems(state);
-
   const entered = useRafRender();
 
   const { translate: t } = useWixPatternsContainer();
@@ -39,6 +47,17 @@ function _FiltersPanel<T, F extends FiltersMap>(
       }),
   );
 
+  const showSearch = state.panelFilterElements.length > FILTER_SEARCH_THRESHOLD;
+
+  const accordionItems = useBuildAccordionItems(
+    state,
+    showSearch ? filtersPanelState.searchValue : '',
+  );
+
+  const hasActiveSearch =
+    showSearch && filtersPanelState.searchValue.trim().length > 0;
+  const noResults = hasActiveSearch && accordionItems.length === 0;
+
   const [filterRenderingContext] = useState(() => ({
     location: 'panel' as const,
   }));
@@ -75,19 +94,29 @@ function _FiltersPanel<T, F extends FiltersMap>(
               })
             : undefined)
         }
-      />
+      >
+        {showSearch && (
+          <Box padding="0 SP2 SP2 SP2">
+            <FiltersPanelSearch state={filtersPanelState} />
+          </Box>
+        )}
+      </SidePanel.Header>
 
       <div
         data-hook="filters-panel-scroll-container"
         style={{ overflowY: 'auto' }}
       >
-        <Accordion
-          dataHook="filters-panel-accordion"
-          skin="light"
-          hideShadow
-          multiple
-          items={accordionItems}
-        />
+        {noResults ? (
+          <FiltersPanelSearchNoResults state={filtersPanelState} />
+        ) : (
+          <Accordion
+            dataHook="filters-panel-accordion"
+            skin="light"
+            hideShadow
+            multiple
+            items={accordionItems}
+          />
+        )}
       </div>
       <SidePanel.Footer noPadding>
         <FiltersPanelFooter

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

@@ -10,6 +10,7 @@ import {
   InputWithOptionsUniDriver,
   MessageModalLayoutUniDriver,
   MultiSelectUniDriver,
+  SearchUniDriver,
   SidePanelUniDriver,
   TextButtonUniDriver,
   TextUniDriver,
@@ -260,6 +261,18 @@ export const FiltersPanelUniDriver = (base: UniDriver, body: UniDriver) => {
     return accordionBase.$$(':scope > div').count();
   };
 
+  const filterSearchBase = base.$('[data-hook="filters-panel-search"]');
+  const filterSearch = () => SearchUniDriver(filterSearchBase, body);
+  const noResultsBase = base.$('[data-hook="filters-panel-search-no-results"]');
+  const noResultsTitle = base.$(
+    '[data-hook="filters-panel-search-no-results-title"]',
+  );
+  const clearSearchButton = () =>
+    TextButtonUniDriver(
+      base.$('[data-hook="filters-panel-search-clear-button"]'),
+      body,
+    );
+
   return {
     isOpen: slidingModal.isOpen,
     clickCloseButton: async () => {
@@ -344,7 +357,9 @@ export const FiltersPanelUniDriver = (base: UniDriver, body: UniDriver) => {
 
       const getOperatorDropdown = () =>
         DropdownBaseUniDriver(
-          getOperatorPicker().$('[data-hook="operator-picker-operator-dropdown"]'),
+          getOperatorPicker().$(
+            '[data-hook="operator-picker-operator-dropdown"]',
+          ),
           body,
         );
 
@@ -399,5 +414,14 @@ export const FiltersPanelUniDriver = (base: UniDriver, body: UniDriver) => {
         .$$(`[data-hook="accordion-item-title-${filterName}"]`)
         .get(index),
     _getInlineCheckboxFilter: getInlineCheckboxFilter,
+
+    isFilterSearchVisible: () => filterSearchBase.exists(),
+    enterFilterSearch: (term: string) =>
+      filterSearch().inputDriver.enterText(term),
+    clearFilterSearchInput: () => filterSearch().inputDriver.clearText(),
+    getFilterSearchValue: () => filterSearch().inputDriver.getText(),
+    isNoFiltersMatchVisible: () => noResultsBase.exists(),
+    getNoFiltersMatchText: () => TextUniDriver(noResultsTitle, body).getText(),
+    clickClearSearchButton: () => clearSearchButton().click(),
   };
 };

package/src/components/FiltersPanel/FiltersPanelSearch.tsx

@@ -0,0 +1,29 @@
+import { Search } from '@wix/design-system';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { FiltersMap } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { FiltersPanelState } from './FiltersPanelState';
+
+export interface FiltersPanelSearchProps<T, F extends FiltersMap> {
+  state: FiltersPanelState<T, F>;
+}
+
+function _FiltersPanelSearch<T, F extends FiltersMap>({
+  state,
+}: FiltersPanelSearchProps<T, F>) {
+  const { translate: t } = useWixPatternsContainer();
+
+  return (
+    <Search
+      dataHook="filters-panel-search"
+      size="small"
+      value={state.searchValue}
+      onChange={(e) => state.setSearchValue(e.target.value)}
+      onClear={() => state.clearSearch()}
+      placeholder={t('cairo.filtersPanel.search.placeholder')}
+    />
+  );
+}
+
+export const FiltersPanelSearch = observer(_FiltersPanelSearch);

package/src/components/FiltersPanel/FiltersPanelSearchNoResults.tsx

@@ -0,0 +1,48 @@
+import { Box, Text, TextButton } from '@wix/design-system';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { FiltersMap } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { FiltersPanelState } from './FiltersPanelState';
+
+export interface FiltersPanelSearchNoResultsProps<T, F extends FiltersMap> {
+  state: FiltersPanelState<T, F>;
+}
+
+function _FiltersPanelSearchNoResults<T, F extends FiltersMap>({
+  state,
+}: FiltersPanelSearchNoResultsProps<T, F>) {
+  const { translate: t } = useWixPatternsContainer();
+
+  return (
+    <Box
+      dataHook="filters-panel-search-no-results"
+      direction="vertical"
+      align="center"
+      verticalAlign="middle"
+      gap="SP2"
+      padding="SP6 SP3"
+    >
+      <Text
+        dataHook="filters-panel-search-no-results-title"
+        size="small"
+        secondary
+      >
+        {t('cairo.filtersPanel.search.noResults.title', {
+          term: state.searchValue.trim(),
+        })}
+      </Text>
+      <TextButton
+        dataHook="filters-panel-search-clear-button"
+        size="small"
+        onClick={() => state.clearSearch()}
+      >
+        {t('cairo.filtersPanel.search.clearButton')}
+      </TextButton>
+    </Box>
+  );
+}
+
+export const FiltersPanelSearchNoResults = observer(
+  _FiltersPanelSearchNoResults,
+);

package/src/components/FiltersPanel/FiltersPanelState.ts

@@ -1,7 +1,7 @@
 import { ToolbarCollectionState } from '../../state';
 import { FiltersMap, withoutDefaults } from '@wix/bex-core';
 import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
-import { action } from 'mobx';
+import { action, makeObservable, observable } from 'mobx';
 
 export interface FiltersPanelStateParams<T, F extends FiltersMap> {
   readonly toolbar: ToolbarCollectionState<T, F>;
@@ -10,8 +10,24 @@ export interface FiltersPanelStateParams<T, F extends FiltersMap> {
 export class FiltersPanelState<T, F extends FiltersMap> {
   readonly toolbar;
 
+  searchValue = '';
+
   constructor(params: FiltersPanelStateParams<T, F>) {
     this.toolbar = params.toolbar;
+
+    makeObservable(this, {
+      searchValue: observable.ref,
+      setSearchValue: action.bound,
+      clearSearch: action.bound,
+    });
+  }
+
+  setSearchValue(value: string) {
+    this.searchValue = value;
+  }
+
+  clearSearch() {
+    this.searchValue = '';
   }
 
   onCloseButtonClick = action(async () => {
@@ -23,6 +39,8 @@ export class FiltersPanelState<T, F extends FiltersMap> {
       return;
     }
 
+    this.clearSearch();
+
     panels.closeSidePanel();
     reportBi(
       withoutDefaults(cairoFiltersPanelUsed)({

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

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

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload3520625931";
+var _namespace_ = "ImportStepUpload3468394352";
 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":"ImportStepUpload3520625931__root","fileUpload":"ImportStepUpload3520625931__fileUpload"};
+export var classes = {"root":"ImportStepUpload3468394352__root","fileUpload":"ImportStepUpload3468394352__fileUpload"};
 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_ = "InputOverflow1024375257";
+var _namespace_ = "InputOverflow2442740308";
 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":"InputOverflow1024375257__root"};
+export var classes = {"root":"InputOverflow2442740308__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_ = "LoadingRow3948357212";
+var _namespace_ = "LoadingRow4002301247";
 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":"LoadingRow3948357212__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3948357212__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow4002301247__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow4002301247__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_ = "MaxHeightText1626901953";
+var _namespace_ = "MaxHeightText72133003";
 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":"MaxHeightText1626901953__root"};
+export var classes = {"root":"MaxHeightText72133003__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_ = "MaxLines2316702761";
+var _namespace_ = "MaxLines818580089";
 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":"MaxLines2316702761__root"};
+export var classes = {"root":"MaxLines818580089__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_ = "MultiBulkActionToolbar1490296512";
+var _namespace_ = "MultiBulkActionToolbar1438861077";
 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":"MultiBulkActionToolbar1490296512__root","leftGroupWrapper":"MultiBulkActionToolbar1490296512__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1490296512__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1490296512__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar1438861077__root","leftGroupWrapper":"MultiBulkActionToolbar1438861077__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1438861077__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1438861077__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_ = "NestedTablePlaceholderStatesRow2496254971";
+var _namespace_ = "NestedTablePlaceholderStatesRow1958190618";
 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":"NestedTablePlaceholderStatesRow2496254971__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1958190618__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_ = "NestedTableRow2721334238";
+var _namespace_ = "NestedTableRow2071601668";
 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":"NestedTableRow2721334238__root","firstLevel":"NestedTableRow2721334238__firstLevel","placeholder":"NestedTableRow2721334238__placeholder","parentHovered":"NestedTableRow2721334238__parentHovered"};
+export var classes = {"root":"NestedTableRow2071601668__root","firstLevel":"NestedTableRow2071601668__firstLevel","placeholder":"NestedTableRow2071601668__placeholder","parentHovered":"NestedTableRow2071601668__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_ = "MultipleDragOverlayEffect3361943102";
+var _namespace_ = "MultipleDragOverlayEffect4076075877";
 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":"MultipleDragOverlayEffect3361943102__root"};
+export var classes = {"root":"MultipleDragOverlayEffect4076075877__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_ = "NestedTableDragAndDropRow358505650";
+var _namespace_ = "NestedTableDragAndDropRow533081746";
 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":"NestedTableDragAndDropRow358505650__root"};
+export var classes = {"root":"NestedTableDragAndDropRow533081746__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_ = "PickerContent3044108310";
+var _namespace_ = "PickerContent4022431999";
 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":"PickerContent3044108310__root"};
+export var classes = {"root":"PickerContent4022431999__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_ = "PickerContentAdditionalStep4168801244";
+var _namespace_ = "PickerContentAdditionalStep3654182521";
 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":"PickerContentAdditionalStep4168801244__root","titles":"PickerContentAdditionalStep4168801244__titles","suffix":"PickerContentAdditionalStep4168801244__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep3654182521__root","titles":"PickerContentAdditionalStep3654182521__titles","suffix":"PickerContentAdditionalStep3654182521__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_ = "PickerTableListItem1824403770";
+var _namespace_ = "PickerTableListItem245239186";
 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":"PickerTableListItem1824403770__root"};
+export var classes = {"root":"PickerTableListItem245239186__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_ = "ScrollableContent3179610547";
+var _namespace_ = "ScrollableContent3940092606";
 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":"ScrollableContent3179610547__root"};
+export var classes = {"root":"ScrollableContent3940092606__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_ = "SkeletonCard88447587";
+var _namespace_ = "SkeletonCard1844477528";
 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":"SkeletonCard88447587__root","headerLoading":"SkeletonCard88447587__headerLoading"};
+export var classes = {"root":"SkeletonCard1844477528__root","headerLoading":"SkeletonCard1844477528__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_ = "SlidingModal47715628";
+var _namespace_ = "SlidingModal2005462282";
 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":"SlidingModal47715628__root"};
+export var classes = {"root":"SlidingModal2005462282__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter4178710274";
+var _namespace_ = "TabsFilter1096638734";
 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":"TabsFilter4178710274__root","title":"TabsFilter4178710274__title"};
+export var classes = {"root":"TabsFilter1096638734__root","title":"TabsFilter1096638734__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal762691912";
+var _namespace_ = "ManageTagsModal3389533797";
 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":"ManageTagsModal762691912__root"};
+export var classes = {"root":"ManageTagsModal3389533797__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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