@up42/up-components 9.0.0 → 9.2.0

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { Fade, Slide, Grow, createTheme, SvgIcon, Alert as Alert$1, AlertTitle, capitalize as capitalize$1, Box, Snackbar, CssBaseline, CircularProgress, Avatar as Avatar$1, Grid, Container, Checkbox as Checkbox$1, FormLabel as FormLabel$1, FormControl, FormGroup, FormControlLabel, FormHelperText, InputAdornment, IconButton, Button as Button$1, Radio as Radio$1, RadioGroup, Switch as Switch$1, Select as Select$1, MenuItem, TextField, Slider as Slider$1, Link as Link$1, Tab as Tab$1, Tabs as Tabs$1, Divider as Divider$1, Card, CardContent, Modal, Tooltip, Popover as Popover$1, Typography as Typography$1, Stack, Badge as Badge$1, Chip, Menu, styled, Autocomplete, Dialog, alpha } from '@mui/material';
+import { Fade, Slide, Grow, createTheme, SvgIcon, Alert as Alert$1, AlertTitle, capitalize as capitalize$1, Box, Snackbar, CssBaseline, CircularProgress, Avatar as Avatar$1, Grid, Container, Checkbox as Checkbox$1, FormLabel as FormLabel$1, FormControl, FormGroup, FormControlLabel, FormHelperText, InputAdornment, IconButton, Button as Button$1, Radio as Radio$1, RadioGroup, Switch as Switch$1, Select as Select$1, MenuItem, TextField, Slider as Slider$1, Link as Link$1, Tab as Tab$1, Tabs as Tabs$1, Divider as Divider$1, Card, CardContent, Modal, Tooltip, Popover as Popover$1, Chip, Autocomplete, Typography as Typography$1, Stack, Badge as Badge$1, Menu, styled, Dialog, alpha } from '@mui/material';
 export * from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import * as React from 'react';
@@ -27,6 +27,7 @@ import MuiTablePagination$1 from '@mui/material/TablePagination';
 import MuiTableSortLabel from '@mui/material/TableSortLabel';
 import MuiTableFooter$1 from '@mui/material/TableFooter';
 import { useSearchParams, useNavigate } from 'react-router';
+import { isSchema } from 'yup';
 
 var color$2 = {
 	gray0: "#FFFFFF",
@@ -804,6 +805,20 @@ const MuiSwitch = {
 
 const MuiSlider = {
     styleOverrides: {
+        root: {
+            '& .MuiSlider-markLabel': {
+                fontWeight: tokens.typography.fontWeight.regular,
+                fontSize: tokens.typography.fontSize400,
+                // Target the FIRST element with this specific class and remove the transform
+                '&:nth-child(1 of .MuiSlider-markLabel)': {
+                    transform: 'none',
+                },
+                // Target the LAST element with this specific class and reset the transform
+                '&:nth-last-child(1 of .MuiSlider-markLabel)': {
+                    transform: 'translateX(-100%)',
+                },
+            },
+        },
         rail: {
             height: tokens.size.spacingXS,
             backgroundColor: tokens.color.gray100,
@@ -6895,6 +6910,14 @@ const BasePopover = ({ open, onClose, anchorEl, header, children, footerInfo, pr
         e.stopPropagation();
         primaryButton?.onClick?.(e).then(handleClose);
     };
+    const handleSecondaryButtonClick = (e) => {
+        e.stopPropagation();
+        if (secondaryButton?.onClick) {
+            void Promise.resolve(secondaryButton.onClick(e));
+            return;
+        }
+        handleClose();
+    };
     const handleClose = () => {
         onClose?.();
         setPopoverAnchorEl(null);
@@ -6969,7 +6992,7 @@ const BasePopover = ({ open, onClose, anchorEl, header, children, footerInfo, pr
                         } },
                         footerInfo && footerInfo,
                         React__default.createElement(Box, { sx: { display: 'flex', gap: tokens.size.spacing.scale8, marginLeft: 'auto' } },
-                            secondaryButton && (React__default.createElement(Button, { variant: "outlined", size: "slim", ...secondaryButton, onClick: handleClose }, secondaryButton.label)),
+                            secondaryButton && (React__default.createElement(Button, { variant: "outlined", size: "slim", ...secondaryButton, onClick: handleSecondaryButtonClick }, secondaryButton.label)),
                             primaryButton && (React__default.createElement(Button, { variant: "contained", size: "slim", ...primaryButton, onClick: handlePrimaryButtonClick, ...(primaryButton.startIcon && { startIcon: React__default.createElement(Icon, { name: primaryButton.startIcon }) }) }, primaryButton.label)))))),
                 children))));
 };
@@ -7000,14 +7023,26 @@ const DEFAULT_HEADER = 'Filters';
  *
  * Documentation: https://up-components.up42.com/?path=/docs-patterns-popovers-filterpopover--docs
  */
