@wix/patterns 1.415.0 → 1.416.0

package/src/components/ImportButton/CAIRO-4118-tasks.md

@@ -0,0 +1,53 @@
+# CAIRO-4118 — Import CSV Modal: Error Handling, Validation & Edge Cases
+
+**Ticket:** [CAIRO-4118](https://wix.atlassian.net/browse/CAIRO-4118) · Status: In Progress · Priority: High
+**Area:** `packages/cairo/src/components/ImportButton`, `packages/core/src/state/ImportState`
+
+This tracker turns the ticket's task spec into individually-trackable items. All rows start `open`; flip to `done` / `dismiss` as resolved and record what was actually done (commit SHA, test name, rationale).
+
+## General
+
+| # | Task | Desired behavior | Status | Resolution / Notes |
+|---|---|---|---|---|
+| G1 | Success toast | On successful import, show a success toast | open | — |
+
+## Step 1 — Upload: File-Level Failures
+
+| # | Failure | Desired behavior | Status | Resolution / Notes |
+|---|---|---|---|---|
+| 1.1 | File can't be read | Toast: *"Couldn't read this file. Check your internet connection and that the file hasn't been moved or deleted."* + **"Try Again"** action | done | `ImportState.onFileSelected` now shows an ERROR toast (key `cairo.import.fileReadFailed`) with a **Try Again** action (`cairo.import.tryAgain`) that re-runs `onFileSelected(file)` on the `file.text()` read failure, instead of the inline parse-error text. Tests: *"shows a try-again toast and stays on upload step when the file cannot be read"*, *"retries reading the file when the toast try-again action is clicked"* in `Table.importButton.spec.tsx`. New key must be registered in the Translation Center (core `messages_en.json` is gitignored). |
+| 1.2 | Malformed CSV (parse error) | Toast: *"Couldn't process this file. Make sure it's a comma-separated CSV file."* | done | `ImportState.onFileSelected` now fires an ERROR toast (key `cairo.import.processFailed`) on a Papa parse error and stays on the upload step, instead of the inline `parseError` text. Removed the now-dead `parseError` observable, the inline `import-upload-error` UI in `ImportStepUpload.tsx`, and the `getUploadError`/`uploadErrorExists` driver methods. Test: *"shows an error toast and stays on upload step for a malformed CSV"* in `Table.importButton.spec.tsx`. New key must be registered in the Translation Center (core `messages_en.json` is gitignored). |
+| 1.3 | Non-UTF-8 encoding | Toast: *"Couldn't process this file due to its encoding. Make sure it's saved with UTF-8 encoding."* | done | `onFileSelected` reads raw bytes (`file.arrayBuffer()`) and decodes via `new TextDecoder('utf-8', { fatal: true })`, which throws on invalid UTF-8 — validating encoding against the bytes *before* decoding (the earlier U+FFFD-string heuristic was lossy / produced false positives; see PR #5468 review). A decode failure → ERROR toast (key `cairo.import.encodingFailed`) via `_rejectFile`, staying on upload step. `parseCsv` is now string-only. Test env polyfills `TextEncoder`/`TextDecoder` in `__tests__/spec-setup.ts`. Test: *"shows an encoding error toast and stays on upload step for a non-UTF-8 file"*. New key must be registered in the Translation Center (core `messages_en.json` is gitignored). |
+| ~~1.4~~ | ~~File too large / too many rows~~ | ~~Deferred until API size limit is known~~ | dismiss | Deferred in ticket (struck through) |
+
+## Step 2 — Configuration: Validations
+
+| # | Case | Desired behavior | Status | Resolution / Notes |
+|---|---|---|---|---|
+| 2.1 | Duplicate field mapping | Once a collection field is selected in one dropdown, **disable** it (visible but unselectable) in all other dropdowns | open | — |
+| 2.2 | Zero data rows | Show an **inline warning notice** inside step 2 (non-blocking) — user can still proceed or go back. [Design](https://www.figma.com/design/RpB9iQ6a43xcvKiovmJaA1/Import?node-id=72-39072) | open | — |
+| 2.3 | Mismatch between CSV data and chosen field | Dropdown enters **error state** with a status message | open | — |
+
+## Step 3 — Progress: Full Import Failures
+
+| # | Failure | Desired behavior | Status | Resolution / Notes |
+|---|---|---|---|---|
+| 3.1 | Backup fails (pre-upload backup throws) | Put modal into **error state**; replace progress label with error message; footer CTA → **"Try again"** (re-runs import). [Design](https://www.figma.com/design/RpB9iQ6a43xcvKiovmJaA1/Import?node-id=145-12691) | open | — |
+| 3.2 | Full batch failure (network/server error on first batch) | Modal in **error state** with message and **try again** action | open | — |
+| 3.3 | Partial success (some batches succeed, then one throws) | Close modal; show toast with how many failed / succeeded + action to **download the CSV** | open | — |
+
+## Status summary
+
+| # | Topic | Status |
+|---|---|---|
+| G1 | Success toast | open |
+| 1.1 | File can't be read | done |
+| 1.2 | Malformed CSV | done |
+| 1.3 | Non-UTF-8 encoding | done |
+| 1.4 | File too large | dismiss (deferred) |
+| 2.1 | Duplicate field mapping | open |
+| 2.2 | Zero data rows | open |
+| 2.3 | Field/data mismatch | open |
+| 3.1 | Backup fails | open |
+| 3.2 | Full batch failure | open |
+| 3.3 | Partial success | open |

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

@@ -72,11 +72,6 @@ export function ImportModalUniDriver(base: UniDriver, body: UniDriver) {
       nativeInput.dispatchEvent(new Event('change', { bubbles: true }));
     },
 
-    getUploadError: () =>
-      modalLayoutBase().$('[data-hook="import-upload-error"]').text(),
-    uploadErrorExists: () =>
-      modalLayoutBase().$('[data-hook="import-upload-error"]').exists(),
-
     noRowsWarningExists: () =>
       modalLayoutBase().$('[data-hook="import-no-rows-warning"]').exists(),
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload2707926533";
+var _namespace_ = "ImportStepUpload202689484";
 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":"ImportStepUpload2707926533__root","fileUpload":"ImportStepUpload2707926533__fileUpload"};
+export var classes = {"root":"ImportStepUpload202689484__root","fileUpload":"ImportStepUpload202689484__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/ImportStepUpload.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, FileUpload, AddItem } from '@wix/design-system';
+import { Box, FileUpload, AddItem } from '@wix/design-system';
 import { ImportState } from '@wix/bex-core';
 import React from 'react';
 import { observer } from 'mobx-react-lite';
@@ -9,7 +9,7 @@ export interface ImportStepUploadProps {
 }
 
 function _ImportStepUpload({ state }: ImportStepUploadProps) {
-  const { parseError, translate: t } = state;
+  const { translate: t } = state;
 
   return (
     <Box direction="vertical" gap="SP2">
@@ -32,11 +32,6 @@ function _ImportStepUpload({ state }: ImportStepUploadProps) {
           )}
         </FileUpload>
       </Box>
-      {parseError ? (
-        <Text size="small" skin="error" dataHook="import-upload-error">
-          {parseError}
-        </Text>
-      ) : null}
     </Box>
   );
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow321109859";
+var _namespace_ = "InputOverflow1883835792";
 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":"InputOverflow321109859__root"};
+export var classes = {"root":"InputOverflow1883835792__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_ = "LoadingRow2597706729";
+var _namespace_ = "LoadingRow324005189";
 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":"LoadingRow2597706729__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2597706729__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow324005189__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow324005189__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_ = "MaxHeightText1358108207";
+var _namespace_ = "MaxHeightText3575013893";
 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":"MaxHeightText1358108207__root"};
+export var classes = {"root":"MaxHeightText3575013893__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_ = "MaxLines3201845425";
+var _namespace_ = "MaxLines4217852426";
 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":"MaxLines3201845425__root"};
+export var classes = {"root":"MaxLines4217852426__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_ = "MultiBulkActionToolbar2262240796";
+var _namespace_ = "MultiBulkActionToolbar3046762011";
 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":"MultiBulkActionToolbar2262240796__root","leftGroupWrapper":"MultiBulkActionToolbar2262240796__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2262240796__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2262240796__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar3046762011__root","leftGroupWrapper":"MultiBulkActionToolbar3046762011__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3046762011__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3046762011__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_ = "NestedTablePlaceholderStatesRow950851298";
+var _namespace_ = "NestedTablePlaceholderStatesRow432314108";
 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":"NestedTablePlaceholderStatesRow950851298__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow432314108__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_ = "NestedTableRow1953079660";
+var _namespace_ = "NestedTableRow2823236595";
 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":"NestedTableRow1953079660__root","firstLevel":"NestedTableRow1953079660__firstLevel","placeholder":"NestedTableRow1953079660__placeholder","parentHovered":"NestedTableRow1953079660__parentHovered"};
+export var classes = {"root":"NestedTableRow2823236595__root","firstLevel":"NestedTableRow2823236595__firstLevel","placeholder":"NestedTableRow2823236595__placeholder","parentHovered":"NestedTableRow2823236595__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_ = "MultipleDragOverlayEffect954955633";
+var _namespace_ = "MultipleDragOverlayEffect740434531";
 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":"MultipleDragOverlayEffect954955633__root"};
+export var classes = {"root":"MultipleDragOverlayEffect740434531__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_ = "NestedTableDragAndDropRow2342687242";
+var _namespace_ = "NestedTableDragAndDropRow3110001953";
 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":"NestedTableDragAndDropRow2342687242__root"};
+export var classes = {"root":"NestedTableDragAndDropRow3110001953__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_ = "PickerContent1991971225";
+var _namespace_ = "PickerContent3941925014";
 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":"PickerContent1991971225__root"};
+export var classes = {"root":"PickerContent3941925014__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_ = "PickerContentAdditionalStep2347860189";
+var _namespace_ = "PickerContentAdditionalStep3010223988";
 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":"PickerContentAdditionalStep2347860189__root","titles":"PickerContentAdditionalStep2347860189__titles","suffix":"PickerContentAdditionalStep2347860189__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep3010223988__root","titles":"PickerContentAdditionalStep3010223988__titles","suffix":"PickerContentAdditionalStep3010223988__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_ = "PickerTableListItem743710588";
+var _namespace_ = "PickerTableListItem1537267496";
 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":"PickerTableListItem743710588__root"};
+export var classes = {"root":"PickerTableListItem1537267496__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_ = "ScrollableContent1998605952";
+var _namespace_ = "ScrollableContent3722944559";
 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":"ScrollableContent1998605952__root"};
+export var classes = {"root":"ScrollableContent3722944559__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_ = "SetupWidget713352316";
+var _namespace_ = "SetupWidget3035762782";
 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":"SetupWidget713352316__root","row":"SetupWidget713352316__row","completedCta":"SetupWidget713352316__completedCta","card":"SetupWidget713352316__card"};
+export var classes = {"root":"SetupWidget3035762782__root","row":"SetupWidget3035762782__row","completedCta":"SetupWidget3035762782__completedCta","card":"SetupWidget3035762782__card"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard729024105";
+var _namespace_ = "SkeletonCard667970716";
 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":"SkeletonCard729024105__root","headerLoading":"SkeletonCard729024105__headerLoading"};
+export var classes = {"root":"SkeletonCard667970716__root","headerLoading":"SkeletonCard667970716__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter537512541";
+var _namespace_ = "TabsFilter1884220410";
 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":"TabsFilter537512541__root","title":"TabsFilter537512541__title"};
+export var classes = {"root":"TabsFilter1884220410__root","title":"TabsFilter1884220410__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal1270147739";
+var _namespace_ = "ManageTagsModal2305674534";
 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":"ManageTagsModal1270147739__root"};
+export var classes = {"root":"ManageTagsModal2305674534__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common414235322";
+var _namespace_ = "common1075881742";
 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":"common414235322__root","column":"common414235322__column","fullHeight":"common414235322__fullHeight"};
+export var classes = {"root":"common1075881742__root","column":"common1075881742__column","fullHeight":"common1075881742__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

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

package/src/state/EditableTable/types.ts

@@ -133,6 +133,7 @@ export interface CellTypeConfigMap {
   richText: RichTextCellTypeConfig;
   mediaGallery: never;
   reference: ReferenceTypeConfig;
+  multiReference: ReferenceTypeConfig;
   address: AddressCellTypeConfig;
   custom: Omit<CellType, 'type'>;
 }

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

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