@wix/patterns 1.425.0 → 1.427.0

package/src/components/ImportButton/ImportIdCollisionControl.tsx

@@ -29,7 +29,7 @@ export const IdCollisionControl = observer(function _IdCollisionControl({
     : t('cairo.import.updateExistingItems');
 
   return (
-    <Box direction="vertical" gap="SP1">
+    <Box direction="vertical" gap="0">
       <Text size="tiny" secondary dataHook="import-id-collision-label">
         {t('cairo.import.idCollisionLabel')}
       </Text>

package/src/components/ImportButton/ImportModal.uni.driver.ts

@@ -64,6 +64,22 @@ export function ImportModalUniDriver(base: UniDriver, body: UniDriver) {
     isConfigurationStepVisible: () => configurationStepBase().exists(),
     isSummaryStepVisible: () => summaryStepBase().exists(),
 
+    // Summary step count rows (created / updated / failed). Each row's text is
+    // the translated count line; `*Exists` reflects whether that row rendered
+    // (a count row is shown only when its count is > 0).
+    summaryCreatedExists: () =>
+      summaryStepBase().$('[data-hook="import-summary-created"]').exists(),
+    getSummaryCreatedText: () =>
+      summaryStepBase().$('[data-hook="import-summary-created"]').text(),
+    summaryUpdatedExists: () =>
+      summaryStepBase().$('[data-hook="import-summary-updated"]').exists(),
+    getSummaryUpdatedText: () =>
+      summaryStepBase().$('[data-hook="import-summary-updated"]').text(),
+    summaryFailedExists: () =>
+      summaryStepBase().$('[data-hook="import-summary-failed"]').exists(),
+    getSummaryFailedText: () =>
+      summaryStepBase().$('[data-hook="import-summary-failed"]').text(),
+
     /** Simulates selecting a file in the upload step */
     uploadFile: async (file: File) => {
       const nativeInput: HTMLInputElement = await fileInputBase()
@@ -154,6 +170,16 @@ export function ImportModalUniDriver(base: UniDriver, body: UniDriver) {
     clickEditField: (header: string) =>
       modalLayoutBase().$(`[data-hook="import-edit-field-${header}"]`).click(),
 
+    // The mapping dropdown's popover appends to `window`, so its "+ Create New
+    // Field" footer renders on `body`, not under the modal layout.
+    /** Whether the dropdown's "+ Create New Field" footer is shown for a column */
+    createFieldFooterExists: (header: string) =>
+      body.$(`[data-hook="import-create-field-${header}"]`).exists(),
+
+    /** Click the "+ Create New Field" dropdown footer for a column */
+    clickCreateField: (header: string) =>
+      body.$(`[data-hook="import-create-field-${header}"]`).click(),
+
     /** Whether the CMS field-editor modal is open */
     fieldEditorIsOpen: () =>
       body.$('[data-hook="field-editor-modal"]').exists(),

package/src/components/ImportButton/ImportProps.tsx

@@ -1,50 +1,41 @@
-import {
-  BackupFn,
-  UpdateSchemaFn,
-  ModalState,
-  OnImportJobError,
-  Destination,
-} from '@wix/bex-core';
-import { CreateExportAsyncJobRequest } from '@wix/bex-utils/@wix/ambassador-fedinfra-exportservice-v1-export-async-job/types';
+import { ImportButtonConfig, ImportState, ModalState } from '@wix/bex-core';
+import { ReactNode } from 'react';
 
 type ImportButtonToolbarType = 'default' | 'bulkActionToolbar';
 
-export interface ImportButtonParams
-  extends Pick<CreateExportAsyncJobRequest, 'fields'> {
-  /**
-   * Destination data collection the import writes into (the common CMS case).
-   * Provide this or `destination`.
-   */
-  collectionId?: string;
-  /**
-   * Platformized (non–Wix-Data) destination, sent to the import job verbatim
-   * (e.g. `{ storesCatalogProducts: {} }`). Use this when the import targets an
-   * internal service that writes through its own data-hub destination variant
-   * rather than a Wix Data collection. When provided, `collectionId` is ignored.
-   */
-  destination?: Destination;
-  backup?: BackupFn;
+/**
+ * Renders the source's "create/edit field" modal. Returned by a source's import
+ * hook (`useSchemaImport`, `usePlatformizedImport`) and passed to `ImportButton`
+ * as `renderFieldEditor`. The returned element is a self-contained editor that
+ * watches `state.editingHeader` to open, pre-fill, and close itself, and writes
+ * the result back via the state's `applyFieldEdit` / `applyDataExtensionFieldEdit`.
+ */
+export type RenderImportFieldEditor = (args: {
+  state: ImportState;
+}) => ReactNode;
+
+export interface ImportButtonParams {
   /**
-   * Adds new collection fields during import, in a single call, before the rows
-   * upload. When provided, unmapped CSV columns default to creating a new field
-   * (its type inferred from the column data) instead of "don't import"; the user
-   * can refine the field's name, type, and configuration via "Edit field", which
-   * is carried on each `NewFieldDefinition`. When omitted, behavior is unchanged
-   * (unmapped columns default to skip).
+   * The import inputs. Build it with a source hook — `useSchemaImport` for a CMS
+   * (Wix Data) collection, or `usePlatformizedImport` for a platformized
+   * destination — and pass the returned `config`.
    */
-  updateSchema?: UpdateSchemaFn;
+  config: ImportButtonConfig;
   /**
-   * Resolves a user-facing message for a failed import job. The job's error is
-   * the consumer's own application error, so wrap the given operation with your
-   * `withErrorHandler` + error-code map (keyed by application-error code), e.g.
-   * `(run) => withErrorHandler(run, { [jobErrorCode]: (e) => ({ message }) })`.
-   * See {@link OnImportJobError}. When omitted, the generic error message is
-   * shown.
+   * Renders the source's create/edit-field modal (see
+   * {@link RenderImportFieldEditor}). Supplied by consumer-driven sources (e.g.
+   * `useSchemaImport` for CMS). A DataExtension destination provides its own
+   * internally, so it need not be passed for that case.
    */
-  onJobError?: OnImportJobError;
+  renderFieldEditor?: RenderImportFieldEditor;
 }
 
 export type ImportButtonProps = ImportButtonParams & {
+  /**
+   * Which button variant to render. `'default'` (the default) shows a
+   * `ResponsiveButton`; `'bulkActionToolbar'` shows a compact secondary
+   * `Button`.
+   */
   toolbarType?: ImportButtonToolbarType;
 };
 

package/src/components/ImportButton/ImportRequiredFieldsSideNote.tsx

@@ -0,0 +1,60 @@
+import { Box, Text, Tooltip } from '@wix/design-system';
+import {
+  StatusAlertFilledSmall,
+  InfoCircleSmall,
+} from '@wix/wix-ui-icons-common';
+import { ImportState } from '@wix/bex-core';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+
+export interface ImportRequiredFieldsSideNoteProps {
+  state: ImportState;
+}
+
+/**
+ * Footer side-note shown in the mapping step while required destination fields
+ * are unmapped (CAIRO-4452): a red "Missing N required field(s)" line plus an
+ * info icon whose tooltip lists which fields. Rendered in the modal's
+ * `sideActions` (the footer's left region, in the button row) rather than the
+ * full-width footnote strip. The Import button stays enabled — the click is
+ * blocked (with a toast) in `ImportState.startImport`.
+ */
+function _ImportRequiredFieldsSideNote({
+  state,
+}: ImportRequiredFieldsSideNoteProps) {
+  const { translate: t, missingRequiredFields } = state;
+
+  const fieldNames = missingRequiredFields
+    .map((field) => field.header || field.id || '')
+    .filter(Boolean)
+    .join(', ');
+
+  return (
+    <Box gap="SP1" verticalAlign="middle" dataHook="import-missing-required">
+      <Box verticalAlign="middle" color="R10">
+        <StatusAlertFilledSmall />
+      </Box>
+      <Text size="small" skin="error" dataHook="import-missing-required-text">
+        {t('cairo.import.missingRequiredField', {
+          count: missingRequiredFields.length,
+        })}
+      </Text>
+      <Tooltip
+        appendTo="window"
+        fixed={false}
+        flip
+        content={t('cairo.import.missingRequiredMessage', {
+          fields: fieldNames,
+        })}
+      >
+        <Box verticalAlign="middle" color="D40">
+          <InfoCircleSmall />
+        </Box>
+      </Tooltip>
+    </Box>
+  );
+}
+
+export const ImportRequiredFieldsSideNote = observer(
+  _ImportRequiredFieldsSideNote,
+);

package/src/components/ImportButton/ImportStepConfiguration.tsx

@@ -1,13 +1,15 @@
 import {
   Box,
+  Divider,
   Dropdown,
   Text,
   TextButton,
   TableListItem,
+  ListItemAction,
   listItemSelectBuilder,
   SectionHelper,
 } from '@wix/design-system';
-import { ArrowRight } from '@wix/wix-ui-icons-common';
+import { Add, ArrowRight } from '@wix/wix-ui-icons-common';
 import { ImportState, NewFieldType } from '@wix/bex-core';
 import { useTranslations } from '@wix/patterns-fields';
 import React from 'react';
@@ -16,8 +18,6 @@ import { IdCollisionControl } from './ImportIdCollisionControl';
 
 export interface ImportStepConfigurationProps {
   state: ImportState;
-  /** Opens the "Edit field" editor for a column's pending new field. */
-  onEditField: (header: string) => void;
 }
 
 const COLUMN_WIDTHS = {
@@ -64,7 +64,6 @@ interface NewFieldHelperTextProps {
   state: ImportState;
   header: string;
   fieldType: NewFieldType;
-  onEditField: () => void;
 }
 
 /**
@@ -79,7 +78,6 @@ const NewFieldHelperText = observer(function _NewFieldHelperText({
   state,
   header,
   fieldType,
-  onEditField,
 }: NewFieldHelperTextProps) {
   const { t: ft } = useTranslations();
   const typeName = ft(NEW_FIELD_TYPE_TITLE_KEY[fieldType]).toLocaleLowerCase();
@@ -96,7 +94,7 @@ const NewFieldHelperText = observer(function _NewFieldHelperText({
       <TextButton
         size="tiny"
         dataHook={`import-edit-field-${header}`}
-        onClick={onEditField}
+        onClick={() => state.beginFieldEdit(header)}
       >
         {state.translate('cairo.import.editField')}
       </TextButton>
@@ -108,14 +106,12 @@ interface FieldMappingCellProps {
   state: ImportState;
   header: string;
   fieldOptions: DropdownOption[];
-  onEditField: (header: string) => void;
 }
 
 const FieldMappingCell = observer(function _FieldMappingCell({
   state,
   header,
   fieldOptions,
-  onEditField,
 }: FieldMappingCellProps) {
   const { translate: t, selectedFieldIds, canCreateNewField } = state;
   const mapping = state.mappingByHeader[header];
@@ -138,12 +134,18 @@ const FieldMappingCell = observer(function _FieldMappingCell({
     })),
     ...(canCreateNewField
       ? [
-          // The option is the CSV column header itself (the new field is named
-          // after it) followed by a translated "(New)" marker. The header is
-          // built in code rather than via an interpolated key so it always
-          // shows, regardless of which translation bundle the consumer loads.
+          // The new field's name — the display name the user entered in the
+          // field editor once they've named it, otherwise the CSV column header
+          // (the default the field is created with). Followed by a translated
+          // "(New)" marker, built in code rather than via an interpolated key so
+          // it always shows regardless of which translation bundle the consumer
+          // loads.
           (() => {
-            const label = `${header} ${t('cairo.import.newFieldSuffix')}`;
+            const newFieldName =
+              mapping?.kind === 'new' && mapping.displayName
+                ? mapping.displayName
+                : header;
+            const label = `${newFieldName} ${t('cairo.import.newFieldSuffix')}`;
             return listItemSelectBuilder({
               id: CREATE_NEW_FIELD_OPTION_ID,
               label,
@@ -178,6 +180,28 @@ const FieldMappingCell = observer(function _FieldMappingCell({
           fixed: false,
         }}
         options={options}
+        fixedFooter={
+          canCreateNewField ? (
+            <div>
+              {/* Separate the "Create new field" action from the field options
+                  above it (CAIRO-4476). */}
+              <Divider />
+              <ListItemAction
+                size="small"
+                skin="primary"
+                prefixIcon={<Add />}
+                dataHook={`import-create-field-${header}`}
+                title={t('cairo.import.createNewField')}
+                // Map the column to a new field, then open the editor on it — the
+                // editor component (renderFieldEditor) reacts to `editingHeader`.
+                onClick={() => {
+                  state.setNewFieldMapping(header);
+                  state.beginFieldEdit(header);
+                }}
+              />
+            </div>
+          ) : undefined
+        }
         size="small"
       />
       {mapping?.kind === 'new' && (
@@ -185,7 +209,6 @@ const FieldMappingCell = observer(function _FieldMappingCell({
           state={state}
           header={header}
           fieldType={mapping.fieldType}
-          onEditField={() => onEditField(header)}
         />
       )}
       {state.canConfigureWritePolicy && state.idMappedHeader === header && (
@@ -195,10 +218,7 @@ const FieldMappingCell = observer(function _FieldMappingCell({
   );
 });
 
-function _ImportStepConfiguration({
-  state,
-  onEditField,
-}: ImportStepConfigurationProps) {
+function _ImportStepConfiguration({ state }: ImportStepConfigurationProps) {
   const { csvHeaders, fields, translate: t } = state;
 
   // Row order is snapshotted per file in state, with the `_id`-mapped column
@@ -294,7 +314,6 @@ function _ImportStepConfiguration({
                       state={state}
                       header={header}
                       fieldOptions={baseDropdownOptions}
-                      onEditField={onEditField}
                     />
                   ),
                   width: COLUMN_WIDTHS.field,

package/src/components/ImportButton/ImportStepSummary.tsx

@@ -0,0 +1,72 @@
+import { Box, Text } from '@wix/design-system';
+import {
+  StatusAlertFilled,
+  StatusCompleteFilled,
+} from '@wix/wix-ui-icons-common';
+import { ImportState } from '@wix/bex-core';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+
+export interface ImportStepSummaryProps {
+  state: ImportState;
+}
+
+function CountRow({
+  icon,
+  color,
+  children,
+}: {
+  icon: React.ReactNode;
+  color: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Box gap="SP2" verticalAlign="middle">
+      <Box align="center" verticalAlign="middle" color={color}>
+        {icon}
+      </Box>
+      <Box direction="vertical">{children}</Box>
+    </Box>
+  );
+}
+
+function _ImportStepSummary({ state }: ImportStepSummaryProps) {
+  const { result, translate: t } = state;
+  const { created, updated, failed } = result;
+
+  return (
+    <Box
+      direction="vertical"
+      gap="SP3"
+      width="100%"
+      dataHook="import-summary-step"
+    >
+      {created > 0 && (
+        <CountRow icon={<StatusCompleteFilled />} color="G10">
+          <Text dataHook="import-summary-created">
+            {t('cairo.import.summaryCreated', { count: created })}
+          </Text>
+        </CountRow>
+      )}
+      {updated > 0 && (
+        <CountRow icon={<StatusCompleteFilled />} color="G10">
+          <Text dataHook="import-summary-updated">
+            {t('cairo.import.summaryUpdated', { count: updated })}
+          </Text>
+        </CountRow>
+      )}
+      {failed > 0 && (
+        <CountRow icon={<StatusAlertFilled />} color="R10">
+          <Text dataHook="import-summary-failed">
+            {t('cairo.import.summaryFailed', { count: failed })}
+          </Text>
+          <Text size="small" secondary dataHook="import-summary-failed-hint">
+            {t('cairo.import.summaryFailedHint')}
+          </Text>
+        </CountRow>
+      )}
+    </Box>
+  );
+}
+
+export const ImportStepSummary = observer(_ImportStepSummary);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload1052508311";
+var _namespace_ = "ImportStepUpload3529433858";
 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":"ImportStepUpload1052508311__root","fileUpload":"ImportStepUpload1052508311__fileUpload"};
+export var classes = {"root":"ImportStepUpload3529433858__root","fileUpload":"ImportStepUpload3529433858__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/ImportStepper.tsx

@@ -3,10 +3,14 @@ import { ImportState, ImportStep } from '@wix/bex-core';
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 
+// The stepper is only rendered on the upload/configuration steps (see
+// ImportButtonModalLayout); progress and summary map past the last visible step
+// so both rendered steps read as completed if the stepper is ever shown.
 const STEPPER_INDEX: Record<ImportStep, number> = {
   upload: 0,
   configuration: 1,
   progress: 2,
+  summary: 2,
 };
 
 function getStepperSteps(currentStep: ImportStep, t: ImportState['translate']) {

package/src/components/ImportButton/getImportModalStepProps.tsx

@@ -11,18 +11,17 @@ import React, { ReactNode } from 'react';
 import { ImportStepUpload } from './ImportStepUpload';
 import { ImportStepConfiguration } from './ImportStepConfiguration';
 import { ImportStepProgress } from './ImportStepProgress';
+import { ImportRequiredFieldsSideNote } from './ImportRequiredFieldsSideNote';
+import { ImportStepSummary } from './ImportStepSummary';
 
 export interface GetImportModalStepProps {
   state: ImportState;
   isMobile?: boolean;
-  /** Opens the "Edit field" editor for a column's pending new field. */
-  onEditField: (header: string) => void;
 }
 
 export function getImportModalStepProps({
   state,
   isMobile,
-  onEditField,
 }: GetImportModalStepProps): Partial<
   CustomModalLayoutProps & { children?: ReactNode; onRequestClose?: () => void }
 > {
@@ -38,7 +37,15 @@ export function getImportModalStepProps({
           <Text size="small" secondary>
             {t('cairo.import.footerText')}
           </Text>
-          <TextButton size="small">{t('cairo.import.footerLink')}</TextButton>
+          <TextButton
+            size="small"
+            as="a"
+            href="https://support.wix.com/en/article/import-data-from-a-file"
+            target="_blank"
+            rel="noopener"
+          >
+            {t('cairo.import.footerLink')}
+          </TextButton>
         </Box>
       ),
       showFooterDivider: false,
@@ -80,9 +87,14 @@ export function getImportModalStepProps({
         </Box>
       ),
       subtitle: t('cairo.import.subtitle'),
-      children: (
-        <ImportStepConfiguration state={state} onEditField={onEditField} />
-      ),
+      children: <ImportStepConfiguration state={state} />,
+      // Left-aligned footer side-note while required fields are unmapped
+      // (CAIRO-4452). Sits in the footer's button row (`sideActions`), not the
+      // full-width footnote strip. The Import button stays enabled; the click is
+      // blocked with a toast in `startImport`.
+      sideActions: state.hasMissingRequiredFields ? (
+        <ImportRequiredFieldsSideNote state={state} />
+      ) : undefined,
       showFooterDivider: true,
       primaryButtonText: t('cairo.import.startImport'),
       primaryButtonOnClick: state.hasMappings ? state.startImport : undefined,
@@ -103,6 +115,37 @@ export function getImportModalStepProps({
     };
   }
 
+  if (currentStep === 'summary') {
+    const { succeeded, failed } = state.result;
+    const hasFailures = failed > 0;
+
+    return {
+      title: t('cairo.import.summaryTitle', {
+        imported: String(succeeded),
+        total: state.totalCount,
+      }),
+      children: <ImportStepSummary state={state} />,
+      showFooterDivider: false,
+      // When rows failed, "Download CSV" is the primary (emphasized) action and
+      // "Close" the secondary — the user's next step is to fix the failures. A
+      // fully successful import has nothing to download, so "Close" is primary
+      // and stands alone.
+      ...(hasFailures
+        ? {
+            primaryButtonText: t('cairo.import.downloadCsv'),
+            primaryButtonOnClick: state.downloadFailedRows,
+            secondaryButtonText: t('cairo.import.close'),
+            secondaryButtonOnClick: state.done,
+          }
+        : {
+            primaryButtonText: t('cairo.import.close'),
+            primaryButtonOnClick: state.done,
+          }),
+      closeButtonProps: { onClick: state.done, autoFocus: true },
+      onRequestClose: state.done,
+    };
+  }
+
   const hasError = state.importStatus.isError;
 
   return {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow287029217";
+var _namespace_ = "InputOverflow2655434443";
 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":"InputOverflow287029217__root"};
+export var classes = {"root":"InputOverflow2655434443__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_ = "LoadingRow1019223766";
+var _namespace_ = "LoadingRow59215511";
 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":"LoadingRow1019223766__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow1019223766__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow59215511__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow59215511__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_ = "MaxHeightText2749124516";
+var _namespace_ = "MaxHeightText1409616332";
 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":"MaxHeightText2749124516__root"};
+export var classes = {"root":"MaxHeightText1409616332__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_ = "MaxLines823584045";
+var _namespace_ = "MaxLines2439770051";
 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":"MaxLines823584045__root"};
+export var classes = {"root":"MaxLines2439770051__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_ = "MultiBulkActionToolbar471604284";
+var _namespace_ = "MultiBulkActionToolbar1544486444";
 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":"MultiBulkActionToolbar471604284__root","leftGroupWrapper":"MultiBulkActionToolbar471604284__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar471604284__selectedCountItem","selectedCountText":"MultiBulkActionToolbar471604284__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar1544486444__root","leftGroupWrapper":"MultiBulkActionToolbar1544486444__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1544486444__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1544486444__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_ = "NestedTablePlaceholderStatesRow3520466444";
+var _namespace_ = "NestedTablePlaceholderStatesRow419327296";
 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":"NestedTablePlaceholderStatesRow3520466444__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow419327296__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};