@wix/patterns 1.495.0 → 1.496.0

package/src/components/EntityPageFields/EntityPageField.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPageField2583760001";
+var _namespace_ = "EntityPageField2403163101";
 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":"EntityPageField2583760001__root","row":"EntityPageField2583760001__row"};
+export var classes = {"root":"EntityPageField2403163101__root","row":"EntityPageField2403163101__row"};
 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_ = "Fade2813439303";
+var _namespace_ = "Fade1228129809";
 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":"Fade2813439303__root"};
+export var classes = {"root":"Fade1228129809__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/FieldActions/FieldActions.tsx

@@ -1,4 +1,8 @@
-import React, { type ComponentProps, type ReactNode } from 'react';
+import React, {
+  type ComponentProps,
+  type MouseEvent,
+  type ReactNode,
+} from 'react';
 import {
   SortAscendingSmall,
   SortDescendingSmall,
@@ -118,7 +122,7 @@ export const FIELD_ACTIONS: Record<FieldActionKey, FieldActionDef> = {
 };
 
 export type FieldActionHandlers = Partial<
-  Record<FieldActionKey, (id: string) => void>
+  Record<FieldActionKey, (id: string, event?: MouseEvent<HTMLElement>) => void>
 >;
 
 export interface FieldActionHandlersConfig {
@@ -211,7 +215,7 @@ export function buildFieldActionGroups(args: {
             dataHook: def.dataHook,
             icon: def.icon,
             skin: def.skin,
-            onClick: () => {
+            onClick: (event) => {
               if (bi && def.ctaName && ctaIndex) {
                 reportFieldActionCta(bi, {
                   ctaName: def.ctaName,
@@ -220,7 +224,11 @@ export function buildFieldActionGroups(args: {
                   numCtas: biKeys.length,
                 });
               }
-              handler(columnId);
+              if (key === 'filter' && event) {
+                handler(columnId, event);
+              } else {
+                handler(columnId);
+              }
             },
             loading: loading?.[key],
             disabled: disabledTooltip !== undefined,

package/src/components/FieldActions/headerActionTypes.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
 
 export interface HeaderAction {
   /** The text label of the action item. */
@@ -6,7 +6,7 @@ export interface HeaderAction {
   /** Optional data-hook for the menu item (for testkits). */
   dataHook?: string;
   /** Handler called when the action is clicked. */
-  onClick: () => void;
+  onClick: (event?: MouseEvent<HTMLElement>) => void;
   /** An icon to display before the text. */
   icon?: ReactNode;
   /** Disables the action both visually and functionally. */

package/src/components/FiltersPanel/FilterRevealAnchor.tsx

@@ -0,0 +1,49 @@
+import React, { ReactNode, RefObject, useEffect, useRef } from 'react';
+
+interface FilterRevealAnchorProps {
+  request: { sectionKey: string };
+  scrollContainerRef: RefObject<HTMLDivElement>;
+  open: boolean;
+  children: ReactNode;
+}
+
+export function FilterRevealAnchor({
+  request,
+  scrollContainerRef,
+  open,
+  children,
+}: FilterRevealAnchorProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const title = ref.current;
+    const list = scrollContainerRef.current;
+    if (!title || !list) {
+      return;
+    }
+    const reveal = () => {
+      list.scrollTop +=
+        title.getBoundingClientRect().top - list.getBoundingClientRect().top;
+    };
+    title.focus({ preventScroll: true });
+    reveal();
+    // Expansion can initially clamp scrollTop for a section near the list's end.
+    const onTransitionEnd = (event: TransitionEvent) => {
+      if (
+        event.propertyName === 'height' &&
+        event.target instanceof HTMLElement &&
+        event.target.parentElement?.contains(title)
+      ) {
+        reveal();
+      }
+    };
+    list.addEventListener('transitionend', onTransitionEnd);
+    return () => list.removeEventListener('transitionend', onTransitionEnd);
+  }, [request, open]);
+
+  return (
+    <div ref={ref} tabIndex={-1} role="heading" aria-level={3}>
+      {children}
+    </div>
+  );
+}

package/src/components/FiltersPanel/FiltersPanel.tsx

@@ -11,7 +11,6 @@ import { observer } from 'mobx-react-lite';
 import { useBuildAccordionItems } from '../../hooks/useBuildAccordionItems';
 import { FiltersPanelFooter } from './FiltersPanelFooter';
 import { FilterRenderingContextProvider } from '../FilterRenderingContext';
-import { FiltersPanelState } from './FiltersPanelState';
 import { FiltersPanelSearch } from './FiltersPanelSearch';
 import { FiltersPanelSearchNoResults } from './FiltersPanelSearchNoResults';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
@@ -42,12 +41,7 @@ function _FiltersPanel<T, F extends FiltersMap>(
 
   const { translate: t } = useWixPatternsContainer();
 
-  const [filtersPanelState] = useState(
-    () =>
-      new FiltersPanelState({
-        toolbar,
-      }),
-  );
+  const filtersPanelState = state.panel;
 
   const showSearch = state.panelFilterElements.length > FILTER_SEARCH_THRESHOLD;
 
@@ -106,7 +100,11 @@ function _FiltersPanel<T, F extends FiltersMap>(
         )}
       </SidePanel.Header>
 
-      <ScrollableContent dataHook="filters-panel-scroll-container" overflowY>
+      <ScrollableContent
+        ref={filtersPanelState.scrollContainerRef}
+        dataHook="filters-panel-scroll-container"
+        overflowY
+      >
         {noResults ? (
           <FiltersPanelSearchNoResults state={filtersPanelState} />
         ) : (

package/src/components/FiltersPanel/FiltersPanelState.ts

@@ -1,6 +1,8 @@
 import { ToolbarCollectionState } from '../../state';
 import { FiltersMap, withoutDefaults } from '@wix/bex-core';
 import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
+import { createRef, MouseEvent } from 'react';
+import type { FilterElement } from '../CollectionToolbarFilters/filterElement';
 import { action, makeObservable, observable } from 'mobx';
 
 export interface FiltersPanelStateParams<T, F extends FiltersMap> {
@@ -11,18 +13,26 @@ export class FiltersPanelState<T, F extends FiltersMap> {
   readonly toolbar;
 
   searchValue = '';
+  readonly scrollContainerRef = createRef<HTMLDivElement>();
+  readonly openSections = observable.map<string, boolean>();
+  revealRequest: { sectionKey: string } | undefined = undefined;
 
   constructor(params: FiltersPanelStateParams<T, F>) {
     this.toolbar = params.toolbar;
 
     makeObservable(this, {
       searchValue: observable.ref,
+      revealRequest: observable.ref,
+      revealFilter: action.bound,
+      cancelReveal: action.bound,
+      toggleSection: action.bound,
       setSearchValue: action.bound,
       clearSearch: action.bound,
     });
   }
 
   setSearchValue(value: string) {
+    this.cancelReveal();
     this.searchValue = value;
   }
 
@@ -30,6 +40,58 @@ export class FiltersPanelState<T, F extends FiltersMap> {
     this.searchValue = '';
   }
 
+  getSectionKey(element: FilterElement) {
+    return JSON.stringify([element.props.filter.name, element.key]);
+  }
+
+  isSectionOpen(element: FilterElement) {
+    const { initiallyOpen, accordionItemProps } = element.props;
+    return (
+      accordionItemProps?.open ??
+      this.openSections.get(this.getSectionKey(element)) ??
+      accordionItemProps?.initiallyOpen ??
+      initiallyOpen ??
+      false
+    );
+  }
+
+  toggleSection(element: FilterElement, event: MouseEvent<HTMLElement>) {
+    this.cancelReveal();
+    this.openSections.set(
+      this.getSectionKey(element),
+      !this.isSectionOpen(element),
+    );
+    element.props.accordionItemProps?.onToggle?.(event);
+  }
+
+  revealFilter(
+    name: string,
+    elements: FilterElement[],
+    event?: MouseEvent<HTMLElement>,
+  ) {
+    this.clearSearch();
+    const target = elements.find(
+      (element) => element.props.filter.name === name,
+    );
+    this.cancelReveal();
+    if (!target) {
+      return;
+    }
+    const sectionKey = this.getSectionKey(target);
+    const { accordionItemProps } = target.props;
+    if (!accordionItemProps?.disabled && !this.isSectionOpen(target)) {
+      this.openSections.set(sectionKey, true);
+      if (event) {
+        accordionItemProps?.onToggle?.(event);
+      }
+    }
+    this.revealRequest = { sectionKey };
+  }
+
+  cancelReveal() {
+    this.revealRequest = undefined;
+  }
+
   onCloseButtonClick = action(async () => {
     const { reportBi, panels, pendingQuery } = this.toolbar;
 
@@ -40,6 +102,7 @@ export class FiltersPanelState<T, F extends FiltersMap> {
     }
 
     this.clearSearch();
+    this.cancelReveal();
 
     panels.closeSidePanel();
     reportBi(

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

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

package/src/components/ImportButton/ImportButtonModalLayout.tsx

@@ -1,3 +1,4 @@
+import { createImportFieldValidator } from './createImportFieldValidator';
 import {
   Box,
   Button,
@@ -10,6 +11,7 @@ import { getImportModalStepProps } from './getImportModalStepProps';
 import React, { Suspense, lazy, useEffect, useMemo, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useCreateImport } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 import {
   detectFieldType,
   isImportMediaValueCompatible,
@@ -33,9 +35,16 @@ function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
   // the toolbar's fields source to ImportState, which builds the effective config.
   const toolbar = useToolbarCollectionContext();
 
+  const { translate } = useWixPatternsContainer();
+  const fieldsSource = toolbar.collectionFieldsSource?.fieldsSource;
+  const schemaSource = toolbar.collectionFieldsSource?.schemaSource;
+
   const createImport = useCreateImport({
+    createFieldValidator: (field) =>
+      createImportFieldValidator(field, translate),
+    schemaSource,
     importInputs: config,
-    fieldsSource: toolbar.collectionFieldsSource?.fieldsSource,
+    fieldsSource,
     // Media-aware detection (image/video/document/audio) lives in
     // patterns-fields; core defaults to primitive detection without it.
     // ImportState wires the schema-backed `mergeFields` from the source, so

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload2770342220";
+var _namespace_ = "ImportStepUpload3203797294";
 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":"ImportStepUpload2770342220__root","fileUpload":"ImportStepUpload2770342220__fileUpload"};
+export var classes = {"root":"ImportStepUpload3203797294__root","fileUpload":"ImportStepUpload3203797294__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/createImportFieldValidator.ts

@@ -0,0 +1,20 @@
+import type { Field, Translate } from '@wix/bex-core';
+import {
+  buildFieldValidationRules,
+  validateFieldValue,
+} from '../../utils/fieldValidation';
+
+export function createImportFieldValidator(field: Field, translate: Translate) {
+  const rules = buildFieldValidationRules(field, translate).map((rule) => {
+    // These messages already include the field name.
+    if (['required', 'pattern', 'specificValues'].includes(rule.type)) {
+      return rule;
+    }
+    return { ...rule, message: `${field.displayName}: ${rule.message}` };
+  });
+  return (raw: string): string[] => {
+    const value =
+      raw === '' ? undefined : field.type === 'NUMBER' ? Number(raw) : raw;
+    return validateFieldValue(value, rules).errors ?? [];
+  };
+}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow2435192461";
+var _namespace_ = "InputOverflow58387247";
 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":"InputOverflow2435192461__root"};
+export var classes = {"root":"InputOverflow58387247__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_ = "LoadingRow545130978";
+var _namespace_ = "LoadingRow1478888175";
 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":"LoadingRow545130978__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow545130978__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1478888175__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1478888175__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_ = "MaxHeightText790531276";
+var _namespace_ = "MaxHeightText919211054";
 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":"MaxHeightText790531276__root"};
+export var classes = {"root":"MaxHeightText919211054__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_ = "MaxLines2304982459";
+var _namespace_ = "MaxLines1912520055";
 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":"MaxLines2304982459__root"};
+export var classes = {"root":"MaxLines1912520055__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_ = "MultiBulkActionToolbar1820361712";
+var _namespace_ = "MultiBulkActionToolbar2917075844";
 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":"MultiBulkActionToolbar1820361712__root","leftGroupWrapper":"MultiBulkActionToolbar1820361712__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1820361712__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1820361712__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar2917075844__root","leftGroupWrapper":"MultiBulkActionToolbar2917075844__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2917075844__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2917075844__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_ = "NestedTablePlaceholderStatesRow3883910038";
+var _namespace_ = "NestedTablePlaceholderStatesRow3602099314";
 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":"NestedTablePlaceholderStatesRow3883910038__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow3602099314__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_ = "NestedTableRow3670036296";
+var _namespace_ = "NestedTableRow3992930584";
 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":"NestedTableRow3670036296__root","firstLevel":"NestedTableRow3670036296__firstLevel","placeholder":"NestedTableRow3670036296__placeholder","parentHovered":"NestedTableRow3670036296__parentHovered"};
+export var classes = {"root":"NestedTableRow3992930584__root","firstLevel":"NestedTableRow3992930584__firstLevel","placeholder":"NestedTableRow3992930584__placeholder","parentHovered":"NestedTableRow3992930584__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_ = "MultipleDragOverlayEffect348513564";
+var _namespace_ = "MultipleDragOverlayEffect3065559938";
 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":"MultipleDragOverlayEffect348513564__root"};
+export var classes = {"root":"MultipleDragOverlayEffect3065559938__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_ = "NestedTableDragAndDropRow4090382608";
+var _namespace_ = "NestedTableDragAndDropRow3277640739";
 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":"NestedTableDragAndDropRow4090382608__root"};
+export var classes = {"root":"NestedTableDragAndDropRow3277640739__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_ = "PickerContent1391911279";
+var _namespace_ = "PickerContent1046466529";
 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":"PickerContent1391911279__root"};
+export var classes = {"root":"PickerContent1046466529__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_ = "PickerContentAdditionalStep2748344170";
+var _namespace_ = "PickerContentAdditionalStep1198997690";
 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":"PickerContentAdditionalStep2748344170__root","titles":"PickerContentAdditionalStep2748344170__titles","suffix":"PickerContentAdditionalStep2748344170__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1198997690__root","titles":"PickerContentAdditionalStep1198997690__titles","suffix":"PickerContentAdditionalStep1198997690__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_ = "PickerTableListItem2099110564";
+var _namespace_ = "PickerTableListItem2666300085";
 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":"PickerTableListItem2099110564__root"};
+export var classes = {"root":"PickerTableListItem2666300085__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_ = "ScrollableContent2674810946";
+var _namespace_ = "ScrollableContent968422134";
 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":"ScrollableContent2674810946__root"};
+export var classes = {"root":"ScrollableContent968422134__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_ = "SetupWidget1049875717";
+var _namespace_ = "SetupWidget3823691260";
 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":"SetupWidget1049875717__root","row":"SetupWidget1049875717__row","completedCta":"SetupWidget1049875717__completedCta","secondaryCta":"SetupWidget1049875717__secondaryCta","card":"SetupWidget1049875717__card","stepIcon":"SetupWidget1049875717__stepIcon","chevron":"SetupWidget1049875717__chevron","chevronDisabled":"SetupWidget1049875717__chevronDisabled","inProgressLabel":"SetupWidget1049875717__inProgressLabel"};
+export var classes = {"root":"SetupWidget3823691260__root","row":"SetupWidget3823691260__row","completedCta":"SetupWidget3823691260__completedCta","secondaryCta":"SetupWidget3823691260__secondaryCta","card":"SetupWidget3823691260__card","stepIcon":"SetupWidget3823691260__stepIcon","chevron":"SetupWidget3823691260__chevron","chevronDisabled":"SetupWidget3823691260__chevronDisabled","inProgressLabel":"SetupWidget3823691260__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_ = "SkeletonCard3476574360";
+var _namespace_ = "SkeletonCard1495382215";
 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":"SkeletonCard3476574360__root","headerLoading":"SkeletonCard3476574360__headerLoading"};
+export var classes = {"root":"SkeletonCard1495382215__root","headerLoading":"SkeletonCard1495382215__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};