@wix/patterns 1.490.0 → 1.492.0

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_ = "Heading1001420329";
 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":"Heading1001420329__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_ = "ImportStepUpload1465543440";
 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":"ImportStepUpload1465543440__root","fileUpload":"ImportStepUpload1465543440__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_ = "InputOverflow1805542595";
 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":"InputOverflow1805542595__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_ = "LoadingRow171075687";
 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":"LoadingRow171075687__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow171075687__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_ = "MaxHeightText3383876341";
 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":"MaxHeightText3383876341__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_ = "MaxLines3099040923";
 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":"MaxLines3099040923__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_ = "MultiBulkActionToolbar5261079";
 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":"MultiBulkActionToolbar5261079__root","leftGroupWrapper":"MultiBulkActionToolbar5261079__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar5261079__selectedCountItem","selectedCountText":"MultiBulkActionToolbar5261079__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_ = "NestedTablePlaceholderStatesRow4187707519";
 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":"NestedTablePlaceholderStatesRow4187707519__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_ = "NestedTableRow2072511101";
 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":"NestedTableRow2072511101__root","firstLevel":"NestedTableRow2072511101__firstLevel","placeholder":"NestedTableRow2072511101__placeholder","parentHovered":"NestedTableRow2072511101__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_ = "MultipleDragOverlayEffect1565157165";
 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":"MultipleDragOverlayEffect1565157165__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_ = "NestedTableDragAndDropRow410153732";
 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":"NestedTableDragAndDropRow410153732__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_ = "PickerContent1077821602";
 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":"PickerContent1077821602__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_ = "PickerContentAdditionalStep4012378981";
 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":"PickerContentAdditionalStep4012378981__root","titles":"PickerContentAdditionalStep4012378981__titles","suffix":"PickerContentAdditionalStep4012378981__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_ = "PickerTableListItem218966620";
+var _namespace_ = "PickerTableListItem954015049";
 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":"PickerTableListItem218966620__root"};
+export var classes = {"root":"PickerTableListItem954015049__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_ = "ScrollableContent3186890972";
+var _namespace_ = "ScrollableContent1131688485";
 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":"ScrollableContent3186890972__root"};
+export var classes = {"root":"ScrollableContent1131688485__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_ = "SetupWidget3343471957";
+var _namespace_ = "SetupWidget4259788257";
 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":"SetupWidget3343471957__root","row":"SetupWidget3343471957__row","completedCta":"SetupWidget3343471957__completedCta","secondaryCta":"SetupWidget3343471957__secondaryCta","card":"SetupWidget3343471957__card","stepIcon":"SetupWidget3343471957__stepIcon","chevron":"SetupWidget3343471957__chevron","chevronDisabled":"SetupWidget3343471957__chevronDisabled","inProgressLabel":"SetupWidget3343471957__inProgressLabel"};
+export var classes = {"root":"SetupWidget4259788257__root","row":"SetupWidget4259788257__row","completedCta":"SetupWidget4259788257__completedCta","secondaryCta":"SetupWidget4259788257__secondaryCta","card":"SetupWidget4259788257__card","stepIcon":"SetupWidget4259788257__stepIcon","chevron":"SetupWidget4259788257__chevron","chevronDisabled":"SetupWidget4259788257__chevronDisabled","inProgressLabel":"SetupWidget4259788257__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};