@wix/patterns 1.421.0 → 1.423.0

package/src/components/ImportButton/ImportButtonModalLayout.tsx

@@ -10,7 +10,7 @@ import { getImportModalStepProps } from './getImportModalStepProps';
 import React, { useEffect, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useCreateImport } from '@wix/bex-core';
-import { detectFieldType } from '@wix/patterns-fields/detect-field-type';
+import { detectFieldType } from '@wix/patterns-fields';
 import { ImportButtonModalLayoutProps } from './ImportProps';
 import { addEventListener } from '@wix/bex-core/util';
 import { useIsMobile } from '../../hooks/useIsMobile';
@@ -19,14 +19,17 @@ import { ImportStepper } from './ImportStepper';
 import { MessageActionModal } from '../ActionModal';
 import { ModalWrapper } from '../CollectionModal';
 import { PatternsFieldsProvider } from '../../providers';
+import { FieldEditorModal } from '../CmsFieldManagement/FieldEditorModal';
+import { FieldEditorModalState } from '../CmsFieldManagement/FieldEditorModalState';
+import { buildFieldDraft } from './importFieldEditor';
 
 function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
   const {
     fields,
-    bulkUploadItems,
+    collectionId,
     backup,
     updateSchema,
-    batchSize,
+    onJobError,
     importModalState,
     ...rest
   } = props;
@@ -35,18 +38,31 @@ function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
 
   const createImport = useCreateImport({
     fields,
-    bulkUploadItems,
+    collectionId,
     backup,
     updateSchema,
+    onJobError,
     // Media-aware detection (image/video/document/audio) lives in
     // patterns-fields; core defaults to primitive detection without it.
     detectColumnType: detectFieldType,
-    batchSize,
     importModalState,
   });
 
   const [state] = useState(() => createImport());
 
+  const [fieldEditorState] = useState(
+    () => new FieldEditorModalState({ onSubmit: state.applyFieldEdit }),
+  );
+
+  const openFieldEditor = (header: string) => {
+    const mapping = state.mappingByHeader[header];
+    if (mapping?.kind !== 'new') {
+      return;
+    }
+    state.beginFieldEdit(header);
+    fieldEditorState.open(buildFieldDraft(header, mapping));
+  };
+
   const {
     onRequestClose,
     children,
@@ -55,6 +71,7 @@ function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
   } = getImportModalStepProps({
     state,
     isMobile,
+    onEditField: openFieldEditor,
   });
 
   const wrappedChildren =
@@ -98,8 +115,12 @@ function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
 
   const { modal: discardModal } = state.discardChangesModal;
 
