@wix/patterns 1.325.0 → 1.328.0

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

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

package/src/components/FiltersPanel/FiltersPanel.tsx

@@ -61,6 +61,9 @@ function _FiltersPanel<T, F extends FiltersMap>(
       dataHook="filters-side-panel"
       onClose={filtersPanelState.onCloseButtonClick}
       width="100%"
+      closeButtonProps={{
+        ariaLabel: t('cairo.filtersPanel.header.closeButton.ariaLabel'),
+      }}
       {...rest}
     >
       <SidePanel.Header

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading1552734931";
+var _namespace_ = "Heading941919792";
 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":"Heading1552734931__root"};
+export var classes = {"root":"Heading941919792__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_ = "InputOverflow1980064947";
+var _namespace_ = "InputOverflow114927068";
 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":"InputOverflow1980064947__root"};
+export var classes = {"root":"InputOverflow114927068__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_ = "LoadingRow72311180";
+var _namespace_ = "LoadingRow1343617370";
 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":"LoadingRow72311180__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow72311180__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1343617370__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1343617370__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_ = "MaxHeightText2940241560";
+var _namespace_ = "MaxHeightText549151743";
 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":"MaxHeightText2940241560__root"};
+export var classes = {"root":"MaxHeightText549151743__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_ = "MaxLines1993089027";
+var _namespace_ = "MaxLines2207513211";
 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":"MaxLines1993089027__root"};
+export var classes = {"root":"MaxLines2207513211__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_ = "MultiBulkActionToolbar3117766984";
+var _namespace_ = "MultiBulkActionToolbar460152276";
 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":"MultiBulkActionToolbar3117766984__root","leftGroupWrapper":"MultiBulkActionToolbar3117766984__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3117766984__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3117766984__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar460152276__root","leftGroupWrapper":"MultiBulkActionToolbar460152276__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar460152276__selectedCountItem","selectedCountText":"MultiBulkActionToolbar460152276__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_ = "NestedTablePlaceholderStatesRow634506500";
+var _namespace_ = "NestedTablePlaceholderStatesRow3701326031";
 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":"NestedTablePlaceholderStatesRow634506500__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow3701326031__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_ = "NestedTableRow3595325079";
+var _namespace_ = "NestedTableRow1368243707";
 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":"NestedTableRow3595325079__root","firstLevel":"NestedTableRow3595325079__firstLevel","placeholder":"NestedTableRow3595325079__placeholder","parentHovered":"NestedTableRow3595325079__parentHovered"};
+export var classes = {"root":"NestedTableRow1368243707__root","firstLevel":"NestedTableRow1368243707__firstLevel","placeholder":"NestedTableRow1368243707__placeholder","parentHovered":"NestedTableRow1368243707__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_ = "MultipleDragOverlayEffect3760073984";
+var _namespace_ = "MultipleDragOverlayEffect2955383918";
 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":"MultipleDragOverlayEffect3760073984__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2955383918__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_ = "NestedTableDragAndDropRow2976497727";
+var _namespace_ = "NestedTableDragAndDropRow3437582656";
 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":"NestedTableDragAndDropRow2976497727__root"};
+export var classes = {"root":"NestedTableDragAndDropRow3437582656__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_ = "PickerContent3108120277";
+var _namespace_ = "PickerContent454214005";
 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":"PickerContent3108120277__root"};
+export var classes = {"root":"PickerContent454214005__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_ = "PickerContentAdditionalStep4199282124";
+var _namespace_ = "PickerContentAdditionalStep1442705227";
 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":"PickerContentAdditionalStep4199282124__root","titles":"PickerContentAdditionalStep4199282124__titles","suffix":"PickerContentAdditionalStep4199282124__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1442705227__root","titles":"PickerContentAdditionalStep1442705227__titles","suffix":"PickerContentAdditionalStep1442705227__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContentAdditionalStep.tsx

@@ -13,6 +13,9 @@ import { st, classes } from './PickerContentAdditionalStep.st.css.js';
 
 export interface PickerContentAdditionalStepProps<T>
   extends Partial<PickerContentBaseWrappedProps> {
+  /** When true, the picker will start directly on the additional step, skipping the first selection step. The back button will also be hidden. */
+  autoAdditionalStepOnInitialSelect?: boolean;
+
   /** The additional step title */
   additionalStepTitle?: string;
 
@@ -47,7 +50,7 @@ export interface PickerContentAdditionalStepProps<T>
 interface PickerContentAdditionalStepStateProps<T, F extends FiltersMap> {
   pickerContentState: PickerContentState<T, F>;
   renderItem: (item: T, index: number) => Partial<PickerListItemProps>;
-  onBackButtonClick: Function;
+  onBackButtonClick: () => void;
 }
 
 export type PickerContentAdditionalStepFullProps<
@@ -56,6 +59,14 @@ export type PickerContentAdditionalStepFullProps<
 > = PickerContentAdditionalStepProps<T> &
   PickerContentAdditionalStepStateProps<T, F>;
 
+const AdditionalStepContentRenderer = <T,>({
+  renderAdditionalStepContent,
+  item,
+}: {
+  renderAdditionalStepContent?: (props: { item: T }) => JSX.Element;
+  item: T;
+}) => renderAdditionalStepContent?.({ item }) ?? null;
+
 function _PickerContentAdditionalStep<T, F extends FiltersMap = FiltersMap>(
   props: PickerContentAdditionalStepFullProps<T, F>,
 ) {
@@ -72,6 +83,7 @@ function _PickerContentAdditionalStep<T, F extends FiltersMap = FiltersMap>(
     onBackButtonClick,
     additionalStepOverrides = {},
     primaryButtonText,
+    autoAdditionalStepOnInitialSelect,
     height, // extract from rest to disable overrides
     ...rest
   } = props;
@@ -83,30 +95,28 @@ function _PickerContentAdditionalStep<T, F extends FiltersMap = FiltersMap>(
       })),
   );
 
+  const selectedKeyedItem = state.selectedKeyedItem;
+
   const renderedItemProps = useMemo(() => {
-    const {
-      selectedKeyedItem: { item, index },
-    } = state;
+    if (!selectedKeyedItem) {
+      return {
+        title: '',
+        subtitle: '',
+      };
+    }
+    const { item, index } = selectedKeyedItem;
     const renderProps = renderItem(item, index);
 
     return {
       title: state.collection.itemName(item),
       ...renderProps,
     };
-  }, [state.selectedKeyedItem]);
+  }, [selectedKeyedItem]);
 
   const {
     collection: { translate: t },
   } = state;
 
-  const additionalStepContent = useMemo(
-    () =>
-      renderAdditionalStepContent?.({
-        item: state.selectedKeyedItem.item,
-      }),
-    [state.selectedKeyedItem],
-  );
-
   const suffixNode = useMemo(() => {
     return [
       additionalStepOverrides.extraNode,
@@ -154,15 +164,19 @@ function _PickerContentAdditionalStep<T, F extends FiltersMap = FiltersMap>(
         state.isLoading ? <Loader size="tiny" /> : primaryButtonText
       }
       secondaryButtonText={t('cairo.cancel.button')}
-      primaryButtonProps={{ disabled: state.isLoading || !enablePrimaryButton }}
+      primaryButtonProps={{
+        disabled: state.isLoading || !enablePrimaryButton,
+      }}
       sideActions={
-        <TextButton
-          prefixIcon={<ChevronLeft />}
-          dataHook="back-button"
-          onClick={() => onBackButtonClick()}
-        >
-          {t('cairo.pickerModal.back.button')}
-        </TextButton>
+        autoAdditionalStepOnInitialSelect ? undefined : (
+          <TextButton
+            prefixIcon={<ChevronLeft />}
+            dataHook="back-button"
+            onClick={() => onBackButtonClick()}
+          >
+            {t('cairo.pickerModal.back.button')}
+          </TextButton>
+        )
       }
     >
       <Box
@@ -210,7 +224,12 @@ function _PickerContentAdditionalStep<T, F extends FiltersMap = FiltersMap>(
           dataHook="additional-step-widget"
           position="relative"
         >
-          {additionalStepContent}
+          {selectedKeyedItem && (
+            <AdditionalStepContentRenderer
+              renderAdditionalStepContent={renderAdditionalStepContent}
+              item={selectedKeyedItem.item}
+            />
+          )}
         </Box>
       </Box>
     </PickerContentBaseWrapped>

package/src/components/PickerContent/PickerContentBaseWrapped.tsx

@@ -11,14 +11,23 @@ export interface PickerContentBaseWrappedProps
   extends Partial<CustomModalLayoutProps> {}
 
 function _PickerContentBaseWrapped(props: PickerContentBaseWrappedProps) {
-  const { className, children } = props;
+  const { className, children, onCloseButtonClick, closeButtonProps, ...rest } =
+    props;
 
   return (
     <CustomModalLayout
       className={st(classes.root, {}, className)}
       removeContentPadding
       showFooterDivider
-      {...props}
+      closeButtonProps={{
+        autoFocus: true,
+        ...closeButtonProps,
+        onClick: (event) => {
+          onCloseButtonClick?.(event);
+          closeButtonProps?.onClick?.(event);
+        },
+      }}
+      {...rest}
     >
       <Box height="100%" flex={1} direction="vertical">
         {children}

package/src/components/PickerContent/PickerContentItemsSelection.tsx

@@ -163,7 +163,6 @@ function _PickerContentItemsSelection<T, F extends FiltersMap = FiltersMap>(
 
   useEffect(() => {
     _customContent.value = () => customContent;
-    return state.init();
   }, []);
 
   const reachedMax = reachedMaxSelection({

package/src/components/PickerContent/PickerContentWrapped.tsx

@@ -1,16 +1,23 @@
+import React, { ReactElement, useEffect, useState } from 'react';
 import { FiltersMap } from '@wix/bex-core';
 import { runInAction } from 'mobx';
-import React, { ReactElement, useState } from 'react';
 import { useCreatePickerContentState } from '../../hooks/usePickerContent';
 import { PickerContentState } from '../../state';
 import { PickerContentProps } from './PickerContent';
 import { PickerContentAdditionalStep } from './PickerContentAdditionalStep';
 import { PickerContentItemsSelection } from './PickerContentItemsSelection';
+import { PickerContentBaseWrapped } from './PickerContentBaseWrapped';
 import { fromMultipleSelectionToBoolean } from '../MaxSelection';
 import { observer } from 'mobx-react-lite';
+import type { PickerContentAdditionalStepProps } from './PickerContentAdditionalStep';
+import { Box, Loader } from '@wix/design-system';
 
 export interface PickerContentWrappedProps<T, F extends FiltersMap>
-  extends PickerContentProps<T, F> {
+  extends PickerContentProps<T, F>,
+    Pick<
+      PickerContentAdditionalStepProps<T>,
+      'autoAdditionalStepOnInitialSelect'
+    > {
   renderPickerContent: (params: {
     state: PickerContentState<T, F>;
     renderItem: PickerContentProps<T, F>['renderItem'];
@@ -30,14 +37,25 @@ function _PickerContentWrapped<T, F extends FiltersMap>(
 
   const createPickerContentState = useCreatePickerContentState();
 
-  const [isAdditionalStepShown, showAdditionalStep] = useState(false);
-
   const [state] = useState(() =>
     params instanceof PickerContentState
       ? params
       : createPickerContentState(params),
   );
 
+  useEffect(() => {
+    return state.init({
+      autoAdditionalStepOnInitialSelect:
+        props.autoAdditionalStepOnInitialSelect,
+    });
+  }, [state]);
+
+  const {
+    isAdditionalStepShown,
+    setIsAdditionalStepShown,
+    isAutoAdditionalStepPending,
+  } = state;
+
   const { picker, modalState } = state;
   const { _isModalOpen } = modalState;
 
@@ -77,22 +95,45 @@ function _PickerContentWrapped<T, F extends FiltersMap>(
   } = picker;
 
   const selectedValue = picker.collection.bulkSelect.selectedValues?.[0];
+
   const hasAdditionalStep = React.useMemo(
     () =>
       selectedValue &&
       props?.hasAdditionalStep?.({
         item: selectedValue,
       }),
-    [selectedValue],
+    [selectedValue, props?.hasAdditionalStep],
   );
 
+  if (isAutoAdditionalStepPending) {
+    return (
+      <PickerContentBaseWrapped
+        dataHook={props.dataHook}
+        width={props.width}
+        secondaryButtonText={t('cairo.cancel.button')}
+        secondaryButtonOnClick={secondaryOnClick}
+        onCloseButtonClick={onCloseButtonClick}
+        primaryButtonProps={{ disabled: true }}
+      >
+        <Box
+          height="100%"
+          minHeight="300px"
+          align="center"
+          verticalAlign="middle"
+        >
+          <Loader dataHook="auto-additional-step-loader" />
+        </Box>
+      </PickerContentBaseWrapped>
+    );
+  }
+
   return isAdditionalStepShown ? (
     <PickerContentAdditionalStep
       {...props}
       pickerContentState={state}
       onBackButtonClick={() => {
         picker.onBackButtonClick();
-        showAdditionalStep(false);
+        setIsAdditionalStepShown(false);
         backButtonOnClick?.({ item: selectedValue });
       }}
       primaryButtonOnClick={() => {
@@ -109,10 +150,11 @@ function _PickerContentWrapped<T, F extends FiltersMap>(
         if (
           // currently additional step supports only single selection
           !fromMultipleSelectionToBoolean(props?.multiple) &&
-          hasAdditionalStep
+          hasAdditionalStep &&
+          selectedValue
         ) {
           picker.onContinueButtonClick();
-          showAdditionalStep(true);
+          setIsAdditionalStepShown(true);
           continueButtonOnClick?.({ item: selectedValue });
         } else {
           primaryOnClick({ currentLevel: 1, numLevels: 1 });

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

@@ -171,6 +171,8 @@ export function PickerModalUniDriver(
     clickCTAButton: () => layout().clickCTAButton(),
     /** Click the back button on the additional step */
     clickBackButton: () => layout().clickBackButton(),
+    /** Indicates whether the back button exists on the additional step */
+    backButtonExists: () => layout().backButtonExists(),
     /** Get the text of the suffix content if exists on the additional step */
     additionalStepSuffixText: () => additionalStepDriver().suffixText(),
     /** Get the node of the suffix content if exists on the additional step */

package/src/components/PickerModal/PickerModalLayout.uni.driver.ts

@@ -47,6 +47,7 @@ export function PickerModalLayoutUniDriver(base: UniDriver, body: UniDriver) {
       (await modal.getPrimaryButtonDriver()).exists(),
     clickCTAButton: async () => (await modal.getPrimaryButtonDriver()).click(),
     clickBackButton: async () => getBackButton().click(),
+    backButtonExists: () => getBackButton().exists(),
     clickCancelButton: async () =>
       (await modal.getSecondaryButtonDriver()).click(),
     getCancelButtonText: async () =>

package/src/components/PickerModalSplash/PickerModalSplash.tsx

@@ -83,9 +83,12 @@ export function PickerModalSplash<T, F extends FiltersMap = FiltersMap>(
   return (
     <CustomModalLayout
       removeContentPadding
-      onCloseButtonClick={(event) => {
-        _isModalOpen.value = false;
-        onCloseButtonClick?.(event);
+      closeButtonProps={{
+        onClick: (event) => {
+          _isModalOpen.value = false;
+          onCloseButtonClick?.(event);
+        },
+        autoFocus: true,
       }}
       {...rest}
     >

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerTableListItem2983769481";
+var _namespace_ = "PickerTableListItem644266313";
 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":"PickerTableListItem2983769481__root"};
+export var classes = {"root":"PickerTableListItem644266313__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_ = "ScrollableContent980648129";
+var _namespace_ = "ScrollableContent2292865565";
 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":"ScrollableContent980648129__root"};
+export var classes = {"root":"ScrollableContent2292865565__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_ = "SkeletonCard1226407146";
+var _namespace_ = "SkeletonCard2419374409";
 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":"SkeletonCard1226407146__root","headerLoading":"SkeletonCard1226407146__headerLoading"};
+export var classes = {"root":"SkeletonCard2419374409__root","headerLoading":"SkeletonCard2419374409__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_ = "SlidingModal3040154923";
+var _namespace_ = "SlidingModal745475248";
 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":"SlidingModal3040154923__root"};
+export var classes = {"root":"SlidingModal745475248__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};