@wix/patterns 1.430.0 → 1.432.0

package/src/state/FormPage/FormPageHeader.st.css.ts

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

package/src/state/ManageFieldsSource.ts

@@ -0,0 +1,24 @@
+import type { CustomFieldOrigin, FieldsSource } from '@wix/bex-core';
+import type {
+  CustomFieldsPanelState,
+  FieldActionsMenuBuilder,
+} from './CustomFields/CustomFieldsPanelState';
+
+/**
+ * The field management the manage-fields panel and its modals read: the fields,
+ * the per-field menu, and the add/edit modal.
+ *
+ * A collection page's `CollectionFieldsSourceState` is one of these. An entity
+ * page has no toolbar to build that from, so it assembles the same pieces itself
+ * (`schema/entityPageFieldManagement.ts`).
+ */
+export interface ManageFieldsSource {
+  readonly fieldsSource: FieldsSource;
+  readonly customFieldsPanel: CustomFieldsPanelState;
+  readonly fieldActionsMenu: FieldActionsMenuBuilder;
+  readonly openFieldModal: (opts?: {
+    fieldId?: string;
+    origin?: CustomFieldOrigin;
+    customOrigin?: string;
+  }) => void;
+}

package/src/state/SchemaCard/SchemaCardState.ts

@@ -6,8 +6,10 @@ export interface SchemaCardStateParams {
   /**
    * Field definitions for persistency. Each field's visibility and order are
    * stored per `persistencyKey` so users' layout preferences survive page reloads.
+   * Pass a function when the fields depend on a schema that hasn't loaded yet —
+   * it is read reactively.
    */
-  fields: SchemaViewConfig[];
+  fields: SchemaViewConfig[] | (() => SchemaViewConfig[]);
   /**
    * A unique key identifying this schema card, used as the storage namespace.
    * Should be unique per card type within the app (e.g. 'contacts', 'products').
@@ -20,7 +22,7 @@ export class SchemaCardState {
   readonly fieldsState: SchemaFieldsState;
 
   constructor(params: SchemaCardStateParams) {
-    if (isEmpty(params.fields)) {
+    if (Array.isArray(params.fields) && isEmpty(params.fields)) {
       console.warn(
         'SchemaCardState: `fields` is empty — field persistency will not be enabled.',
       );
@@ -39,6 +41,7 @@ export class SchemaCardState {
   }
 
   init() {
-    this.fieldsState.init();
+    // Passed through so a disposer added below reaches the caller.
+    return this.fieldsState.init();
   }
 }

package/src/state/SchemaCard/SchemaFieldsState.ts

@@ -1,4 +1,5 @@
-import { DataCapsule, TaskState } from '@wix/bex-core';
+import { DataCapsule, TaskState, TypedEmitter } from '@wix/bex-core';
+import { EventEmitter } from 'events';
 import {
   action,
   computed,
@@ -22,12 +23,25 @@ type StoredLayout = {
 
 export interface SchemaFieldsStateParams {
   dataCapsule: DataCapsule;
-  fields: SchemaViewConfig[];
+  /** A function when the fields aren't known yet — it is read reactively, so a
+   *  state can be created before the schema that declares them loads. */
+  fields: SchemaViewConfig[] | (() => SchemaViewConfig[]);
 }
 
 export class SchemaFieldsState {
   _storedFields: SchemaViewConfig[] = [];
   readonly initTask = new TaskState();
+
+  /**
+   * `beforeInitialFetch` holds the stored-layout read until whatever declares
+   * the fields is ready — for fields that arrive with a schema, the load. A
+   * listener returns a promise; register it before `init()`. Without it the
+   * merge would run against no declared ids and drop the whole saved layout.
+   */
+  readonly events = new EventEmitter() as TypedEmitter<{
+    beforeInitialFetch: () => void;
+  }>;
+
   private _persistQueue: Promise<void> = Promise.resolve();
   private readonly params: SchemaFieldsStateParams;
 
@@ -35,6 +49,7 @@ export class SchemaFieldsState {
     this.params = params;
     makeObservable(this, {
       _storedFields: observable,
+      fields: computed,
       orderedFields: computed,
       setFieldVisibility: action.bound,
       setFieldOrder: action.bound,
@@ -44,6 +59,9 @@ export class SchemaFieldsState {
   init() {
     this.initTask.runOnce(async () => {
       try {
+        const beforeInitialFetchListeners =
+          this.events.listeners('beforeInitialFetch');
+        await Promise.all(beforeInitialFetchListeners.map((l) => l()));
         await this._fetchFromStorage();
       } catch (e) {
         console.error(e);
@@ -51,18 +69,23 @@ export class SchemaFieldsState {
     });
   }
 
+  get fields(): SchemaViewConfig[] {
+    const { fields } = this.params;
+    return typeof fields === 'function' ? fields() : fields;
+  }
+
   get orderedFields(): SchemaViewConfig[] {
     if (!this._storedFields.length) {
-      return this.params.fields;
+      return this.fields;
     }
     // Fields not in storage all get index -1; stable sort preserves their declaration order
-    return [...this.params.fields].sort(
+    return [...this.fields].sort(
       indexOfCompareFn(this._storedFields, (f) => f?.id),
     );
   }
 
   isFieldVisible(id: string): boolean {
-    const field = this.params.fields.find((f) => f.id === id);
+    const field = this.fields.find((f) => f.id === id);
     if (!field) {
       return true;
     } // unknown id — render by default
@@ -92,7 +115,7 @@ export class SchemaFieldsState {
 
   setFieldOrder(orderedFields: SchemaViewConfig[]) {
     const storedMap = new Map(this._storedFields.map((f) => [f.id, f]));
-    const declaredMap = new Map(this.params.fields.map((f) => [f.id, f]));
+    const declaredMap = new Map(this.fields.map((f) => [f.id, f]));
 
     // Rebuild _storedFields in the new order, preserving existing visibility.
     // Only include fields that are still declared; unknown ids are silently dropped.
@@ -121,7 +144,8 @@ export class SchemaFieldsState {
   }
 
   async _fetchFromStorage() {
-    const { dataCapsule, fields } = this.params;
+    const { dataCapsule } = this.params;
+    const { fields } = this;
     let storedLayout: StoredLayout | null = null;
     try {
       const raw = await dataCapsule.getItem<StoredLayout>(STORAGE_KEY);

package/src/state/SidePanelsState.ts

@@ -14,6 +14,21 @@ export interface SidePanelsStateParams {
 }
 
 export class SidePanelsState {
+  /**
+   * Attaches a host to a page that has none. Builds it once; calling it again
+   * (on re-render, or from a second feature) is a no-op, so everything on the
+   * page shares one host and one open panel.
+   */
+  static setOnPage(
+    page: { panels: SidePanelsState | null },
+    container: WixPatternsContainer,
+  ) {
+    page.panels ??= new SidePanelsState({
+      container,
+      panelGroupName: 'entity-page',
+    });
+  }
+
   readonly container;
 
   readonly sidePanelComponents;

package/src/state/buildEditableFieldColumns.ts

@@ -1,6 +1,14 @@
-import type { Field, FieldsSource, PatternsFieldType } from '@wix/bex-core';
-import type { EditableColumn, ValidationRule } from './EditableTable/types';
+import type {
+  Field,
+  FieldsSource,
+  FieldTypeDefinition,
+  PatternsFieldType,
+  ValidationRule,
+} from '@wix/bex-core';
+import { resolveFieldTypeDefinition } from '@wix/bex-core';
+import type { CellType, EditableColumn } from './EditableTable/types';
 import { FIELD_TYPE_TO_CELL_TYPE } from './EditableTable/fieldTypeToCellType';
+import type { EditableCellUpgrade } from './CollectionFieldsSourceState';
 
 // Types whose editable cell needs typeConfig the projection can't supply yet
 // (referenced collection, address shape). Until that lands, they render as a
@@ -11,6 +19,24 @@ const NEEDS_TYPE_CONFIG = new Set<PatternsFieldType>([
   'ADDRESS',
 ]);
 
+/**
+ * Whether this column has a usable inline editor. Read-only cases:
+ * `NEEDS_TYPE_CONFIG` types are downgraded to a display cell, `UNKNOWN` has no
+ * editor, and a `CUSTOM` field is only editable through a definition that
+ * supplies an EditComponent. Everything else keeps its cell type's own editor —
+ * including OBJECT / ARRAY, whose cells edit as JSON.
+ */
+function hasEditor(field: Field, customCell?: Omit<CellType, 'type'>): boolean {
+  if (customCell) {
+    return !!customCell.EditComponent;
+  }
+  return (
+    field.type !== 'CUSTOM' &&
+    field.type !== 'UNKNOWN' &&
+    !NEEDS_TYPE_CONFIG.has(field.type)
+  );
+}
+
 function toValidationRules(field: Field): ValidationRule[] {
   const v = field.validation;
   if (!v) {
@@ -46,34 +72,72 @@ function toValidationRules(field: Field): ValidationRule[] {
   return rules;
 }
 
+// The inline-custom cell config for a resolved definition: its editableTable
+// slot, with the definition's value-level validation layered in when the slot
+// doesn't validate itself.
+function synthesizeCellConfig(
+  definition: FieldTypeDefinition,
+): Omit<CellType, 'type'> {
+  const editableTable = definition.editableTable!;
+  const valueValidate = definition.value?.validate;
+  const validate =
+    valueValidate &&
+    ((value: unknown, rules?: ValidationRule[]) => valueValidate(value, rules));
+  return { ...editableTable, validate };
+}
+
 /**
  * Projects a FieldsSource's fields into EditableTable columns: a cell type by
  * field type, value read/write through the source, validation from the field,
  * and the flags the header reads for its disable rules. A cell is editable only
  * when the source can write it back (setCellValue) and the field isn't a system
- * field.
+ * field. A CUSTOM field renders through its definition's editableTable slot as
+ * an inline custom cell; without one it falls back to a read-only object cell.
  */
 export function buildEditableFieldColumns(
   source: FieldsSource,
+  editableCellFor?: (field: Field) => EditableCellUpgrade | undefined,
 ): EditableColumn<Record<string, unknown>>[] {
   const canWrite = typeof source.setCellValue === 'function';
   return source.fields.map((field) => {
     const id = source.columnIdForField(field);
-    const cellType = NEEDS_TYPE_CONFIG.has(field.type)
-      ? 'object'
-      : FIELD_TYPE_TO_CELL_TYPE[field.type] ?? 'object';
+    const definition = resolveFieldTypeDefinition(source, field);
+    const customCell = definition?.editableTable
+      ? synthesizeCellConfig(definition)
+      : undefined;
+    // A source-supplied cell wins over the downgrade: it carries the typeConfig
+    // that made the type read-only here in the first place.
+    const sourceCell = customCell
+      ? undefined
+      : NEEDS_TYPE_CONFIG.has(field.type)
+      ? editableCellFor?.(field)
+      : undefined;
+    const cellType = customCell
+      ? 'custom'
+      : sourceCell?.cellType ??
+        (NEEDS_TYPE_CONFIG.has(field.type)
+          ? 'object'
+          : FIELD_TYPE_TO_CELL_TYPE[field.type] ?? 'object');
     const validation = toValidationRules(field);
-    const editable = canWrite && cellType !== 'object' && !field.isSystem;
+    const editable =
+      canWrite &&
+      !field.isSystem &&
+      (!!sourceCell || hasEditor(field, customCell));
     return {
       id,
       cellType,
+      ...(customCell && { typeConfig: customCell }),
+      ...(sourceCell && { typeConfig: sourceCell.typeConfig }),
       field,
       title: field.displayName,
       name: field.displayName,
       isPrimary: field.isPrimary,
       isSystem: field.isSystem,
       hideable: true,
-      sortable: field.capabilities?.sortable ?? false,
+      sortable:
+        definition?.capabilities?.sortable ??
+        field.capabilities?.sortable ??
+        false,
       editable,
       validation: validation.length ? validation : undefined,
       getValue: (item) => source.getCellValue(item, field),

package/src/state/buildFieldColumns.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Field, FieldsSource, PatternsFieldType } from '@wix/bex-core';
+import { resolveFieldTypeDefinition } from '@wix/bex-core';
 import type { DataTableColumnAlign } from '@wix/design-system/dist/types/Table/DataTable';
 import { Column } from '../model';
 import { FieldCell } from '../components/FieldCell/FieldCell';
@@ -52,7 +53,13 @@ export function buildFieldColumns(
   // them as excess properties. The function still returns Column[].
   return source.fields.map((field) => {
     const id = source.columnIdForField(field);
-    const layout = LAYOUT_BY_TYPE[field.type] ?? DEFAULT_LAYOUT;
+    const definition = resolveFieldTypeDefinition(source, field);
+    const layout = definition?.table
+      ? {
+          width: definition.table.width,
+          align: definition.table.align ?? 'start',
+        }
+      : LAYOUT_BY_TYPE[field.type] ?? DEFAULT_LAYOUT;
     return {
       id,
       field,
@@ -72,6 +79,7 @@ export function buildFieldColumns(
           type={field.type}
           value={source.getCellValue(row, field)}
           fieldId={`${id}-${rowNum}`}
+          definition={definition}
         />
       ),
       ...columnOverrides?.(field, ctx),

package/src/state/buildFieldFilters.tsx

@@ -2,14 +2,18 @@ import React from 'react';
 import {
   dateRangeFilter,
   idNameArrayFilter,
+  isFilterTypeConfig,
   numberRangeFilter,
+  resolveFieldTypeDefinition,
   stringOperatorFilter,
 } from '@wix/bex-core';
 import type {
   Field,
+  FieldsSource,
   Filter,
   FilterStateBaseParams,
   FilterOperator,
+  FilterTypeConfig,
   PatternsFieldType,
 } from '@wix/bex-core';
 import type { ToolbarCollectionState } from './ToolbarCollectionState';
@@ -25,6 +29,8 @@ type FilterFactory = (
   params: Partial<FilterStateBaseParams<any>>,
 ) => Filter<any>;
 
+export type { FilterTypeConfig } from '@wix/bex-core';
+
 /**
  * The filter behavior a source supplies that the shared builder can't derive
  * from the neutral field type. The neutral type collapses distinct source types
@@ -75,6 +81,27 @@ const filterFactoryByType = (
 export const isFilterableFieldType = (type: PatternsFieldType): boolean =>
   type in FILTER_COMPONENT_BY_TYPE;
 
+/** The active filter config of a CUSTOM field's type definition, if any. */
+const resolveCustomFilter = (
+  field: Field,
+  source: Pick<FieldsSource, 'fieldTypes'>,
+): FilterTypeConfig | undefined => {
+  const customTypeConfig = resolveFieldTypeDefinition(source, field);
+  return customTypeConfig && isFilterTypeConfig(customTypeConfig.filter)
+    ? customTypeConfig.filter
+    : undefined;
+};
+
+/** A field gets an auto filter when its type maps to a filter element, or —
+ *  for a CUSTOM field — when its type definition declares a filter config. */
+export const isFilterableField = (
+  field: Field,
+  source: Pick<FieldsSource, 'fieldTypes'>,
+): boolean =>
+  field.type === 'CUSTOM'
+    ? !!resolveCustomFilter(field, source)
+    : isFilterableFieldType(field.type);
+
 /**
  * Registers a filter state per filterable field on the collection query, so the
  * built elements have a filter to read. Idempotent — addFilterIfNeeded skips a
@@ -82,11 +109,22 @@ export const isFilterableFieldType = (type: PatternsFieldType): boolean =>
  */
 export const registerFieldFilters = (
   toolbar: ToolbarCollectionState<any, any>,
-  fields: Field[],
+  source: Pick<FieldsSource, 'filterableFields' | 'fieldTypes'>,
   config: FieldFilterConfig,
 ): void => {
   const factoryByType = filterFactoryByType(config);
-  fields.forEach((field) => {
+  source.filterableFields.forEach((field) => {
+    if (field.type === 'CUSTOM') {
+      const customFilter = resolveCustomFilter(field, source);
+      if (!customFilter) {
+        return;
+      }
+      const filter = customFilter.createFilter(field);
+      // The collection registers the filter under the field's id.
+      Object.assign(filter, { name: field.id });
+      toolbar.collection.query.addFilterIfNeeded(field.id as any, filter);
+      return;
+    }
     const factory = factoryByType[field.type];
     if (!factory) {
       return;
@@ -103,13 +141,32 @@ const buildFieldFilterElement = (
   toolbar: ToolbarCollectionState<any, any>,
   field: Field,
   config: FieldFilterConfig,
+  source: Pick<FieldsSource, 'fieldTypes'>,
 ): FilterElement | null => {
-  const FilterComponent = FILTER_COMPONENT_BY_TYPE[field.type];
   const filter = toolbar.collection.filters[field.id];
-  if (!FilterComponent || !filter) {
+  if (!filter) {
     return null;
   }
   const label = field.displayName || field.id;
+  if (field.type === 'CUSTOM') {
+    const CustomComponent = resolveCustomFilter(field, source)?.Component;
+    if (!CustomComponent) {
+      return null;
+    }
+    return (
+      <CustomComponent
+        key={field.id}
+        filter={filter}
+        accordionItemProps={{ label }}
+        toolbarItemProps={{ label }}
+        toolbarTagProps={{ label }}
+      />
+    ) as FilterElement;
+  }
+  const FilterComponent = FILTER_COMPONENT_BY_TYPE[field.type];
+  if (!FilterComponent) {
+    return null;
+  }
   const decimal =
     field.type === 'NUMBER' ? config.numberIsDecimal?.(field) : false;
   return (
@@ -128,9 +185,9 @@ const buildFieldFilterElement = (
 /** Builds the toolbar filter elements for a source's filterable fields. */
 export const buildFieldFilters = (
   toolbar: ToolbarCollectionState<any, any>,
-  fields: Field[],
+  source: Pick<FieldsSource, 'filterableFields' | 'fieldTypes'>,
   config: FieldFilterConfig,
 ): FilterElement[] =>
-  fields
-    .map((field) => buildFieldFilterElement(toolbar, field, config))
+  source.filterableFields
+    .map((field) => buildFieldFilterElement(toolbar, field, config, source))
     .filter((el): el is FilterElement => el !== null);

package/src/styles.global.css

@@ -1,3 +1,3 @@
-.CardContainer3726824294__root.CardContainer3726824294--mobile{border-radius:0}.CmsFieldForm3637905500__fullBleedDivider{margin-top:var(--wds-space-300, 18px);margin-inline:calc(-1*var(--wds-custom-modal-content-padding-horizontal, 24px))}.CmsFieldModal1876956603__modal{--wds-custom-modal-content-padding-vertical:0}.ValidationAndDefaultsSection738912025__accordionWrapper{margin-inline:calc(-1*var(--wds-custom-modal-content-padding-horizontal, 24px))}.CharactersLimitInput2299291232__field{flex:1;min-width:0}.Collapse3811557587__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse3811557587__exit{height:0}.CollectionPage2667572599__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage2667572599__root.CollectionPage2667572599--mobile{--wds-page-header-padding-horizontal:0;--wds-page-header-padding-horizontal-small:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage2667572599__root.CollectionPage2667572599--panel{overflow:hidden;position:relative}.CollectionSectionHeader874342386__summaryIcon{display:flex;color:var(--wds-color-text-standard-secondary)}.CollectionTable1797147932__root td{vertical-align:middle}.CollectionTable1797147932__root.CollectionTable1797147932--mobile td:first-child{padding-left:18px}.CollectionTable1797147932__root.CollectionTable1797147932--mobile td:last-child{padding-right:18px}.CollectionTableWSRTable4061832017__root.CollectionTableWSRTable4061832017--resizable table{min-width:100%}.CollectionTableWSRTable4061832017__root.CollectionTableWSRTable4061832017--resizable [data-hook=table-resize-handle]{right:-4px!important;z-index:1}.CollectionToolbar3645520063__root.CollectionToolbar3645520063--harmony .CollectionToolbar3645520063__right [data-hook=horizontal-overflow-box]>*{margin-inline-start:0}.CollectionToolbar3645520063__left{min-width:0}.CollectionToolbar3645520063__left.CollectionToolbar3645520063--expandable{flex:auto}.CollectionToolbar3645520063__left.CollectionToolbar3645520063--title>*{width:100%}.CollectionToolbar3645520063__root.CollectionToolbar3645520063---responsiveMode-5-title .CollectionToolbar3645520063__left{flex:1 100;min-width:50px}.CollectionToolbar3645520063__root.CollectionToolbar3645520063---responsiveMode-4-tabs .CollectionToolbar3645520063__left,.CollectionToolbar3645520063__root.CollectionToolbar3645520063---responsiveMode-4-tabs .CollectionToolbar3645520063__left.CollectionToolbar3645520063--expandable{flex:1 100 auto;min-width:140px}.CollectionToolbar3645520063__root.CollectionToolbar3645520063---responsiveMode-4-tabs .CollectionToolbar3645520063__left>*{flex-shrink:1;min-width:0}.CollectionToolbar3645520063__root .CollectionToolbar3645520063__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar3645520063__root.CollectionToolbar3645520063--views .CollectionToolbar3645520063__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar3645520063__root.CollectionToolbar3645520063---responsiveMode-4-tabs .CollectionToolbar3645520063__right,.CollectionToolbar3645520063__root.CollectionToolbar3645520063---responsiveMode-5-title .CollectionToolbar3645520063__right{flex:0 1 auto;min-width:0}.CollectionToolbar3645520063__root .CollectionToolbar3645520063__right.CollectionToolbar3645520063__fullWidth{margin-inline-start:0!important}.CollectionToolbar3645520063__root.CollectionToolbar3645520063--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter156188642__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter156188642__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter156188642__searchMobile:not(.SearchOrCustomFilter156188642--expandable){left:18px}.SearchOrCustomFilter156188642__searchMobile.SearchOrCustomFilter156188642--expandable.SearchOrCustomFilter156188642--expanded{left:18px}.AutoCompleteReadonly3447230868__root.AutoCompleteReadonly3447230868--disableEditing{cursor:pointer}.AutoCompleteReadonly3447230868__root.AutoCompleteReadonly3447230868--disableEditing input{cursor:pointer}.ViewsDropdown4280316337__root{width:200px}.DragHandle3040349821__root{display:flex;align-items:center}.DragHandle3040349821__root:not(.DragHandle3040349821--disabled){cursor:grab;color:#a8caff}.DragHandle3040349821__root.DragHandle3040349821--disabled{color:#acafc4}.DragHandle3040349821__root:focus-visible:not(.DragHandle3040349821--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle3040349821__root.DragHandle3040349821--disabled{pointer-events:none}.DragHandle3040349821__root.DragHandle3040349821--dragging:not(.DragHandle3040349821--disabled){cursor:grabbing}td:has(>.EditableCell2162357613__root){position:relative;overflow:visible;min-height:24px}.EditableCell2162357613__root{display:flex;align-items:center;padding:0;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;box-sizing:border-box;outline:0;cursor:default;user-select:none;background:var(--wsr-color-D80);border:1px solid var(--wsr-color-B40)}.EditableCell2162357613__root.EditableCell2162357613--selected{background:rgba(56,153,236,.08)}.EditableCell2162357613__root.EditableCell2162357613--focused:not(.EditableCell2162357613--selected){box-shadow:inset 0 0 0 2px var(--wsr-color-B10);z-index:2}.EditableCell2162357613__root.EditableCell2162357613--editing{background:var(--wsr-color-D80);box-shadow:inset 0 0 0 2px var(--wsr-color-B10);z-index:3;user-select:auto;overflow:visible}.EditableCell2162357613__root.EditableCell2162357613--editing:not(.EditableCell2162357613--showEditWhenFocused){bottom:auto;min-height:100%}.EditableCell2162357613__root.EditableCell2162357613--focused.EditableCell2162357613--growable{background-color:var(--wsr-color-D80);background-image:linear-gradient(rgba(56,153,236,.08),rgba(56,153,236,.08));bottom:auto;min-height:100%;z-index:3}.EditableCell2162357613__root:has([data-inner-focused]){overflow:visible;z-index:3;box-shadow:inset 0 0 0 2px var(--wsr-color-B10)}.EditableCell2162357613__root.EditableCell2162357613--selectionTop:not(.EditableCell2162357613--editing){border-top:2px solid var(--wsr-color-B10)}.EditableCell2162357613__root.EditableCell2162357613--selectionBottom:not(.EditableCell2162357613--editing){border-bottom:2px solid var(--wsr-color-B10)}.EditableCell2162357613__root.EditableCell2162357613--selectionLeft:not(.EditableCell2162357613--editing){border-left:2px solid var(--wsr-color-B10)}.EditableCell2162357613__root.EditableCell2162357613--selectionRight:not(.EditableCell2162357613--editing){border-right:2px solid var(--wsr-color-B10)}.EditableCell2162357613__root.EditableCell2162357613--selectionTop.EditableCell2162357613--editing.EditableCell2162357613--typeToEdit{border-top:2px solid var(--wsr-color-B10)}.EditableCell2162357613__root.EditableCell2162357613--selectionBottom.EditableCell2162357613--editing.EditableCell2162357613--typeToEdit{border-bottom:2px solid var(--wsr-color-B10)}.EditableCell2162357613__root.EditableCell2162357613--selectionLeft.EditableCell2162357613--editing.EditableCell2162357613--typeToEdit{border-left:2px solid var(--wsr-color-B10)}.EditableCell2162357613__root.EditableCell2162357613--selectionRight.EditableCell2162357613--editing.EditableCell2162357613--typeToEdit{border-right:2px solid var(--wsr-color-B10)}.EditableCell2162357613__root.EditableCell2162357613--invalid:not(.EditableCell2162357613--editing){background:rgba(229,0,77,.06)}.EditableCell2162357613__root.EditableCell2162357613--copiedTop:not(.EditableCell2162357613--selectionTop){border-top:2px dashed var(--wsr-color-B10)}.EditableCell2162357613__root.EditableCell2162357613--copiedBottom:not(.EditableCell2162357613--selectionBottom){border-bottom:2px dashed var(--wsr-color-B10)}.EditableCell2162357613__root.EditableCell2162357613--copiedLeft:not(.EditableCell2162357613--selectionLeft){border-left:2px dashed var(--wsr-color-B10)}.EditableCell2162357613__root.EditableCell2162357613--copiedRight:not(.EditableCell2162357613--selectionRight){border-right:2px dashed var(--wsr-color-B10)}.EditableCell2162357613__validationIndicator{flex-shrink:0;margin-left:12px;margin-right:6px;color:var(--wsr-color-Y10)}.HeaderActionsPopover1903031219__root{opacity:0;transition:opacity .15s}th:hover .HeaderActionsPopover1903031219__root,.HeaderActionsPopover1903031219__root[data-menu-open=true],.HeaderActionsPopover1903031219__root:focus-within{opacity:1}.CellViewLayout3774038431__root{width:100%;height:100%;padding:9px 12px;box-sizing:border-box;display:flex;align-items:center;overflow:clip}.CellViewLayout3774038431__root>*{flex:1;min-width:0}.Edit1854590087__addressInput{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;padding-left:6px;padding-right:6px;min-width:0;overflow:hidden}.Edit1854590087__addressInput>div,.Edit1854590087__addressInput>div>div,.Edit1854590087__addressInput>div>div>div{width:100%;min-width:0}.Edit3598004204__jsonInput{width:100%;margin-left:-1px}.Edit2526069005__booleanEdit{display:flex;align-items:center;margin-left:12px}.View2268699433__booleanView{display:flex;align-items:center;margin-left:9px;pointer-events:none}.Edit3625915348__root{width:100%;height:100%;display:flex;align-items:center}.Edit1728182095__dateInput{width:100%;margin-left:-1px}.Edit3821660544__half{min-width:0;position:relative;display:flex;align-items:center;box-sizing:border-box}.Edit3821660544__dateHalf{flex:60 1 0}.Edit3821660544__timeHalf{flex:40 1 0}.Edit3821660544__divider{width:1px;height:16px;background:var(--wds-color-border-standard, #dfe5eb);flex-shrink:0}.Edit3821660544__passiveText{padding:9px 12px;font-size:14px;line-height:18px;font-family:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;width:100%}.Edit3821660544__placeholderText{color:var(--wds-color-text-placeholder, #868aa5)}.View523242590__leaf{min-width:0;padding:9px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:18px;font-family:inherit;box-sizing:border-box}.View523242590__datePart{flex:60 1 0}.View523242590__timePart{flex:40 1 0}.View523242590__placeholder{color:var(--wds-color-text-placeholder, #868aa5)}.View523242590__divider{width:1px;height:16px;background:var(--wds-color-border-standard, #dfe5eb);flex-shrink:0}.Edit944223696__emailInput{width:100%;margin-left:-1px}.Edit1413543946__numberInput{width:100%;margin-right:2px}.Edit1413543946__numberInput input{text-align:right;direction:ltr}.View1843518454__textView{width:100%;text-align:right}.Edit608148220__jsonInput{width:100%;margin-left:-1px}.Edit1095813519__selectInput{width:100%}.Edit4042463552__editWrapper{width:100%}.Edit4042463552__inputArea{background-color:transparent;width:100%}.Edit4042463552__inputArea input{padding:9px 12px 8px!important;outline:0!important;border:0!important;box-sizing:border-box!important}.Edit4042463552__inputArea>div{border:0!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;outline:0!important}.Edit4042463552__inputArea textarea{padding:9px 12px 8px!important;outline:0!important;border:0!important;box-sizing:border-box!important}.Edit4042463552__inputArea:not(.Edit4042463552--isFocused) textarea{resize:none;overflow:hidden}.Edit4042463552__inputArea:not(.Edit4042463552--isFocused) textarea::-webkit-scrollbar{display:none}.Edit3309447775__wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center;--wds-input-value-font-size-small:var(--wds-font-size-body-small);--wds-input-value-font-line-height-small:var(
+.CardContainer2113344042__root.CardContainer2113344042--mobile{border-radius:0}.CmsFieldForm3072570740__fullBleedDivider{margin-top:var(--wds-space-300, 18px);margin-inline:calc(-1*var(--wds-custom-modal-content-padding-horizontal, 24px))}.CmsFieldModal574041138__modal{--wds-custom-modal-content-padding-vertical:0}.ValidationAndDefaultsSection3027898072__accordionWrapper{margin-inline:calc(-1*var(--wds-custom-modal-content-padding-horizontal, 24px))}.CharactersLimitInput3690679241__field{flex:1;min-width:0}.Collapse3206668098__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse3206668098__exit{height:0}.CollectionPage4126903775__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage4126903775__root.CollectionPage4126903775--mobile{--wds-page-header-padding-horizontal:0;--wds-page-header-padding-horizontal-small:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage4126903775__root.CollectionPage4126903775--panel{overflow:hidden;position:relative}.CollectionSectionHeader3072653247__summaryIcon{display:flex;color:var(--wds-color-text-standard-secondary)}.CollectionTable2739075731__root td{vertical-align:middle}.CollectionTable2739075731__root.CollectionTable2739075731--mobile td:first-child{padding-left:18px}.CollectionTable2739075731__root.CollectionTable2739075731--mobile td:last-child{padding-right:18px}.CollectionTableWSRTable1316029034__root.CollectionTableWSRTable1316029034--resizable table{min-width:100%}.CollectionTableWSRTable1316029034__root.CollectionTableWSRTable1316029034--resizable [data-hook=table-resize-handle]{right:-4px!important;z-index:1}.CollectionToolbar2037920816__root.CollectionToolbar2037920816--harmony .CollectionToolbar2037920816__right [data-hook=horizontal-overflow-box]>*{margin-inline-start:0}.CollectionToolbar2037920816__left{min-width:0}.CollectionToolbar2037920816__left.CollectionToolbar2037920816--expandable{flex:auto}.CollectionToolbar2037920816__left.CollectionToolbar2037920816--title>*{width:100%}.CollectionToolbar2037920816__root.CollectionToolbar2037920816---responsiveMode-5-title .CollectionToolbar2037920816__left{flex:1 100;min-width:50px}.CollectionToolbar2037920816__root.CollectionToolbar2037920816---responsiveMode-4-tabs .CollectionToolbar2037920816__left,.CollectionToolbar2037920816__root.CollectionToolbar2037920816---responsiveMode-4-tabs .CollectionToolbar2037920816__left.CollectionToolbar2037920816--expandable{flex:1 100 auto;min-width:140px}.CollectionToolbar2037920816__root.CollectionToolbar2037920816---responsiveMode-4-tabs .CollectionToolbar2037920816__left>*{flex-shrink:1;min-width:0}.CollectionToolbar2037920816__root .CollectionToolbar2037920816__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar2037920816__root.CollectionToolbar2037920816--views .CollectionToolbar2037920816__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar2037920816__root.CollectionToolbar2037920816---responsiveMode-4-tabs .CollectionToolbar2037920816__right,.CollectionToolbar2037920816__root.CollectionToolbar2037920816---responsiveMode-5-title .CollectionToolbar2037920816__right{flex:0 1 auto;min-width:0}.CollectionToolbar2037920816__root .CollectionToolbar2037920816__right.CollectionToolbar2037920816__fullWidth{margin-inline-start:0!important}.CollectionToolbar2037920816__root.CollectionToolbar2037920816--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter2155612317__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter2155612317__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter2155612317__searchMobile:not(.SearchOrCustomFilter2155612317--expandable){left:18px}.SearchOrCustomFilter2155612317__searchMobile.SearchOrCustomFilter2155612317--expandable.SearchOrCustomFilter2155612317--expanded{left:18px}.AutoCompleteReadonly671478282__root.AutoCompleteReadonly671478282--disableEditing{cursor:pointer}.AutoCompleteReadonly671478282__root.AutoCompleteReadonly671478282--disableEditing input{cursor:pointer}.ViewsDropdown4043386634__root{width:200px}.DragHandle549611350__root{display:flex;align-items:center}.DragHandle549611350__root:not(.DragHandle549611350--disabled){cursor:grab;color:#a8caff}.DragHandle549611350__root.DragHandle549611350--disabled{color:#acafc4}.DragHandle549611350__root:focus-visible:not(.DragHandle549611350--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle549611350__root.DragHandle549611350--disabled{pointer-events:none}.DragHandle549611350__root.DragHandle549611350--dragging:not(.DragHandle549611350--disabled){cursor:grabbing}td:has(>.EditableCell2141481655__root){position:relative;overflow:visible;min-height:24px}.EditableCell2141481655__root{display:flex;align-items:center;padding:0;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;box-sizing:border-box;outline:0;cursor:default;user-select:none;background:var(--wsr-color-D80);border:1px solid var(--wsr-color-B40)}.EditableCell2141481655__root.EditableCell2141481655--selected{background:rgba(56,153,236,.08)}.EditableCell2141481655__root.EditableCell2141481655--focused:not(.EditableCell2141481655--selected){box-shadow:inset 0 0 0 2px var(--wsr-color-B10);z-index:2}.EditableCell2141481655__root.EditableCell2141481655--editing{background:var(--wsr-color-D80);box-shadow:inset 0 0 0 2px var(--wsr-color-B10);z-index:3;user-select:auto;overflow:visible}.EditableCell2141481655__root.EditableCell2141481655--editing:not(.EditableCell2141481655--showEditWhenFocused){bottom:auto;min-height:100%}.EditableCell2141481655__root.EditableCell2141481655--focused.EditableCell2141481655--growable{background-color:var(--wsr-color-D80);background-image:linear-gradient(rgba(56,153,236,.08),rgba(56,153,236,.08));bottom:auto;min-height:100%;z-index:3}.EditableCell2141481655__root:has([data-inner-focused]){overflow:visible;z-index:3;box-shadow:inset 0 0 0 2px var(--wsr-color-B10)}.EditableCell2141481655__root.EditableCell2141481655--selectionTop:not(.EditableCell2141481655--editing){border-top:2px solid var(--wsr-color-B10)}.EditableCell2141481655__root.EditableCell2141481655--selectionBottom:not(.EditableCell2141481655--editing){border-bottom:2px solid var(--wsr-color-B10)}.EditableCell2141481655__root.EditableCell2141481655--selectionLeft:not(.EditableCell2141481655--editing){border-left:2px solid var(--wsr-color-B10)}.EditableCell2141481655__root.EditableCell2141481655--selectionRight:not(.EditableCell2141481655--editing){border-right:2px solid var(--wsr-color-B10)}.EditableCell2141481655__root.EditableCell2141481655--selectionTop.EditableCell2141481655--editing.EditableCell2141481655--typeToEdit{border-top:2px solid var(--wsr-color-B10)}.EditableCell2141481655__root.EditableCell2141481655--selectionBottom.EditableCell2141481655--editing.EditableCell2141481655--typeToEdit{border-bottom:2px solid var(--wsr-color-B10)}.EditableCell2141481655__root.EditableCell2141481655--selectionLeft.EditableCell2141481655--editing.EditableCell2141481655--typeToEdit{border-left:2px solid var(--wsr-color-B10)}.EditableCell2141481655__root.EditableCell2141481655--selectionRight.EditableCell2141481655--editing.EditableCell2141481655--typeToEdit{border-right:2px solid var(--wsr-color-B10)}.EditableCell2141481655__root.EditableCell2141481655--invalid:not(.EditableCell2141481655--editing){background:rgba(229,0,77,.06)}.EditableCell2141481655__root.EditableCell2141481655--copiedTop:not(.EditableCell2141481655--selectionTop){border-top:2px dashed var(--wsr-color-B10)}.EditableCell2141481655__root.EditableCell2141481655--copiedBottom:not(.EditableCell2141481655--selectionBottom){border-bottom:2px dashed var(--wsr-color-B10)}.EditableCell2141481655__root.EditableCell2141481655--copiedLeft:not(.EditableCell2141481655--selectionLeft){border-left:2px dashed var(--wsr-color-B10)}.EditableCell2141481655__root.EditableCell2141481655--copiedRight:not(.EditableCell2141481655--selectionRight){border-right:2px dashed var(--wsr-color-B10)}.EditableCell2141481655__validationIndicator{flex-shrink:0;margin-left:12px;margin-right:6px;color:var(--wsr-color-Y10)}.HeaderActionsPopover650858329__root{opacity:0;transition:opacity .15s}th:hover .HeaderActionsPopover650858329__root,.HeaderActionsPopover650858329__root[data-menu-open=true],.HeaderActionsPopover650858329__root:focus-within{opacity:1}.CellViewLayout336650427__root{width:100%;height:100%;padding:9px 12px;box-sizing:border-box;display:flex;align-items:center;overflow:clip}.CellViewLayout336650427__root>*{flex:1;min-width:0}.Edit615227027__addressInput{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;padding-left:6px;padding-right:6px;min-width:0;overflow:hidden}.Edit615227027__addressInput>div,.Edit615227027__addressInput>div>div,.Edit615227027__addressInput>div>div>div{width:100%;min-width:0}.Edit3140383710__jsonInput{width:100%;margin-left:-1px}.Edit3638417173__booleanEdit{display:flex;align-items:center;margin-left:12px}.View3019513156__booleanView{display:flex;align-items:center;margin-left:9px;pointer-events:none}.Edit2049433503__root{width:100%;height:100%;display:flex;align-items:center}.Edit1850112909__dateInput{width:100%;margin-left:-1px}.Edit589549391__half{min-width:0;position:relative;display:flex;align-items:center;box-sizing:border-box}.Edit589549391__dateHalf{flex:60 1 0}.Edit589549391__timeHalf{flex:40 1 0}.Edit589549391__divider{width:1px;height:16px;background:var(--wds-color-border-standard, #dfe5eb);flex-shrink:0}.Edit589549391__passiveText{padding:9px 12px;font-size:14px;line-height:18px;font-family:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;width:100%}.Edit589549391__placeholderText{color:var(--wds-color-text-placeholder, #868aa5)}.View3747816942__leaf{min-width:0;padding:9px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:18px;font-family:inherit;box-sizing:border-box}.View3747816942__datePart{flex:60 1 0}.View3747816942__timePart{flex:40 1 0}.View3747816942__placeholder{color:var(--wds-color-text-placeholder, #868aa5)}.View3747816942__divider{width:1px;height:16px;background:var(--wds-color-border-standard, #dfe5eb);flex-shrink:0}.Edit4114511274__emailInput{width:100%;margin-left:-1px}.Edit2444082246__numberInput{width:100%;margin-right:2px}.Edit2444082246__numberInput input{text-align:right;direction:ltr}.View1038111937__textView{width:100%;text-align:right}.Edit3699074681__jsonInput{width:100%;margin-left:-1px}.Edit606883967__selectInput{width:100%}.Edit2107400312__editWrapper{width:100%}.Edit2107400312__inputArea{background-color:transparent;width:100%}.Edit2107400312__inputArea input{padding:9px 12px 8px!important;outline:0!important;border:0!important;box-sizing:border-box!important}.Edit2107400312__inputArea>div{border:0!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;outline:0!important}.Edit2107400312__inputArea textarea{padding:9px 12px 8px!important;outline:0!important;border:0!important;box-sizing:border-box!important}.Edit2107400312__inputArea:not(.Edit2107400312--isFocused) textarea{resize:none;overflow:hidden}.Edit2107400312__inputArea:not(.Edit2107400312--isFocused) textarea::-webkit-scrollbar{display:none}.Edit1165847028__wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center;--wds-input-value-font-size-small:var(--wds-font-size-body-small);--wds-input-value-font-line-height-small:var(
     --wds-font-line-height-body-small
-  )}.Edit3309447775__overlay{position:absolute;inset:2px;pointer-events:none;background:var(--wds-color-background-elevation-base, #fff)}.Edit3634747664__urlInput{width:100%;margin-left:-1px}.View2842583187__textView{width:100%;padding:9px 12px;display:flex;align-items:center;justify-content:space-between}.View2842583187__urlText{flex:1;min-width:0}.View2842583187__suffix{flex-shrink:0;margin-left:10px}.View2842583187__textView.View2842583187--suffixOnHover:not(:hover) .View2842583187__suffix{display:none}.EntityPagePlain2317363511__root.EntityPagePlain2317363511--mobile{--wds-page-header-padding-horizontal:0}.Fade12935198__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade12935198__root.Fade12935198--exit{opacity:0}.Heading3915340741__root{visibility:visible}.Heading3915340741__root.Heading3915340741--appearanceH2{font-size:28px!important;line-height:36px!important}.ImportStepUpload1386334335__fileUpload{width:100%}.InputOverflow1073409881__root.InputOverflow1073409881--selected:not(.InputOverflow1073409881--focused) input::placeholder{color:#000624}@keyframes LoadingRow491026576__gradientSwoosh{0%{background-position:50% 50%;background-size:150% 125%}15%{background-position:75% 40%;background-size:130% 115%}30%{background-position:50% 50%;background-size:120% 135%}60%{background-position:30% 50%;background-size:120% 135%}80%{background-position:10% 30%;background-size:130% 155%}to{background-position:40% 45%;background-size:125% 135%}}.LoadingRow491026576__root{background-image:linear-gradient(60deg,rgba(255,255,255,.15)0,rgba(255,255,255,.15) 50%,rgba(95,242,174,.15) 100%),linear-gradient(284.81deg,#fff 67.18%,#91bbff 158.87%),linear-gradient(29deg,rgba(145,187,255,.6)0,#fff 40%,rgba(95,242,174,.6) 100%);height:100%;background-size:150% 125%;background-repeat:no-repeat;animation:LoadingRow491026576__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText3754196047__root{opacity:1}.MaxHeightText3754196047__root.MaxHeightText3754196047--height24{line-height:24px}.MaxLines3268543179__root{overflow:hidden}.MaxLines3268543179__root.MaxLines3268543179--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar4197357314__root{min-width:0}.MultiBulkActionToolbar4197357314__leftGroupWrapper{padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar4197357314__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar4197357314__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow1512195112__root td{padding:0!important;width:100%}.NestedTableRow758756333__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow758756333__root:hover{background-color:#e7f0ff!important}.NestedTableRow758756333__root.NestedTableRow758756333--expandable{cursor:pointer}.NestedTableRow758756333__placeholder td{padding:0!important;width:100%}.NestedTableRow758756333__root:hover td:first-of-type::before,.NestedTableRow758756333__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect1567357389__root{position:absolute;transform:translate(6px,6px);background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,6,36,.12),0 0 6px 0 rgba(0,6,36,.12)}.NestedTableDragAndDropRow273561805__root.NestedTableDragAndDropRow273561805--draggingInto td{background-color:#e7f0ff!important}.PickerContent2095613214__root{display:flex}.PickerContentAdditionalStep1102083508__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep1102083508__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem1050306693__root{box-sizing:border-box}.ScrollableContent2970276407__root.ScrollableContent2970276407--overflowY{overflow-y:auto}.ScrollableContent2970276407__root.ScrollableContent2970276407--overflowX{overflow-x:auto}.ScrollableContent2970276407__root.ScrollableContent2970276407--smooth{scroll-behavior:smooth}.SetupWidget525839026__row{display:flex;flex-direction:column;padding:var(--wds-space-100, 6px);border-radius:var(--wds-border-radius-200, 4px);border:1px solid var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB));background-color:var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF));overflow:clip}.SetupWidget525839026__row.SetupWidget525839026--clickable{cursor:pointer}.SetupWidget525839026__row.SetupWidget525839026--hoverable:hover{background-color:var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));border-color:var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #D6E6FE))}.SetupWidget525839026__row.SetupWidget525839026--focused{background-color:var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));border-color:var(--wds-color-border-standard-primary, var(--wsr-color-B30, #A8CAFF))}.SetupWidget525839026__completedCta{opacity:0;transition:opacity .25s ease-in-out}.SetupWidget525839026__row:hover .SetupWidget525839026__completedCta,.SetupWidget525839026__row:focus-within .SetupWidget525839026__completedCta{opacity:1}.SetupWidget525839026__card{display:block;width:100%;border:0;border-radius:var(--wds-border-radius-400, 8px);background-color:var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF));box-shadow:0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);overflow:clip;box-sizing:border-box;text-align:start;font:inherit;color:inherit;padding:0;margin:0}.SetupWidget525839026__card.SetupWidget525839026--primary{background-color:var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF))}.SetupWidget525839026__card.SetupWidget525839026--clickable{cursor:pointer}.SetupWidget525839026__stepIcon{display:flex;align-items:center;flex-shrink:0;height:24px}.SetupWidget525839026__chevron{display:flex;flex-shrink:0;color:var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624))}.SetupWidget525839026__chevronDisabled{display:flex;flex-shrink:0;color:var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)))}.SetupWidget525839026__inProgressLabel{--wds-color-text-standard-primary:var(--wds-color-text-urgent, var(--wsr-color-O10, #FE620F));text-transform:uppercase}.SkeletonCard163200451__headerLoading{display:block!important}.SlidingModal659202655__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal659202655__root.SlidingModal659202655--overlay{transition:transform 0s ease 0s}.SlidingModal659202655__root.SlidingModal659202655---appendTo-6-parent{position:absolute}.SlidingModal659202655__root:not(.SlidingModal659202655--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.AddFieldColumnHeader4116971040__root{display:inline-flex;align-items:center;width:100%;min-width:0}.AddFieldColumnHeader4116971040__title{display:flex;width:100%;min-width:0}.AddFieldColumnHeader4116971040__hoverBridge{display:inline-block;padding:4px 13px 4px 4px;background:0 0}[data-content-element^=popover-content-add-field-popover-][data-hook=popover-content][class]{background:0 0;border:0;box-shadow:none;border-radius:0;padding:0}.TabsFilter1711245310__root .TabsFilter1711245310__title{color:var(--wds-tabs-label-fill, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)))}.TabsFilter1711245310__root.TabsFilter1711245310--selected .TabsFilter1711245310__title,.TabsFilter1711245310__root:hover .TabsFilter1711245310__title{color:var(--wds-tabs-label-fill-active, var(--wsr-color-B10, #116DFF))}.ManageTagsModal1320417957__root{display:flex}.ToolbarItem714044881__root{min-width:0}.ToolbarItemBox2861690222__root{min-width:0}.ToolbarItemBox2861690222__root.ToolbarItemBox2861690222--removeStartPadding{margin-left:-24px}.ToolbarItemBox2861690222__root.ToolbarItemBox2861690222--expandable{flex:1 0}.common843717652__column{display:flex;flex-direction:column}.common843717652__fullHeight{height:100%;min-height:0}.CollectionPageHeader702823358__root:not(.CollectionPageHeader702823358--mobile){gap:12px}.CollectionPageHeader702823358__root.CollectionPageHeader702823358--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader702823358__root.CollectionPageHeader702823358--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader3534710810__root.FormPageHeader3534710810--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader3534710810__root.FormPageHeader3534710810--mobile>*{margin-left:0;margin-top:6px!important;height:auto}
+  )}.Edit1165847028__overlay{position:absolute;inset:2px;pointer-events:none;background:var(--wds-color-background-elevation-base, #fff)}.Edit3379054411__urlInput{width:100%;margin-left:-1px}.View1273965631__textView{width:100%;padding:9px 12px;display:flex;align-items:center;justify-content:space-between}.View1273965631__urlText{flex:1;min-width:0}.View1273965631__suffix{flex-shrink:0;margin-left:10px}.View1273965631__textView.View1273965631--suffixOnHover:not(:hover) .View1273965631__suffix{display:none}.EntityPagePlain4244855842__root.EntityPagePlain4244855842--mobile{--wds-page-header-padding-horizontal:0}.Fade3098946657__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade3098946657__root.Fade3098946657--exit{opacity:0}.Heading3985415550__root{visibility:visible}.Heading3985415550__root.Heading3985415550--appearanceH2{font-size:28px!important;line-height:36px!important}.ImportStepUpload2906753210__fileUpload{width:100%}.InputOverflow1123225006__root.InputOverflow1123225006--selected:not(.InputOverflow1123225006--focused) input::placeholder{color:#000624}@keyframes LoadingRow214488386__gradientSwoosh{0%{background-position:50% 50%;background-size:150% 125%}15%{background-position:75% 40%;background-size:130% 115%}30%{background-position:50% 50%;background-size:120% 135%}60%{background-position:30% 50%;background-size:120% 135%}80%{background-position:10% 30%;background-size:130% 155%}to{background-position:40% 45%;background-size:125% 135%}}.LoadingRow214488386__root{background-image:linear-gradient(60deg,rgba(255,255,255,.15)0,rgba(255,255,255,.15) 50%,rgba(95,242,174,.15) 100%),linear-gradient(284.81deg,#fff 67.18%,#91bbff 158.87%),linear-gradient(29deg,rgba(145,187,255,.6)0,#fff 40%,rgba(95,242,174,.6) 100%);height:100%;background-size:150% 125%;background-repeat:no-repeat;animation:LoadingRow214488386__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText1460525093__root{opacity:1}.MaxHeightText1460525093__root.MaxHeightText1460525093--height24{line-height:24px}.MaxLines488704964__root{overflow:hidden}.MaxLines488704964__root.MaxLines488704964--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar402848319__root{min-width:0}.MultiBulkActionToolbar402848319__leftGroupWrapper{padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar402848319__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar402848319__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow4105787451__root td{padding:0!important;width:100%}.NestedTableRow1122296152__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow1122296152__root:hover{background-color:#e7f0ff!important}.NestedTableRow1122296152__root.NestedTableRow1122296152--expandable{cursor:pointer}.NestedTableRow1122296152__placeholder td{padding:0!important;width:100%}.NestedTableRow1122296152__root:hover td:first-of-type::before,.NestedTableRow1122296152__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect2427680455__root{position:absolute;transform:translate(6px,6px);background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,6,36,.12),0 0 6px 0 rgba(0,6,36,.12)}.NestedTableDragAndDropRow889009264__root.NestedTableDragAndDropRow889009264--draggingInto td{background-color:#e7f0ff!important}.PickerContent170665173__root{display:flex}.PickerContentAdditionalStep1878984807__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep1878984807__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem3454716548__root{box-sizing:border-box}.ScrollableContent947430149__root.ScrollableContent947430149--overflowY{overflow-y:auto}.ScrollableContent947430149__root.ScrollableContent947430149--overflowX{overflow-x:auto}.ScrollableContent947430149__root.ScrollableContent947430149--smooth{scroll-behavior:smooth}.SetupWidget2654981828__row{display:flex;flex-direction:column;padding:var(--wds-space-100, 6px);border-radius:var(--wds-border-radius-200, 4px);border:1px solid var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB));background-color:var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF));overflow:clip}.SetupWidget2654981828__row.SetupWidget2654981828--clickable{cursor:pointer}.SetupWidget2654981828__row.SetupWidget2654981828--hoverable:hover{background-color:var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));border-color:var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #D6E6FE))}.SetupWidget2654981828__row.SetupWidget2654981828--focused{background-color:var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));border-color:var(--wds-color-border-standard-primary, var(--wsr-color-B30, #A8CAFF))}.SetupWidget2654981828__completedCta{opacity:0;transition:opacity .25s ease-in-out}.SetupWidget2654981828__row:hover .SetupWidget2654981828__completedCta,.SetupWidget2654981828__row:focus-within .SetupWidget2654981828__completedCta{opacity:1}.SetupWidget2654981828__card{display:block;width:100%;border:0;border-radius:var(--wds-border-radius-400, 8px);background-color:var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF));box-shadow:0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);overflow:clip;box-sizing:border-box;text-align:start;font:inherit;color:inherit;padding:0;margin:0}.SetupWidget2654981828__card.SetupWidget2654981828--primary{background-color:var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF))}.SetupWidget2654981828__card.SetupWidget2654981828--clickable{cursor:pointer}.SetupWidget2654981828__stepIcon{display:flex;align-items:center;flex-shrink:0;height:24px}.SetupWidget2654981828__chevron{display:flex;flex-shrink:0;color:var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624))}.SetupWidget2654981828__chevronDisabled{display:flex;flex-shrink:0;color:var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)))}.SetupWidget2654981828__inProgressLabel{--wds-color-text-standard-primary:var(--wds-color-text-urgent, var(--wsr-color-O10, #FE620F));text-transform:uppercase}.SkeletonCard1840186893__headerLoading{display:block!important}.SlidingModal3053485234__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal3053485234__root.SlidingModal3053485234--overlay{transition:transform 0s ease 0s}.SlidingModal3053485234__root.SlidingModal3053485234---appendTo-6-parent{position:absolute}.SlidingModal3053485234__root:not(.SlidingModal3053485234--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.AddFieldColumnHeader2380146996__root{display:inline-flex;align-items:center;width:100%;min-width:0}.AddFieldColumnHeader2380146996__title{display:flex;width:100%;min-width:0}.AddFieldColumnHeader2380146996__hoverBridge{display:inline-block;padding:4px 13px 4px 4px;background:0 0}[data-content-element^=popover-content-add-field-popover-][data-hook=popover-content][class]{background:0 0;border:0;box-shadow:none;border-radius:0;padding:0}.TabsFilter773415960__root .TabsFilter773415960__title{color:var(--wds-tabs-label-fill, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)))}.TabsFilter773415960__root.TabsFilter773415960--selected .TabsFilter773415960__title,.TabsFilter773415960__root:hover .TabsFilter773415960__title{color:var(--wds-tabs-label-fill-active, var(--wsr-color-B10, #116DFF))}.ManageTagsModal3581084668__root{display:flex}.ManageTagsModal3581084668__root.ManageTagsModal3581084668--harmony .wds_1_301_0_TableListItem__root{padding-inline-end:16px}.ManageTagsModal3581084668__root.ManageTagsModal3581084668--harmony .wds_1_301_0_TableListItem__optionsContainer{align-items:start}.ToolbarItem236369946__root{min-width:0}.ToolbarItemBox2074326680__root{min-width:0}.ToolbarItemBox2074326680__root.ToolbarItemBox2074326680--removeStartPadding{margin-left:-24px}.ToolbarItemBox2074326680__root.ToolbarItemBox2074326680--expandable{flex:1 0}.common3243586050__column{display:flex;flex-direction:column}.common3243586050__fullHeight{height:100%;min-height:0}.CollectionPageHeader1098151800__root:not(.CollectionPageHeader1098151800--mobile){gap:12px}.CollectionPageHeader1098151800__root.CollectionPageHeader1098151800--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader1098151800__root.CollectionPageHeader1098151800--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader282119022__root.FormPageHeader282119022--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader282119022__root.FormPageHeader282119022--mobile>*{margin-left:0;margin-top:6px!important;height:auto}

package/src/test-utils/WixPatternsEssentialsTestProvider.tsx

@@ -16,7 +16,7 @@ import {
 } from '@wix/fe-essentials/data-capsule';
 import { CairoProvider } from '../providers';
 import ExtensionWidget from './ExtensionWidget';
-import { Edit } from '@wix/wix-ui-icons-common';
+import { Edit } from '@wix/wix-ui-icons-common/lazy';
 import { ErrorHandler } from '@wix/fe-essentials/error-handler';
 
 export interface WixPatternsEssentialsTestProviderProps
@@ -118,7 +118,7 @@ export function WixPatternsEssentialsTestProvider(
               componentId: '',
               Extension: (props: any) => <ExtensionWidget {...props} />,
               menuItem: {
-                IconComponent: Edit,
+                IconComponent: () => <Edit />,
                 structuredAction: () => alert('action'),
               },
             },

package/src/testkit/jsdom.ts

@@ -1,4 +1,7 @@
-import { uniTestkitFactoryCreator } from '@wix/wix-ui-test-utils/vanilla';
+import {
+  uniTestkitFactoryCreator,
+  TestkitArgs,
+} from '@wix/wix-ui-test-utils/vanilla';
 import { default as TableUniDriver } from '../components/Table/Table.uni.driver';
 import PickerStandaloneUniDriver from '../components/PickerStandalone/PickerStandalone.uni.driver';
 import { default as PickerModalUniDriver } from '../components/PickerModal/PickerModal.uni.driver';
@@ -119,7 +122,9 @@ export const EditableTableTestkit = uniTestkitFactoryCreator(
   EditableTableUniDriver,
 );
 
-export const LayoutSwitchTestkit = uniTestkitFactoryCreator(
+export const LayoutSwitchTestkit: (
+  testkitArgs: TestkitArgs,
+) => ReturnType<typeof LayoutSwitchUniDriver> = uniTestkitFactoryCreator(
   LayoutSwitchUniDriver,
 );
 

package/src/themes/panel-theme.tsx

@@ -1,4 +1,4 @@
-import { ChevronRightSmall } from '@wix/wix-ui-icons-common';
+import { ChevronRightSmall } from '@wix/wix-ui-icons-common/lazy';
 import React from 'react';
 import { PatternsTheme } from './PatternsTheme';
 

package/src/utils/datesUtil.ts

@@ -1,10 +1,27 @@
+// A stored value that isn't a date (a mistyped field, a value written by
+// another client) must not take the page down: `toISOString` throws on an
+// unparsable date, and these run during render.
+export const parseDate = (date: Date | string | number): Date | undefined => {
+  const parsed = new Date(date);
+  return Number.isNaN(parsed.getTime()) ? undefined : parsed;
+};
+
 // this function is used to get the date without timezone
-export const getDateWithoutTimezone = (date: Date | string) =>
-  new Date(new Date(date).toISOString().slice(0, -1));
+export const getDateWithoutTimezone = (
+  date: Date | string,
+): Date | undefined => {
+  const parsed = parseDate(date);
+  return parsed && new Date(parsed.toISOString().slice(0, -1));
+};
 
 // this function is used to get the date with fixed timezone
-export const getISODateStringWithFixedTimezone = (date: Date | string) => {
-  const _date = new Date(date);
+export const getISODateStringWithFixedTimezone = (
+  date: Date | string,
+): string | undefined => {
+  const _date = parseDate(date);
+  if (!_date) {
+    return undefined;
+  }
   const userTimezoneOffset = _date.getTimezoneOffset() * 60000;
   return new Date(_date.getTime() - userTimezoneOffset)
     .toISOString()