@wix/patterns 1.378.0 → 1.381.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading841018376";
+var _namespace_ = "Heading3014193496";
 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":"Heading841018376__root"};
+export var classes = {"root":"Heading3014193496__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_ = "ImportStepUpload686656776";
+var _namespace_ = "ImportStepUpload162635118";
 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":"ImportStepUpload686656776__root","fileUpload":"ImportStepUpload686656776__fileUpload"};
+export var classes = {"root":"ImportStepUpload162635118__root","fileUpload":"ImportStepUpload162635118__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_ = "InputOverflow1271182134";
+var _namespace_ = "InputOverflow1873892648";
 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":"InputOverflow1271182134__root"};
+export var classes = {"root":"InputOverflow1873892648__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/LayoutSwitch/LayoutSwitch.tsx

@@ -0,0 +1,121 @@
+import React, { Suspense, useEffect, useMemo } from 'react';
+import { FiltersMap } from '@wix/bex-core';
+import { observer } from 'mobx-react-lite';
+import { Table, TableProps } from '../Table';
+import { Grid, GridProps } from '../Grid';
+import type { EditableTableProps } from '../EditableTable';
+import { InitialLoader } from '../InitialLoader';
+import { LayoutSwitchButton } from '../LayoutSwitchButton';
+import type { ILayoutSwitchState } from '../../state/ILayoutSwitchState';
+
+const LazyEditableTable = React.lazy(() =>
+  import('../EditableTable').then((m) => ({
+    default: m.EditableTable as React.ComponentType<any>,
+  })),
+);
+
+export interface LayoutSwitchProps<T, F extends FiltersMap> {
+  state: ILayoutSwitchState<T, F>;
+  tableProps?: Omit<TableProps<T, F>, 'tableGridSwitchButton'>;
+  gridProps?: Omit<GridProps<T, F>, 'tableGridSwitchButton'>;
+  spreadsheetProps?: Omit<EditableTableProps<T, F>, 'tableGridSwitchButton'>;
+}
+
+function _LayoutSwitch<T, F extends FiltersMap>({
+  state,
+  tableProps,
+  gridProps,
+  spreadsheetProps,
+}: LayoutSwitchProps<T, F>) {
+  const { viewTypeState, initTask, toolbar } = state;
+  const isLoading = initTask.status.isIdle || initTask.status.isLoading;
+
+  // Recompute only when a prop flips between defined and undefined.
+  const availableOptions = useMemo(
+    () =>
+      viewTypeState.options.filter((option) => {
+        if (option === 'table') {
+          return !!tableProps;
+        }
+        if (option === 'grid') {
+          return !!gridProps;
+        }
+        if (option === 'spreadsheet') {
+          return !!spreadsheetProps;
+        }
+        return false;
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [!!tableProps, !!gridProps, !!spreadsheetProps],
+  );
+
+  useEffect(() => state.init(), []);
+
+  // If the stored viewType is not among the available options (e.g. 'grid' was
+  // persisted but gridProps is not provided), persist the correction so the next
+  // load starts from a valid value. changeViewType also updates dataCapsule.
+  useEffect(() => {
+    if (
+      availableOptions.length > 0 &&
+      !availableOptions.includes(viewTypeState.viewType)
+    ) {
+      viewTypeState.changeViewType(availableOptions[0]!);
+    }
+  }, [availableOptions, viewTypeState.viewType]);
+
+  if (!availableOptions.length) {
+    console.error(
+      '[LayoutSwitch] At least one of tableProps, gridProps, or spreadsheetProps must be provided.',
+    );
+    return null;
+  }
+
+  const layoutSwitchButton = (
+    <LayoutSwitchButton state={viewTypeState} options={availableOptions} />
+  );
+
+  if (isLoading) {
+    return <InitialLoader dataHook="initial-loader" state={toolbar} />;
+  }
+
+  // If viewType is not yet available (loaded from storage but xProp absent),
+  // fall back locally without waiting for the correction effect to fire.
+  const activeView = availableOptions.includes(viewTypeState.viewType)
+    ? viewTypeState.viewType
+    : availableOptions[0];
+
+  if (activeView === 'table') {
+    return (
+      <div data-hook="layout-view-table" style={{ display: 'contents' }}>
+        <Table {...tableProps!} tableGridSwitchButton={layoutSwitchButton} />
+      </div>
+    );
+  }
+
+  if (activeView === 'grid') {
+    return (
+      <div data-hook="layout-view-grid" style={{ display: 'contents' }}>
+        <Grid {...gridProps!} tableGridSwitchButton={layoutSwitchButton} />
+      </div>
+    );
+  }
+
+  if (activeView === 'spreadsheet') {
+    return (
+      <div data-hook="layout-view-spreadsheet" style={{ display: 'contents' }}>
+        <Suspense
+          fallback={<InitialLoader dataHook="initial-loader" state={toolbar} />}
+        >
+          <LazyEditableTable
+            {...spreadsheetProps!}
+            tableGridSwitchButton={layoutSwitchButton}
+          />
+        </Suspense>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+export const LayoutSwitch = observer(_LayoutSwitch);

package/src/components/LayoutSwitch/LayoutSwitch.uni.driver.ts

@@ -0,0 +1,36 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+import { CollectionToolbarUniDriver } from '../CollectionToolbar/CollectionToolbar.uni.driver';
+import { TableUniDriver } from '../Table/Table.uni.driver';
+import { GridUniDriver } from '../Grid/Grid.uni.driver';
+import { EditableTableUniDriver } from '../EditableTable/EditableTable.uni.driver';
+
+export function LayoutSwitchUniDriver(base: UniDriver, body: UniDriver) {
+  const getToolbar = () =>
+    CollectionToolbarUniDriver(
+      base.$('[data-hook="collection-toolbar"]'),
+      body,
+    );
+
+  return {
+    ...baseUniDriverFactory(base),
+    wait: (timeout?: number) => base.wait(timeout),
+    /** Get the layout switch button */
+    getSwitchButton: () => getToolbar().getSwitchButton(),
+    /** Check if the table layout is currently shown */
+    isShowingTable: () => base.$('[data-hook="layout-view-table"]').exists(),
+    /** Check if the grid layout is currently shown */
+    isShowingGrid: () => base.$('[data-hook="layout-view-grid"]').exists(),
+    /** Check if the spreadsheet layout is currently shown */
+    isShowingSpreadsheet: () =>
+      base.$('[data-hook="layout-view-spreadsheet"]').exists(),
+    /** Get Table driver */
+    getTable: () => TableUniDriver(base, body),
+    /** Get Grid driver */
+    getGrid: () => GridUniDriver(base, body),
+    /** Get Spreadsheet (EditableTable) driver */
+    getSpreadsheet: () => EditableTableUniDriver(base, body),
+  };
+}
+
+export default LayoutSwitchUniDriver;

package/src/components/LayoutSwitch/index.ts

@@ -0,0 +1 @@
+export * from './LayoutSwitch';

package/src/components/LayoutSwitchButton/LayoutSwitchButton.tsx

@@ -0,0 +1,102 @@
+import { observer } from 'mobx-react-lite';
+import React, { useMemo } from 'react';
+import {
+  DropdownBase,
+  IconButton,
+  listItemSelectBuilder,
+  SegmentedToggle,
+  Tooltip,
+} from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { ViewType, ViewTypeState } from '../../state/ViewTypeState';
+import { layoutConfig } from './layoutConfig';
+
+export interface LayoutSwitchButtonProps {
+  state: ViewTypeState;
+  options: ViewType[];
+}
+
+function _LayoutSwitchButton({ state, options }: LayoutSwitchButtonProps) {
+  const { translate: t, experiments } = useWixPatternsContainer();
+  const { viewType } = state;
+
+  const isLayoutToggleRedesignEnabled = experiments.enabled(
+    'specs.cairo.layout-toggle.redesign',
+  );
+
+  const dropdownOptions = useMemo(
+    () =>
+      options.map((option) =>
+        listItemSelectBuilder({
+          id: option,
+          title: t(layoutConfig[option].translationKey),
+          prefix: layoutConfig[option].icon,
+          dataHook: `layout-option-${option}`,
+        }),
+      ),
+    [t, options],
+  );
+
+  if (!isLayoutToggleRedesignEnabled) {
+    return (
+      <SegmentedToggle
+        size="small"
+        dataHook="layout-switch-toggle-button"
+        selected={viewType}
+        onClick={(_, value) => {
+          if (state.viewType === value) {
+            return;
+          }
+          state.changeViewType(value as ViewType);
+        }}
+      >
+        {options.map((option) => (
+          <SegmentedToggle.Icon
+            key={option}
+            value={option}
+            dataHook={`toggle-option-${option}`}
+            tooltipText={t(layoutConfig[option].translationKey)}
+          >
+            {layoutConfig[option].icon}
+          </SegmentedToggle.Icon>
+        ))}
+      </SegmentedToggle>
+    );
+  }
+
+  return (
+    <DropdownBase
+      dataHook="layout-switch-popover"
+      options={dropdownOptions}
+      selectedId={viewType}
+      showArrow
+      onSelect={(option) => {
+        const selectedOption = option.id as ViewType;
+        const index = options.indexOf(selectedOption);
+        state.reportLayoutOptionClicked(selectedOption, index);
+        if (viewType !== selectedOption) {
+          state.changeViewType(selectedOption);
+        }
+      }}
+    >
+      {({ toggle }) => (
+        <Tooltip content={t('cairo.table.layout.switchLayout')} size="medium">
+          <IconButton
+            dataHook="layout-switch-button"
+            size="small"
+            priority="secondary"
+            aria-haspopup="menu"
+            onClick={() => {
+              state.reportLayoutSwitch();
+              toggle();
+            }}
+          >
+            {layoutConfig[viewType].icon}
+          </IconButton>
+        </Tooltip>
+      )}
+    </DropdownBase>
+  );
+}
+
+export const LayoutSwitchButton = observer(_LayoutSwitchButton);

package/src/components/LayoutSwitchButton/index.ts

@@ -0,0 +1 @@
+export * from './LayoutSwitchButton';

package/src/components/LayoutSwitchButton/layoutConfig.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {
+  TableChart,
+  LayoutGallery,
+  LayoutSplit,
+} from '@wix/wix-ui-icons-common';
+import { TranslationsKeys } from '@wix/bex-core';
+import { ViewType } from '../../state/ViewTypeState';
+
+export const layoutConfig: Record<
+  ViewType,
+  { icon: React.ReactNode; translationKey: TranslationsKeys }
+> = {
+  table: {
+    icon: <LayoutSplit />,
+    translationKey: 'cairo.table.layout.table',
+  },
+  grid: {
+    icon: <LayoutGallery />,
+    translationKey: 'cairo.table.layout.grid',
+  },
+  spreadsheet: {
+    icon: <TableChart />,
+    translationKey: 'cairo.table.layout.spreadsheet' as TranslationsKeys,
+  },
+};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow2196858778";
+var _namespace_ = "LoadingRow2988693935";
 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":"LoadingRow2196858778__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2196858778__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow2988693935__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow2988693935__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_ = "MaxHeightText2601044677";
+var _namespace_ = "MaxHeightText1094343565";
 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":"MaxHeightText2601044677__root"};
+export var classes = {"root":"MaxHeightText1094343565__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_ = "MaxLines3678574695";
+var _namespace_ = "MaxLines2877328221";
 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":"MaxLines3678574695__root"};
+export var classes = {"root":"MaxLines2877328221__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MoreActions/MoreActionsBase.tsx

@@ -29,13 +29,14 @@ function _MoreActionsBase(params: MoreActionsBaseProps) {
   const {
     items = [],
     containerId,
+    containerProps,
     dataHook = 'more-actions',
     triggerElement,
     exploreAppsModalProps,
     biAdditionalInfo,
   } = params;
   const { pageType, location } = usePageButtonBiParams();
-  const state = useExtensionMenuItems({ containerId });
+  const state = useExtensionMenuItems({ containerId, containerProps });
   const container = useWixPatternsContainer();
   const pageState = useCollectionPageContext();
   const { reportBi, environment } = container;
@@ -128,7 +129,7 @@ function _MoreActionsBase(params: MoreActionsBaseProps) {
                     );
                   }
 
-                  onClick(); // TODO: We don't have any params we need to pass to the TPA here?
+                  onClick(isTPA ? state.containerProps : undefined);
                 }}
                 {...rest}
               />

package/src/components/MoreActions/MoreActionsProps.ts

@@ -17,6 +17,11 @@ export interface MoreActionsProps {
    */
   containerId?: string;
 
+  /**
+   * Additional properties passed to the `onClick` of the container's extensions menu items.
+   */
+  containerProps?: Record<string, any>;
+
   /**
    * Additional info for cairoPageCtaClicked BI event.
    */

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar407643509";
+var _namespace_ = "MultiBulkActionToolbar3408629573";
 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":"MultiBulkActionToolbar407643509__root","leftGroupWrapper":"MultiBulkActionToolbar407643509__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar407643509__selectedCountItem","selectedCountText":"MultiBulkActionToolbar407643509__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar3408629573__root","leftGroupWrapper":"MultiBulkActionToolbar3408629573__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3408629573__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3408629573__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_ = "NestedTablePlaceholderStatesRow200227903";
+var _namespace_ = "NestedTablePlaceholderStatesRow137894831";
 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":"NestedTablePlaceholderStatesRow200227903__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow137894831__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_ = "NestedTableRow4073148708";
+var _namespace_ = "NestedTableRow2822551837";
 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":"NestedTableRow4073148708__root","firstLevel":"NestedTableRow4073148708__firstLevel","placeholder":"NestedTableRow4073148708__placeholder","parentHovered":"NestedTableRow4073148708__parentHovered"};
+export var classes = {"root":"NestedTableRow2822551837__root","firstLevel":"NestedTableRow2822551837__firstLevel","placeholder":"NestedTableRow2822551837__placeholder","parentHovered":"NestedTableRow2822551837__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_ = "MultipleDragOverlayEffect3673484001";
+var _namespace_ = "MultipleDragOverlayEffect918203553";
 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":"MultipleDragOverlayEffect3673484001__root"};
+export var classes = {"root":"MultipleDragOverlayEffect918203553__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_ = "NestedTableDragAndDropRow748604090";
+var _namespace_ = "NestedTableDragAndDropRow2849287231";
 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":"NestedTableDragAndDropRow748604090__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2849287231__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_ = "PickerContent2145700135";
+var _namespace_ = "PickerContent1098415796";
 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":"PickerContent2145700135__root"};
+export var classes = {"root":"PickerContent1098415796__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_ = "PickerContentAdditionalStep1252550532";
+var _namespace_ = "PickerContentAdditionalStep2163690254";
 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":"PickerContentAdditionalStep1252550532__root","titles":"PickerContentAdditionalStep1252550532__titles","suffix":"PickerContentAdditionalStep1252550532__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2163690254__root","titles":"PickerContentAdditionalStep2163690254__titles","suffix":"PickerContentAdditionalStep2163690254__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_ = "PickerTableListItem2660550529";
+var _namespace_ = "PickerTableListItem3936469485";
 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":"PickerTableListItem2660550529__root"};
+export var classes = {"root":"PickerTableListItem3936469485__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_ = "ScrollableContent824867288";
+var _namespace_ = "ScrollableContent2878466261";
 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":"ScrollableContent824867288__root"};
+export var classes = {"root":"ScrollableContent2878466261__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_ = "SkeletonCard2455371441";
+var _namespace_ = "SkeletonCard3852981435";
 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":"SkeletonCard2455371441__root","headerLoading":"SkeletonCard2455371441__headerLoading"};
+export var classes = {"root":"SkeletonCard3852981435__root","headerLoading":"SkeletonCard3852981435__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_ = "SlidingModal661696003";
+var _namespace_ = "SlidingModal3970925703";
 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":"SlidingModal661696003__root"};
+export var classes = {"root":"SlidingModal3970925703__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};