@wix/patterns 1.490.0 → 1.493.0

package/src/components/FormPage/FormPageActionsBar.tsx

@@ -8,15 +8,29 @@ import { ActionsBarConfig, ctaKeys } from '@wix/bex-core';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import type { FormPageSaveSplitActionProps } from './FormPageSaveSplitAction';
+import { DisabledTooltip } from '../DisabledTooltip';
 
 const FormPageSaveSplitActionFallback = ({
   size,
   label,
   onSave,
+  disabled,
+  disabledReason,
 }: FormPageSaveSplitActionProps) => (
-  <Button size={size} dataHook="form-page-save-btn" onClick={onSave}>
-    {label}
-  </Button>
+  <DisabledTooltip
+    content={disabledReason}
+    disabled={!disabledReason}
+    dataHook="form-page-save-btn-disabled-tooltip"
+  >
+    <Button
+      size={size}
+      dataHook="form-page-save-btn"
+      onClick={onSave}
+      disabled={disabled}
+    >
+      {label}
+    </Button>
+  </DisabledTooltip>
 );
 
 // Lazy loaded so the split action and its popover stay out of the EntityPage bundle for consumers that pass no secondary actions.
@@ -62,16 +76,30 @@ export function _FormPageActionsBar({
     (actionsBarConfig?.saveCta?.consumerText ??
       t(ctaKeys[actionsBarConfig?.saveCta?.text ?? 'SAVE']))
   );
-  const saveButton = (
+  const saveDisabled = actionsBarConfig?.saveCta?.disabled;
+  const saveDisabledReason = actionsBarConfig?.saveCta?.disabledReason;
+  const saveCtaButton = (
     <Button
       fullWidth={isMobile}
       size={size}
       dataHook="form-page-save-btn"
       onClick={onSave}
+      disabled={saveDisabled}
     >
       {saveLabel}
     </Button>
   );
+  const saveButton = isMobile ? (
+    saveCtaButton
+  ) : (
+    <DisabledTooltip
+      content={saveDisabledReason}
+      disabled={!saveDisabledReason}
+      dataHook="form-page-save-btn-disabled-tooltip"
+    >
+      {saveCtaButton}
+    </DisabledTooltip>
+  );
 
   return (
     <Box gap="SP2">
@@ -96,6 +124,8 @@ export function _FormPageActionsBar({
             secondaryActions={secondaryActions}
             isSaving={state.submitTask.status.isLoading}
             onSave={onSave}
+            disabled={saveDisabled}
+            disabledReason={saveDisabledReason}
           />
         </Suspense>
       ) : (

package/src/components/FormPage/FormPageSaveSplitAction.tsx

@@ -7,6 +7,7 @@ import {
 import { ChevronDown } from '@wix/wix-ui-icons-common/lazy';
 import React, { ReactNode } from 'react';
 import type { SaveCtaSecondaryAction } from '@wix/bex-core';
+import { DisabledTooltip } from '../DisabledTooltip';
 
 export interface FormPageSaveSplitActionProps {
   size: 'small' | 'medium';
@@ -15,6 +16,8 @@ export interface FormPageSaveSplitActionProps {
   secondaryActions: SaveCtaSecondaryAction[];
   isSaving?: boolean;
   onSave?: () => void;
+  disabled?: boolean;
+  disabledReason?: ReactNode;
 }
 
 export function FormPageSaveSplitAction({
@@ -24,12 +27,24 @@ export function FormPageSaveSplitAction({
   secondaryActions,
   isSaving,
   onSave,
+  disabled,
+  disabledReason,
 }: FormPageSaveSplitActionProps) {
   return (
     <SplitAction size={size} priority="primary" dataHook="form-page-save-split">
-      <SplitActionButton dataHook="form-page-save-btn" onClick={onSave}>
-        {label}
-      </SplitActionButton>
+      <DisabledTooltip
+        content={disabledReason}
+        disabled={!disabledReason}
+        dataHook="form-page-save-btn-disabled-tooltip"
+      >
+        <SplitActionButton
+          dataHook="form-page-save-btn"
+          onClick={onSave}
+          disabled={disabled}
+        >
+          {label}
+        </SplitActionButton>
+      </DisabledTooltip>
       <PopoverMenu
         placement="bottom-end"
         dataHook="form-page-save-menu"
@@ -50,6 +65,9 @@ export function FormPageSaveSplitAction({
             text={action.consumerText}
             prefixIcon={action.icon}
             disabled={isSaving || action.disabled}
+            disabledDescription={
+              action.disabled ? action.disabledReason : undefined
+            }
             onClick={action.onClick}
           />
         ))}

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

@@ -2,11 +2,13 @@ import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import { baseUniDriverFactory } from '../../unidriver';
 import {
   ButtonUniDriver,
+  ListItemActionUniDriver,
   PopoverMenuUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 
 import PageErrorStateUniDriver from '../PageErrorState/PageErrorState.uni.driver';
 import FormPageCardUniDriver from '../FormPageCard/FormPageCard.uni.driver';
+import { DisabledTooltipButtonUniDriver } from '../DisabledTooltip/DisabledTooltipButton.uni.driver';
 
 export const FormPageContentUniDriver = (base: UniDriver, body: UniDriver) => {
   const moreActionsPopoverDriver = (dataHook: string) =>
@@ -15,6 +17,9 @@ export const FormPageContentUniDriver = (base: UniDriver, body: UniDriver) => {
   const getCard = (dataHook: string) =>
     FormPageCardUniDriver(base.$(`[data-hook="${dataHook}"]`), body);
 
+  const getSaveButton = () =>
+    ButtonUniDriver(base.$$(`[data-hook="form-page-save-btn"]`).get(0), body);
+
   return {
     /** Returns Cancel button driver */
     cancelButton: () =>
@@ -23,8 +28,12 @@ export const FormPageContentUniDriver = (base: UniDriver, body: UniDriver) => {
         body,
       ),
     /** Returns Save button driver */
-    saveButton: () =>
-      ButtonUniDriver(base.$$(`[data-hook="form-page-save-btn"]`).get(0), body),
+    saveButton: getSaveButton,
+    isSaveDisabled: () => getSaveButton().isButtonDisabled(),
+    getSaveDisabledTooltipText: () =>
+      DisabledTooltipButtonUniDriver(base, body, {
+        dataHook: 'form-page-save-btn',
+      }).getTooltipText(),
 
     /** Returns the split save action driver, present only when the save CTA is given secondary actions */
     saveSplitAction: () => {
@@ -60,6 +69,23 @@ export const FormPageContentUniDriver = (base: UniDriver, body: UniDriver) => {
         /** Clicks a secondary action by data-hook */
         clickAtChildByDataHook: (childDataHook: string) =>
           savePopoverDriver.clickAtChildByDataHook(childDataHook),
+
+        isSecondaryActionDisabled: (childDataHook: string) =>
+          ListItemActionUniDriver(
+            body.$(`[data-hook="${childDataHook}"]`),
+            body,
+          ).isDisabled(),
+
+        getSecondaryActionDisabledTooltipText: async (
+          childDataHook: string,
+        ) => {
+          const descriptionId = await body
+            .$(`[data-hook="${childDataHook}"]`)
+            .attr('aria-describedby');
+          return descriptionId
+            ? body.$(`[id="${descriptionId}"]`).text()
+            : null;
+        },
       };
     },
 

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

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

package/src/components/ImportButton/CmsImportFieldEditor.tsx

@@ -50,10 +50,8 @@ const _CmsImportFieldEditor = ({ state }: { state: ImportState }) => {
       title={t('cairo.import.editField')}
       primaryButtonText={t('cairo.import.save')}
       secondaryButtonText={t('cairo.import.cancel')}
-      // The mapping dropdown's popover renders at z-index 5001. Opening the editor
-      // from the "+ Create New Field" footer doesn't synchronously close that
-      // popover, so the editor must stack above it — below the field-type dropdown
-      // inside the editor (10000) and toasts (5500).
+      // Keep the editor above the mapping popover while it closes, and below
+      // the editor's field-type dropdown (10000) and toasts (5500).
       zIndex={5100}
     />
   );

package/src/components/ImportButton/ImportButtonModalLayout.tsx

@@ -46,19 +46,29 @@ function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
   // The create/edit-field editor follows the destination and is loaded on demand,
   // so neither the CMS nor the DataExtension editor is bundled until an import
   // that can create fields actually opens. A `renderFieldEditor` prop overrides.
-  const isPlatformized = Boolean(config?.destination);
+  // `fieldManagement` is read live, so the schema editor is picked once the
+  // source has loaded.
+  const editorKind = config?.destination
+    ? 'dataExtension'
+    : state.fieldManagement
+    ? 'schema'
+    : 'cms';
   const FieldEditor = useMemo(
     () =>
       lazy(() =>
-        isPlatformized
+        editorKind === 'dataExtension'
           ? import('../DataExtension/DataExtensionImportFieldEditor').then(
               (m) => ({ default: m.DataExtensionImportFieldEditor }),
             )
+          : editorKind === 'schema'
+          ? import('./SchemaImportFieldEditor').then((m) => ({
+              default: m.SchemaImportFieldEditor,
+            }))
           : import('./CmsImportFieldEditor').then((m) => ({
               default: m.CmsImportFieldEditor,
             })),
       ),
-    [isPlatformized],
+    [editorKind],
   );
 
   const {

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

@@ -1,5 +1,6 @@
 import { UniDriver, waitFor } from '@wix/wix-ui-test-utils/unidriver';
 import { baseUniDriverFactory } from '../../unidriver';
+import { CustomFieldModalUniDriver } from '../CustomFieldModal/CustomFieldModal.uni.driver';
 import {
   CounterBadgeUniDriver,
   CustomModalLayoutUniDriver,
@@ -204,6 +205,13 @@ export function ImportModalUniDriver(base: UniDriver, body: UniDriver) {
         ).getPrimaryButtonDriver()
       ).click(),
 
+    /** The "Add field" modal, opened by a source with `fieldManagement` */
+    getCustomFieldModal: () =>
+      CustomFieldModalUniDriver(
+        body.$('[data-hook="custom-field-modal"]'),
+        body,
+      ),
+
     /** Get the discard changes confirmation modal driver */
     getDiscardChangesModal: () =>
       MessageModalLayoutUniDriver(

package/src/components/ImportButton/ImportStepConfiguration.tsx

@@ -10,7 +10,7 @@ import {
   SectionHelper,
 } from '@wix/design-system';
 import { Add, ArrowRight } from '@wix/wix-ui-icons-common/lazy';
-import { ImportState, NewFieldType } from '@wix/bex-core';
+import { ImportState, NewFieldType, toNewFieldDraft } from '@wix/bex-core';
 import { useTranslations } from '@wix/patterns-fields';
 import React from 'react';
 import { observer } from 'mobx-react-lite';
@@ -80,7 +80,18 @@ const NewFieldHelperText = observer(function _NewFieldHelperText({
   fieldType,
 }: NewFieldHelperTextProps) {
   const { t: ft } = useTranslations();
-  const typeName = ft(NEW_FIELD_TYPE_TITLE_KEY[fieldType]).toLocaleLowerCase();
+  const mapping = state.mappingByHeader[header];
+  const fieldManagement = state.fieldManagement;
+  const pickedType =
+    fieldManagement && mapping?.kind === 'new'
+      ? toNewFieldDraft(mapping, '', header, fieldManagement).type
+      : undefined;
+  const pickedOption = fieldManagement?.fieldModal.types.find(
+    (option) => option.id === pickedType,
+  );
+  const typeName = (
+    pickedOption?.label ?? ft(NEW_FIELD_TYPE_TITLE_KEY[fieldType])
+  ).toLocaleLowerCase();
 
   return (
     <Box direction="horizontal" gap="SP1" verticalAlign="middle">
@@ -113,6 +124,7 @@ const FieldMappingCell = observer(function _FieldMappingCell({
   header,
   fieldOptions,
 }: FieldMappingCellProps) {
+  const dropdownRef = React.useRef<Dropdown>(null);
   const { translate: t, selectedFieldIds, canCreateNewField } = state;
   const mapping = state.mappingByHeader[header];
 
@@ -159,6 +171,7 @@ const FieldMappingCell = observer(function _FieldMappingCell({
   return (
     <Box direction="vertical" gap="SP1">
       <Dropdown
+        ref={dropdownRef}
         dataHook={`import-mapping-${header}`}
         clearButton
         onClear={() => {
@@ -192,9 +205,16 @@ const FieldMappingCell = observer(function _FieldMappingCell({
                 prefixIcon={<Add />}
                 dataHook={`import-create-field-${header}`}
                 title={t('cairo.import.createNewField')}
+                // The dropdown input otherwise consumes Enter/Space before the button activates.
+                onKeyDown={(event: React.KeyboardEvent<HTMLButtonElement>) => {
+                  if (event.key === 'Enter' || event.key === ' ') {
+                    event.stopPropagation();
+                  }
+                }}
                 // Map the column to a new field, then open the editor on it — the
                 // editor component (renderFieldEditor) reacts to `editingHeader`.
                 onClick={() => {
+                  dropdownRef.current?.hideOptions();
                   state.setNewFieldMapping(header);
                   state.beginFieldEdit(header);
                 }}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload1652573664";
+var _namespace_ = "ImportStepUpload1950804560";
 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":"ImportStepUpload1652573664__root","fileUpload":"ImportStepUpload1652573664__fileUpload"};
+export var classes = {"root":"ImportStepUpload1950804560__root","fileUpload":"ImportStepUpload1950804560__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/SchemaImportFieldEditor.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { reaction } from 'mobx';
+import {
+  CustomFieldModalState,
+  isReferenceFieldType,
+  toNewFieldDraft,
+  type FieldManagement,
+  type ImportState,
+} from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { CustomFieldModal } from '../CustomFieldModal';
+
+// The import has no step to pick a referenced collection, so types that need
+// one are left out. Everything else is read live from the source.
+const withoutCollectionTypes = (
+  fieldManagement: FieldManagement,
+): FieldManagement =>
+  Object.create(fieldManagement, {
+    fieldModal: {
+      get: () => ({
+        ...fieldManagement.fieldModal,
+        types: fieldManagement.fieldModal.types.filter(
+          (type) =>
+            !type.collectionInput && !isReferenceFieldType(type.patternsType),
+        ),
+      }),
+    },
+  });
+
+/**
+ * The create/edit-field modal for an import into a source with
+ * `fieldManagement`. It is the same `CustomFieldModal` as "Add field", in
+ * `onSubmit` mode: on confirm the draft is stored on the column, and the field
+ * is created when the import runs.
+ */
+const _SchemaImportFieldEditor = ({ state }: { state: ImportState }) => {
+  const container = useWixPatternsContainer();
+  const fieldManagement = state.fieldManagement;
+
+  const [editorState] = useState(() =>
+    fieldManagement
+      ? new CustomFieldModalState({
+          fieldManagement: withoutCollectionTypes(fieldManagement),
+          container,
+          reportBi: container.reportBi,
+          fieldCount: () => state.fields.length,
+          onSubmit: state.applySchemaFieldEdit,
+        })
+      : undefined,
+  );
+
+  useEffect(() => {
+    if (!editorState || !fieldManagement) {
+      return undefined;
+    }
+    const disposeOpen = reaction(
+      () => state.editingMapping,
+      (mapping) => {
+        const header = state.editingHeader;
+        if (mapping && header && !editorState.modalState.isOpen) {
+          const name = mapping.displayName ?? header;
+          editorState.reset();
+          editorState.mode = 'new';
+          editorState.setFormValues(
+            toNewFieldDraft(
+              mapping,
+              editorState.generateUniqueKey(name),
+              name,
+              fieldManagement,
+            ),
+          );
+          editorState.modalState.modal.open();
+        }
+      },
+      { fireImmediately: true },
+    );
+    const disposeClose = reaction(
+      () => editorState.modalState.isOpen,
+      (isOpen) => {
+        if (!isOpen && state.editingHeader != null) {
+          state.endFieldEdit();
+        }
+      },
+    );
+    return () => {
+      disposeOpen();
+      disposeClose();
+    };
+  }, []);
+
+  if (!editorState) {
+    return null;
+  }
+
+  return <CustomFieldModal state={editorState} />;
+};
+
+export const SchemaImportFieldEditor = observer(_SchemaImportFieldEditor);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow2191070141";
+var _namespace_ = "InputOverflow4133309353";
 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":"InputOverflow2191070141__root"};
+export var classes = {"root":"InputOverflow4133309353__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_ = "LoadingRow373515950";
+var _namespace_ = "LoadingRow488654297";
 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":"LoadingRow373515950__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow373515950__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow488654297__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow488654297__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_ = "MaxHeightText1746708834";
+var _namespace_ = "MaxHeightText4092199991";
 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":"MaxHeightText1746708834__root"};
+export var classes = {"root":"MaxHeightText4092199991__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_ = "MaxLines4130075497";
+var _namespace_ = "MaxLines905384402";
 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":"MaxLines4130075497__root"};
+export var classes = {"root":"MaxLines905384402__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_ = "MultiBulkActionToolbar1296620202";
+var _namespace_ = "MultiBulkActionToolbar177080439";
 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":"MultiBulkActionToolbar1296620202__root","leftGroupWrapper":"MultiBulkActionToolbar1296620202__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1296620202__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1296620202__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar177080439__root","leftGroupWrapper":"MultiBulkActionToolbar177080439__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar177080439__selectedCountItem","selectedCountText":"MultiBulkActionToolbar177080439__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_ = "NestedTablePlaceholderStatesRow2167059059";
+var _namespace_ = "NestedTablePlaceholderStatesRow896444906";
 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":"NestedTablePlaceholderStatesRow2167059059__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow896444906__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_ = "NestedTableRow3979174525";
+var _namespace_ = "NestedTableRow1861244735";
 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":"NestedTableRow3979174525__root","firstLevel":"NestedTableRow3979174525__firstLevel","placeholder":"NestedTableRow3979174525__placeholder","parentHovered":"NestedTableRow3979174525__parentHovered"};
+export var classes = {"root":"NestedTableRow1861244735__root","firstLevel":"NestedTableRow1861244735__firstLevel","placeholder":"NestedTableRow1861244735__placeholder","parentHovered":"NestedTableRow1861244735__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_ = "MultipleDragOverlayEffect3433020952";
+var _namespace_ = "MultipleDragOverlayEffect3291447162";
 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":"MultipleDragOverlayEffect3433020952__root"};
+export var classes = {"root":"MultipleDragOverlayEffect3291447162__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_ = "NestedTableDragAndDropRow923085269";
+var _namespace_ = "NestedTableDragAndDropRow267611183";
 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":"NestedTableDragAndDropRow923085269__root"};
+export var classes = {"root":"NestedTableDragAndDropRow267611183__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_ = "PickerContent1519190683";
+var _namespace_ = "PickerContent3079729872";
 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":"PickerContent1519190683__root"};
+export var classes = {"root":"PickerContent3079729872__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_ = "PickerContentAdditionalStep834158438";
+var _namespace_ = "PickerContentAdditionalStep586623197";
 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":"PickerContentAdditionalStep834158438__root","titles":"PickerContentAdditionalStep834158438__titles","suffix":"PickerContentAdditionalStep834158438__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep586623197__root","titles":"PickerContentAdditionalStep586623197__titles","suffix":"PickerContentAdditionalStep586623197__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};