@wix/patterns 1.467.0 → 1.469.0

package/src/components/EntityPageFields/EntityPageField.tsx

@@ -1,5 +1,5 @@
 import React, { Suspense } from 'react';
-import { Box, Text } from '@wix/design-system';
+import { Box, FormField, Text } from '@wix/design-system';
 import type {
   Field,
   FieldTypeDefinition,
@@ -7,7 +7,9 @@ import type {
 } from '@wix/bex-core';
 import { isReferenceField } from '@wix/bex-core';
 import type { Control } from '@wix/bex-core/form';
+import { FieldCell } from '../FieldCell/FieldCell';
 import { EntityPageReferenceField } from './EntityPageReferenceField';
+import { EntityPageReferenceValue } from './EntityPageReferenceValue';
 import { EntityPageCustomField } from './EntityPageCustomField';
 import {
   FormShortText,
@@ -106,6 +108,8 @@ const FIELD_INPUTS: Record<
 
 export interface EntityPageFieldProps {
   field: Field;
+  /** Value only: no input, and not registered in the form. */
+  readOnly?: boolean;
   formControl: Control<any>;
   /** The entity, used by each renderer to seed its form default value. */
   data: Record<string, unknown>;
@@ -119,10 +123,41 @@ export interface EntityPageFieldProps {
 // EntityPageCustomField instead.
 export function EntityPageField({
   field,
+  readOnly = false,
   formControl,
   data,
   definition,
 }: EntityPageFieldProps) {
+  if (readOnly) {
+    return (
+      <FieldRow field={field}>
+        <FormField
+          label={field.displayName}
+          dataHook={`entity-page-field-${field.id}`}
+        >
+          <Box
+            minHeight="36px"
+            verticalAlign="middle"
+            dataHook={`entity-page-field-${field.id}-value`}
+          >
+            {isReferenceField(field) ? (
+              <EntityPageReferenceValue field={field} value={data[field.id]} />
+            ) : (
+              <FieldCell
+                value={data[field.id]}
+                type={field.type}
+                fieldId={field.id}
+                columnId={field.id}
+                row={data}
+                definition={definition}
+              />
+            )}
+          </Box>
+        </FormField>
+      </FieldRow>
+    );
+  }
+
   // Reference fields need referenced-collection data, so they go through a
   // wrapper (resolves the referenced source, fetches items) rather than the
   // uniform dispatcher below.
@@ -171,9 +206,19 @@ export function EntityPageField({
     />
   );
 
+  return <FieldRow field={field}>{inner}</FieldRow>;
+}
+
+function FieldRow({
+  field,
+  children,
+}: {
+  field: Field;
+  children: React.ReactNode;
+}) {
   return (
     <Box direction="vertical" gap="SP1" width="100%">
-      {inner}
+      {children}
       {field.helpText && (
         <Text
           size="small"

package/src/components/EntityPageFields/EntityPageFields.tsx

@@ -9,7 +9,10 @@ import { observer } from 'mobx-react-lite';
 import { resolveFieldTypeDefinition } from '@wix/bex-core';
 import { usePatternsCmsFieldsContainer } from '@wix/patterns-fields/providers';
 import { useEntityPageContext } from '../../providers';
-import { resolveEntityPageFields } from '../../state/EntityPage/resolveEntityPageFields';
+import {
+  isEntityPageReadOnlyField,
+  resolveEntityPageFields,
+} from '../../state/EntityPage/resolveEntityPageFields';
 import { EntityPageField } from './EntityPageField';
 
 export interface EntityPageFieldsProps {
@@ -48,11 +51,7 @@ function _EntityPageFields({
     return <FieldsSkeleton count={fieldIds?.length} />;
   }
 
-  const fields = resolveEntityPageFields(
-    schema.fields,
-    schema.idField,
-    fieldIds,
-  );
+  const fields = resolveEntityPageFields(schema.fields, fieldIds);
   const data = (state.entity ?? {}) as Record<string, unknown>;
 
   return (
@@ -61,6 +60,7 @@ function _EntityPageFields({
         <EntityPageField
           key={field.id}
           field={field}
+          readOnly={isEntityPageReadOnlyField(field, schema.idField)}
           formControl={state.form.control}
           data={data}
           definition={resolveFieldTypeDefinition(

package/src/components/EntityPageFields/EntityPageReferenceField.tsx

@@ -1,24 +1,17 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { observer } from 'mobx-react-lite';
 import { sourceFetchData } from '@wix/bex-core';
-import type { BaseReferenceField, Field, Schema } from '@wix/bex-core';
+import type { Field } from '@wix/bex-core';
 import type { Control } from '@wix/bex-core/form';
 import { useCollection } from '@wix/bex-core/react';
 import { FormReference, FormMultiReference } from '@wix/patterns-fields';
-import {
-  FilterTranslationProvider,
-  useEntityPageContext,
-} from '../../providers';
+import { FilterTranslationProvider } from '../../providers';
 import { useFilterCollectionStates } from '../../hooks/useFilterCollectionStates';
 import { useOpenCollectionOverlay } from '../../hooks/useOpenCollectionOverlay';
+import { imageFieldOf, useReferencedSchema } from './useReferencedSchema';
 
 type RefRow = Record<string, unknown>;
 
-const imageFieldOf = (
-  fields: Schema['fields'] | undefined,
-): string | undefined =>
-  Object.entries(fields ?? {}).find(([, f]) => f?.type === 'IMAGE')?.[0];
-
 export interface EntityPageReferenceFieldProps {
   field: Field;
   formControl: Control<any>;
@@ -34,21 +27,7 @@ function _EntityPageReferenceField({
   formControl,
   data,
 }: EntityPageReferenceFieldProps) {
-  const state = useEntityPageContext();
-  const referencedCollectionId = (field as BaseReferenceField).referenceMetadata
-    ?.referencedCollectionId;
-  const refSource = useMemo(() => {
-    if (!referencedCollectionId) {
-      return undefined;
-    }
-
-    return (
-      state.schemaSource?.references?.[referencedCollectionId] ??
-      state.schemaSource?.getReferencedCollectionSource?.(
-        referencedCollectionId,
-      )
-    );
-  }, [referencedCollectionId, state.schemaSource]);
+  const { refSource, refSchema } = useReferencedSchema(field);
 
   const collection = useCollection<RefRow>(
     refSource
@@ -70,19 +49,6 @@ function _EntityPageReferenceField({
 
   useEffect(() => collection.init(), [collection]);
 
-  const [refSchema, setRefSchema] = useState<Schema | null>(null);
-  useEffect(() => {
-    let active = true;
-    refSource?.loadSchema().then((loaded) => {
-      if (active) {
-        setRefSchema(loaded.schema);
-      }
-    });
-    return () => {
-      active = false;
-    };
-  }, [refSource]);
-
   const idField = refSchema?.idField;
   const displayField = refSchema?.displayField;
   const imageField = imageFieldOf(refSchema?.fields);

package/src/components/EntityPageFields/EntityPageReferenceValue.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import type { Field } from '@wix/bex-core';
+import {
+  CellMultiReferenceView,
+  CellReferenceView,
+} from '@wix/patterns-fields';
+import { imageFieldOf, useReferencedSchema } from './useReferencedSchema';
+
+export interface EntityPageReferenceValueProps {
+  field: Field;
+  value: unknown;
+}
+
+/** A reference value with no picker: the referenced item's display field, as
+ *  the table's reference cell shows it. Empty until the referenced schema
+ *  resolves, since the label lives in a field only that schema names. */
+export function EntityPageReferenceValue({
+  field,
+  value,
+}: EntityPageReferenceValueProps) {
+  const { refSchema } = useReferencedSchema(field);
+  if (!refSchema || value == null) {
+    return null;
+  }
+
+  const { displayField } = refSchema;
+  const imageField = imageFieldOf(refSchema.fields);
+  const labelOf = (item: unknown) => {
+    // A value that was never expanded (a bare id) has no label to show.
+    if (!item || typeof item !== 'object') {
+      return undefined;
+    }
+    const record = item as Record<string, unknown>;
+    return {
+      name: String(record[displayField] ?? ''),
+      image: imageField
+        ? (record[imageField] as string | undefined)
+        : undefined,
+    };
+  };
+
+  if (field.type === 'MULTI_REFERENCE') {
+    const items = (Array.isArray(value) ? value : []).flatMap((item, i) => {
+      const label = labelOf(item);
+      return label ? [{ id: `${field.id}-${i}`, ...label }] : [];
+    });
+    return items.length ? (
+      <CellMultiReferenceView
+        items={items}
+        fieldId={field.id}
+        dataHook="multi-reference-view"
+      />
+    ) : null;
+  }
+
+  const label = labelOf(value);
+  return label ? (
+    <CellReferenceView
+      name={label.name}
+      imageUrl={label.image}
+      dataHook="reference-view"
+    />
+  ) : null;
+}

package/src/components/EntityPageFields/useReferencedSchema.ts

@@ -0,0 +1,42 @@
+import { useEffect, useMemo, useState } from 'react';
+import type { BaseReferenceField, Field, Schema } from '@wix/bex-core';
+import { useEntityPageContext } from '../../providers';
+
+/** The source a reference field points at, and its schema once loaded. */
+export function useReferencedSchema(field: Field) {
+  const state = useEntityPageContext();
+  const referencedCollectionId = (field as BaseReferenceField).referenceMetadata
+    ?.referencedCollectionId;
+  const refSource = useMemo(() => {
+    if (!referencedCollectionId) {
+      return undefined;
+    }
+
+    return (
+      state.schemaSource?.references?.[referencedCollectionId] ??
+      state.schemaSource?.getReferencedCollectionSource?.(
+        referencedCollectionId,
+      )
+    );
+  }, [referencedCollectionId, state.schemaSource]);
+
+  const [refSchema, setRefSchema] = useState<Schema | null>(null);
+  useEffect(() => {
+    let active = true;
+    refSource?.loadSchema().then((loaded) => {
+      if (active) {
+        setRefSchema(loaded.schema);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [refSource]);
+
+  return { refSource, refSchema };
+}
+
+export const imageFieldOf = (
+  fields: Schema['fields'] | undefined,
+): string | undefined =>
+  Object.entries(fields ?? {}).find(([, f]) => f?.type === 'IMAGE')?.[0];

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

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

package/src/components/FieldCell/FieldCell.tsx

@@ -43,6 +43,11 @@ export interface FieldCellProps {
   type: PatternsFieldType;
   /** Stable id for cells that render WDS Tags (document, multi-document). */
   fieldId?: string;
+  /** Stable id of the column, forwarded to a custom type's cell. Optional
+   *  because a cell can be rendered outside a column; table columns supply it. */
+  columnId?: string;
+  /** The row being rendered, forwarded to a custom type's cell. */
+  row?: unknown;
   /** The custom type definition a CUSTOM field resolves on its source.
    *  Without a `table` slot the cell renders the plain-text default. */
   definition?: FieldTypeDefinition;
@@ -52,7 +57,13 @@ function _FieldCell(props: FieldCellProps) {
   const { dateFormatters } = useWixPatternsContainer();
   if (props.type === 'CUSTOM' && props.definition?.table) {
     const { CellComponent } = props.definition.table;
-    return <CellComponent value={props.value} />;
+    return (
+      <CellComponent
+        value={props.value}
+        columnId={props.columnId ?? ''}
+        row={props.row}
+      />
+    );
   }
   switch (props.type) {
     case 'LONG_TEXT':

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading1732559037";
+var _namespace_ = "Heading5664972";
 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":"Heading1732559037__root"};
+export var classes = {"root":"Heading5664972__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_ = "ImportStepUpload1140211561";
+var _namespace_ = "ImportStepUpload1096372970";
 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":"ImportStepUpload1140211561__root","fileUpload":"ImportStepUpload1140211561__fileUpload"};
+export var classes = {"root":"ImportStepUpload1096372970__root","fileUpload":"ImportStepUpload1096372970__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_ = "InputOverflow649705997";
+var _namespace_ = "InputOverflow1389624861";
 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":"InputOverflow649705997__root"};
+export var classes = {"root":"InputOverflow1389624861__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_ = "LoadingRow2706411648";
+var _namespace_ = "LoadingRow4183285706";
 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":"LoadingRow2706411648__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2706411648__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow4183285706__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow4183285706__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_ = "MaxHeightText897886821";
+var _namespace_ = "MaxHeightText587563954";
 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":"MaxHeightText897886821__root"};
+export var classes = {"root":"MaxHeightText587563954__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_ = "MaxLines175110764";
+var _namespace_ = "MaxLines1899537561";
 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":"MaxLines175110764__root"};
+export var classes = {"root":"MaxLines1899537561__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_ = "MultiBulkActionToolbar226953436";
+var _namespace_ = "MultiBulkActionToolbar4001429243";
 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":"MultiBulkActionToolbar226953436__root","leftGroupWrapper":"MultiBulkActionToolbar226953436__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar226953436__selectedCountItem","selectedCountText":"MultiBulkActionToolbar226953436__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar4001429243__root","leftGroupWrapper":"MultiBulkActionToolbar4001429243__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar4001429243__selectedCountItem","selectedCountText":"MultiBulkActionToolbar4001429243__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_ = "NestedTablePlaceholderStatesRow3087449528";
+var _namespace_ = "NestedTablePlaceholderStatesRow1449507865";
 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":"NestedTablePlaceholderStatesRow3087449528__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1449507865__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_ = "NestedTableRow3699970854";
+var _namespace_ = "NestedTableRow3864270784";
 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":"NestedTableRow3699970854__root","firstLevel":"NestedTableRow3699970854__firstLevel","placeholder":"NestedTableRow3699970854__placeholder","parentHovered":"NestedTableRow3699970854__parentHovered"};
+export var classes = {"root":"NestedTableRow3864270784__root","firstLevel":"NestedTableRow3864270784__firstLevel","placeholder":"NestedTableRow3864270784__placeholder","parentHovered":"NestedTableRow3864270784__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_ = "MultipleDragOverlayEffect3085860456";
+var _namespace_ = "MultipleDragOverlayEffect1578670324";
 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":"MultipleDragOverlayEffect3085860456__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1578670324__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_ = "NestedTableDragAndDropRow1109910316";
+var _namespace_ = "NestedTableDragAndDropRow1288385230";
 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":"NestedTableDragAndDropRow1109910316__root"};
+export var classes = {"root":"NestedTableDragAndDropRow1288385230__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_ = "PickerContent2377797984";
+var _namespace_ = "PickerContent3632886375";
 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":"PickerContent2377797984__root"};
+export var classes = {"root":"PickerContent3632886375__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_ = "PickerContentAdditionalStep3394898760";
+var _namespace_ = "PickerContentAdditionalStep1191243546";
 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":"PickerContentAdditionalStep3394898760__root","titles":"PickerContentAdditionalStep3394898760__titles","suffix":"PickerContentAdditionalStep3394898760__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1191243546__root","titles":"PickerContentAdditionalStep1191243546__titles","suffix":"PickerContentAdditionalStep1191243546__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_ = "PickerTableListItem2417037754";
+var _namespace_ = "PickerTableListItem1935451459";
 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":"PickerTableListItem2417037754__root"};
+export var classes = {"root":"PickerTableListItem1935451459__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_ = "ScrollableContent1511084467";
+var _namespace_ = "ScrollableContent493490318";
 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":"ScrollableContent1511084467__root"};
+export var classes = {"root":"ScrollableContent493490318__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_ = "SetupWidget3796032648";
+var _namespace_ = "SetupWidget2110234757";
 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":"SetupWidget3796032648__root","row":"SetupWidget3796032648__row","completedCta":"SetupWidget3796032648__completedCta","secondaryCta":"SetupWidget3796032648__secondaryCta","card":"SetupWidget3796032648__card","stepIcon":"SetupWidget3796032648__stepIcon","chevron":"SetupWidget3796032648__chevron","chevronDisabled":"SetupWidget3796032648__chevronDisabled","inProgressLabel":"SetupWidget3796032648__inProgressLabel"};
+export var classes = {"root":"SetupWidget2110234757__root","row":"SetupWidget2110234757__row","completedCta":"SetupWidget2110234757__completedCta","secondaryCta":"SetupWidget2110234757__secondaryCta","card":"SetupWidget2110234757__card","stepIcon":"SetupWidget2110234757__stepIcon","chevron":"SetupWidget2110234757__chevron","chevronDisabled":"SetupWidget2110234757__chevronDisabled","inProgressLabel":"SetupWidget2110234757__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};