@vuu-ui/vuu-table-extras 4.0.0-alpha.2 → 4.0.0-alpha.21

package/src/column-picker/ColumnPicker.js

@@ -1,204 +1,36 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
-import { DragDropProvider, getColumnLabel, isCalculatedColumn, useSortable } from "@vuu-ui/vuu-utils";
 import clsx from "clsx";
-import { forwardRef, useCallback, useMemo, useRef } from "react";
-import { Button, Input, ListBox, Option } from "@salt-ds/core";
-import { applyHighlighting } from "@vuu-ui/vuu-table";
-import { Icon, IconButton } from "@vuu-ui/vuu-ui-controls";
-import { ColumnChangeSource } from "./ColumnModel.js";
+import { forwardRef } from "react";
 import { useColumnPicker } from "./useColumnPicker.js";
+import { ItemPicker } from "@vuu-ui/vuu-ui-controls";
 import ColumnPicker_0 from "./ColumnPicker.css";
 const classBase = "vuuColumnPicker";
 const classBaseListItem = "vuuColumnPickerListItem";
-const searchIcon = /*#__PURE__*/ jsx("span", {
-    "data-icon": "search"
-});
 const NO_SELECTION = [];
-const useSorting = (id, index)=>{
-    const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({
-        id,
-        index
-    });
-    const [handleRef, ref] = useMemo(()=>[
-            sortableHandleRef,
-            sortableRef
-        ], [
-        sortableHandleRef,
-        sortableRef
-    ]);
-    return {
-        handleRef,
-        ref
-    };
-};
-const SelectedColumnListItem = ({ className: classNameProp, index, column, onRemove, searchPattern = "", ...optionProps })=>{
-    const { handleRef, ref } = useSorting(column.name, index);
-    const value = getColumnLabel(column);
-    const valueWithHighlighting = applyHighlighting(value, searchPattern);
-    const handleRemoveButtonClick = useCallback((e)=>{
-        e.stopPropagation();
-        onRemove?.(e);
-    }, [
-        onRemove
-    ]);
-    return /*#__PURE__*/ jsxs(Option, {
-        ...optionProps,
-        className: clsx(classNameProp, classBaseListItem),
-        "data-name": column.name,
-        ref: ref,
-        children: [
-            /*#__PURE__*/ jsx(IconButton, {
-                "data-embedded": true,
-                appearance: "transparent",
-                icon: "draggable",
-                ref: handleRef,
-                size: 16
-            }),
-            isCalculatedColumn(column.name) ? /*#__PURE__*/ jsx(Icon, {
-                className: "vuuCalculatedColumnIcon",
-                name: "function"
-            }) : null,
-            /*#__PURE__*/ jsx("span", {
-                className: `${classBase}-text`,
-                children: valueWithHighlighting
-            }),
-            /*#__PURE__*/ jsx(IconButton, {
-                className: `${classBaseListItem}-action`,
-                "data-embedded": true,
-                appearance: "transparent",
-                icon: "cross",
-                onClick: handleRemoveButtonClick,
-                size: 16
-            })
-        ]
-    });
-};
-const AvailableColumnListItem = ({ className: classNameProp, index, column: item, onAdd, searchPattern = "", ...optionProps })=>{
-    const value = getColumnLabel(item);
-    const valueWithHighlighting = applyHighlighting(value, searchPattern);
-    return /*#__PURE__*/ jsxs(Option, {
-        ...optionProps,
-        className: clsx(classNameProp, classBaseListItem),
-        "data-name": item.name,
-        children: [
-            /*#__PURE__*/ jsx("span", {
-                className: `${classBase}-text`,
-                children: valueWithHighlighting
-            }),
-            /*#__PURE__*/ jsx(IconButton, {
-                className: `${classBaseListItem}-action`,
-                "data-embedded": true,
-                appearance: "transparent",
-                icon: "plus",
-                onClick: onAdd,
-                size: 16
-            })
-        ]
-    });
-};
-const ColumnPicker_ColumnPicker = /*#__PURE__*/ forwardRef(function({ allowCreateCalculatedColumn, columnModel, className, onClickCreateCalculatedColumn, onSelectionChange, selected = NO_SELECTION, ...htmlAttributes }, forwardedRef) {
+const ColumnPicker_ColumnPicker = /*#__PURE__*/ forwardRef(function({ columnModel, className, onSelectionChange, selected = NO_SELECTION, ...htmlAttributes }, forwardedRef) {
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-column-picker",
         css: ColumnPicker_0,
         window: targetWindow
     });
-    const searchCallbackRef = useCallback((el)=>{
-        setTimeout(()=>{
-            el?.querySelector("input")?.focus();
-        }, 100);
-    }, []);
-    const { availableColumns, onAddItemToSelectedList, onChangeSearchInput, onRemoveItemFromSelectedList, searchText, selectedColumns } = useColumnPicker({
+    const { allItems, selectedItems, oneOrMoreColumnsIsCalculated, handleSelectedItemsChange } = useColumnPicker({
         columnModel: columnModel
     });
-    const listRef = useRef(null);
-    const getOptionName = (option)=>{
-        if (option) {
-            const { name } = option.dataset;
-            if (name) return name;
-        }
-        throw Error("[ColumnPicker] list option has no data-name");
-    };
-    const handleDragEnd = useCallback(()=>{
-        setTimeout(()=>{
-            const listItems = listRef.current?.querySelectorAll(".saltOption");
-            if (listItems) {
-                const orderedColumnNames = Array.from(listItems).map(getOptionName);
-                columnModel.reorderSelectedColumns(orderedColumnNames, ColumnChangeSource.ColumnPicker);
-            }
-        }, 300);
-    }, [
-        columnModel
-    ]);
-    const oneOrMoreColumnsIsCalculated = selectedColumns.some((column)=>isCalculatedColumn(column.name));
-    return /*#__PURE__*/ jsxs("div", {
+    return /*#__PURE__*/ jsx(ItemPicker, {
         ...htmlAttributes,
         className: clsx(classBase, className, {
             [`${classBase}-withCalculated`]: oneOrMoreColumnsIsCalculated
         }),
+        allItems: allItems,
+        selectedItems: selectedItems,
+        itemTypeName: "column",
+        onSelectedItemsChange: handleSelectedItemsChange,
+        onSelectionChange: onSelectionChange,
         ref: forwardedRef,
-        children: [
-            /*#__PURE__*/ jsx("form", {
-                className: `${classBase}-search`,
-                role: "search",
-                children: /*#__PURE__*/ jsx(Input, {
-                    startAdornment: searchIcon,
-                    placeholder: "Find column",
-                    ref: searchCallbackRef,
-                    value: searchText,
-                    onChange: onChangeSearchInput
-                })
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: `${classBase}-scrollContainer vuuScrollable`,
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: `${classBase}-sectionHeader`,
-                        children: "Columns in view"
-                    }),
-                    /*#__PURE__*/ jsx(DragDropProvider, {
-                        onDragEnd: handleDragEnd,
-                        children: /*#__PURE__*/ jsx(ListBox, {
-                            className: `${classBase}-selectedList`,
-                            onSelectionChange: onSelectionChange,
-                            ref: listRef,
-                            selected: selected,
-                            children: selectedColumns.map((column, index)=>/*#__PURE__*/ jsx(SelectedColumnListItem, {
-                                    column: column,
-                                    index: index,
-                                    onRemove: onRemoveItemFromSelectedList,
-                                    searchPattern: searchText.toLowerCase(),
-                                    value: column
-                                }, column.name))
-                        })
-                    }),
-                    /*#__PURE__*/ jsx("div", {
-                        className: clsx(`${classBase}-sectionHeader`, `${classBase}-availableHeader`),
-                        children: "Available columns"
-                    }),
-                    /*#__PURE__*/ jsx(ListBox, {
-                        className: `${classBase}-availableList`,
-                        selected: NO_SELECTION,
-                        children: availableColumns.map((column, index)=>/*#__PURE__*/ jsx(AvailableColumnListItem, {
-                                column: column,
-                                index: index,
-                                onAdd: onAddItemToSelectedList,
-                                searchPattern: searchText.toLowerCase(),
-                                value: column
-                            }, column.name))
-                    })
-                ]
-            }),
-            allowCreateCalculatedColumn ? /*#__PURE__*/ jsx("div", {
-                className: `${classBase}-column-buttons`,
-                children: /*#__PURE__*/ jsx(Button, {
-                    onClick: onClickCreateCalculatedColumn,
-                    children: "Create calculated column"
-                })
-            }) : null
-        ]
+        selected: selected
     });
 });
 export { ColumnPicker_ColumnPicker as ColumnPicker, classBaseListItem };

package/src/column-picker/useColumnPicker.js

@@ -1,13 +1,7 @@
-import { queryClosest } from "@vuu-ui/vuu-utils";
-import { useCallback, useEffect, useState } from "react";
+import { isCalculatedColumn } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { ColumnChangeSource } from "./ColumnModel.js";
 const SOURCE = ColumnChangeSource.ColumnPicker;
-const columnName = (target)=>{
-    const listItem = queryClosest(target, ".saltOption", true);
-    const { name } = listItem.dataset;
-    if (name) return name;
-    throw Error("[useColumnPicker] column name could not be identified, data-name attribute not found");
-};
 const useColumnPicker = ({ columnModel: model })=>{
     const [, forceRender] = useState({});
     useEffect(()=>{
@@ -18,25 +12,37 @@ const useColumnPicker = ({ columnModel: model })=>{
     }, [
         model
     ]);
-    const handleChangeSearchInput = useCallback((evt)=>{
-        const { value } = evt.target;
-        model.searchPattern = value;
+    const allItems = useMemo(()=>{
+        const itemDescriptors = model.allColumns.map((column)=>({
+                name: column.name,
+                label: column.label,
+                icon: isCalculatedColumn(column.name) ? "vuuCalculatedColumnIcon" : void 0
+            }));
+        return itemDescriptors;
     }, [
-        model
+        model.allColumns
     ]);
-    const handleAddItemToSelectedList = useCallback((e)=>model.addItemToSelectedColumns(columnName(e.target), SOURCE), [
-        model
+    const selectedItems = useMemo(()=>{
+        const itemDescriptors = model.selectedColumns.map((column)=>allItems.find((item)=>item.name === column.name));
+        return itemDescriptors;
+    }, [
+        model.selectedColumns,
+        allItems
     ]);
-    const handleRemoveItemFromSelectedList = useCallback((e)=>model.removeItemFromSelectedColumns(columnName(e.target), SOURCE), [
-        model
+    const oneOrMoreColumnsIsCalculated = useMemo(()=>model.selectedColumns.some((column)=>isCalculatedColumn(column.name)), [
+        model.selectedColumns
+    ]);
+    const handleSelectedItemsChange = useCallback((newSelectedItems)=>{
+        const newSelectedColumns = newSelectedItems.map((item)=>model.allColumns.find((column)=>column.name === item.name));
+        model.addRemoveOrReorderSelectedColumns(newSelectedColumns, SOURCE);
+    }, [
+        model.allColumns
     ]);
     return {
-        availableColumns: model.availableColumns,
-        onAddItemToSelectedList: handleAddItemToSelectedList,
-        onRemoveItemFromSelectedList: handleRemoveItemFromSelectedList,
-        onChangeSearchInput: handleChangeSearchInput,
-        searchText: model.searchPattern,
-        selectedColumns: model.selectedColumns
+        allItems,
+        selectedItems,
+        oneOrMoreColumnsIsCalculated,
+        handleSelectedItemsChange
     };
 };
 export { useColumnPicker };

package/src/column-settings-panel/ColumnNameLabel.css.js

@@ -10,7 +10,7 @@ const css = `
 }
 
 .vuuColumnNameLabel-placeholder {
-  color: var(--vuu-color-gray-35);
+  color: var(--salt-color-gray-400);
 }
 
 

package/src/csv-export/export-utils.js

@@ -1,4 +1,4 @@
-import { Range, isSessionTable, metadataKeys } from "@vuu-ui/vuu-utils";
+import { Range, buildColumnMap, getValueFormatter, isSessionTable, metadataKeys } from "@vuu-ui/vuu-utils";
 const EXPORT_EXCLUDED_COLUMNS = new Set([
     "vuuMsg",
     "vuuAction",
@@ -28,10 +28,32 @@ const triggerCsvDownload = (csv, filename)=>{
     document.body.removeChild(a);
     setTimeout(()=>URL.revokeObjectURL(url), 10000);
 };
+const createRowAccessor = (row, columnMap)=>new Proxy({}, {
+        get (_, prop) {
+            if ("string" == typeof prop) {
+                const idx = columnMap[prop];
+                if (void 0 !== idx) return row[idx];
+            }
+        },
+        has (_, prop) {
+            return "string" == typeof prop && void 0 !== columnMap[prop];
+        }
+    });
+const isExportableColumn = (descriptor)=>{
+    if (!descriptor) return true;
+    if (false === descriptor.exportable) return false;
+    if (descriptor.hidden) return false;
+    if (descriptor.isSystemColumn) return false;
+    if (true === descriptor.exportable) return true;
+    if ("client" === descriptor.source && !descriptor.exportFormatter) return false;
+    return true;
+};
 const exportCsvTemplate = async (dataSource, options = {})=>{
     const { filename = "template.csv", excludeColumns = [], columns, overrides, timeout = DEFAULT_TEMPLATE_TIMEOUT, onError, onSuccess } = options;
-    const sessionOverrides = overrides ?? (columns ? {
-        columns
+    const targetColumnNames = columns ? columns.filter((col)=>"string" == typeof col ? true : isExportableColumn(col) && "client" !== col.source).map((col)=>"string" == typeof col ? col : col.name) : void 0;
+    const targetColumns = targetColumnNames ?? overrides?.columns;
+    const sessionOverrides = overrides ?? (targetColumns ? {
+        columns: targetColumns
     } : void 0);
     if (!isSessionTable(dataSource.table) && dataSource.createSessionDataSource && "initialising" !== dataSource.status && "unsubscribed" !== dataSource.status) try {
         const sessionDataSource = await dataSource.createSessionDataSource("Empty", "export", sessionOverrides);
@@ -59,7 +81,16 @@ const exportCsvTemplate = async (dataSource, options = {})=>{
             }, (message)=>{
                 if ("subscribed" === message.type) {
                     const { columns: subColumns } = message;
-                    const exportCols = subColumns.filter((name)=>!excluded.has(name));
+                    const exportCols = targetColumns ? targetColumns.filter((name)=>!excluded.has(name)) : subColumns.filter((name)=>!excluded.has(name));
+                    if (0 === exportCols.length) {
+                        cleanup();
+                        const error = new Error("exportCsvTemplate: no columns available for export");
+                        if (onError) {
+                            onError(error);
+                            resolve();
+                        } else reject(error);
+                        return;
+                    }
                     const header = exportCols.map(csvCell).join(",");
                     triggerCsvDownload(`${header}\r\n`, filename);
                     cleanup();
@@ -72,7 +103,6 @@ const exportCsvTemplate = async (dataSource, options = {})=>{
         console.warn("[exportCsvTemplate] createSessionDataSource failed, falling back to tableSchema", error);
     }
     const schema = dataSource.tableSchema;
-    const targetColumns = columns ?? overrides?.columns;
     if (void 0 !== targetColumns) {
         if (schema) {
             const schemaColumnNames = new Set(schema.columns.map((col)=>col.name));
@@ -99,7 +129,18 @@ const exportCsvTemplate = async (dataSource, options = {})=>{
     onSuccess?.();
 };
 const exportSessionTableToCsv = async (dataSource, options = {})=>{
-    const { filename = "export.csv", copyOption = "All", excludeColumns = [], maxRows = MAX_EXPORT_ROWS, columnDescriptors, overrides, timeout = DEFAULT_EXPORT_TIMEOUT, onError, onSuccess } = options;
+    const { filename = "export.csv", copyOption = "All", excludeColumns = [], maxRows = MAX_EXPORT_ROWS, columnDescriptors: rawColumnDescriptors, columns: rawColumns, overrides, timeout = DEFAULT_EXPORT_TIMEOUT, onError, onSuccess } = options;
+    const rawInputColumns = rawColumns ?? rawColumnDescriptors;
+    const columnDescriptors = rawInputColumns?.map((col)=>"string" == typeof col ? {
+            name: col
+        } : col);
+    const sessionOverrides = overrides ? {
+        ...overrides,
+        columns: overrides.columns?.filter((name)=>{
+            const desc = columnDescriptors?.find((d)=>d.name === name);
+            return desc?.source !== "client";
+        })
+    } : void 0;
     const isRemote = !!dataSource.isRemote;
     if (isRemote && !isSessionTable(dataSource.table) && ("initialising" === dataSource.status || "unsubscribed" === dataSource.status)) {
         const error = new Error(`exportSessionTableToCsv: dataSource must be subscribed before exporting (current status: "${dataSource.status}")`);
@@ -108,7 +149,7 @@ const exportSessionTableToCsv = async (dataSource, options = {})=>{
     }
     let sessionDataSource;
     if (!isSessionTable(dataSource.table) && dataSource.createSessionDataSource) try {
-        sessionDataSource = await dataSource.createSessionDataSource(copyOption, "export", overrides);
+        sessionDataSource = await dataSource.createSessionDataSource(copyOption, "export", sessionOverrides);
     } catch (err) {
         const error = err instanceof Error ? err : new Error(String(err));
         if (onError) return void onError(error);
@@ -152,18 +193,23 @@ const exportSessionTableToCsv = async (dataSource, options = {})=>{
                 const { columns } = message;
                 if (columnDescriptors) {
                     const subscribedSet = new Set(columns);
-                    const unknown = columnDescriptors.filter((d)=>!excluded.has(d.name) && !subscribedSet.has(d.name)).map((d)=>d.name);
+                    const unknown = columnDescriptors.filter((d)=>"client" !== d.source && !excluded.has(d.name) && !subscribedSet.has(d.name)).map((d)=>d.name);
                     if (unknown.length > 0) return void fail(new Error(`exportToCsv: unknown column(s) in columnDescriptors: ${unknown.join(", ")}`));
                     descriptorMap = Object.fromEntries(columnDescriptors.map((d)=>[
                             d.name,
                             d
                         ]));
                 }
-                exportCols = columns.filter((name)=>!excluded.has(name));
-                colNameToRowIdx = Object.fromEntries(columns.map((name, i)=>[
-                        name,
-                        metadataKeys.count + i
-                    ]));
+                if (rawColumns) exportCols = rawColumns.map((c)=>"string" == typeof c ? c : c.name).filter((name)=>!excluded.has(name) && isExportableColumn(descriptorMap[name]));
+                else if (columnDescriptors?.some((d)=>"client" === d.source)) {
+                    const definedNames = new Set(columnDescriptors.map((d)=>d.name));
+                    const remainingSubscribed = columns.filter((name)=>!excluded.has(name) && !definedNames.has(name) && isExportableColumn(descriptorMap[name]));
+                    exportCols = [
+                        ...columnDescriptors.filter((d)=>!excluded.has(d.name) && isExportableColumn(d)).map((d)=>d.name),
+                        ...remainingSubscribed
+                    ];
+                } else exportCols = columns.filter((name)=>!excluded.has(name) && isExportableColumn(descriptorMap[name]));
+                colNameToRowIdx = buildColumnMap(columns);
             } else if ("viewport-update" === message.type) {
                 if ("size-only" === message.mode) {
                     totalSize = message.size ?? 0;
@@ -191,11 +237,21 @@ const exportSessionTableToCsv = async (dataSource, options = {})=>{
                         ];
                         for(let i = 0; i < totalSize; i++){
                             const row = collectedRows.get(i);
-                            if (row) lines.push(exportCols.map((c)=>{
-                                const raw = row[colNameToRowIdx[c]];
-                                const formatter = descriptorMap[c]?.exportFormatter;
-                                return csvCell(formatter ? formatter(raw) : raw);
-                            }).join(","));
+                            if (row) {
+                                const rowAccessor = createRowAccessor(row, colNameToRowIdx);
+                                lines.push(exportCols.map((c)=>{
+                                    const descriptor = descriptorMap[c];
+                                    const isClientCol = descriptor?.source === "client";
+                                    const raw = isClientCol ? void 0 : void 0 !== colNameToRowIdx[c] ? row[colNameToRowIdx[c]] : void 0;
+                                    let formatted;
+                                    if (descriptor?.exportFormatter) formatted = descriptor.exportFormatter(raw, rowAccessor);
+                                    else if (descriptor && ("type" in descriptor || "serverDataType" in descriptor)) {
+                                        const tableFormatter = getValueFormatter(descriptor);
+                                        formatted = tableFormatter(raw);
+                                    } else formatted = raw;
+                                    return csvCell(formatted);
+                                }).join(","));
+                            }
                         }
                         triggerCsvDownload(lines.join("\r\n"), filename);
                         onSuccess?.();
@@ -213,9 +269,9 @@ const exportSessionTableToCsv = async (dataSource, options = {})=>{
         };
         activeSessionDataSource.subscribe({
             range: Range(0, 0),
-            columns: overrides?.columns
+            columns: sessionOverrides?.columns
         }, handleMessage);
     });
 };
 const exportToCsv = async (dataSource, options)=>exportSessionTableToCsv(dataSource, options);
-export { exportCsvTemplate, exportSessionTableToCsv, exportToCsv };
+export { exportCsvTemplate, exportSessionTableToCsv, exportToCsv, isExportableColumn };

package/src/csv-export/index.js

@@ -1,2 +1,2 @@
-export { exportCsvTemplate, exportSessionTableToCsv, exportToCsv } from "./export-utils.js";
+export { exportCsvTemplate, exportSessionTableToCsv, exportToCsv, isExportableColumn } from "./export-utils.js";
 export { useCsvExport } from "./useCsvExport.js";

package/src/csv-export/useCsvExport.js

@@ -6,7 +6,7 @@ function useCsvExport(propsOrDataSource) {
     const config = propsOrDataSource && "table" in propsOrDataSource ? {
         dataSource: propsOrDataSource
     } : propsOrDataSource ?? {};
-    const { dataSource: defaultDataSource, onError, onSuccess } = config;
+    const { dataSource: defaultDataSource, tableConfig, columns: defaultColumns, onError, onSuccess } = config;
     const exportCsv = useCallback(async (options, overrideDataSource)=>{
         const activeDataSource = overrideDataSource ?? defaultDataSource;
         if (!activeDataSource) {
@@ -19,7 +19,9 @@ function useCsvExport(propsOrDataSource) {
         setIsExporting(true);
         setError(null);
         try {
+            const columnsToExport = options?.columns ?? options?.columnDescriptors ?? defaultColumns ?? tableConfig?.columns;
             await exportToCsv(activeDataSource, {
+                columns: columnsToExport,
                 ...options,
                 onError: (err)=>{
                     setError(err);
@@ -42,6 +44,8 @@ function useCsvExport(propsOrDataSource) {
         }
     }, [
         defaultDataSource,
+        defaultColumns,
+        tableConfig,
         onError,
         onSuccess
     ]);
@@ -57,7 +61,9 @@ function useCsvExport(propsOrDataSource) {
         setIsExporting(true);
         setError(null);
         try {
+            const templateColumns = options?.columns ?? defaultColumns ?? tableConfig?.columns;
             await exportCsvTemplate(activeDataSource, {
+                columns: templateColumns,
                 ...options,
                 onError: (err)=>{
                     setError(err);
@@ -80,6 +86,8 @@ function useCsvExport(propsOrDataSource) {
         }
     }, [
         defaultDataSource,
+        defaultColumns,
+        tableConfig,
         onError,
         onSuccess
     ]);

package/src/csv-upload/CsvUpload.css.js

@@ -14,10 +14,44 @@ const css = `
   display: grid;
 }
 
+.vuuCsvUpload-errorContainer {
+  margin-top: var(--salt-spacing-100);
+  width: 100%;
+  max-width: 480px;
+  max-height: 120px;
+  padding: var(--salt-spacing-100) var(--salt-spacing-200);
+  background-color: var(--salt-status-error-background);
+  border-radius: var(--salt-palette-corner);
+  text-align: left;
+  overflow-y: auto;
+}
+
+.vuuCsvUpload-errorList {
+  padding-left: var(--salt-spacing-200);
+  margin: 0;
+  list-style-type: disc;
+}
+
+.vuuCsvUpload-errorItem {
+  font-size: var(--salt-text-label-fontSize);
+  color: var(--salt-status-error-foreground-informative);
+  line-height: var(--salt-text-label-lineHeight);
+  word-break: break-word;
+  margin-bottom: var(--salt-spacing-50);
+}
+
+.vuuCsvUpload-importErrorItem {
+  text-align: center;
+}
+
+.vuuCsvUpload-rectifyPrompt {
+  margin-top: var(--salt-spacing-100);
+}
+
 .vuuCsvUpload-errors {
   border: solid 1px var(--salt-status-error-borderColor);
-  border-radius: var(--salt-size-borderRadius);
-  color: var(--salt-status-error-foreground);
+  border-radius: var(--salt-palette-corner);
+  color: var(--salt-status-error-foreground-informative);
   gap: var(--salt-spacing-100);
   padding: var(--salt-spacing-200);
   display: grid;