@wix/patterns 1.347.0 → 1.349.0

package/src/components/CollectionSectionHeader/CollectionSectionHeaderActionBar.tsx

@@ -1,24 +1,35 @@
-import { Box, TextButton } from '@wix/design-system';
+import { Box, IconButton, TextButton } from '@wix/design-system';
 import React from 'react';
 import { Section } from './CollectionSectionHeader.types';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
-import { wixPatternsSectionHeaderPrimaryActionClicked } from '@wix/bex-core/bi';
+import { withoutDefaults } from '@wix/bex-core';
+import {
+  wixPatternsSectionHeaderPrimaryActionClicked,
+  cairoSectionCtaClicked,
+} from '@wix/bex-core/bi';
+import { ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common';
 
 export interface CollectionSectionHeaderActionBarProps {
   sectionId: string;
-  section: Section;
+  sectionIndex: number;
+  section: Section & { collapsed?: boolean };
   biComponentType: string;
+  collapsible?: boolean;
+  onToggleCollapse?: (sectionId: string) => void;
 }
 
 export const CollectionSectionHeaderActionBar = ({
   sectionId,
+  sectionIndex,
   section,
   biComponentType,
+  collapsible,
+  onToggleCollapse,
 }: CollectionSectionHeaderActionBarProps) => {
   const { toolbarBIReporter } = useToolbarCollectionContext();
-  const { primaryAction } = section;
+  const { primaryAction, collapsed } = section;
 
-  const handleClick = () => {
+  const handlePrimaryActionClick = () => {
     toolbarBIReporter.reportBi(
       wixPatternsSectionHeaderPrimaryActionClicked({
         sectionId,
@@ -26,22 +37,44 @@ export const CollectionSectionHeaderActionBar = ({
         componentType: biComponentType,
       }),
     );
-
     primaryAction?.onClick?.();
   };
 
+  const handleCollapseActionClick = () => {
+    toolbarBIReporter.reportBi(
+      withoutDefaults(cairoSectionCtaClicked)({
+        location: 'Section Toolbar',
+        sectionType: 'table',
+        ctaName: collapsed ? 'expand' : 'collapse',
+        sectionIndex,
+      } as {}),
+    );
+    onToggleCollapse?.(sectionId);
+  };
+
   return (
-    <Box direction="horizontal">
+    <Box direction="horizontal" gap="SP2" placeItems="center">
       {primaryAction && (
         <TextButton
           prefixIcon={primaryAction.prefixIcon}
           dataHook="collection-section-header-primary-action"
-          onClick={handleClick}
+          onClick={handlePrimaryActionClick}
           size="small"
         >
           {primaryAction.label}
         </TextButton>
       )}
+      {collapsible && (
+        <IconButton
+          size="tiny"
+          dataHook="collection-section-header-collapse-action"
+          skin="light"
+          priority="primary"
+          onClick={handleCollapseActionClick}
+        >
+          {collapsed ? <ChevronDown /> : <ChevronUp />}
+        </IconButton>
+      )}
     </Box>
   );
 };

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

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

package/src/components/CollectionTable/CollectionTable.tsx

@@ -116,6 +116,7 @@ export interface CollectionTableProps<T, F extends FiltersMap>
   extends CollectionTableBaseProps<T, F> {
   state: TableState<T, F>;
   keyedItems?: KeyedItem<T>[];
+  isUsingExpandCollapse?: boolean;
 }
 
 function _CollectionTable<T, F extends FiltersMap = FiltersMap>(

package/src/components/CollectionTable/useTableCollectionSyncProps.ts

@@ -14,6 +14,7 @@ import { isValidElement } from '../isValidElement';
 export function useTableCollectionSyncProps<T, F extends FiltersMap>(
   props: CollectionTableProps<T, F> & {
     isUsingTableVirtualization: boolean;
+    isUsingExpandCollapse?: boolean;
   },
 ) {
   const {
@@ -28,6 +29,7 @@ export function useTableCollectionSyncProps<T, F extends FiltersMap>(
     checkboxTooltipContent,
     dataExtension,
     isUsingTableVirtualization,
+    isUsingExpandCollapse,
     dragAndDropReorderModeToolbar,
   } = props;
 
@@ -54,6 +56,7 @@ export function useTableCollectionSyncProps<T, F extends FiltersMap>(
     isUsingHorizontalScroll: props.horizontalScroll ?? false,
     isUsingFolders: false,
     isUsingTableVirtualization,
+    isUsingExpandCollapse,
   });
 
   useColumnsSyncProps({

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar1404768459";
+var _namespace_ = "CollectionToolbar3487753527";
 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":"CollectionToolbar1404768459__root","left":"CollectionToolbar1404768459__left","right":"CollectionToolbar1404768459__right","fullWidth":"CollectionToolbar1404768459__fullWidth"};
+export var classes = {"root":"CollectionToolbar3487753527__root","left":"CollectionToolbar3487753527__left","right":"CollectionToolbar3487753527__right","fullWidth":"CollectionToolbar3487753527__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter2881731574";
+var _namespace_ = "SearchOrCustomFilter855055264";
 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":"SearchOrCustomFilter2881731574__root","search":"SearchOrCustomFilter2881731574__search","searchMobile":"SearchOrCustomFilter2881731574__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter855055264__root","search":"SearchOrCustomFilter855055264__search","searchMobile":"SearchOrCustomFilter855055264__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbarFilters/CollectionToolbarFilters.tsx

@@ -131,39 +131,39 @@ function _CollectionToolbarFilters(props: CollectionToolbarFiltersProps) {
   const container = useWixPatternsContainer();
   const { filters } = collection;
 
-  const filtersProps = useMemo(
-    () => {
-      // share essential filter props globally
-      return [
-        ...childrenArr.map(({ props: filterChildProps, type }) => {
-          const {
-            filter,
-            onAppliedFilterTagRemove,
-            renderToolbarTag,
-            toolbarTagProps,
-            accordionItemProps,
-          } = filterChildProps;
-
-          return {
-            filter,
-            onAppliedFilterTagRemove,
-            toolbarTagProps,
-            accordionItemProps,
-            renderToolbarTag:
-              renderToolbarTag ??
-              type.renderPresetToolbarTag?.(container, {
-                filterProps: filterChildProps,
-              }),
-          };
-        }),
-        {
-          filter: filters.search,
-          onAppliedFilterTagRemove: onSearchAppliedFilterTagRemove,
-        },
-      ];
-    },
-    childrenArr.map(({ props: { filter } }) => filter),
-  );
+  const filtersProps = useMemo(() => {
+    // share essential filter props globally
+    return [
+      ...childrenArr.map(({ props: filterChildProps, type }) => {
+        const {
+          filter,
+          onAppliedFilterTagRemove,
+          renderToolbarTag,
+          toolbarTagProps,
+          accordionItemProps,
+        } = filterChildProps;
+
+        return {
+          filter,
+          onAppliedFilterTagRemove,
+          toolbarTagProps,
+          accordionItemProps,
+          renderToolbarTag:
+            renderToolbarTag ??
+            type.renderPresetToolbarTag?.(container, {
+              filterProps: filterChildProps,
+            }),
+        };
+      }),
+      {
+        filter: filters.search,
+        onAppliedFilterTagRemove: onSearchAppliedFilterTagRemove,
+      },
+    ];
+  }, [
+    childrenArr.length,
+    ...childrenArr.map(({ props: { filter } }) => filter),
+  ]);
 
   useEffect(() => {
     state.setFilterTagsPropsIfChanged(filtersProps);

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

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

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.tsx

@@ -1,5 +1,9 @@
-import { AutoComplete, AutoCompleteProps, Input } from '@wix/design-system';
-import React, { useEffect, useMemo, useState } from 'react';
+import {
+  AutoComplete,
+  AutoCompleteProps,
+  Input,
+} from '@wix/design-system';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { AutoCompleteReadonlyState } from './AutoCompleteReadonlyState';
 import { classes, st } from './AutoCompleteReadonly.st.css.js';
@@ -12,6 +16,7 @@ export interface AutoCompleteReadonlyProps extends AutoCompleteProps {
 
 function _AutoCompleteReadonly(props: AutoCompleteReadonlyProps) {
   const { value, selectedLabel, dropdownWidth, clearInput } = props;
+  const autoCompleteRef = useRef<typeof AutoComplete.prototype | null>(null);
 
   const [state] = useState(
     () => props.state ?? new AutoCompleteReadonlyState(),
@@ -19,7 +24,8 @@ function _AutoCompleteReadonly(props: AutoCompleteReadonlyProps) {
 
   useEffect(() => {
     state.clearInput = clearInput;
-  }, [clearInput]);
+    state.autoCompleteRef = autoCompleteRef;
+  }, [clearInput, state]);
 
   const { disableEditing } = state;
 
@@ -29,13 +35,17 @@ function _AutoCompleteReadonly(props: AutoCompleteReadonlyProps) {
 
   return (
     <AutoComplete
+      ref={autoCompleteRef}
       {...props}
       dropdownWidth={dropdownWidth}
       onSelect={(option, sameOptionWasPicked) => {
         props.onSelect?.(option, sameOptionWasPicked);
         state.onSelect();
       }}
-      onFocus={state.onFocus}
+      onFocus={(e) => {
+        state.onFocus();
+        props.onFocus?.(e);
+      }}
       onBlur={(e) => {
         props.onBlur?.(e);
         state.onBlur();

package/src/components/CollectionViewsDropdown/AutoCompleteReadonlyState.ts

@@ -1,11 +1,14 @@
 import { action, makeObservable, observable } from 'mobx';
 import { EventEmitter } from 'events';
 import { TypedEmitter } from '@wix/bex-core/events';
+import React from 'react';
+import type { AutoComplete } from '@wix/design-system';
 
 export class AutoCompleteReadonlyState {
   disableEditing = true;
   isFocused = false;
   clearInput?: () => void;
+  autoCompleteRef?: React.RefObject<typeof AutoComplete.prototype | null>;
 
   readonly events = new EventEmitter() as TypedEmitter<{
     blur: () => unknown;
@@ -17,6 +20,13 @@ export class AutoCompleteReadonlyState {
     });
   }
 
+  focusInput = action(() => {
+    this.disableEditing = false;
+    setTimeout(() => {
+      this.autoCompleteRef?.current?.focus();
+    }, 0);
+  });
+
   onFocus = action(() => {
     this.isFocused = true;
     this.disableEditing = false;

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

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.tsx

@@ -116,14 +116,30 @@ function _ViewsDropdown<T, F extends FiltersMap>({
               : undefined
           }
           textOverflow="ellipsis"
-          prefix={<ViewsDropdownPrefix state={state} />}
+          prefix={
+            <div
+              data-hook="views-dropdown-prefix"
+              onClick={() => viewsState.autoCompleteReadonlyState.focusInput()}
+              style={{ cursor: 'pointer', display: 'inline-flex' }}
+            >
+              <ViewsDropdownPrefix state={state} />
+            </div>
+          }
           suffix={
             shouldShowTotal ? (
-              <Box className="total-count">
-                <Input.Affix>
-                  ({state.table.collection.result.total})
-                </Input.Affix>
-              </Box>
+              <div
+                data-hook="views-dropdown-suffix"
+                onClick={() =>
+                  viewsState.autoCompleteReadonlyState.focusInput()
+                }
+                style={{ cursor: 'pointer', display: 'inline-flex' }}
+              >
+                <Box className="total-count">
+                  <Input.Affix>
+                    ({state.table.collection.result.total})
+                  </Input.Affix>
+                </Box>
+              </div>
             ) : undefined
           }
           className={st(classes.root)}

package/src/components/CustomFieldFilters/CheckboxCustomFieldFilter.tsx

@@ -5,14 +5,14 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 interface CheckboxCustomFieldFilterProps extends FilterProps<unknown[]> {}
 
-export const CheckboxCustomFieldFilter = ({
-  filter,
-}: CheckboxCustomFieldFilterProps) => {
+export const CheckboxCustomFieldFilter = (
+  props: CheckboxCustomFieldFilterProps,
+) => {
   const { translate: t } = useWixPatternsContainer();
 
   return (
     <RadioGroupFilter
-      filter={filter}
+      {...props}
       data={[
         {
           id: 'checked',

package/src/components/CustomFieldFilters/DateCustomFieldFilter.tsx

@@ -6,10 +6,8 @@ import { DateCustomFieldFilterBase } from './DateCustomFieldFilterBase';
 
 interface DateCustomFieldFilterProps extends FilterProps<RangeItem<Date>> {}
 
-export const DateCustomFieldFilter = ({
-  filter,
-}: DateCustomFieldFilterProps) => {
-  return <DateCustomFieldFilterBase filter={filter} />;
+export const DateCustomFieldFilter = (props: DateCustomFieldFilterProps) => {
+  return <DateCustomFieldFilterBase {...props} />;
 };
 
 DateCustomFieldFilter.renderPresetToolbarTag =

package/src/components/CustomFieldFilters/DateTimeCustomFieldFilter.tsx

@@ -6,10 +6,10 @@ import { DateCustomFieldFilterBase } from './DateCustomFieldFilterBase';
 
 interface DateTimeCustomFieldFilterProps extends FilterProps<RangeItem<Date>> {}
 
-export const DateTimeCustomFieldFilter = ({
-  filter,
-}: DateTimeCustomFieldFilterProps) => {
-  return <DateCustomFieldFilterBase filter={filter} filterByTime />;
+export const DateTimeCustomFieldFilter = (
+  props: DateTimeCustomFieldFilterProps,
+) => {
+  return <DateCustomFieldFilterBase {...props} filterByTime />;
 };
 
 DateTimeCustomFieldFilter.renderPresetToolbarTag =

package/src/components/CustomFieldFilters/buildCustomFieldFilterElement.tsx

@@ -24,22 +24,22 @@ export const buildCustomFieldFilterElement = <T, F extends FiltersMap>(
     dateTime: DateTimeCustomFieldFilter,
     checkbox: CheckboxCustomFieldFilter,
     integer: NumberRangeFilter,
-    decimal: ({ filter }) => <NumberRangeFilter filter={filter} decimal />,
-    shortText: ({ filter }) => (
+    decimal: (props) => <NumberRangeFilter {...props} decimal />,
+    shortText: (props) => (
       <OperatorFilterPicker
-        filter={filter}
+        {...props}
         allowedOperators={STRING_OPERATORS}
       />
     ),
-    url: ({ filter }) => (
+    url: (props) => (
       <OperatorFilterPicker
-        filter={filter}
+        {...props}
         allowedOperators={STRING_OPERATORS}
       />
     ),
-    longText: ({ filter }) => (
+    longText: (props) => (
       <OperatorFilterPicker
-        filter={filter}
+        {...props}
         allowedOperators={STRING_OPERATORS}
       />
     ),
@@ -64,6 +64,9 @@ export const buildCustomFieldFilterElement = <T, F extends FiltersMap>(
       toolbarItemProps={{
         label,
       }}
+      toolbarTagProps={{
+        label,
+      }}
     />
   );
 };

package/src/components/DataExtension/CollectionDataExtensionState.ts

@@ -130,6 +130,8 @@ export class CollectionDataExtensionState<T, F extends FiltersMap> {
   }
 
   _addCustomFieldFilters() {
+    const { translate } = this.dataExtension.container;
+
     const customFieldFilter: {
       [key in CustomFieldType]?: (
         params: Partial<FilterStateBaseParams<any>>,
@@ -140,9 +142,9 @@ export class CollectionDataExtensionState<T, F extends FiltersMap> {
       checkbox: idNameArrayFilter,
       decimal: numberRangeFilter,
       integer: numberRangeFilter,
-      shortText: stringOperatorFilter,
-      url: stringOperatorFilter,
-      longText: stringOperatorFilter,
+      shortText: (params) => stringOperatorFilter({ ...params, translate }),
+      url: (params) => stringOperatorFilter({ ...params, translate }),
+      longText: (params) => stringOperatorFilter({ ...params, translate }),
     };
 
     this.dataExtension.filterableCustomFields.forEach(
@@ -195,6 +197,8 @@ export class CollectionDataExtensionState<T, F extends FiltersMap> {
       ]);
 
       this._handleFetchSchemasError();
+      // Add custom field filters BEFORE initTask completes so collection waits for them
+      this._addCustomFieldFilters();
       toolbar.setNewExtendedColumns(dataExtension.availableCustomFields, {
         defaultHidden: true,
       });

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle2061269740";
+var _namespace_ = "DragHandle1390618320";
 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":"DragHandle2061269740__root"};
+export var classes = {"root":"DragHandle1390618320__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_ = "EntityPagePlain2063448682";
+var _namespace_ = "EntityPagePlain885077018";
 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":"EntityPagePlain2063448682__root"};
+export var classes = {"root":"EntityPagePlain885077018__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_ = "Fade4118700581";
+var _namespace_ = "Fade3283116330";
 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":"Fade4118700581__root"};
+export var classes = {"root":"Fade3283116330__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/GridSections/GridSectionHeader.tsx

@@ -19,7 +19,7 @@ function _GridSectionHeader<T, F extends FiltersMap>(
     gridBase: { layoutType },
   } = state;
 
-  const { sectionId, section, range } = sectionDescriptor;
+  const { sectionId, sectionIndex, section, range } = sectionDescriptor;
 
   const sectionWithCount = {
     ...section,
@@ -31,6 +31,7 @@ function _GridSectionHeader<T, F extends FiltersMap>(
     <CollectionSectionHeader
       dataHook="grid-section-header"
       sectionId={sectionId}
+      sectionIndex={sectionIndex}
       section={sectionWithCount}
       skin={layoutType === 'list' ? 'light' : 'neutral'}
       biComponentType="GridSections"

package/src/components/GridSections/GridSectionsState.ts

@@ -9,6 +9,7 @@ import type {
 
 export interface SectionRange {
   sectionId: string;
+  sectionIndex: number;
   section: Section;
   range: {
     start: number;
@@ -66,7 +67,7 @@ export class GridSectionsState<T, F extends FiltersMap> {
     });
 
     let currentIndex = 0;
-    return orderedSections.map((sectionId) => {
+    return orderedSections.map((sectionId, sectionIndex) => {
       const sectionItems = sectionItemsMap[sectionId];
 
       const section = renderSection
@@ -80,7 +81,7 @@ export class GridSectionsState<T, F extends FiltersMap> {
 
       currentIndex += sectionItems.length;
 
-      return { sectionId, section, range };
+      return { sectionId, sectionIndex, section, range };
     });
   }
 }

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

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