+  // The main layout + its discard-changes modal differ per device; everything
+  // common (the field editor) is stacked alongside `child` in the single return.
+  let child: React.ReactNode;
+
   if (isMobile) {
-    return (
+    child = (
       <>
         <CustomDrawerLayout
           dataHook="import-modal-layout"
@@ -148,27 +169,39 @@ function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
         </ModalWrapper>
       </>
     );
+  } else {
+    child = (
+      <>
+        <CustomModalLayout
+          width="600px"
+          maxHeight="80vh"
+          dataHook="import-modal-layout"
+          removeContentPadding={removeContentPadding}
+          {...rest}
+          {...customModalLayoutProps}
+          children={content}
+        />
+        <MessageActionModal
+          dataHook="import-discard-changes-modal"
+          state={state.discardChangesModal}
+          title={t('cairo.import.discardChanges.title')}
+          content={t('cairo.import.discardChanges.description')}
+          primaryButtonText={t('cairo.import.discardChanges.confirm')}
+          secondaryButtonText={t('cairo.import.discardChanges.cancel')}
+          theme="destructive"
+        />
+      </>
+    );
   }
 
   return (
     <>
-      <CustomModalLayout
-        width="600px"
-        maxHeight="80vh"
-        dataHook="import-modal-layout"
-        removeContentPadding={removeContentPadding}
-        {...rest}
-        {...customModalLayoutProps}
-        children={content}
-      />
-      <MessageActionModal
-        dataHook="import-discard-changes-modal"
-        state={state.discardChangesModal}
-        title={t('cairo.import.discardChanges.title')}
-        content={t('cairo.import.discardChanges.description')}
-        primaryButtonText={t('cairo.import.discardChanges.confirm')}
-        secondaryButtonText={t('cairo.import.discardChanges.cancel')}
-        theme="destructive"
+      {child}
+      <FieldEditorModal
+        state={fieldEditorState}
+        title={t('cairo.import.editField')}
+        primaryButtonText={t('cairo.import.save')}
+        secondaryButtonText={t('cairo.import.cancel')}
       />
     </>
   );

package/src/components/ImportButton/ImportIdCollisionControl.tsx

@@ -0,0 +1,67 @@
+import { Box, Text, TextButton, PopoverMenu } from '@wix/design-system';
+import { ChevronDown } from '@wix/wix-ui-icons-common';
+import { ImportState, WritePolicy } from '@wix/bex-core';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+
+// Width of the policy popover. The default WDS `maxWidth` (204) is too narrow
+// for "Update the existing items" at the medium menu font, so the label wraps
+// to two lines; this matches the field-column width so each option fits on one
+// line (per the Figma).
+const MENU_MAX_WIDTH = 250;
+
+/**
+ * Shown under the row whose CSV column is mapped to the collection `_id` field.
+ * Lets the user pick how rows that collide on an existing `_id` are written:
+ * update the existing item (`OVERWRITE`) or skip it, keeping the existing data
+ * intact (`SKIP_EXISTING`). The inline action label reflects the current choice
+ * and opens a popover to switch.
+ */
+export const IdCollisionControl = observer(function _IdCollisionControl({
+  state,
+}: {
+  state: ImportState;
+}) {
+  const { translate: t, writePolicy } = state;
+  const isSkip = writePolicy === WritePolicy.SKIP_EXISTING;
+  const actionLabel = isSkip
+    ? t('cairo.import.skipImportedItems')
+    : t('cairo.import.updateExistingItems');
+
+  return (
+    <Box direction="vertical" gap="SP1">
+      <Text size="tiny" secondary dataHook="import-id-collision-label">
+        {t('cairo.import.idCollisionLabel')}
+      </Text>
+      <PopoverMenu
+        appendTo="window"
+        zIndex={5001}
+        maxWidth={MENU_MAX_WIDTH}
+        textSize="small"
+        placement="bottom-start"
+        dataHook="import-id-collision-menu"
+        triggerElement={
+          <TextButton
+            size="tiny"
+            as="button"
+            dataHook="import-id-collision-action"
+            suffixIcon={<ChevronDown />}
+          >
+            {actionLabel}
+          </TextButton>
+        }
+      >
+        <PopoverMenu.MenuItem
+          dataHook="import-id-collision-update"
+          text={t('cairo.import.updateExistingItems')}
+          onClick={() => state.setWritePolicy(WritePolicy.OVERWRITE)}
+        />
+        <PopoverMenu.MenuItem
+          dataHook="import-id-collision-skip"
+          text={t('cairo.import.skipImportedItems')}
+          onClick={() => state.setWritePolicy(WritePolicy.SKIP_EXISTING)}
+        />
+      </PopoverMenu>
+    </Box>
+  );
+});

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

@@ -4,6 +4,7 @@ import {
   CounterBadgeUniDriver,
   CustomModalLayoutUniDriver,
   DropdownUniDriver,
+  InputUniDriver,
   MessageModalLayoutUniDriver,
   ModalUniDriver,
   TextUniDriver,
@@ -107,6 +108,65 @@ export function ImportModalUniDriver(base: UniDriver, body: UniDriver) {
         body,
       ),
 
+    /**
+     * CSV headers in the order their mapping rows are rendered (ID row first).
+     * Reads the per-row column-title cells in DOM order — `.text()` on the
+     * multi-element query returns their text as an ordered array.
+     */
+    getMappingHeadersInOrder: () =>
+      modalLayoutBase().$$('[data-hook="import-column-title"]').text(),
+
+    /** Whether the "When items share the same ID" sentence + action are shown */
+    idCollisionControlExists: () =>
+      modalLayoutBase().$('[data-hook="import-id-collision-action"]').exists(),
+
+    /** Current label of the id-collision inline action (reflects the choice) */
+    getIdCollisionActionText: () =>
+      modalLayoutBase().$('[data-hook="import-id-collision-action"]').text(),
+
+    /** Open the id-collision popover menu */
+    openIdCollisionMenu: () =>
+      modalLayoutBase().$('[data-hook="import-id-collision-action"]').click(),
+
+    // The popover menu renders at `window` (appendTo), so its items live on
+    // `body`, not under the modal layout.
+    clickIdCollisionUpdate: () =>
+      body.$('[data-hook="import-id-collision-update"]').click(),
+    clickIdCollisionSkip: () =>
+      body.$('[data-hook="import-id-collision-skip"]').click(),
+
+    /** Whether the "Edit field" link under a column's new-field mapping exists */
+    editFieldLinkExists: (header: string) =>
+      modalLayoutBase().$(`[data-hook="import-edit-field-${header}"]`).exists(),
+
+    /** Click the "Edit field" link to open the field editor for a column */
+    clickEditField: (header: string) =>
+      modalLayoutBase().$(`[data-hook="import-edit-field-${header}"]`).click(),
+
+    /** Whether the CMS field-editor modal is open */
+    fieldEditorIsOpen: () =>
+      body.$('[data-hook="field-editor-modal"]').exists(),
+
+    /** Field-editor modal layout driver (Save/Cancel, title, ...) */
+    getFieldEditorModal: () =>
+      CustomModalLayoutUniDriver(
+        body.$('[data-hook="field-editor-modal"]'),
+        body,
+      ),
+
+    /** Field-editor "Field name" input driver */
+    getFieldEditorNameInput: () =>
+      InputUniDriver(body.$('[data-hook="cms-field-name-input"]'), body),
+
+    /** Confirm (Save) the field editor */
+    confirmFieldEditor: async () =>
+      (
+        await CustomModalLayoutUniDriver(
+          body.$('[data-hook="field-editor-modal"]'),
+          body,
+        ).getPrimaryButtonDriver()
+      ).click(),
+
     /** Get the discard changes confirmation modal driver */
     getDiscardChangesModal: () =>
       MessageModalLayoutUniDriver(

package/src/components/ImportButton/ImportProps.tsx

@@ -1,8 +1,8 @@
 import {
   BackupFn,
-  BulkUploadItemsFn,
   UpdateSchemaFn,
   ModalState,
+  OnImportJobError,
 } from '@wix/bex-core';
 import { CreateExportAsyncJobRequest } from '@wix/bex-utils/@wix/ambassador-fedinfra-exportservice-v1-export-async-job/types';
 
@@ -10,16 +10,27 @@ type ImportButtonToolbarType = 'default' | 'bulkActionToolbar';
 
 export interface ImportButtonParams
   extends Pick<CreateExportAsyncJobRequest, 'fields'> {
-  bulkUploadItems: BulkUploadItemsFn;
+  /** Destination data collection the import writes into. */
+  collectionId: string;
   backup?: BackupFn;
   /**
    * Adds new collection fields during import, in a single call, before the rows
-   * upload. When provided, unmapped CSV columns default to creating a new (text)
-   * field instead of "don't import". When omitted, behavior is unchanged
+   * 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).
    */
   updateSchema?: UpdateSchemaFn;
-  batchSize?: number;
+  /**
+   * 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.
+   */
+  onJobError?: OnImportJobError;
 }
 
 export type ImportButtonProps = ImportButtonParams & {

package/src/components/ImportButton/ImportStepConfiguration.tsx

@@ -2,6 +2,7 @@ import {
   Box,
   Dropdown,
   Text,
+  TextButton,
   TableListItem,
   listItemSelectBuilder,
   SectionHelper,
@@ -11,9 +12,12 @@ import { ImportState, NewFieldType } from '@wix/bex-core';
 import { useTranslations } from '@wix/patterns-fields';
 import React from 'react';
 import { observer } from 'mobx-react-lite';
+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 = {
@@ -60,11 +64,13 @@ interface NewFieldHelperTextProps {
   state: ImportState;
   header: string;
   fieldType: NewFieldType;
+  onEditField: () => void;
 }
 
 /**
  * Helper line under a "create new field" mapping (e.g. "This will be a new text
- * field."). The type name comes from the shared patterns-fields translations via
+ * field.") followed by an "Edit field" link that opens the field editor. The
+ * type name comes from the shared patterns-fields translations via
  * `useTranslations`, so this is only rendered when the import modal is wrapped in
  * `PatternsFieldsProvider` — which `ImportButtonModalLayout` does whenever field
  * creation is enabled (the only case a `new` mapping exists).
@@ -73,14 +79,28 @@ const NewFieldHelperText = observer(function _NewFieldHelperText({
   state,
   header,
   fieldType,
+  onEditField,
 }: NewFieldHelperTextProps) {
   const { t: ft } = useTranslations();
   const typeName = ft(NEW_FIELD_TYPE_TITLE_KEY[fieldType]).toLocaleLowerCase();
 
   return (
-    <Text size="tiny" secondary dataHook={`import-new-field-helper-${header}`}>
-      {state.translate('cairo.import.newFieldHelper', { typeName })}
-    </Text>
+    <Box direction="horizontal" gap="SP1" verticalAlign="middle">
+      <Text
+        size="tiny"
+        secondary
+        dataHook={`import-new-field-helper-${header}`}
+      >
+        {state.translate('cairo.import.newFieldHelper', { typeName })}
+      </Text>
+      <TextButton
+        size="tiny"
+        dataHook={`import-edit-field-${header}`}
+        onClick={onEditField}
+      >
+        {state.translate('cairo.import.editField')}
+      </TextButton>
+    </Box>
   );
 });
 
@@ -88,12 +108,14 @@ 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];
@@ -110,7 +132,9 @@ const FieldMappingCell = observer(function _FieldMappingCell({
       ...option,
       disabled:
         selectedFieldIds.has(String(option.id)) &&
-        !(mapping?.kind === 'existing' && mapping.fieldId === String(option.id)),
+        !(
+          mapping?.kind === 'existing' && mapping.fieldId === String(option.id)
+        ),
     })),
     ...(canCreateNewField
       ? [
@@ -161,15 +185,27 @@ const FieldMappingCell = observer(function _FieldMappingCell({
           state={state}
           header={header}
           fieldType={mapping.fieldType}
+          onEditField={() => onEditField(header)}
         />
       )}
+      {state.idMappedHeader === header && <IdCollisionControl state={state} />}
     </Box>
   );
 });
 
-function _ImportStepConfiguration({ state }: ImportStepConfigurationProps) {
+function _ImportStepConfiguration({
+  state,
+  onEditField,
+}: ImportStepConfigurationProps) {
   const { csvHeaders, fields, translate: t } = state;
 
+  // The row whose column maps to `_id` floats to the top of the list (CAIRO-4418).
+  const idHeader = state.idMappedHeader;
+  const orderedHeaders =
+    idHeader != null
+      ? [idHeader, ...csvHeaders.filter((header) => header !== idHeader)]
+      : csvHeaders;
+
   const baseDropdownOptions = fields
     .filter((field) => field.id != null)
     .map((field) =>
@@ -229,14 +265,14 @@ function _ImportStepConfiguration({ state }: ImportStepConfigurationProps) {
           maxHeight={hasNoRows ? 'calc(80vh - 420px)' : 'calc(80vh - 300px)'}
           style={SCROLLBAR_GUTTER}
         >
-          {csvHeaders.map((header, index) => (
+          {orderedHeaders.map((header, index) => (
             <TableListItem
               key={header}
-              showDivider={index < csvHeaders.length - 1}
+              showDivider={index < orderedHeaders.length - 1}
               options={[
                 {
                   value: (
-                    <Text ellipsis size="small">
+                    <Text ellipsis size="small" dataHook="import-column-title">
                       {header}
                     </Text>
                   ),
@@ -256,6 +292,7 @@ function _ImportStepConfiguration({ state }: ImportStepConfigurationProps) {
                       state={state}
                       header={header}
                       fieldOptions={baseDropdownOptions}
+                      onEditField={onEditField}
                     />
                   ),
                   width: COLUMN_WIDTHS.field,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload3089486412";
+var _namespace_ = "ImportStepUpload743537825";
 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":"ImportStepUpload3089486412__root","fileUpload":"ImportStepUpload3089486412__fileUpload"};
+export var classes = {"root":"ImportStepUpload743537825__root","fileUpload":"ImportStepUpload743537825__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/getImportModalStepProps.tsx

@@ -15,11 +15,14 @@ import { ImportStepProgress } from './ImportStepProgress';
 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 }
 > {
@@ -77,7 +80,9 @@ export function getImportModalStepProps({
         </Box>
       ),
       subtitle: t('cairo.import.subtitle'),
-      children: <ImportStepConfiguration state={state} />,
+      children: (
+        <ImportStepConfiguration state={state} onEditField={onEditField} />
+      ),
       showFooterDivider: true,
       primaryButtonText: t('cairo.import.startImport'),
       primaryButtonOnClick: state.hasMappings ? state.startImport : undefined,

package/src/components/ImportButton/importFieldEditor.ts

@@ -0,0 +1,27 @@
+import type { NewFieldConfig, NewFieldType } from '@wix/bex-core';
+import type { FieldSpec } from '../../types/SchemaConfig';
+import { toPatternsFieldType } from './newFieldTypeMapping';
+
+type NewFieldMapping = {
+  fieldType: NewFieldType;
+  displayName?: string;
+  config?: NewFieldConfig;
+};
+
+// Builds the field draft the editor opens pre-filled from, for a column's
+// pending new field. The reverse (editor output → mapping) lives in core's
+// `ImportState.applyFieldEdit`.
+export function buildFieldDraft(
+  header: string,
+  mapping: NewFieldMapping,
+): FieldSpec {
+  return {
+    type: toPatternsFieldType(mapping.fieldType),
+    displayName: mapping.displayName ?? header,
+    ...(mapping.config?.isPii && { isPii: true }),
+    ...(mapping.config?.helpText && { helpText: mapping.config.helpText }),
+    ...(mapping.config?.validation && {
+      validation: mapping.config.validation,
+    }),
+  } as FieldSpec;
+}

package/src/components/ImportButton/newFieldTypeMapping.ts

@@ -0,0 +1,21 @@
+import type { NewFieldType, PatternsFieldType } from '@wix/bex-core';
+
+// Maps the import flow's `NewFieldType` (lowercase, data-driven detection) to the
+// schema's `PatternsFieldType` (uppercase) used by `Field` / the field editor.
+// The reverse mapping (editor output → `NewFieldType`) lives in core, next to
+// `ImportState`, which consumes it directly.
+
+const NEW_FIELD_TYPE_TO_PATTERNS: Record<NewFieldType, PatternsFieldType> = {
+  text: 'SHORT_TEXT',
+  number: 'NUMBER',
+  date: 'DATE',
+  boolean: 'BOOLEAN',
+  url: 'URL',
+  image: 'IMAGE',
+  video: 'VIDEO',
+  document: 'DOCUMENT',
+  audio: 'AUDIO',
+};
+
+export const toPatternsFieldType = (type: NewFieldType): PatternsFieldType =>
+  NEW_FIELD_TYPE_TO_PATTERNS[type];

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow3195981367";
+var _namespace_ = "InputOverflow3575171856";
 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":"InputOverflow3195981367__root"};
+export var classes = {"root":"InputOverflow3575171856__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_ = "LoadingRow3194104638";
+var _namespace_ = "LoadingRow2797869485";
 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":"LoadingRow3194104638__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3194104638__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow2797869485__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow2797869485__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_ = "MaxHeightText3934228268";
+var _namespace_ = "MaxHeightText569819111";
 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":"MaxHeightText3934228268__root"};
+export var classes = {"root":"MaxHeightText569819111__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_ = "MaxLines1686750847";
+var _namespace_ = "MaxLines1271739733";
 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":"MaxLines1686750847__root"};
+export var classes = {"root":"MaxLines1271739733__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_ = "MultiBulkActionToolbar3475729719";
+var _namespace_ = "MultiBulkActionToolbar3555060580";
 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":"MultiBulkActionToolbar3475729719__root","leftGroupWrapper":"MultiBulkActionToolbar3475729719__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3475729719__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3475729719__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar3555060580__root","leftGroupWrapper":"MultiBulkActionToolbar3555060580__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3555060580__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3555060580__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};