@wix/patterns 1.363.0 → 1.364.0

package/src/components/CollectionToolbarFilters/CollectionToolbarFilters.tsx

@@ -5,6 +5,7 @@ import React, {
   useMemo,
   useState,
 } from 'react';
+import { Box } from '@wix/design-system';
 import { FilterElement } from './filterElement';
 import { useFiltersLayout } from './useFiltersLayout';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
@@ -13,6 +14,7 @@ import { observer } from 'mobx-react-lite';
 import { ToolbarItemBox } from '../ToolbarItemBox';
 import { AppliedFiltersTagListState } from '../AppliedFiltersTagList/AppliedFiltersTagListState';
 import { CollectionToolbarFiltersState } from './CollectionToolbarFiltersState';
+import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
 import { CollectionFilter } from '../CollectionFilter';
 import { FiltersPanelSidePanelEntry } from './FiltersPanelSidePanelEntry';
 import { MoreFiltersCTA } from '../MoreFiltersCTA';
@@ -217,19 +219,27 @@ function _CollectionToolbarFilters(props: CollectionToolbarFiltersProps) {
     };
   }, [hideAppliedFiltersTagList]);
 
+  const showFieldTypeIcons = state.showFieldTypeIcons;
+
   return (
     // workaround to support bad enzyme version not detecting this as a valid fragment component
     // https://wix.slack.com/archives/C02K83200PL/p1671962461443749
     <Fragment key="toolbar-items">
       {childrenArr.slice(0, totalInlineFilters).map((element, index) => {
         const { props: filterProps } = element;
+        const toolbarLabel = filterProps.toolbarItemProps?.label;
+        let label: React.ReactNode = showLabels && toolbarLabel;
+        if (showFieldTypeIcons && showLabels && toolbarLabel) {
+          const toolbarIcon = getFieldTypeIcon({ fieldType: filterProps.fieldType, size: 'medium' });
+          label = <Box gap="SP1" verticalAlign="middle">{toolbarIcon}{toolbarLabel}</Box>;
+        }
 
         return (
           <ToolbarItemBox
             key={index}
             layout={filterProps.layout}
             dataHook={`toolbar-item-filter-${index}`}
-            label={showLabels && filterProps.toolbarItemProps?.label}
+            label={label}
           >
             {filterProps.filter ? (
               <CollectionFilter

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

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

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

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

package/src/components/CustomColumnsPanel/ColumnListTableListItem.tsx

@@ -7,6 +7,7 @@ import { CustomColumnsState } from '../../state';
 import { GridCardItemProps } from '../DragAndDrop';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
 
 export interface ColumnListTableListItemProps<T, F extends FiltersMap>
   extends GridCardItemProps {
@@ -35,8 +36,10 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
 
   const { collectionDataExtension } = useToolbarCollectionContext();
   const { translate: t } = useWixPatternsContainer();
+  const showFieldTypeIcons = state.table.showFieldTypeIcons;
 
   const { infoTooltipProps } = column;
+  const prefixIcon = showFieldTypeIcons ? getFieldTypeIcon({ fieldType: column.fieldType }) : null;
 
   const checkboxDisabled = !column.hideable;
   const hasSearchValue = state.searchValue.trim().length > 0;
@@ -117,9 +120,10 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
         options={[
           {
             value: (
-              <Box>
+              <Box {...(prefixIcon ? { verticalAlign: 'middle' } : {})}>
                 <div
                   style={{
+                    ...(prefixIcon ? { display: 'flex', alignItems: 'center' } : {}),
                     padding: '0 6px',
                     cursor: checkboxDisabled ? undefined : 'pointer',
                     wordBreak: 'break-word',
@@ -131,6 +135,11 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
                     state.onColumnCheckboxToggle(column);
                   }}
                 >
+                  {prefixIcon && (
+                    <Box align="center" verticalAlign="middle" marginRight="SP1" flexShrink={0}>
+                      {prefixIcon}
+                    </Box>
+                  )}
                   <Text size="small" dataHook="tableListItem-label">
                     {column.name || column.title || column.id}
                   </Text>

package/src/components/CustomFieldFilters/buildCustomFieldFilterElement.tsx

@@ -7,6 +7,7 @@ import { FilterProps } from '../../model';
 import { CheckboxCustomFieldFilter } from './CheckboxCustomFieldFilter';
 import { NumberRangeFilter } from '../NumberRangeFilter';
 import { OperatorFilterCustomFieldFilter } from './OperatorFilterCustomFieldFilter';
+import { toFieldType } from '../../utils/fieldTypePrefixIcons';
 
 export const buildCustomFieldFilterElement = <T, F extends FiltersMap>(
   state: ToolbarCollectionState<T, F>,
@@ -38,6 +39,7 @@ export const buildCustomFieldFilterElement = <T, F extends FiltersMap>(
     <CustomFieldFilterComponent
       key={customField.id}
       filter={state.collection.filters[customField.id]!}
+      fieldType={toFieldType(customField.type)}
       accordionItemProps={{
         label,
       }}

package/src/components/CustomFieldModal/CustomFieldTypeDropdown.tsx

@@ -1,16 +1,9 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Box, Dropdown, listItemSelectBuilder } from '@wix/design-system';
-import {
-  Checkbox,
-  Date,
-  DateAndTime,
-  Number,
-  Rename,
-  Link,
-} from '@wix/wix-ui-icons-common';
 import { CustomFieldModalState, CustomFieldType } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
 
 export interface CustomFieldTypeDropdownProps {
   state: CustomFieldModalState;
@@ -38,7 +31,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'shortText',
       prefix: (
         <Box>
-          <Rename />
+          {getFieldTypeIcon({ fieldType: 'SHORT_TEXT', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.shortText'),
@@ -49,7 +42,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'longText',
       prefix: (
         <Box>
-          <Rename />
+          {getFieldTypeIcon({ fieldType: 'LONG_TEXT', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.longText'),
@@ -60,7 +53,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'date',
       prefix: (
         <Box>
-          <Date />
+          {getFieldTypeIcon({ fieldType: 'DATE', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.date'),
@@ -71,7 +64,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'dateTime',
       prefix: (
         <Box>
-          <DateAndTime />
+          {getFieldTypeIcon({ fieldType: 'DATE_TIME', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.dateAndTime'),
@@ -82,7 +75,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'integer',
       prefix: (
         <Box>
-          <Number />
+          {getFieldTypeIcon({ fieldType: 'INTEGER', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.numberInteger'),
@@ -93,7 +86,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'decimal',
       prefix: (
         <Box>
-          <Number />
+          {getFieldTypeIcon({ fieldType: 'DECIMAL', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.numberDecimal'),
@@ -104,7 +97,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'checkbox',
       prefix: (
         <Box>
-          <Checkbox />
+          {getFieldTypeIcon({ fieldType: 'CHECKBOX', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.checkbox'),
@@ -115,7 +108,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'url',
       prefix: (
         <Box>
-          <Link />
+          {getFieldTypeIcon({ fieldType: 'URL', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.url'),

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle4263951191";
+var _namespace_ = "DragHandle3347869420";
 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":"DragHandle4263951191__root"};
+export var classes = {"root":"DragHandle3347869420__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_ = "EntityPagePlain1687286502";
+var _namespace_ = "EntityPagePlain2305275193";
 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":"EntityPagePlain1687286502__root"};
+export var classes = {"root":"EntityPagePlain2305275193__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_ = "Fade140473283";
+var _namespace_ = "Fade2577267590";
 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":"Fade140473283__root"};
+export var classes = {"root":"Fade2577267590__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading2968453176";
+var _namespace_ = "Heading774911002";
 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":"Heading2968453176__root"};
+export var classes = {"root":"Heading774911002__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_ = "ImportStepUpload2853718693";
+var _namespace_ = "ImportStepUpload2190126313";
 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":"ImportStepUpload2853718693__root","fileUpload":"ImportStepUpload2853718693__fileUpload"};
+export var classes = {"root":"ImportStepUpload2190126313__root","fileUpload":"ImportStepUpload2190126313__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_ = "InputOverflow3167239132";
+var _namespace_ = "InputOverflow202707770";
 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":"InputOverflow3167239132__root"};
+export var classes = {"root":"InputOverflow202707770__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_ = "LoadingRow3791399935";
+var _namespace_ = "LoadingRow3461175397";
 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":"LoadingRow3791399935__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3791399935__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow3461175397__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow3461175397__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_ = "MaxHeightText3994669917";
+var _namespace_ = "MaxHeightText216893253";
 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":"MaxHeightText3994669917__root"};
+export var classes = {"root":"MaxHeightText216893253__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_ = "MaxLines545705138";
+var _namespace_ = "MaxLines1284639450";
 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":"MaxLines545705138__root"};
+export var classes = {"root":"MaxLines1284639450__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_ = "MultiBulkActionToolbar2458542829";
+var _namespace_ = "MultiBulkActionToolbar791660869";
 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":"MultiBulkActionToolbar2458542829__root","leftGroupWrapper":"MultiBulkActionToolbar2458542829__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2458542829__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2458542829__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar791660869__root","leftGroupWrapper":"MultiBulkActionToolbar791660869__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar791660869__selectedCountItem","selectedCountText":"MultiBulkActionToolbar791660869__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_ = "NestedTablePlaceholderStatesRow2764090560";
+var _namespace_ = "NestedTablePlaceholderStatesRow2310651378";
 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":"NestedTablePlaceholderStatesRow2764090560__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow2310651378__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_ = "NestedTableRow449850700";
+var _namespace_ = "NestedTableRow2704827787";
 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":"NestedTableRow449850700__root","firstLevel":"NestedTableRow449850700__firstLevel","placeholder":"NestedTableRow449850700__placeholder","parentHovered":"NestedTableRow449850700__parentHovered"};
+export var classes = {"root":"NestedTableRow2704827787__root","firstLevel":"NestedTableRow2704827787__firstLevel","placeholder":"NestedTableRow2704827787__placeholder","parentHovered":"NestedTableRow2704827787__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/useFlatModeColumns.tsx

@@ -26,7 +26,7 @@ export function useFlatModeColumns<C extends string>(
 
   const { selectedOrderedColumnsOrAll } = toolbar;
 
-  const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll });
+  const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll, showFieldTypeIcons: toolbar.showFieldTypeIcons });
 
   const actionCellColumn = useNestedTableActionCell({
     state: state.flat,

package/src/components/NestedTable/useNestedModeColumns.tsx

@@ -34,7 +34,7 @@ export function useNestedModeColumns<C extends string>(
 
   const { selectedOrderedColumnsOrAll } = toolbar;
 
-  const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll });
+  const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll, showFieldTypeIcons: toolbar.showFieldTypeIcons });
 
   const actionCellColumn = useNestedTableActionCell({
     state: state.nested,

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect909212706";
+var _namespace_ = "MultipleDragOverlayEffect1637060963";
 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":"MultipleDragOverlayEffect909212706__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1637060963__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_ = "NestedTableDragAndDropRow817173986";
+var _namespace_ = "NestedTableDragAndDropRow11113410";
 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":"NestedTableDragAndDropRow817173986__root"};
+export var classes = {"root":"NestedTableDragAndDropRow11113410__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_ = "PickerContent2621024629";
+var _namespace_ = "PickerContent1005862874";
 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":"PickerContent2621024629__root"};
+export var classes = {"root":"PickerContent1005862874__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_ = "PickerContentAdditionalStep2112299193";
+var _namespace_ = "PickerContentAdditionalStep1256051322";
 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":"PickerContentAdditionalStep2112299193__root","titles":"PickerContentAdditionalStep2112299193__titles","suffix":"PickerContentAdditionalStep2112299193__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1256051322__root","titles":"PickerContentAdditionalStep1256051322__titles","suffix":"PickerContentAdditionalStep1256051322__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_ = "PickerTableListItem2879372486";
+var _namespace_ = "PickerTableListItem1960942270";
 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":"PickerTableListItem2879372486__root"};
+export var classes = {"root":"PickerTableListItem1960942270__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_ = "ScrollableContent2145096297";
+var _namespace_ = "ScrollableContent4102213427";
 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":"ScrollableContent2145096297__root"};
+export var classes = {"root":"ScrollableContent4102213427__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_ = "SkeletonCard3016637993";
+var _namespace_ = "SkeletonCard543860056";
 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":"SkeletonCard3016637993__root","headerLoading":"SkeletonCard3016637993__headerLoading"};
+export var classes = {"root":"SkeletonCard543860056__root","headerLoading":"SkeletonCard543860056__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_ = "SlidingModal3550523278";
+var _namespace_ = "SlidingModal3880889394";
 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":"SlidingModal3550523278__root"};
+export var classes = {"root":"SlidingModal3880889394__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TableFolders/TableFoldersContent.tsx

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