@wix/patterns 1.296.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_ = "CardContainer1393187604";
+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":"CardContainer1393187604__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_ = "Collapse2836442632";
+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":"Collapse2836442632__root","exit":"Collapse2836442632__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_ = "CollectionPage3106655869";
+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":"CollectionPage3106655869__root"};
+export var classes = {"root":"CollectionPage275142463__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionSearch.tsx

@@ -1,13 +1,15 @@
 import { observer } from 'mobx-react-lite';
-import { Search, SearchProps } from '@wix/design-system';
-import React, { CSSProperties } from 'react';
+import { Box, Search, SearchProps, TextButton } from '@wix/design-system';
+import React, { CSSProperties, useState, useRef, useCallback } from 'react';
 import { FiltersMap } from '@wix/bex-core';
 import { useCollectionContext } from '@wix/bex-core/react';
+import { useIsMobile } from '../hooks/useIsMobile';
 
 export interface CollectionSearchProps extends Partial<SearchProps> {
   onSearchChange?: (value: string) => unknown;
   onSearchClick?: () => unknown;
   onSearchBlur?: (value: string) => unknown;
+  onExpandChange?: (isExpanded: boolean) => unknown;
   visibility?: CSSProperties['visibility'];
 }
 
@@ -18,6 +20,7 @@ export const CollectionSearch = observer(function CollectionSearch<
   onSearchChange,
   onSearchClick,
   onSearchBlur,
+  onExpandChange,
   visibility,
   expandable,
   ...rest
@@ -28,7 +31,32 @@ export const CollectionSearch = observer(function CollectionSearch<
     translate: t,
   } = collection;
 
-  return (
+  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 handleCancel = useCallback(() => {
+    collection.clearSearch();
+    onSearchChange?.('');
+
+    if (searchInputRef.current) {
+      searchInputRef.current.blur();
+    }
+
+    updateExpandedState(false);
+  }, [collection, onSearchChange, updateExpandedState]);
+
+  const showCancelButton = isMobile && isSearchExpanded;
+
+  const searchElement = (
     <Search
       dataHook="collection-search"
       onChange={(e) => {
@@ -36,6 +64,7 @@ export const CollectionSearch = observer(function CollectionSearch<
         collection.search(e.target.value, { clearResult: true });
         onSearchChange?.(value);
       }}
+      ref={searchInputRef}
       value={search.value}
       onClear={() => {
         const value = '';
@@ -43,14 +72,40 @@ export const CollectionSearch = observer(function CollectionSearch<
         onSearchChange?.(value);
       }}
       expandable={expandable}
+      expandDirection={isMobile ? 'left' : undefined}
       placeholder={t('cairo.searchPlaceholder', { defaultValue: '' })}
-      onInputClicked={() => onSearchClick?.()}
+      onInputClicked={() => {
+        updateExpandedState(true);
+        onSearchClick?.();
+      }}
       textOverflow="ellipsis"
       onBlur={(e) => {
         const value = e.target.value;
+        if (!value) {
+          updateExpandedState(false);
+        }
         onSearchBlur?.(value);
       }}
       {...rest}
     />
   );
+
+  if (isMobile && expandable) {
+    return (
+      <Box width="100%" gap="SP2" verticalAlign="middle">
+        {searchElement}
+        {showCancelButton && (
+          <TextButton
+            dataHook="collection-search-cancel"
+            onClick={handleCancel}
+            size="small"
+          >
+            {t('cairo.cancel.button')}
+          </TextButton>
+        )}
+      </Box>
+    );
+  }
+
+  return searchElement;
 });

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

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

package/src/components/CollectionTable/CollectionTable.tsx

@@ -192,8 +192,6 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
 
   const state = tableState.toolbar;
 
-  const showSelection = showSelectionProp ?? bulkActionToolbar != null;
-
   const horizontalScroll =
     horizontalScrollProp ??
     state.container.internalExperiments?.enabled(
@@ -210,6 +208,10 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
 
   const isMobile = useIsMobile();
 
+  const showSelection = isMobile
+    ? bulkActionToolbar != null
+    : showSelectionProp ?? bulkActionToolbar != null;
+
   useTableCollectionSyncProps({
     ...props,
     dataExtension,

package/src/components/CollectionTable/CollectionTableWSRTable.tsx

@@ -242,7 +242,7 @@ function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
           showSelection,
           stickySelectionColumn,
         })}
-        showSelection={!isMobile && showSelection}
+        showSelection={showSelection}
         selectedIds={bulk.selectedIds}
         onSelectionStarted={state.toolbar.onSelectionStarted}
         onSelectionChanged={

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar1030837190";
+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":"CollectionToolbar1030837190__root","left":"CollectionToolbar1030837190__left","right":"CollectionToolbar1030837190__right","fullWidth":"CollectionToolbar1030837190__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/CollectionToolbar.uni.driver.ts

@@ -109,6 +109,9 @@ export const CollectionToolbarUniDriver = (
   const getMultiLevelSortingPanel = () =>
     MultiLevelSortingPanelUniDriver(body, body);
 
+  const getSearchCancelButton = () =>
+    TextButtonUniDriver(base.$('[data-hook="collection-search-cancel"]'), body);
+
   return {
     ...toolbar,
     getSearch: () => searchDriver,
@@ -128,6 +131,10 @@ export const CollectionToolbarUniDriver = (
     searchInputExists: searchDriver.inputDriver.exists,
     /** Clicks clear button of the search input */
     clickClearSearchText: searchDriver.inputDriver.clickClear,
+    /** Indicates whether the search cancel button exists */
+    searchCancelButtonExists: () => getSearchCancelButton().exists(),
+    /** Clicks the cancel button of the search */
+    clickSearchCancelButton: () => getSearchCancelButton().click(),
     isToolbarWithFilters: () => isToolbarWithFilters(),
     skeletonExists: () => base.$('[data-hook="toolbar-skeleton"]').exists(),
     viewsSkeletonExists: () =>

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

@@ -5,6 +5,18 @@
 }
 
 .searchMobile {
-  width: 100%;
+  -st-states: expandable, expanded;
   justify-content: flex-end;
+  position: absolute;
+  left: 18px;
+  right: 18px;
 }
+
+.searchMobile:expandable {
+  left: unset;
+}
+
+.searchMobile:expandable:expanded {
+  left: 18px;
+}
+

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter662362649";
+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":"SearchOrCustomFilter662362649__root","search":"SearchOrCustomFilter662362649__search","searchMobile":"SearchOrCustomFilter662362649__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/CollectionToolbar/SearchOrCustomFilter.tsx

@@ -1,17 +1,23 @@
 import { Box, TableToolbar } from '@wix/design-system';
-import React from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import { classes, st } from './SearchOrCustomFilter.st.css.js';
 import { ToolbarBaseProps } from '../ToolbarCollection';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { observer } from 'mobx-react-lite';
 import { useIsMobile } from '../../hooks/useIsMobile';
+import { CollectionSearchElement } from '../assertComponentType.js';
 
 export interface SearchOrCustomFilterProps {
   search: ToolbarBaseProps['search'];
 }
 
 function _SearchOrCustomFilter(props: SearchOrCustomFilterProps) {
-  const { search } = props;
+  const { search: _search } = props;
+  const [isSearchExpanded, setIsSearchExpanded] = useState(false);
+
+  const handleExpandChange = useCallback((isExpanded: boolean) => {
+    setIsSearchExpanded(isExpanded);
+  }, []);
 
   const {
     toolbar: { responsive },
@@ -24,10 +30,23 @@ function _SearchOrCustomFilter(props: SearchOrCustomFilterProps) {
 
   const isMobile = useIsMobile();
 
+  const [search, isExpandable] = useMemo(() => {
+    if (!React.isValidElement(_search)) {
+      return [_search, false];
+    }
+    const element = React.cloneElement(_search as CollectionSearchElement, {
+      onExpandChange: handleExpandChange,
+    });
+    return [element, element.props.expandable];
+  }, [_search, handleExpandChange]);
+
   if (responsiveDisabled || isMobile) {
     return (
       <TableToolbar.Item
-        className={st(isMobile ? classes.searchMobile : classes.search)}
+        className={st(isMobile ? classes.searchMobile : classes.search, {
+          expandable: isExpandable,
+          expanded: isSearchExpanded,
+        })}
       >
         {search}
       </TableToolbar.Item>

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_ = "AutoCompleteReadonly854460757";
+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":"AutoCompleteReadonly854460757__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_ = "ViewsDropdown3647177959";
+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":"ViewsDropdown3647177959__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_ = "DragHandle2176931867";
+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":"DragHandle2176931867__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_ = "EntityPagePlain2066693229";
+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":"EntityPagePlain2066693229__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_ = "Fade1216184679";
+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":"Fade1216184679__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_ = "Heading1882191569";
+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":"Heading1882191569__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_ = "InputOverflow3088080369";
+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":"InputOverflow3088080369__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_ = "LoadingRow2859302015";
+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":"LoadingRow2859302015__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2859302015__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_ = "MaxHeightText2086308881";
+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":"MaxHeightText2086308881__root"};
+export var classes = {"root":"MaxHeightText676620238__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};