@wix/patterns 1.337.0 → 1.339.0

package/src/components/AppliedFiltersTagList/AppliedFiltersTagList.tsx

@@ -32,15 +32,7 @@ function _AppliedFiltersTagList<T, F extends FiltersMap>(
         const tag = tagsMap.get(tagId);
         if (tag != null) {
           const { values, filter, filterProps } = tag;
-          state._reportFilterToggleBiOnNextResult(filter, values);
-
-          filter.remove(values, {
-            emitEvents: ['change', 'refresh'],
-          });
-
-          values.forEach((value) => {
-            filterProps?.onAppliedFilterTagRemove?.(value);
-          });
+          state.onTagRemove(filter, values, filterProps?.onAppliedFilterTagRemove);
         }
       }}
       size="small"

package/src/components/AppliedFiltersTagList/AppliedFiltersTagListState.tsx

@@ -150,7 +150,7 @@ export class AppliedFiltersTagListState<T, F extends FiltersMap> {
 
   onClearButtonClick = action(() => {
     const { table } = this;
-    const { collection } = table;
+    const { collection, toolbarFiltersState } = table;
     const {
       query: { nonPersistentFilters },
     } = collection;
@@ -160,8 +160,33 @@ export class AppliedFiltersTagListState<T, F extends FiltersMap> {
       .forEach((filter) => {
         filter?.reset({ emitEvents: ['change', 'refresh'] });
       });
+
+    toolbarFiltersState?.moreFiltersButtonRef?.current?.focus();
   });
 
+  onTagRemove<V>(
+    filter: Filter<V>,
+    values: FilterItem<V>[],
+    onAppliedFilterTagRemove?: (value: FilterItem<V>) => void,
+  ) {
+    const { table, tags } = this;
+    const isLastTag = tags.length === 1;
+
+    this._reportFilterToggleBiOnNextResult(filter, values);
+
+    filter.remove(values, {
+      emitEvents: ['change', 'refresh'],
+    });
+
+    values.forEach((value) => {
+      onAppliedFilterTagRemove?.(value);
+    });
+
+    if (isLastTag) {
+      table.toolbarFiltersState?.moreFiltersButtonRef?.current?.focus();
+    }
+  }
+
   private generateNonAggregatedTag<V>(
     filterValuesGroup: FilterTagValue<V>[],
     filterProps?: FilterProps<V>,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer1127640947";
+var _namespace_ = "CardContainer3079601548";
 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":"CardContainer1127640947__root"};
+export var classes = {"root":"CardContainer3079601548__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_ = "Collapse4173233543";
+var _namespace_ = "Collapse224372759";
 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":"Collapse4173233543__root","exit":"Collapse4173233543__exit"};
+export var classes = {"root":"Collapse224372759__root","exit":"Collapse224372759__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_ = "CollectionPage1884614354";
+var _namespace_ = "CollectionPage1814068000";
 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":"CollectionPage1884614354__root"};
+export var classes = {"root":"CollectionPage1814068000__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_ = "CollectionTable830039945";
+var _namespace_ = "CollectionTable2415796293";
 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":"CollectionTable830039945__root"};
+export var classes = {"root":"CollectionTable2415796293__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,21 +1,36 @@
 .root {
-  -st-states: views, mobile;
+  -st-states: views, mobile, responsiveMode(enum(title, views, tabs, disabled));
 }
 
 .left {
-  -st-states: expandable;
+  -st-states: expandable, title;
   min-width: 0;
 }
 
-.root:views .left {
-  flex-shrink: 1;
-  flex-grow: 0;
-}
-
 .left:expandable {
   flex: auto;
 }
 
+.left:title > * {
+  width: 100%;
+}
+
+.root:responsiveMode(title) .left {
+  flex: 1 100;
+  min-width: 50px;
+}
+
+.root:responsiveMode(tabs) .left,
+.root:responsiveMode(tabs) .left:expandable {
+  flex: 1 100 auto;
+  min-width: 140px;
+}
+
+.root:responsiveMode(tabs) .left > * {
+  flex-shrink: 1;
+  min-width: 0;
+}
+
 .root .right {
   justify-content: flex-end !important;
   flex-grow: 1;
@@ -30,6 +45,12 @@
   flex-basis: 0;
 }
 
+.root:responsiveMode(tabs) .right,
+.root:responsiveMode(title) .right {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
 .root .right.fullWidth {
   margin-inline-start: 0 !important;
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar2067268736";
+var _namespace_ = "CollectionToolbar1811998541";
 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":"CollectionToolbar2067268736__root","left":"CollectionToolbar2067268736__left","right":"CollectionToolbar2067268736__right","fullWidth":"CollectionToolbar2067268736__fullWidth"};
+export var classes = {"root":"CollectionToolbar1811998541__root","left":"CollectionToolbar1811998541__left","right":"CollectionToolbar1811998541__right","fullWidth":"CollectionToolbar1811998541__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/CollectionToolbar.tsx

@@ -27,12 +27,14 @@ import {
 import { useCollectionToolbarSyncedProps } from './useCollectionToolbarSyncedProps';
 import { useIsCollectionToolbarExists } from './useIsCollectionToolbarExists';
 import { CollectionToolbarActionsToolbarItemsGroup } from './CollectionToolbarActionsToolbarItemsGroup';
-import { CollectionToolbarActionsGroupResponsiveLayout } from './CollectionToolbarActionsGroupResponsiveLayout';
 import { MoreActions } from '../MoreActions';
 import { CollectionToolbarSkeletonItem } from './CollectionToolbarSkeletonItem';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { isValidElement } from '../isValidElement';
 import { CollectionSearch } from '../CollectionSearch';
+import { CollectionToolbarLeftGroup } from './CollectionToolbarLeftGroup';
+import { CollectionToolbarActionsGroupResponsiveLayout } from './CollectionToolbarActionsGroupResponsiveLayout';
+import { getToolbarMode } from './toolbarModeUtils';
 
 export interface CollectionToolbarProps<T, F extends FiltersMap> {
   state: ToolbarCollectionState<T, F>;
@@ -213,31 +215,30 @@ function _CollectionToolbar<T, F extends FiltersMap>(
       ? CollectionToolbarActionsToolbarItemsGroup
       : CollectionToolbarActionsGroupResponsiveLayout;
 
+  const responsiveMode = getToolbarMode({
+    isDisabled: responsive.responsiveDisabled,
+    hasTabs: !!tabs,
+    hasTitle: !!left && !viewsToolbarItem,
+    hasViews: !!viewsToolbarItem,
+  });
+
   const toolbarElement = (
     <>
       <TableToolbar.ItemGroup
         position="start"
-        className={st(classes.left, { expandable: !!tabs })}
+        className={st(classes.left, {
+          expandable: !!tabs,
+          title: responsiveMode === 'title',
+        })}
         dataHook="collection-table-toolbar-filters"
       >
-        {left ?? (
-          <>
-            {viewsToolbarItem && (
-              <InitialLoadingConditional
-                state={state}
-                loadingElement={
-                  <CollectionToolbarSkeletonItem
-                    dataHook="toolbar-views-skeleton"
-                    width="100px"
-                  />
-                }
-              >
-                {viewsToolbarItem}
-              </InitialLoadingConditional>
-            )}
-            {!viewsToolbarItem ? filtersElement : undefined}
-          </>
-        )}
+        <CollectionToolbarLeftGroup
+          state={state}
+          left={left}
+          viewsToolbarItem={viewsToolbarItem}
+          filtersElement={filtersElement}
+          mode={responsiveMode}
+        />
       </TableToolbar.ItemGroup>
 
       <TableToolbar.ItemGroup
@@ -259,6 +260,7 @@ function _CollectionToolbar<T, F extends FiltersMap>(
           search={searchElement}
           showCustomColumnsOnTheLeft={showCustomColumnsOnTheLeft}
           left={left}
+          hasTabs={!!tabs}
         />
 
         {primaryActionButton && (
@@ -316,6 +318,7 @@ function _CollectionToolbar<T, F extends FiltersMap>(
               className={st(classes.root, {
                 views: !responsive.responsiveDisabled,
                 mobile: isMobile,
+                responsiveMode,
               })}
               dataHook="collection-table-toolbar"
             >

package/src/components/CollectionToolbar/CollectionToolbarActionsGroupProps.ts

@@ -13,4 +13,5 @@ export interface CollectionToolbarActionsGroupProps {
   exportButton?: ReactElement;
   search?: ToolbarBaseProps['search'];
   showCustomColumnsOnTheLeft?: boolean;
+  hasTabs?: boolean;
 }

package/src/components/CollectionToolbar/CollectionToolbarLeftGroup.tsx

@@ -0,0 +1,71 @@
+import React, { ReactElement, useEffect, useRef, useState } from 'react';
+import { Box } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { FiltersMap } from '@wix/bex-core';
+import { ToolbarCollectionState } from '../../state';
+import { InitialLoadingConditional } from '../InitialLoadingConditional';
+import { CollectionToolbarSkeletonItem } from './CollectionToolbarSkeletonItem';
+import { ToolbarLeftGroupState } from '../../state/Toolbar/ToolbarLeftGroupState';
+import { ToolbarMode } from './toolbarModeUtils';
+
+export interface CollectionToolbarLeftGroupProps<T, F extends FiltersMap> {
+  state: ToolbarCollectionState<T, F>;
+  left?: ReactElement;
+  viewsToolbarItem?: ReactElement;
+  filtersElement?: ReactElement;
+  mode: ToolbarMode;
+}
+
+function _CollectionToolbarLeftGroup<T, F extends FiltersMap>(
+  props: CollectionToolbarLeftGroupProps<T, F>,
+) {
+  const { state, left, viewsToolbarItem, filtersElement, mode } = props;
+
+  const {
+    toolbar: { responsive },
+  } = state;
+
+  const isLeftElementMode = mode === 'tabs' || mode === 'title';
+  const container = useRef<HTMLDivElement | null>(null);
+
+  const [leftGroupState] = useState(
+    () =>
+      new ToolbarLeftGroupState({
+        responsive,
+        mode,
+        minWidth: mode === 'title' ? 50 : 140,
+        getTabsState: () => state.tabs,
+      }),
+  );
+
+  useEffect(() => leftGroupState.init(container.current?.parentElement), []);
+
+  const content = left ?? (
+    <>
+      {viewsToolbarItem && (
+        <InitialLoadingConditional
+          state={state}
+          loadingElement={
+            <CollectionToolbarSkeletonItem
+              dataHook="toolbar-views-skeleton"
+              width="100px"
+            />
+          }
+        >
+          {viewsToolbarItem}
+        </InitialLoadingConditional>
+      )}
+      {!viewsToolbarItem ? filtersElement : undefined}
+    </>
+  );
+
+  if (isLeftElementMode && !responsive.responsiveDisabled) {
+    return (
+      <Box ref={(element) => (container.current = element)}>{content}</Box>
+    );
+  }
+
+  return <>{content}</>;
+}
+
+export const CollectionToolbarLeftGroup = observer(_CollectionToolbarLeftGroup);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter3266924804";
+var _namespace_ = "SearchOrCustomFilter2883258947";
 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":"SearchOrCustomFilter3266924804__root","search":"SearchOrCustomFilter3266924804__search","searchMobile":"SearchOrCustomFilter3266924804__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter2883258947__root","search":"SearchOrCustomFilter2883258947__search","searchMobile":"SearchOrCustomFilter2883258947__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.tsx

@@ -21,11 +21,7 @@ function _SearchOrCustomFilter(props: SearchOrCustomFilterProps) {
   const {
     toolbar: { responsive },
   } = useToolbarCollectionContext();
-  const {
-    _nextToShrink,
-    search: searchResponsive,
-    responsiveDisabled,
-  } = responsive;
+  const { search: searchResponsive, responsiveDisabled } = responsive;
 
   const isMobile = useIsMobile();
 
@@ -96,16 +92,10 @@ function _SearchOrCustomFilter(props: SearchOrCustomFilterProps) {
     );
   }
 
-  const shouldShrink =
-    _nextToShrink._count >= searchResponsive._count &&
-    searchResponsive._shouldShrink;
+  const shouldShrink = searchResponsive._shouldShrink;
 
   return (
-    <Box
-      direction="horizontal"
-      maxWidth="240px"
-      minWidth={shouldShrink ? '139px' : '140px'}
-    >
+    <Box direction="horizontal" width={shouldShrink ? '140px' : '240px'}>
       <Box width={shouldShrink ? '140px' : '240px'}>{search}</Box>
     </Box>
   );

package/src/components/CollectionToolbar/toolbarModeUtils.ts

@@ -0,0 +1,27 @@
+export type ToolbarMode = 'title' | 'views' | 'tabs' | 'disabled';
+
+export function getToolbarMode({
+  isDisabled,
+  hasTabs,
+  hasTitle,
+  hasViews,
+}: {
+  isDisabled: boolean;
+  hasViews: boolean;
+  hasTabs: boolean;
+  hasTitle: boolean;
+}): ToolbarMode {
+  if (isDisabled) {
+    return 'disabled';
+  }
+  if (hasTabs) {
+    return 'tabs';
+  }
+  if (hasViews) {
+    return 'views';
+  }
+  if (hasTitle) {
+    return 'title';
+  }
+  return 'disabled';
+}

package/src/components/CollectionToolbar/useCollectionToolbarSyncedProps.ts

@@ -20,7 +20,7 @@ export function useCollectionToolbarSyncedProps<T, F extends FiltersMap>(
 
   const syncedProps = useSyncProps(
     {
-      useResponsiveLayout: !left && !!viewsToolbarItem,
+      useResponsiveLayout: !!viewsToolbarItem || !!left,
     },
     {
       useResponsiveLayout: observable.ref,

package/src/components/CollectionToolbarFilters/CollectionToolbarFiltersState.ts

@@ -2,8 +2,9 @@ import { ToolbarCollectionState } from '../../state';
 import { FiltersMap, ValueBox, withoutDefaults } from '@wix/bex-core';
 import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
 import { action, computed, makeObservable } from 'mobx';
-import { ReactNode } from 'react';
+import { ReactNode, RefObject, createRef } from 'react';
 import { FilterElement } from './filterElement';
+import { Button } from '@wix/design-system';
 
 export interface CollectionToolbarFiltersStateParams<T, F extends FiltersMap> {
   readonly toolbar: ToolbarCollectionState<T, F>;
@@ -15,6 +16,8 @@ export class CollectionToolbarFiltersState<T, F extends FiltersMap> {
   readonly panelTitle = new ValueBox<ReactNode>(undefined);
   readonly totalInlineFilters = new ValueBox<number | null>(null);
   readonly filterElements = new ValueBox<FilterElement[]>([]);
+  readonly moreFiltersButtonRef: RefObject<Button> =
+    createRef<Button>();
 
   onClearButtonClicked?: () => unknown;
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly1578371289";
+var _namespace_ = "AutoCompleteReadonly1467974692";
 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":"AutoCompleteReadonly1578371289__root"};
+export var classes = {"root":"AutoCompleteReadonly1467974692__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_ = "ViewsDropdown445946096";
+var _namespace_ = "ViewsDropdown988678590";
 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":"ViewsDropdown445946096__root"};
+export var classes = {"root":"ViewsDropdown988678590__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_ = "DragHandle3732314417";
+var _namespace_ = "DragHandle3343873060";
 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":"DragHandle3732314417__root"};
+export var classes = {"root":"DragHandle3343873060__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_ = "EntityPagePlain1938592713";
+var _namespace_ = "EntityPagePlain2149433821";
 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":"EntityPagePlain1938592713__root"};
+export var classes = {"root":"EntityPagePlain2149433821__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_ = "Fade1959325389";
+var _namespace_ = "Fade818575166";
 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":"Fade1959325389__root"};
+export var classes = {"root":"Fade818575166__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_ = "Heading1774965373";
+var _namespace_ = "Heading1796052903";
 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":"Heading1774965373__root"};
+export var classes = {"root":"Heading1796052903__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_ = "InputOverflow869134323";
+var _namespace_ = "InputOverflow3502787266";
 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":"InputOverflow869134323__root"};
+export var classes = {"root":"InputOverflow3502787266__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_ = "LoadingRow51442686";
+var _namespace_ = "LoadingRow352518099";
 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":"LoadingRow51442686__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow51442686__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow352518099__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow352518099__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_ = "MaxHeightText2323143137";
+var _namespace_ = "MaxHeightText1726886362";
 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":"MaxHeightText2323143137__root"};
+export var classes = {"root":"MaxHeightText1726886362__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};