-const FilterPopover = ({ anchorEl, onClose, header = DEFAULT_HEADER, content, applyButtonLabel = DEFAULT_APPLY_LABEL, clearButtonLabel = DEFAULT_CLEAR_LABEL, disableApplyButton = false, isLoadingCount = false, onApply, onClear, ...popoverProps }) => {
+const FilterPopover = ({ anchorEl, onClose, header = DEFAULT_HEADER, content, applyButtonLabel = DEFAULT_APPLY_LABEL, clearButtonLabel = DEFAULT_CLEAR_LABEL, disableApplyButton = false, isLoadingCount = false, maxContentWidth = '384px', onApply, onClear, ...popoverProps }) => {
     const handleApply = async () => {
         await onApply?.();
     };
     const handleClear = async () => {
         await onClear?.();
     };
-    return (React__default.createElement(Popover, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: onClose, header: header, content: content != null ? React__default.createElement(React__default.Fragment, null, content) : undefined, showDividers: true, hideBackdrop: true, disableEnforceFocus: true, disableScrollLock: true, sx: {
+    return (React__default.createElement(Popover, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: onClose, header: header, content: content && content.length > 0 ? (React__default.createElement(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: tokens.size.spacing.scale16,
+                maxWidth: maxContentWidth,
+                '& .MuiSlider-root': {
+                    display: 'flex',
+                    width: '90%',
+                    mx: 'auto',
+                },
+            } }, content.map((item, index) => (React__default.createElement(React__default.Fragment, { key: index },
+            item,
+            index < content.length - 1 && React__default.createElement(Divider$1, { sx: { mx: 0 } })))))) : undefined, showDividers: true, hideBackdrop: true, disableEnforceFocus: true, disableScrollLock: true, sx: {
             // Allows to interact with other elements outside the popover when the popover is open
             pointerEvents: 'none',
             '& > .MuiPaper-root': {
@@ -7024,6 +7059,216 @@ const FilterPopover = ({ anchorEl, onClose, header = DEFAULT_HEADER, content, ap
         }, ...popoverProps }));
 };
 
+/**
+ * Documentation: https://up-components.up42.com/?path=/docs/data-display-tag--docs
+ */
+const Tag = ({ color = 'primary', ...props }) => {
+    return React__default.createElement(Chip, { size: "small", color: color, deleteIcon: React__default.createElement(Icon, { name: "Close", "data-testid": "CloseIcon" }), ...props });
+};
+
+const DELIMITERS = [',', ';'];
+const SPLIT_REGEXP = new RegExp(DELIMITERS.join('|'), 'g');
+/**
+ * Autocomplete-based single or multi-select form input. Selected values are displayed
+ * as chips inside the input field.
+ * Supports adding custom values by typing and pressing Enter (comma/semicolon delimiters).
+ *
+ * Documentation: https://up-components.up42.com/?path=/docs/patterns-form-formautocomplete--docs
+ */
+const FormAutocomplete = ({ id, component = 'div', title, label, valuesMap = {}, values = [], onChange, placeholder, multiple = false, limitTags = -1, // -1 means no limit
+addCustom = false, allOptionsSelectedPlaceholder, required, disabled, error, helperText, sx, groupBy, }) => {
+    const [inputValue, setInputValue] = useState('');
+    /**
+     * Used to show the allOptionsSelectedPlaceholder when the input is not focused.
+     * @default false
+     */
+    const [isFocused, setIsFocused] = useState(false);
+    /**
+     * Options to display in the autocomplete.
+     */
+    const options = useMemo(() => generateOptions(valuesMap), [valuesMap]);
+    /**
+     * Value for the autocomplete.
+     */
+    const valueForAutocomplete = useMemo(() => {
+        const inputValues = values.map((id) => ({
+            label: valuesMap[id]?.title ?? id,
+            id,
+        }));
+        return multiple ? inputValues : inputValues[0] ?? null;
+    }, [values, valuesMap]);
+    const allOptionsSelected = options.length > 0 && values.length === options.length;
+    const showAllOptionsSelectedPlaceholder = multiple && !addCustom && Boolean(allOptionsSelectedPlaceholder) && allOptionsSelected && !isFocused;
+    /** Converts typed string to options. With addCustom: split by comma/semicolon. Otherwise: match valuesMap by title. */
+    const expandStringToOptions = (input) => {
+        if (input.trim() === '')
+            return [];
+        if (addCustom) {
+            return splitInput(input).map((p) => ({ label: p, id: p }));
+        }
+        const matchingIds = Object.values(valuesMap)
+            .filter(({ title }) => isSubstring(title, input))
+            .map(({ name }) => name);
+        return matchingIds.map((id) => ({ label: valuesMap[id]?.title ?? id, id }));
+    };
+    /** Converts a selected option to options. With addCustom: id may contain "x, y" delimiters to split. */
+    const expandOptionToOptions = (option) => {
+        if (addCustom) {
+            const inputValues = splitInput(option.id);
+            if (inputValues.length > 1) {
+                return inputValues.map((value) => ({ label: value, id: value }));
+            }
+        }
+        return [option];
+    };
+    /** Expands a single input item (string or option) into an array of options. */
+    const expandInputItem = (item) => {
+        return typeof item === 'string' ? expandStringToOptions(item) : expandOptionToOptions(toOption(item));
+    };
+    /**
+     * Handles the change event for the autocomplete input.
+     * @param _event - The event object.
+     * @param newValue{AutocompleteValue | AutocompleteValue[]} - The new value(s) for the input. Can be a single value or an array of values(string or FormAutocompleteOption).
+     */
+    const handleChange = (_event, newValue) => {
+        setInputValue('');
+        if (newValue == null) {
+            onChange([]);
+            return;
+        }
+        const items = Array.isArray(newValue) ? newValue : [newValue];
+        const expandedOptions = items.flatMap(expandInputItem);
+        const uniqueOptionsById = expandedOptions.filter((option, index) => expandedOptions.findIndex((o) => o.id === option.id) === index);
+        const optionIds = uniqueOptionsById.map((option) => option.id);
+        onChange(multiple ? optionIds : optionIds.slice(0, 1));
+    };
+    const handleInputChange = (_event, newInputValue) => {
+        setInputValue(newInputValue);
+    };
+    const getOptionLabel = (option) => {
+        if (typeof option === 'string')
+            return option;
+        return option.label;
+    };
+    const filterOptions = (options, { inputValue }) => {
+        const filteredOptions = options.filter((option) => {
+            const alreadySelected = values.includes(option.id);
+            const matchesInput = inputValue === '' || isSubstring(option.label, inputValue);
+            return !alreadySelected && matchesInput;
+        });
+        // When addCustom, suggest "Add X, Y, Z" for typed input (supports ; or , delimiters)
+        const inputValues = splitInput(inputValue);
+        const isExisting = filteredOptions.some((opt) => inputValue === opt.id);
+        if (addCustom && !isExisting && inputValues.length > 0) {
+            filteredOptions.push({
+                label: `Add ${inputValues.join(', ')}`,
+                id: inputValue,
+            });
+        }
+        return filteredOptions;
+    };
+    const getInputPlaceholder = () => {
+        if (showAllOptionsSelectedPlaceholder)
+            return allOptionsSelectedPlaceholder;
+        if (placeholder)
+            return placeholder;
+        if (title)
+            return `Search by ${title.toLowerCase()}`;
+    };
+    const renderTags = (tagValue, getTagProps) => {
+        if (showAllOptionsSelectedPlaceholder)
+            return null;
+        return tagValue.map((option, index) => {
+            const opt = toOption(option);
+            return React__default.createElement(Tag, { key: opt.id, label: opt.label, ...getTagProps({ index }) });
+        });
+    };
+    return (React__default.createElement(FormControl, { component: component, error: error, disabled: disabled, sx: sx },
+        React__default.createElement(FormLabel, { label: title, required: required, htmlFor: id }),
+        React__default.createElement(Autocomplete, { freeSolo: true, fullWidth: true, multiple: multiple, options: options, "aria-label": `Filter ${title || label}`, value: valueForAutocomplete, clearOnBlur: true, limitTags: limitTags, inputValue: inputValue, onInputChange: handleInputChange, onChange: handleChange, getOptionLabel: getOptionLabel, renderInput: (params) => (React__default.createElement(TextField, { ...params, label: label, placeholder: getInputPlaceholder(), InputLabelProps: { shrink: true }, InputProps: {
+                    ...params.InputProps,
+                    // TODO: Remove when upgrading to MUI v6.
+                    // With limitTags set, the root's onClick fires after the input's mousedown,causing the dropdown to open then
+                    // immediately close on first click. Overriding with undefined fixes it; the input's onMouseDown still opens the dropdown.
+                    // PR fix for this on MUI v6: https://github.com/mui/material-ui/pull/42494
+                    onClick: undefined,
+                }, inputProps: {
+                    ...params.inputProps,
+                    onFocus: (e) => {
+                        setIsFocused(true);
+                        params.inputProps?.onFocus?.(e);
+                    },
+                    onBlur: (e) => {
+                        setIsFocused(false);
+                        params.inputProps?.onBlur?.(e);
+                    },
+                } })), renderTags: multiple ? renderTags : undefined, disableCloseOnSelect: multiple, filterOptions: filterOptions, groupBy: groupBy, sx: { my: 1, mt: label ? 2 : 1 } }),
+        error && helperText && React__default.createElement(FormHelperText, { error: error }, helperText)));
+};
+/** ===============================================================
+ * Internal Helper functions
+ * These are not exported and are used only within this component.
+ * ================================================================
+ */
+/**
+ * Generate options from a mapped object.
+ * @param mappedObject - The mapped object to generate options from.
+ * @returns An array of FormAutocompleteOption.
+ */
+function generateOptions(mappedObject = {}) {
+    return Object.values(mappedObject)
+        .map(({ title, name }) => ({ label: title, id: name }))
+        .sort((a, b) => a.label.localeCompare(b.label));
+}
+/**
+ * Split an input string into an array of strings based on delimiters (comma or semicolon).
+ * @param str - The string to split.
+ * @returns An array of strings.
+ */
+function splitInput(str) {
+    return str
+        .split(SPLIT_REGEXP)
+        .map((s) => s.trim())
+        .filter(Boolean);
+}
+/**
+ * Check if a string is a substring of another string.
+ * @param str - The string to check.
+ * @param sub - The substring to check.
+ * @returns True if the string is a substring of the other string, false otherwise.
+ */
+function isSubstring(str, sub) {
+    const normalized = str
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .toLowerCase();
+    return normalized.includes(sub.toLowerCase());
+}
+/**
+ * Convert an AutocompleteValue to a FormAutocompleteOption.
+ * @param val - The AutocompleteValue to convert.
+ * @returns The FormAutocompleteOption.
+ */
+function toOption(val) {
+    if (typeof val === 'string') {
+        return { label: val, id: val };
+    }
+    return val;
+}
+
+const BaseFormSlider = ({ id, component = 'div', required, disabled, label, error, helperText, sx, inputRef, ...props }) => {
+    return (React__default.createElement(FormControl, { component: component, error: error, disabled: disabled, sx: sx },
+        React__default.createElement(FormLabel, { label: label, required: required, htmlFor: id }),
+        React__default.createElement(Slider, { ref: inputRef, ...props }),
+        error && helperText && React__default.createElement(FormHelperText, { error: error }, helperText)));
+};
+/**
+ * Form wrapper for Slider. Use with useGsdSlider for GSD (Ground Sampling Distance) range sliders.
+ *
+ * Documentation: https://up-components.up42.com/?path=/docs/patterns-form-formslider--docs
+ */
+const FormSlider = React__default.forwardRef((props, ref) => (React__default.createElement(BaseFormSlider, { inputRef: ref, ...props })));
+
 const { spacing } = tokens.size;
 /**
  * Documentation: https://up-components.up42.com/?path=/docs/patterns-pageheader--docs
@@ -7339,13 +7584,6 @@ const Badge = ({ children, color = 'info', ...props }) => {
     return (React__default.createElement(Badge$1, { color: color, ...props }, children));
 };
 
-/**
- * Documentation: https://up-components.up42.com/?path=/docs/data-display-tag--docs
- */
-const Tag = ({ color = 'primary', ...props }) => {
-    return React__default.createElement(Chip, { size: "small", color: color, deleteIcon: React__default.createElement(Icon, { name: "Close", "data-testid": "CloseIcon" }), ...props });
-};
-
 dayjs.extend(utc);
 dayjs.extend(relativeTime);
 /**
@@ -11815,6 +12053,68 @@ const useDebounce = (value, delay = 500) => {
     return debouncedValue;
 };
 
+const DEFAULT_MARK_VALUES = [0, 2.5, 10, 30];
+/**
+ * Hook for GSD (Ground Sampling Distance) range slider with logarithmic scale.
+ * Handles conversion between linear slider values and logarithmic GSD values.
+ */
+function useGsdSlider({ minValue: minValueProp, maxValue: maxValueProp, markValues: markValuesProp = DEFAULT_MARK_VALUES, onChange, }) {
+    const hasMarks = markValuesProp.length > 0;
+    // If there are marks, use the prop mark values, otherwise use the default mark values
+    const markValues = hasMarks ? markValuesProp : DEFAULT_MARK_VALUES;
+    const minMarkValue = Math.min(...markValues);
+    const maxMarkValue = Math.max(...markValues);
+    // If there are marks, use the min and max mark values, otherwise use undefined
+    const minGsd = hasMarks ? minMarkValue : undefined;
+    const maxGsd = hasMarks ? maxMarkValue : undefined;
+    // If the min or max value is not provided, use the min and max mark values
+    const minSliderValue = minValueProp ?? minMarkValue;
+    const maxSliderValue = maxValueProp ?? maxMarkValue;
+    // Get the slider value from the min and max slider values
+    const sliderValue = useMemo(() => [
+        getSliderValueFromGsd(minSliderValue, minMarkValue, maxMarkValue),
+        getSliderValueFromGsd(maxSliderValue, minMarkValue, maxMarkValue),
+    ], [minSliderValue, maxSliderValue, minMarkValue, maxMarkValue]);
+    const marks = useMemo(() => {
+        if (!hasMarks)
+            return [];
+        return markValuesProp.map((mark) => ({
+            value: getSliderValueFromGsd(mark, minMarkValue, maxMarkValue),
+            label: `${mark} m`,
+        }));
+    }, [hasMarks, markValuesProp, minMarkValue, maxMarkValue]);
+    const handleSliderChange = (_event, newValue) => {
+        if (newValue === undefined)
+            return;
+        const values = Array.isArray(newValue) ? newValue : [newValue, newValue];
+        const [min, max] = values.map((v) => getGsdFromSliderValue(v, minMarkValue, maxMarkValue));
+        onChange(min, max);
+    };
+    const scale = (n) => getGsdFromSliderValue(n, minMarkValue, maxMarkValue);
+    return {
+        sliderValue,
+        marks,
+        handleSliderChange,
+        scale,
+        minGsd,
+        maxGsd,
+    };
+}
+/**
+ * Convert the value from the slider to a GSD value using a logarithm.
+ */
+function getGsdFromSliderValue(value, minGsd, maxGsd) {
+    const scaledValue = Math.pow(2, (value * Math.log2(maxGsd + 1)) / (maxGsd - minGsd)) - 1;
+    return Number(scaledValue.toFixed(2));
+}
+/**
+ * Convert the GSD value to a value for the slider using a reverse logarithm.
+ */
+function getSliderValueFromGsd(scaledValue, minGsd, maxGsd) {
+    const value = ((Math.log(scaledValue + 1) / Math.log(2)) * (maxGsd - minGsd)) / Math.log2(maxGsd + 1);
+    return Number(value.toFixed(2));
+}
+
 /**
  * There could be many ways to parse URLSearchParams to an object.
  * For example, how should `a` be treated in `a=1&b=2&a=3`?
@@ -11921,4 +12221,234 @@ function useUrlParams(options = {}) {
     };
 }
 
-export { ActionToolbar, Alert, Avatar, Badge, Banner, Button, Checkbox, CodeBlock, CodeInline, CodeSnippet, ContactBox, ControlButton, CopyButton, DataGrid, DateTime, Divider, DocumentationPopover, EditTagsButton, EmptyState, FeatureCard, FeatureCardHeader, FeatureCardHeaderActions, FeatureFlagCheckbox, FilterPopover, FindUsersButton, FormCheckbox, FormDatePicker, FormDateRangePicker, FormDateRangePickerList, FormDateTimePicker, FormInput, FormRadio, FormSelect, FormSwitch, GridContainer, GridItem, Icon, Illustration, InfoCard, InfoModal, InfoPopover, Input, LearnMoreButton, Link, Loading, Logo, NotFound, PageContainer, PageHeader, PageHeaderV2, Popover, Radio, RoleBanner, Select, Slider, StatusLight, Switch, Tab, TabGroup, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, Tabs, Tag, TagsList, ToggleButton, Typography, UpComponentsProvider, analytics, capitalize, copyToClipboard, formatDate, formatFileSize, formatNumber, generateQueryKey, objectToSearchParams, searchParamsToObject, theme, tokens, useAlert, useCursorPagination, useDebounce, useQueryParams, useRemotePagination, useToggle, useUrlParams, valueToString };
+/** Parse a comma-separated string into an array of strings. */
+function parseCommaSeparatedParam(value) {
+    if (value === '') {
+        return [];
+    }
+    const segments = value.split(',');
+    const trimmedNonEmpty = segments.map((segment) => segment.trim()).filter(Boolean);
+    return trimmedNonEmpty;
+}
+/** Get the default value for a Yup field. */
+function getDefaultValueForYupField(fieldDefinition) {
+    const isYupSchema = isSchema(fieldDefinition);
+    if (!isYupSchema) {
+        return undefined;
+    }
+    const yupField = fieldDefinition;
+    return yupField.getDefault();
+}
+/** Get the default values for a schema (`.default()` on each field). */
+function getDefaultValues(schema) {
+    const objectSchema = schema;
+    const { fields } = objectSchema;
+    const defaultEntries = Object.keys(fields).map((fieldKey) => {
+        const defaultForField = getDefaultValueForYupField(fields[fieldKey]);
+        return [fieldKey, defaultForField];
+    });
+    const defaults = Object.fromEntries(defaultEntries);
+    const castOptions = { stripUnknown: true };
+    return schema.cast(defaults, castOptions);
+}
+/** Check if a field is an array and the value is a string. */
+function isArrayFieldWithStringFromUrl(fieldDefinition, paramValue) {
+    const isYupSchema = isSchema(fieldDefinition);
+    if (!isYupSchema || fieldDefinition.type !== 'array') {
+        return false;
+    }
+    const valueIsString = typeof paramValue === 'string';
+    return valueIsString;
+}
+/** Get the URL parameter name for a field. */
+function urlParamNameForField(fieldKey, urlKeyMap) {
+    const mappedName = urlKeyMap?.[fieldKey];
+    if (mappedName === undefined) {
+        return fieldKey;
+    }
+    return mappedName;
+}
+/** Build a raw record of URL parameters from a schema and URL parameters. */
+function buildRawParamsFromUrl(schema, urlParams, urlKeyMap) {
+    const objectSchema = schema;
+    const { fields } = objectSchema;
+    const presentFieldEntries = Object.keys(fields)
+        .map((fieldKey) => {
+        const searchParamKey = urlParamNameForField(fieldKey, urlKeyMap);
+        const paramValue = urlParams[searchParamKey];
+        if (paramValue === undefined) {
+            return null;
+        }
+        const fieldDefinition = fields[fieldKey];
+        const shouldSplitCommaSeparatedString = isArrayFieldWithStringFromUrl(fieldDefinition, paramValue);
+        if (shouldSplitCommaSeparatedString) {
+            const stringFromQuery = paramValue;
+            const parsedList = parseCommaSeparatedParam(stringFromQuery);
+            return [fieldKey, parsedList];
+        }
+        return [fieldKey, paramValue];
+    })
+        .filter((entry) => entry !== null);
+    return Object.fromEntries(presentFieldEntries);
+}
+/** Validate a raw record of URL parameters against a schema. */
+function validateRawAgainstSchema(schema, raw) {
+    const castOptions = { stripUnknown: true };
+    try {
+        const castedSchema = schema.cast(raw, castOptions);
+        return schema.validateSync(castedSchema, castOptions);
+    }
+    catch {
+        return null;
+    }
+}
+/** Parse URL params into a validated filter object using the schema and optional URL key map. */
+function parseFromUrl(schema, urlParams, urlKeyMap) {
+    const raw = buildRawParamsFromUrl(schema, urlParams, urlKeyMap);
+    const validated = validateRawAgainstSchema(schema, raw);
+    // If the validation failed, return the default values
+    if (validated === null) {
+        return getDefaultValues(schema);
+    }
+    return validated;
+}
+/** Check if two arrays of filter values are equal. */
+function arrayFilterValuesEqual(left, right) {
+    const { length: leftLength } = left;
+    const { length: rightLength } = right;
+    if (leftLength !== rightLength) {
+        return false;
+    }
+    return left.every((leftItem, index) => {
+        const rightItem = right[index];
+        return sameFilterValue(leftItem, rightItem);
+    });
+}
+/** Check if two plain record of filter values are equal. */
+function plainRecordFilterValuesEqual(leftRecord, rightRecord) {
+    const keySet = new Set([...Object.keys(leftRecord), ...Object.keys(rightRecord)]);
+    const allKeys = [...keySet];
+    return allKeys.every((key) => {
+        const leftValue = leftRecord[key];
+        const rightValue = rightRecord[key];
+        return sameFilterValue(leftValue, rightValue);
+    });
+}
+/** Deep value equality for filter field values (primitives, arrays, plain objects, Date). */
+function sameFilterValue(left, right) {
+    // Check if the values are the same object
+    if (Object.is(left, right)) {
+        return true;
+    }
+    // Check if the values are null or undefined
+    const leftIsNullish = left == null;
+    const rightIsNullish = right == null;
+    if (leftIsNullish || rightIsNullish) {
+        const bothNullish = leftIsNullish && rightIsNullish;
+        return bothNullish;
+    }
+    // Check if the values are arrays
+    const leftIsArray = Array.isArray(left);
+    const rightIsArray = Array.isArray(right);
+    const bothAreArrays = leftIsArray && rightIsArray;
+    if (bothAreArrays) {
+        return arrayFilterValuesEqual(left, right);
+    }
+    // Check if the values are dates
+    const leftIsDate = left instanceof Date;
+    const rightIsDate = right instanceof Date;
+    const bothAreDates = leftIsDate && rightIsDate;
+    if (bothAreDates) {
+        const leftTime = left.getTime();
+        const rightTime = right.getTime();
+        return leftTime === rightTime;
+    }
+    // Check if the values are objects
+    const leftIsObject = typeof left === 'object';
+    const rightIsObject = typeof right === 'object';
+    const bothAreObjects = leftIsObject && rightIsObject;
+    if (!bothAreObjects) {
+        return false;
+    }
+    // Check if the values are plain records
+    const leftRecord = left;
+    const rightRecord = right;
+    return plainRecordFilterValuesEqual(leftRecord, rightRecord);
+}
+/**
+ * True when `draft` and `applied` match on every key in `schema`.
+ * Unrelated URL search params do not appear on these snapshots, so this stays accurate when other code adds params.
+ */
+function areFilterSnapshotsEqual(schema, draft, applied) {
+    const objectSchema = schema;
+    const { fields } = objectSchema;
+    const schemaFieldKeys = Object.keys(fields);
+    return schemaFieldKeys.every((fieldKey) => {
+        const filterKey = fieldKey;
+        const draftValue = draft[filterKey];
+        const appliedValue = applied[filterKey];
+        return sameFilterValue(draftValue, appliedValue);
+    });
+}
+
+/**
+ * Draft vs applied filter state: the UI edits `filters` (draft); `apply` writes to the URL via {@link useUrlParams}.
+ * Applied filters are always derived from the current search string and validated with Yup.
+ *
+ * When the query string changes, the draft syncs from the URL only if **schema-defined** filter values changed.
+ * Extra params from other features do not reset the draft or affect **`isDirty`** by themselves.
+ */
+function useFilterState(schema, options = {}) {
+    const { urlKeyMap } = options;
+    const { setParams, stringParams } = useUrlParams();
+    const defaults = useMemo(() => getDefaultValues(schema), [schema]);
+    const appliedFilters = useMemo(() => {
+        const raw = searchParamsToObject(new URLSearchParams(stringParams));
+        return parseFromUrl(schema, raw, urlKeyMap);
+    }, [schema, stringParams, urlKeyMap]);
+    const [draft, setDraft] = useState(() => parseFromUrl(schema, searchParamsToObject(new URLSearchParams(stringParams)), urlKeyMap));
+    const draftRef = useRef(draft);
+    draftRef.current = draft;
+    const prevAppliedRef = useRef(null);
+    useEffect(() => {
+        const prevApplied = prevAppliedRef.current;
+        if (prevApplied !== null && areFilterSnapshotsEqual(schema, prevApplied, appliedFilters)) {
+            prevAppliedRef.current = appliedFilters;
+            return;
+        }
+        prevAppliedRef.current = appliedFilters;
+        draftRef.current = appliedFilters;
+        setDraft(appliedFilters);
+    }, [appliedFilters, schema]);
+    const setFilter = useCallback((key, value) => {
+        const next = { ...draftRef.current, [key]: value };
+        draftRef.current = next;
+        setDraft(next);
+    }, []);
+    const apply = useCallback(() => {
+        const rawParams = searchParamsToObject(new URLSearchParams(stringParams));
+        const nextParams = { ...rawParams };
+        Object.keys(schema.fields).map((fieldKey) => {
+            const mappedUrlKey = urlKeyMap?.[fieldKey];
+            const urlKey = mappedUrlKey ?? fieldKey;
+            const fieldValue = draftRef.current[fieldKey];
+            nextParams[urlKey] = fieldValue;
+        });
+        setParams(nextParams);
+    }, [schema, setParams, stringParams, urlKeyMap]);
+    const reset = useCallback(() => {
+        draftRef.current = defaults;
+        setDraft(defaults);
+    }, [defaults]);
+    const isDirty = useMemo(() => !areFilterSnapshotsEqual(schema, draft, appliedFilters), [schema, draft, appliedFilters]);
+    return {
+        filters: draft,
+        setFilter,
+        apply,
+        reset,
+        isDirty,
+        defaults,
+    };
+}
+
+export { ActionToolbar, Alert, Avatar, Badge, Banner, Button, Checkbox, CodeBlock, CodeInline, CodeSnippet, ContactBox, ControlButton, CopyButton, DataGrid, DateTime, Divider, DocumentationPopover, EditTagsButton, EmptyState, FeatureCard, FeatureCardHeader, FeatureCardHeaderActions, FeatureFlagCheckbox, FilterPopover, FindUsersButton, FormAutocomplete, FormCheckbox, FormDatePicker, FormDateRangePicker, FormDateRangePickerList, FormDateTimePicker, FormInput, FormRadio, FormSelect, FormSlider, FormSwitch, GridContainer, GridItem, Icon, Illustration, InfoCard, InfoModal, InfoPopover, Input, LearnMoreButton, Link, Loading, Logo, NotFound, PageContainer, PageHeader, PageHeaderV2, Popover, Radio, RoleBanner, Select, Slider, StatusLight, Switch, Tab, TabGroup, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, Tabs, Tag, TagsList, ToggleButton, Typography, UpComponentsProvider, analytics, areFilterSnapshotsEqual, capitalize, copyToClipboard, formatDate, formatFileSize, formatNumber, generateQueryKey, objectToSearchParams, searchParamsToObject, theme, tokens, useAlert, useCursorPagination, useDebounce, useFilterState, useGsdSlider, useQueryParams, useRemotePagination, useToggle, useUrlParams, valueToString };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { default as tokens } from '@up42/design-system-tokens/dist/json/tokens.json';
 import * as _mui_material from '@mui/material';
-import { BoxProps, TextFieldProps, AvatarProps as AvatarProps$1, GridProps, ContainerProps, CheckboxProps as CheckboxProps$1, RadioProps as RadioProps$1, RadioGroupProps, SwitchProps as SwitchProps$1, SelectProps as SelectProps$1, SliderProps as SliderProps$1, LinkProps as LinkProps$1, TabProps as TabProps$1, TabsProps as TabsProps$1, CardProps, ModalProps, AlertProps as AlertProps$1, SxProps, Theme, IconButtonProps, SvgIconProps, PopoverProps as PopoverProps$1, BadgeProps as BadgeProps$1, ChipProps, DividerProps as DividerProps$1, ButtonProps as ButtonProps$2, SnackbarProps } from '@mui/material';
+import { BoxProps, TextFieldProps, AvatarProps as AvatarProps$1, GridProps, ContainerProps, CheckboxProps as CheckboxProps$1, RadioProps as RadioProps$1, RadioGroupProps, SwitchProps as SwitchProps$1, SelectProps as SelectProps$1, SliderProps as SliderProps$2, LinkProps as LinkProps$1, TabProps as TabProps$1, TabsProps as TabsProps$1, CardProps, ModalProps, AlertProps as AlertProps$1, SxProps, Theme, IconButtonProps, SvgIconProps, PopoverProps as PopoverProps$1, BadgeProps as BadgeProps$1, ChipProps, DividerProps as DividerProps$1, ButtonProps as ButtonProps$2, SnackbarProps } from '@mui/material';
 export * from '@mui/material';
 import { ThemeProviderProps } from '@mui/material/styles/ThemeProvider';
 import * as React from 'react';
@@ -23,6 +23,7 @@ import { TableFooterProps as TableFooterProps$1 } from '@mui/material/TableFoote
 import { DataGridPremiumProps } from '@mui/x-data-grid-premium';
 export { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, GridCell, GridCellModes, GridCellModesModel, GridCellParams, GridColDef, GridColumnHeaderParams, GridEditCellProps, GridEditInputCell, GridFooter, GridInitialState, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPreProcessEditCellProps, GridRenderCellParams, GridRenderEditCellParams, GridRow, GridRowCount, GridRowId, GridRowParams, GridRowSelectionModel, GridRowsProp, GridSelectedRowCount, GridSortModel, GridTreeNodeWithRender, gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridRowsLookupSelector, useGridApiContext, useGridApiRef, useGridSelector } from '@mui/x-data-grid-premium';
 import { ToggleButtonProps as ToggleButtonProps$1 } from '@mui/material/ToggleButton';
+import { AnyObjectSchema, InferType } from 'yup';
 
 interface UpComponentsProviderProps extends Omit<ThemeProviderProps, 'theme'> {
     licenseKey: string;
@@ -282,11 +283,11 @@ type FormInputProps = FormBaseProps & InputProps;
  */
 declare const FormInput: React__default.ForwardRefExoticComponent<Omit<FormInputProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
-type SliderProps = MUIGlobalOmit<Omit<SliderProps$1, 'variant' | 'label'>>;
+type SliderProps$1 = MUIGlobalOmit<Omit<SliderProps$2, 'variant' | 'label'>>;
 /**
  * Documentation: https://up-components.up42.com/?path=/docs/data-entry-slider--default--docs
  */
-declare const Slider: (props: SliderProps) => React__default.JSX.Element;
+declare const Slider: (props: SliderProps$1) => React__default.JSX.Element;
 
 type LinkProps<C extends React__default.ElementType> = LinkProps$1<C, {
     component?: C;
@@ -4696,7 +4697,8 @@ type PopoverProps = Omit<PopoverProps$1, 'content' | 'open' | 'onClose'> & {
      */
     primaryButton?: PopoverButtonProps;
     /**
-     * Secondary button props (optional)
+     * Secondary button props (optional).
+     * If `onClick` is omitted, clicking the button only closes the popover. If `onClick` is set, it runs and the popover stays open unless you call `onClose`.
      */
     secondaryButton?: PopoverButtonProps;
     /**
@@ -4742,9 +4744,10 @@ declare const Popover: React__default.ForwardRefExoticComponent<Omit<PopoverProp
 
 type FilterPopoverProps = Pick<PopoverProps, 'anchorEl' | 'onClose' | 'header' | 'sx' | 'size'> & {
     /**
-     * Filter area content (placeholder node for now).
+     * Array of filter input components to display. Each item is rendered in a vertical stack with spacing.
+     * Use FormInput, FormDateRangePicker, FormSlider, FormAutocomplete, etc.
      */
-    content?: React__default.ReactNode;
+    content?: React__default.ReactNode[];
     /**
      * Apply button text.
      * @default 'Apply filters'
@@ -4765,6 +4768,11 @@ type FilterPopoverProps = Pick<PopoverProps, 'anchorEl' | 'onClose' | 'header' |
      * @default false
      */
     disableApplyButton?: boolean;
+    /**
+     * Maximum width of the content.
+     * @default '384px'
+     */
+    maxContentWidth?: string;
     /**
      * Called when Apply is clicked; popover closes after.
      */
@@ -4780,7 +4788,115 @@ type FilterPopoverProps = Pick<PopoverProps, 'anchorEl' | 'onClose' | 'header' |
  *
  * Documentation: https://up-components.up42.com/?path=/docs-patterns-popovers-filterpopover--docs
  */
-declare const FilterPopover: ({ anchorEl, onClose, header, content, applyButtonLabel, clearButtonLabel, disableApplyButton, isLoadingCount, onApply, onClear, ...popoverProps }: FilterPopoverProps) => React__default.JSX.Element;
+declare const FilterPopover: ({ anchorEl, onClose, header, content, applyButtonLabel, clearButtonLabel, disableApplyButton, isLoadingCount, maxContentWidth, onApply, onClear, ...popoverProps }: FilterPopoverProps) => React__default.JSX.Element;
+
+type FormAutocompleteMapper = Record<string, {
+    title: string;
+    name: string;
+}>;
+type FormAutocompleteOption = {
+    label: string;
+    id: string;
+};
+type FormAutocompleteProps = {
+    /**
+     * ID of the input.
+     */
+    id?: string;
+    /**
+     * Component to wrap the input.
+     */
+    component?: React__default.ElementType;
+    /**
+     * Title of the input.
+     */
+    title?: string;
+    /**
+     * Label of the input.
+     */
+    label?: string;
+    /**
+     * Selected values.
+     */
+    values?: string[];
+    /**
+     * Map of values to options.
+     */
+    valuesMap?: FormAutocompleteMapper;
+    /**
+     * Callback when selection changes.
+     */
+    onChange: (values: string[]) => void;
+    /**
+     * Placeholder text when no selection.
+     */
+    placeholder?: string;
+    /**
+     * When true, allows multiple selections. Selected values are displayed as chips inside the input.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Maximum number of tags to display. -1 means no limit.
+     * @default -1
+     */
+    limitTags?: number;
+    /**
+     * When true, allows adding custom text as values. Shows "Add X, Y, Z" in the dropdown when typing.
+     * Supports multiple values separated by comma or semicolon.
+     * @default false
+     */
+    addCustom?: boolean;
+    /**
+     * Text to display when all options are selected (multiple=true, addCustom=false).
+     * Shown when input is not focused; selected chips are shown when focused.
+     */
+    allOptionsSelectedPlaceholder?: string;
+    /**
+     * Whether the input is required.
+     */
+    required?: boolean;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Error message to display.
+     */
+    error?: boolean;
+    /**
+     * Helper text to display.
+     */
+    helperText?: string;
+    /**
+     * Styles to apply to the input.
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * Function that returns the group key for each option. Groups options in the dropdown.
+     */
+    groupBy?: (option: FormAutocompleteOption) => string;
+};
+/**
+ * Autocomplete-based single or multi-select form input. Selected values are displayed
+ * as chips inside the input field.
+ * Supports adding custom values by typing and pressing Enter (comma/semicolon delimiters).
+ *
+ * Documentation: https://up-components.up42.com/?path=/docs/patterns-form-formautocomplete--docs
+ */
+declare const FormAutocomplete: ({ id, component, title, label, valuesMap, values, onChange, placeholder, multiple, limitTags, addCustom, allOptionsSelectedPlaceholder, required, disabled, error, helperText, sx, groupBy, }: FormAutocompleteProps) => React__default.JSX.Element;
+
+type SliderProps = MUIGlobalOmit<Omit<SliderProps$2, 'variant' | 'label'>>
+
+type FormSliderProps = Omit<FormBaseProps, 'onChange'> & SliderProps & {
+    inputRef?: SliderProps['ref'];
+};
+/**
+ * Form wrapper for Slider. Use with useGsdSlider for GSD (Ground Sampling Distance) range sliders.
+ *
+ * Documentation: https://up-components.up42.com/?path=/docs/patterns-form-formslider--docs
+ */
+declare const FormSlider: React__default.ForwardRefExoticComponent<Omit<FormSliderProps, "ref"> & React__default.RefAttributes<HTMLSpanElement>>;
 
 type PageHeaderProps = {
     title: string;
@@ -11709,6 +11825,44 @@ declare function useToggle(initialState: boolean | (() => boolean)): UseToggleRe
  */
 declare const useDebounce: <T>(value: T, delay?: number) => T;
 
+type UseGsdSliderProps = {
+    /**
+     * Minimum GSD value (meters). Controlled by parent.
+     * When omitted, the range thumb uses the axis minimum (lowest mark used for the logarithm).
+     */
+    minValue?: number;
+    /**
+     * Maximum GSD value (meters). Controlled by parent.
+     * When omitted, the range thumb uses the axis maximum (highest mark used for the logarithm).
+     */
+    maxValue?: number;
+    /**
+     * Callback when the range changes.
+     */
+    onChange: (minValue: number, maxValue: number) => void;
+    /**
+     * GSD values for the slider marks.
+     * Pass an empty array if you want no marks and `minGsd` / `maxGsd` returned as `undefined` (axis still uses the default scale internally).
+     * @default [0, 2.5, 10, 30]
+     */
+    markValues?: number[];
+};
+/**
+ * Hook for GSD (Ground Sampling Distance) range slider with logarithmic scale.
+ * Handles conversion between linear slider values and logarithmic GSD values.
+ */
+declare function useGsdSlider({ minValue: minValueProp, maxValue: maxValueProp, markValues: markValuesProp, onChange, }: UseGsdSliderProps): {
+    sliderValue: [number, number];
+    marks: {
+        value: number;
+        label: string;
+    }[];
+    handleSliderChange: (_event: unknown, newValue?: number | number[]) => void;
+    scale: (n: number) => number;
+    minGsd: number | undefined;
+    maxGsd: number | undefined;
+};
+
 type CreateAlertProps = {
     title?: string;
     message: string | ElementType;
@@ -11814,5 +11968,32 @@ declare function valueToString(value: unknown): string;
  */
 declare function objectToSearchParams<T extends ParamsObject = ParamsObject>(object: T): string;
 
-export { ActionToolbar, Alert, Avatar, Badge, Banner, Button, Checkbox, CodeBlock, CodeInline, CodeSnippet, ContactBox, ControlButton, CopyButton, DataGrid, DateTime, Divider, DocumentationPopover, EditTagsButton, EmptyState, FeatureCard, FeatureCardHeader, FeatureCardHeaderActions, FeatureFlagCheckbox, FilterPopover, FindUsersButton, FormCheckbox, FormDatePicker, FormDateRangePicker, FormDateRangePickerList, FormDateTimePicker, FormInput, FormRadio, FormSelect, FormSwitch, GridContainer, GridItem, Icon, Illustration, InfoCard, InfoModal, InfoPopover, Input, LearnMoreButton, Link, Loading, Logo, NotFound, PageContainer, PageHeader, PageHeaderV2, Popover, Radio, RoleBanner, Select, Slider, StatusLight, Switch, Tab, TabGroup, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, Tabs, Tag, TagsList, ToggleButton, Typography, UpComponentsProvider, analytics, capitalize, copyToClipboard, formatDate, formatFileSize, formatNumber, generateQueryKey, objectToSearchParams, searchParamsToObject, theme, useAlert, useCursorPagination, useDebounce, useQueryParams, useRemotePagination, useToggle, useUrlParams, valueToString };
-export type { ActionToolbarProps, AlertProps, AnalyticsConfig, AvatarProps, BadgeProps, BannerProps, ButtonProps, CheckboxProps, CodeBlockProps, CodeInlineProps, CodeSnippetItemProps, CodeSnippetProps, ContactBoxProps, ControlButtonProps, CopyButtonProps, CreateAlertProps, CreateSnackbarProps, CursorPaginatedResponse, DateRange, DateTimeProps, DividerProps, DocumentationPopoverProps, EditTagsButtonProps, EmptyStateProps, FeatureCardHeaderActionsProps, FeatureCardHeaderProps, FeatureCardProps, FeatureFlagCheckboxProps, FilterPopoverProps, FindUsersButtonProps, FormCheckboxProps, FormDatePickerDateType, FormDatePickerProps, FormDateRangePickerListProps, FormDateRangePickerProps, FormDateTimePickerProps, FormInputProps, FormRadioProps, FormSelectProps, FormSwitchProps, GridContainerProps, GridItemProps, IconAction, IconProps$1 as IconProps, IllustrationProps, InfoCardProps, InfoModalProps, InfoPopoverProps, InputProps, LearnMoreButtonProps, LinkProps, LoadingProps, LogoProps, MenuAction, NotFoundProps, PageContainerProps, PageHeaderProps, PageHeaderV2Props, PaginatedResponse, ParamsObject, PopoverProps, RadioProps, RemoveParamRules, RoleBannerProps, SearchParamObject, SelectProps, SliderProps, StatusLightProps, SwitchProps, TabGroupProps, TabProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TableSortLabelProps, TabsProps, TagItem, TagProps, TagsListProps, ToggleButtonProps, TypographyProps, UseToggleResult };
+/** Maps internal filter keys to URL search-param names. */
+type UrlKeyMap<FilterSchema extends AnyObjectSchema> = Partial<Record<keyof InferType<FilterSchema>, string>>;
+/**
+ * True when `draft` and `applied` match on every key in `schema`.
+ * Unrelated URL search params do not appear on these snapshots, so this stays accurate when other code adds params.
+ */
+declare function areFilterSnapshotsEqual<FilterSchema extends AnyObjectSchema>(schema: FilterSchema, draft: InferType<FilterSchema>, applied: InferType<FilterSchema>): boolean;
+
+type UseFilterStateOptions<FilterSchema extends AnyObjectSchema> = {
+    urlKeyMap?: UrlKeyMap<FilterSchema>;
+};
+/**
+ * Draft vs applied filter state: the UI edits `filters` (draft); `apply` writes to the URL via {@link useUrlParams}.
+ * Applied filters are always derived from the current search string and validated with Yup.
+ *
+ * When the query string changes, the draft syncs from the URL only if **schema-defined** filter values changed.
+ * Extra params from other features do not reset the draft or affect **`isDirty`** by themselves.
+ */
+declare function useFilterState<FilterSchema extends AnyObjectSchema>(schema: FilterSchema, options?: UseFilterStateOptions<FilterSchema>): {
+    readonly filters: InferType<FilterSchema>;
+    readonly setFilter: <K extends keyof InferType<FilterSchema>>(key: K, value: InferType<FilterSchema>[K]) => void;
+    readonly apply: () => void;
+    readonly reset: () => void;
+    readonly isDirty: boolean;
+    readonly defaults: InferType<FilterSchema>;
+};
+
+export { ActionToolbar, Alert, Avatar, Badge, Banner, Button, Checkbox, CodeBlock, CodeInline, CodeSnippet, ContactBox, ControlButton, CopyButton, DataGrid, DateTime, Divider, DocumentationPopover, EditTagsButton, EmptyState, FeatureCard, FeatureCardHeader, FeatureCardHeaderActions, FeatureFlagCheckbox, FilterPopover, FindUsersButton, FormAutocomplete, FormCheckbox, FormDatePicker, FormDateRangePicker, FormDateRangePickerList, FormDateTimePicker, FormInput, FormRadio, FormSelect, FormSlider, FormSwitch, GridContainer, GridItem, Icon, Illustration, InfoCard, InfoModal, InfoPopover, Input, LearnMoreButton, Link, Loading, Logo, NotFound, PageContainer, PageHeader, PageHeaderV2, Popover, Radio, RoleBanner, Select, Slider, StatusLight, Switch, Tab, TabGroup, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, Tabs, Tag, TagsList, ToggleButton, Typography, UpComponentsProvider, analytics, areFilterSnapshotsEqual, capitalize, copyToClipboard, formatDate, formatFileSize, formatNumber, generateQueryKey, objectToSearchParams, searchParamsToObject, theme, useAlert, useCursorPagination, useDebounce, useFilterState, useGsdSlider, useQueryParams, useRemotePagination, useToggle, useUrlParams, valueToString };
+export type { ActionToolbarProps, AlertProps, AnalyticsConfig, AvatarProps, BadgeProps, BannerProps, ButtonProps, CheckboxProps, CodeBlockProps, CodeInlineProps, CodeSnippetItemProps, CodeSnippetProps, ContactBoxProps, ControlButtonProps, CopyButtonProps, CreateAlertProps, CreateSnackbarProps, CursorPaginatedResponse, DateRange, DateTimeProps, DividerProps, DocumentationPopoverProps, EditTagsButtonProps, EmptyStateProps, FeatureCardHeaderActionsProps, FeatureCardHeaderProps, FeatureCardProps, FeatureFlagCheckboxProps, FilterPopoverProps, FindUsersButtonProps, FormAutocompleteMapper, FormAutocompleteProps, FormCheckboxProps, FormDatePickerDateType, FormDatePickerProps, FormDateRangePickerListProps, FormDateRangePickerProps, FormDateTimePickerProps, FormInputProps, FormRadioProps, FormSelectProps, FormSliderProps, FormSwitchProps, GridContainerProps, GridItemProps, IconAction, IconProps$1 as IconProps, IllustrationProps, InfoCardProps, InfoModalProps, InfoPopoverProps, InputProps, LearnMoreButtonProps, LinkProps, LoadingProps, LogoProps, MenuAction, NotFoundProps, PageContainerProps, PageHeaderProps, PageHeaderV2Props, PaginatedResponse, ParamsObject, PopoverProps, RadioProps, RemoveParamRules, RoleBannerProps, SearchParamObject, SelectProps, SliderProps$1 as SliderProps, StatusLightProps, SwitchProps, TabGroupProps, TabProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TableSortLabelProps, TabsProps, TagItem, TagProps, TagsListProps, ToggleButtonProps, TypographyProps, UrlKeyMap, UseFilterStateOptions, UseGsdSliderProps, UseToggleResult };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@up42/up-components",
-  "version": "9.0.0",
+  "version": "9.2.0",
   "description": "UP42 Component Library",
   "author": "Axel Fuhrmann axel.fuhrmann@up42.com",
   "license": "ISC",
@@ -81,6 +81,7 @@
     "lint-staged": "^12.3.1",
     "prettier": "^2.5.1",
     "react": "^18.3.1",
+    "remark-gfm": "^4.0.1",
     "rimraf": "^6.1.2",
     "rollup": "^4.59.0",
     "rollup-plugin-dts": "^6.1.0",
@@ -90,7 +91,8 @@
     "typescript": "^4.5.4",
     "vite": "^7.1.12",
     "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "yup": "^0.32.9"
   },
   "peerDependencies": {
     "@emotion/react": "^11.7.1",
@@ -101,7 +103,8 @@
     "dayjs": "^1.11.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "^7.12.0"
+    "react-router": "^7.12.0",
+    "yup": "^0.32.9"
   },
   "lint-staged": {
     "*.{js,tsx,ts}": "eslint --cache --fix",
@@ -124,7 +127,8 @@
       "lodash@>=4.0.0 <=4.17.22": ">=4.17.23",
       "serialize-javascript@<=7.0.2": ">=7.0.3",
       "csstype@>=3.0.0": "3.1.3",
-      "@tootallnate/once@<3.0.1": ">=3.0.1"
+      "@tootallnate/once@<3.0.1": ">=3.0.1",
+      "flatted": "^3.4.2"
     }
   }
 }