@wix/patterns 1.337.0 → 1.339.0

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

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

package/src/components/MoreFiltersCTA/MoreFiltersCTA.tsx

@@ -10,6 +10,7 @@ const _MoreFiltersCTA = () => {
   const {
     toolbar: { responsive },
     container: { translate: t },
+    toolbarFiltersState,
   } = state;
 
   return (
@@ -18,12 +19,13 @@ const _MoreFiltersCTA = () => {
       count={state.collection.query.nonPersistentCustomFiltersCount}
     >
       <ResponsiveButton
+        ref={toolbarFiltersState?.moreFiltersButtonRef}
         state={responsive.filters}
         shouldShrink={false}
         key="more-filters-button"
         dataHook="more-filters-button"
         icon={<ContentFilter />}
-        onClick={state.toolbarFiltersState?.onFiltersButtonClick}
+        onClick={toolbarFiltersState?.onFiltersButtonClick}
       >
         {t('cairo.toolbar.moreFiltersButton', { defaultValue: '' })}
       </ResponsiveButton>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar3538856250";
+var _namespace_ = "MultiBulkActionToolbar4262379086";
 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":"MultiBulkActionToolbar3538856250__root","leftGroupWrapper":"MultiBulkActionToolbar3538856250__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3538856250__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3538856250__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar4262379086__root","leftGroupWrapper":"MultiBulkActionToolbar4262379086__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar4262379086__selectedCountItem","selectedCountText":"MultiBulkActionToolbar4262379086__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/MainCellLayout.tsx

@@ -33,7 +33,12 @@ export function MainCellLayout(props: MainCellLayoutProps) {
       {dragHandle}
       {expandCollapseButton}
       {image && (
-        <Box height="40px" paddingInlineEnd="12px" dataHook="image">
+        <Box
+          height="40px"
+          paddingInlineEnd="12px"
+          dataHook="image"
+          flexShrink={0}
+        >
           {image}
         </Box>
       )}

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow2901976876";
+var _namespace_ = "NestedTablePlaceholderStatesRow3373505387";
 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":"NestedTablePlaceholderStatesRow2901976876__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow3373505387__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_ = "NestedTableRow4216831903";
+var _namespace_ = "NestedTableRow4266583698";
 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":"NestedTableRow4216831903__root","firstLevel":"NestedTableRow4216831903__firstLevel","placeholder":"NestedTableRow4216831903__placeholder","parentHovered":"NestedTableRow4216831903__parentHovered"};
+export var classes = {"root":"NestedTableRow4266583698__root","firstLevel":"NestedTableRow4266583698__firstLevel","placeholder":"NestedTableRow4266583698__placeholder","parentHovered":"NestedTableRow4266583698__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_ = "MultipleDragOverlayEffect2720149821";
+var _namespace_ = "MultipleDragOverlayEffect695384191";
 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":"MultipleDragOverlayEffect2720149821__root"};
+export var classes = {"root":"MultipleDragOverlayEffect695384191__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_ = "NestedTableDragAndDropRow2752194378";
+var _namespace_ = "NestedTableDragAndDropRow2227072666";
 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":"NestedTableDragAndDropRow2752194378__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2227072666__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_ = "PickerContent123699860";
+var _namespace_ = "PickerContent1626301124";
 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":"PickerContent123699860__root"};
+export var classes = {"root":"PickerContent1626301124__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_ = "PickerContentAdditionalStep23964712";
+var _namespace_ = "PickerContentAdditionalStep1762375108";
 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":"PickerContentAdditionalStep23964712__root","titles":"PickerContentAdditionalStep23964712__titles","suffix":"PickerContentAdditionalStep23964712__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1762375108__root","titles":"PickerContentAdditionalStep1762375108__titles","suffix":"PickerContentAdditionalStep1762375108__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_ = "PickerTableListItem3689164289";
+var _namespace_ = "PickerTableListItem2364026151";
 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":"PickerTableListItem3689164289__root"};
+export var classes = {"root":"PickerTableListItem2364026151__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ResponsiveButton/ResponsiveButton.tsx

@@ -6,7 +6,7 @@ import {
   IconElement,
   Tooltip,
 } from '@wix/design-system';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { ToolbarResponsivePriorityState } from '../../state/Toolbar/ToolbarResponsivePriorityState';
@@ -19,61 +19,67 @@ export type ResponsiveButtonProps = ButtonAsButtonProps<{
   shouldShrink?: boolean;
 }>;
 
-function _ResponsiveButton(props: ResponsiveButtonProps) {
-  const {
-    dataHook,
-    as,
-    icon,
-    children,
-    state,
-    shouldShrink: shouldShrinkProp = true,
-    ...rest
-  } = props;
+const _ResponsiveButton = forwardRef<Button, ResponsiveButtonProps>(
+  (props, ref) => {
+    const {
+      dataHook,
+      as,
+      icon,
+      children,
+      state,
+      shouldShrink: shouldShrinkProp = true,
+      ...rest
+    } = props;
 
-  const {
-    sizes,
-    toolbar: { button },
-  } = usePatternsTheme();
+    const {
+      sizes,
+      toolbar: { button },
+    } = usePatternsTheme();
 
-  const {
-    toolbar: { responsive },
-  } = useToolbarCollectionContext();
+    const {
+      toolbar: { responsive },
+    } = useToolbarCollectionContext();
 
-  const { _nextToShrink, responsiveDisabled } = responsive;
+    const { responsiveDisabled } = responsive;
 
-  const shouldShrink = responsiveDisabled
-    ? shouldShrinkProp
-    : _nextToShrink._count >= state._count && state._shouldShrink;
+    const shouldShrink = responsiveDisabled
+      ? shouldShrinkProp
+      : state._shouldShrink;
 
-  return shouldShrink ? (
-    <Tooltip
-      content={children}
-      dataHook={dataHook ? `${dataHook}-tooltip` : undefined}
-    >
-      <Box direction="vertical" minWidth="30px">
-        <IconButton
+    return shouldShrink ? (
+      <Tooltip
+        content={children}
+        dataHook={dataHook ? `${dataHook}-tooltip` : undefined}
+      >
+        <Box direction="vertical" minWidth="30px">
+          <IconButton
+            ref={ref}
+            {...rest}
+            dataHook={dataHook}
+            size={sizes.small}
+            priority="secondary"
+          >
+            {icon}
+          </IconButton>
+        </Box>
+      </Tooltip>
+    ) : (
+      <div style={{ display: 'contents' }}>
+        <Button
+          ref={ref}
+          as={as}
           {...rest}
           dataHook={dataHook}
           size={sizes.small}
           priority="secondary"
+          prefixIcon={icon}
+          suffixIcon={button.suffix}
         >
-          {icon}
-        </IconButton>
-      </Box>
-    </Tooltip>
-  ) : (
-    <Button
-      as={as}
-      {...rest}
-      dataHook={dataHook}
-      size={sizes.small}
-      priority="secondary"
-      prefixIcon={icon}
-      suffixIcon={button.suffix}
-    >
-      {children}
-    </Button>
-  );
-}
+          {children}
+        </Button>
+      </div>
+    );
+  },
+);
 
 export const ResponsiveButton = observer(_ResponsiveButton);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent1514627155";
+var _namespace_ = "ScrollableContent287701298";
 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":"ScrollableContent1514627155__root"};
+export var classes = {"root":"ScrollableContent287701298__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_ = "SkeletonCard4200077779";
+var _namespace_ = "SkeletonCard1509158132";
 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":"SkeletonCard4200077779__root","headerLoading":"SkeletonCard4200077779__headerLoading"};
+export var classes = {"root":"SkeletonCard1509158132__root","headerLoading":"SkeletonCard1509158132__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_ = "SlidingModal1143591618";
+var _namespace_ = "SlidingModal2058154665";
 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":"SlidingModal1143591618__root"};
+export var classes = {"root":"SlidingModal2058154665__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_ = "TabsFilter232326813";
+var _namespace_ = "TabsFilter1340887134";
 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":"TabsFilter232326813__root","title":"TabsFilter232326813__title"};
+export var classes = {"root":"TabsFilter1340887134__root","title":"TabsFilter1340887134__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TabsFilter/TabsFilter.tsx

@@ -189,7 +189,7 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
         container: container.current,
         itemsCount: items.length,
       }),
-    [],
+    [container, state],
   );
 
   const selectedId = filter.isEmpty
@@ -199,6 +199,11 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
   return (
     <FilterContextProvider value={filter}>
       <Box
+        ref={(node) => {
+          if (node) {
+            container.current = node;
+          }
+        }}
         dataHook="collection-tabs-filter"
         className={st(classes.root)}
         width="100%"
@@ -207,34 +212,26 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
         verticalAlign="middle"
         flexGrow={1}
       >
-        <div
-          ref={(node) => {
-            if (node) {
-              container.current = node;
-            }
-          }}
-        >
-          {responsive.mode === 'tabs' ? (
-            <TabsDefault
-              items={items}
-              data={dataProp}
-              filter={filter}
-              selectedId={selectedId}
-              state={state}
-              onChange={onChange}
-              type={type}
-              all={all}
-            />
-          ) : (
-            <TabsDropdown
-              filter={filter}
-              data={dataProp}
-              items={items}
-              selectedId={selectedId}
-              popoverProps={mobilePopoverProps}
-            />
-          )}
-        </div>
+        {responsive.mode === 'tabs' ? (
+          <TabsDefault
+            items={items}
+            data={dataProp}
+            filter={filter}
+            selectedId={selectedId}
+            state={state}
+            onChange={onChange}
+            type={type}
+            all={all}
+          />
+        ) : (
+          <TabsDropdown
+            filter={filter}
+            data={dataProp}
+            items={items}
+            selectedId={selectedId}
+            popoverProps={mobilePopoverProps}
+          />
+        )}
       </Box>
     </FilterContextProvider>
   );

package/src/components/TabsFilter/TabsResponsiveState.ts

@@ -66,17 +66,25 @@ export class TabsResponsiveState {
     return itemsCount * itemMinWidth + badgesWidth;
   }
 
+  _externalAvailableWidth: number | null = null;
+
+  setAvailableWidth(width: number) {
+    this._externalAvailableWidth = width;
+    this._onResize();
+  }
+
   _onResize = action(() => {
     const { container } = this;
+    const availableWidth =
+      this._externalAvailableWidth ?? container?.clientWidth ?? 0;
+
     if (process.env.NODE_ENV === 'test') {
       return;
     }
-
     if (!container) {
       return;
     }
 
-    // Force dropdown mode on mobile
     if (this.isMobile) {
       this.mode = 'dropdown';
       return;
@@ -84,28 +92,12 @@ export class TabsResponsiveState {
 
     const nextPanelWidth = this.getPanelMinWidth();
 
-    // If the measurements show 0, this means that not all elements have loaded yet,
-    // so we skip such events.
     if (nextPanelWidth !== 0 && nextPanelWidth > this.panelMinWidth) {
       this.itemsMinWidths = this.getItemsMinWidth();
       this.panelMinWidth = nextPanelWidth;
     }
 
-    // The "container" is a node that wraps both Tabs and Dropdown components (but only
-    // one of them is rendered). It expands for as much space as all its elements
-    // inside need and shrinks down to the smallest possible state of the elements inside.
-    // Basically max-width and min-width with complications.
-    //
-    // Complications here are badges — they don't shrink, only tabs titles shrink.
-    //
-    // The state is switched when the certain container width (aka panelMinWidth) is reached.
-    // It is defined as: itemsCount * (itemMinWidth + itemPadding) + all badges widths.
-    // Tabs is shown when the container width is more or equal than panelMinWidth.
-    // Dropdown is shown when the container width is less than panelMinWidth.
-    if (
-      this.panelMinWidth !== 0 &&
-      container.clientWidth < this.panelMinWidth
-    ) {
+    if (this.panelMinWidth !== 0 && availableWidth < this.panelMinWidth) {
       this.mode = 'dropdown';
     } else {
       this.mode = 'tabs';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal3811406198";
+var _namespace_ = "ManageTagsModal2191591010";
 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":"ManageTagsModal3811406198__root"};
+export var classes = {"root":"ManageTagsModal2191591010__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_ = "ToolbarItem4209088188";
+var _namespace_ = "ToolbarItem679348093";
 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":"ToolbarItem4209088188__root"};
+export var classes = {"root":"ToolbarItem679348093__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common2150455002";
+var _namespace_ = "common547183010";
 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":"common2150455002__root","column":"common2150455002__column","fullHeight":"common2150455002__fullHeight"};
+export var classes = {"root":"common547183010__root","column":"common547183010__column","fullHeight":"common547183010__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

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

package/src/state/FormPage/FormPageHeader.st.css.ts

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