@wix/patterns 1.348.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_ = "CollectionTable3300092515";
+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":"CollectionTable3300092515__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_ = "CollectionToolbar676126279";
+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":"CollectionToolbar676126279__root","left":"CollectionToolbar676126279__left","right":"CollectionToolbar676126279__right","fullWidth":"CollectionToolbar676126279__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_ = "SearchOrCustomFilter585730892";
+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":"SearchOrCustomFilter585730892__root","search":"SearchOrCustomFilter585730892__search","searchMobile":"SearchOrCustomFilter585730892__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/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly1974284090";
+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":"AutoCompleteReadonly1974284090__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_ = "ViewsDropdown1047621763";
+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":"ViewsDropdown1047621763__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/DragHandle/DragHandle.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle4211744995";
+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":"DragHandle4211744995__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_ = "EntityPagePlain165029253";
+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":"EntityPagePlain165029253__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_ = "Fade113856090";
+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":"Fade113856090__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_ = "Heading4117206017";
+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":"Heading4117206017__root"};
+export var classes = {"root":"Heading1206694024__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_ = "InputOverflow122992747";
+var _namespace_ = "InputOverflow3746903394";
 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":"InputOverflow122992747__root"};
+export var classes = {"root":"InputOverflow3746903394__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_ = "LoadingRow2386845315";
+var _namespace_ = "LoadingRow2291814844";
 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":"LoadingRow2386845315__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2386845315__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow2291814844__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow2291814844__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_ = "MaxHeightText2941345795";
+var _namespace_ = "MaxHeightText1421655495";
 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":"MaxHeightText2941345795__root"};
+export var classes = {"root":"MaxHeightText1421655495__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar3636803309";
+var _namespace_ = "MultiBulkActionToolbar1531832909";
 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":"MultiBulkActionToolbar3636803309__root","leftGroupWrapper":"MultiBulkActionToolbar3636803309__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3636803309__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3636803309__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar1531832909__root","leftGroupWrapper":"MultiBulkActionToolbar1531832909__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1531832909__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1531832909__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow3299048733";
+var _namespace_ = "NestedTablePlaceholderStatesRow647433253";
 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":"NestedTablePlaceholderStatesRow3299048733__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow647433253__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_ = "NestedTableRow2944825962";
+var _namespace_ = "NestedTableRow708190955";
 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":"NestedTableRow2944825962__root","firstLevel":"NestedTableRow2944825962__firstLevel","placeholder":"NestedTableRow2944825962__placeholder","parentHovered":"NestedTableRow2944825962__parentHovered"};
+export var classes = {"root":"NestedTableRow708190955__root","firstLevel":"NestedTableRow708190955__firstLevel","placeholder":"NestedTableRow708190955__placeholder","parentHovered":"NestedTableRow708190955__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_ = "MultipleDragOverlayEffect2848659450";
+var _namespace_ = "MultipleDragOverlayEffect2165751233";
 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":"MultipleDragOverlayEffect2848659450__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2165751233__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_ = "NestedTableDragAndDropRow2616913862";
+var _namespace_ = "NestedTableDragAndDropRow559033372";
 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":"NestedTableDragAndDropRow2616913862__root"};
+export var classes = {"root":"NestedTableDragAndDropRow559033372__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_ = "PickerContent1060271441";
+var _namespace_ = "PickerContent900717721";
 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":"PickerContent1060271441__root"};
+export var classes = {"root":"PickerContent900717721__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};