@wix/patterns 1.486.0 → 1.488.0

package/src/components/EntityPage/EntityPagePlain.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain2776377256";
+var _namespace_ = "EntityPagePlain1379562807";
 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":"EntityPagePlain2776377256__root"};
+export var classes = {"root":"EntityPagePlain1379562807__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_ = "Fade1696492783";
+var _namespace_ = "Fade2679749157";
 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":"Fade1696492783__root"};
+export var classes = {"root":"Fade2679749157__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/FieldActions/FieldActions.tsx

@@ -1,8 +1,9 @@
-import React, { type ReactNode } from 'react';
+import React, { type ComponentProps, type ReactNode } from 'react';
 import {
   SortAscendingSmall,
   SortDescendingSmall,
   ContentFilterSmall,
+  FilterSmall,
   HiddenSmall,
   DeleteSmall,
   EditSmall,
@@ -15,6 +16,14 @@ import { cairoCtaClicked } from '@wix/bex-core/bi';
 import type { ReportBI, Translate, TranslationsKeys } from '@wix/bex-core';
 import type { HeaderAction, FieldActionsMenuConfig } from './headerActionTypes';
 import { MENU_DATA_HOOKS } from './fieldTypeActions';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
+
+const FilterActionIcon = (props: ComponentProps<typeof FilterSmall>) =>
+  useBmHarmonyTheme() ? (
+    <FilterSmall {...props} />
+  ) : (
+    <ContentFilterSmall {...props} />
+  );
 
 export type FieldActionKey =
   | 'editField'
@@ -89,7 +98,7 @@ export const FIELD_ACTIONS: Record<FieldActionKey, FieldActionDef> = {
     label: 'Filter',
     dataHook: 'field-action-filter',
     ctaName: 'Filter',
-    icon: <ContentFilterSmall />,
+    icon: <FilterActionIcon />,
   },
   archive: {
     label: 'Archive',

package/src/components/FieldActions/HeaderActionsPopover.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { PopoverMenu, IconButton, Tooltip } from '@wix/design-system';
 import { MoreSmall } from '@wix/wix-ui-icons-common/lazy';
-import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { usePageContext, useWixPatternsContainer } from '@wix/bex-core/react';
 import type { HeaderAction } from './headerActionTypes';
 import { actionMenuItems } from './actionMenuItems';
 import { useCloseOnAncestorScroll } from '../../hooks/useCloseOnAncestorScroll';
@@ -20,6 +20,7 @@ export function HeaderActionsPopover({
   onOpenChange,
 }: HeaderActionsPopoverProps) {
   const { translate: t } = useWixPatternsContainer();
+  const { stackingRootRef } = usePageContext();
   const [menuOpen, setMenuOpen] = useState(false);
   const [popoverKey, setPopoverKey] = useState(0);
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -77,7 +78,7 @@ export function HeaderActionsPopover({
               <MoreSmall />
             </IconButton>
           }
-          appendTo="window"
+          appendTo={stackingRootRef.current || 'parent'}
           placement="bottom-end"
           onShow={() => setMenuOpen(true)}
           onHide={() => setMenuOpen(false)}

package/src/components/FieldCell/FieldCell.tsx

@@ -96,11 +96,7 @@ function _FieldCell(props: FieldCellProps) {
     }
     case 'BOOLEAN':
       return (
-        <Box
-          align="center"
-          verticalAlign="middle"
-          color={props.value ? 'G10' : 'D10'}
-        >
+        <Box verticalAlign="middle" color={props.value ? 'G10' : 'D10'}>
           {props.value ? <Confirm /> : <Minus />}
         </Box>
       );

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

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

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload730546862";
+var _namespace_ = "ImportStepUpload4021007671";
 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":"ImportStepUpload730546862__root","fileUpload":"ImportStepUpload730546862__fileUpload"};
+export var classes = {"root":"ImportStepUpload4021007671__root","fileUpload":"ImportStepUpload4021007671__fileUpload"};
 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_ = "InputOverflow4003085375";
+var _namespace_ = "InputOverflow2505247784";
 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":"InputOverflow4003085375__root"};
+export var classes = {"root":"InputOverflow2505247784__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_ = "LoadingRow1313526491";
+var _namespace_ = "LoadingRow3621201869";
 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":"LoadingRow1313526491__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow1313526491__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow3621201869__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow3621201869__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_ = "MaxHeightText1042732106";
+var _namespace_ = "MaxHeightText1246016224";
 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":"MaxHeightText1042732106__root"};
+export var classes = {"root":"MaxHeightText1246016224__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_ = "MaxLines876706065";
+var _namespace_ = "MaxLines28702856";
 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":"MaxLines876706065__root"};
+export var classes = {"root":"MaxLines28702856__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MoreFiltersCTA/MoreFiltersCTA.tsx

@@ -1,13 +1,52 @@
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { FilterSmall, ContentFilter } from '@wix/wix-ui-icons-common/lazy';
-import { Box, CounterBadge } from '@wix/design-system';
+import { Box, CounterBadge, IconButton, Tooltip } from '@wix/design-system';
 import { CounterBadgeButton } from '../CounterBadgeButton';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
+import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
 
-const _MoreFiltersCTA = () => {
+export interface MoreFiltersCTAProps {
+  minimized?: boolean;
+}
+
+interface IconWithCounterBadgeProps {
+  icon: React.ReactElement;
+  count: number;
+  size?: string;
+  width?: string;
+  height?: string;
+}
+
+// IconButton passes the icon size props to its child, so forward them to the icon.
+const IconWithCounterBadge = ({
+  icon,
+  count,
+  size,
+  width,
+  height,
+}: IconWithCounterBadgeProps) => (
+  <Box position="relative" display="inline-flex">
+    {React.cloneElement(icon, { size, width, height })}
+    {count > 0 && (
+      <Box
+        position="absolute"
+        top={0}
+        right={0}
+        transform="translate3d(50%, -50%, 0)"
+        pointerEvents="none"
+      >
+        <CounterBadge dataHook="more-filters-button-counter" skin="general">
+          {count}
+        </CounterBadge>
+      </Box>
+    )}
+  </Box>
+);
+
+const _MoreFiltersCTA = ({ minimized = false }: MoreFiltersCTAProps) => {
   const state = useToolbarCollectionContext();
   const {
     toolbar: { responsive },
@@ -15,8 +54,37 @@ const _MoreFiltersCTA = () => {
     toolbarFiltersState,
   } = state;
   const isBmHarmonyTheme = useBmHarmonyTheme();
+  const { sizes } = usePatternsTheme();
 
   const count = state.collection.query.nonPersistentCustomFiltersCount;
+  const label = t('cairo.toolbar.moreFiltersButton', { defaultValue: '' });
+
+  if (minimized) {
+    const ariaLabel =
+      count > 0
+        ? `${label}, ${t('cairo.appliedFilters', { num: count })}`
+        : label;
+
+    return (
+      <Tooltip content={label} dataHook="more-filters-button-tooltip">
+        <Box direction="vertical" minWidth="30px">
+          <IconButton
+            ref={toolbarFiltersState?.moreFiltersButtonRef}
+            priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
+            size={sizes.small}
+            ariaLabel={ariaLabel}
+            dataHook="more-filters-button"
+            onClick={toolbarFiltersState?.onFiltersButtonClick}
+          >
+            <IconWithCounterBadge
+              icon={isBmHarmonyTheme ? <FilterSmall /> : <ContentFilter />}
+              count={count}
+            />
+          </IconButton>
+        </Box>
+      </Tooltip>
+    );
+  }
 
   if (!isBmHarmonyTheme) {
     return (
@@ -30,7 +98,7 @@ const _MoreFiltersCTA = () => {
           icon={<ContentFilter />}
           onClick={toolbarFiltersState?.onFiltersButtonClick}
         >
-          {t('cairo.toolbar.moreFiltersButton', { defaultValue: '' })}
+          {label}
         </ResponsiveButton>
       </CounterBadgeButton>
     );
@@ -47,7 +115,7 @@ const _MoreFiltersCTA = () => {
       onClick={toolbarFiltersState?.onFiltersButtonClick}
     >
       <Box gap="SP1" verticalAlign="middle" display="inline-flex">
-        {t('cairo.toolbar.moreFiltersButton', { defaultValue: '' })}
+        {label}
         {count > 0 && (
           <CounterBadge
             dataHook="more-filters-button-counter"

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar4290567447";
+var _namespace_ = "MultiBulkActionToolbar2902181092";
 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":"MultiBulkActionToolbar4290567447__root","leftGroupWrapper":"MultiBulkActionToolbar4290567447__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar4290567447__selectedCountItem","selectedCountText":"MultiBulkActionToolbar4290567447__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar2902181092__root","leftGroupWrapper":"MultiBulkActionToolbar2902181092__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2902181092__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2902181092__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_ = "NestedTablePlaceholderStatesRow249211742";
+var _namespace_ = "NestedTablePlaceholderStatesRow3925760858";
 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":"NestedTablePlaceholderStatesRow249211742__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow3925760858__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_ = "NestedTableRow4069778159";
+var _namespace_ = "NestedTableRow866529802";
 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":"NestedTableRow4069778159__root","firstLevel":"NestedTableRow4069778159__firstLevel","placeholder":"NestedTableRow4069778159__placeholder","parentHovered":"NestedTableRow4069778159__parentHovered"};
+export var classes = {"root":"NestedTableRow866529802__root","firstLevel":"NestedTableRow866529802__firstLevel","placeholder":"NestedTableRow866529802__placeholder","parentHovered":"NestedTableRow866529802__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_ = "MultipleDragOverlayEffect146707045";
+var _namespace_ = "MultipleDragOverlayEffect2650853254";
 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":"MultipleDragOverlayEffect146707045__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2650853254__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_ = "NestedTableDragAndDropRow1618432068";
+var _namespace_ = "NestedTableDragAndDropRow4161848159";
 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":"NestedTableDragAndDropRow1618432068__root"};
+export var classes = {"root":"NestedTableDragAndDropRow4161848159__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_ = "PickerContent385890022";
+var _namespace_ = "PickerContent1182858536";
 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":"PickerContent385890022__root"};
+export var classes = {"root":"PickerContent1182858536__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_ = "PickerContentAdditionalStep157258724";
+var _namespace_ = "PickerContentAdditionalStep2362062783";
 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":"PickerContentAdditionalStep157258724__root","titles":"PickerContentAdditionalStep157258724__titles","suffix":"PickerContentAdditionalStep157258724__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2362062783__root","titles":"PickerContentAdditionalStep2362062783__titles","suffix":"PickerContentAdditionalStep2362062783__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_ = "PickerTableListItem1943810643";
+var _namespace_ = "PickerTableListItem2133071640";
 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":"PickerTableListItem1943810643__root"};
+export var classes = {"root":"PickerTableListItem2133071640__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget1852209377";
+var _namespace_ = "SetupWidget1099513909";
 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":"SetupWidget1852209377__root","row":"SetupWidget1852209377__row","completedCta":"SetupWidget1852209377__completedCta","secondaryCta":"SetupWidget1852209377__secondaryCta","card":"SetupWidget1852209377__card","stepIcon":"SetupWidget1852209377__stepIcon","chevron":"SetupWidget1852209377__chevron","chevronDisabled":"SetupWidget1852209377__chevronDisabled","inProgressLabel":"SetupWidget1852209377__inProgressLabel"};
+export var classes = {"root":"SetupWidget1099513909__root","row":"SetupWidget1099513909__row","completedCta":"SetupWidget1099513909__completedCta","secondaryCta":"SetupWidget1099513909__secondaryCta","card":"SetupWidget1099513909__card","stepIcon":"SetupWidget1099513909__stepIcon","chevron":"SetupWidget1099513909__chevron","chevronDisabled":"SetupWidget1099513909__chevronDisabled","inProgressLabel":"SetupWidget1099513909__inProgressLabel"};
 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_ = "SkeletonCard3056681256";
+var _namespace_ = "SkeletonCard706100567";
 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":"SkeletonCard3056681256__root","headerLoading":"SkeletonCard3056681256__headerLoading"};
+export var classes = {"root":"SkeletonCard706100567__root","headerLoading":"SkeletonCard706100567__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_ = "SlidingModal4226078037";
+var _namespace_ = "SlidingModal1179177860";
 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":"SlidingModal4226078037__root"};
+export var classes = {"root":"SlidingModal1179177860__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader3703986941";
+var _namespace_ = "AddFieldColumnHeader4168196710";
 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":"AddFieldColumnHeader3703986941__root","anchorLayer":"AddFieldColumnHeader3703986941__anchorLayer","popover":"AddFieldColumnHeader3703986941__popover","title":"AddFieldColumnHeader3703986941__title","hoverBridge":"AddFieldColumnHeader3703986941__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader4168196710__root","anchorLayer":"AddFieldColumnHeader4168196710__anchorLayer","popover":"AddFieldColumnHeader4168196710__popover","title":"AddFieldColumnHeader4168196710__title","hoverBridge":"AddFieldColumnHeader4168196710__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/NumberCell.st.css

@@ -0,0 +1,8 @@
+/* Numbers sit at the end of the cell so their digits line up, while the column
+   (and so its header) stays start-aligned. Fills the cell because a virtualized
+   row's cell is a flex box. */
+.root {
+  flex: 1 1 auto;
+  min-width: 0;
+  text-align: end;
+}

package/src/components/Table/NumberCell.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "NumberCell1256423461";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"NumberCell1256423461__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/src/components/TableFolders/TableFoldersContent.tsx

@@ -165,7 +165,10 @@ function _TableFoldersContent<
     toolbar: { selectedOrderedColumnsOrAll },
   } = state;
 
-  const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll, showFieldTypeIcons: state.toolbar.showFieldTypeIcons });
+  const createWSRColumnBase = useCreateWSRColumnBase({
+    horizontalScroll,
+    showFieldTypeIcons: state.toolbar.showFieldTypeIcons,
+  });
 
   const finalColumns = [
     {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter2938286757";
+var _namespace_ = "TabsFilter950746489";
 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":"TabsFilter2938286757__root","titleBox":"TabsFilter2938286757__titleBox"};
+export var classes = {"root":"TabsFilter950746489__root","titleBox":"TabsFilter950746489__titleBox"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};