@balena/ui-shared-components 6.1.2 → 6.1.3

package/dist/components/AnimatedText/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface AnimatedTextProps {
     words: string[];
     animationType: 'fade' | 'slide' | 'collapse' | 'grow' | 'zoom';

package/dist/components/AnimatedText/index.js

@@ -31,16 +31,16 @@ export const AnimatedText = ({ words, animationType, animationTimeout = 4000, })
         };
     }, [animationTimeout, wordIndex, words.length]);
     if (animationType === 'grow') {
-        return (_jsx(Grow, Object.assign({ in: showSlide, timeout: { enter: 800, exit: 1200 } }, { children: _jsx(Typography, Object.assign({ variant: "inherit", component: "div", color: "hubYellow.main" }, { children: words[wordIndex] })) })));
+        return (_jsx(Grow, { in: showSlide, timeout: { enter: 800, exit: 1200 }, children: _jsx(Typography, { variant: "inherit", component: "div", color: "hubYellow.main", children: words[wordIndex] }) }));
     }
     if (animationType === 'zoom') {
-        return (_jsx(Zoom, Object.assign({ in: showSlide, timeout: { enter: 800, exit: 1200 } }, { children: _jsx(Typography, Object.assign({ variant: "inherit", component: "div", color: "hubYellow.main" }, { children: words[wordIndex] })) })));
+        return (_jsx(Zoom, { in: showSlide, timeout: { enter: 800, exit: 1200 }, children: _jsx(Typography, { variant: "inherit", component: "div", color: "hubYellow.main", children: words[wordIndex] }) }));
     }
     if (animationType === 'slide') {
-        return (_jsx(Slide, Object.assign({ direction: "down", in: showSlide, timeout: { enter: 800, exit: 1200 } }, { children: _jsx(Typography, Object.assign({ variant: "inherit", component: "div", color: "hubYellow.main" }, { children: words[wordIndex] })) })));
+        return (_jsx(Slide, { direction: "down", in: showSlide, timeout: { enter: 800, exit: 1200 }, children: _jsx(Typography, { variant: "inherit", component: "div", color: "hubYellow.main", children: words[wordIndex] }) }));
     }
     if (animationType === 'fade') {
-        return (_jsx(Fade, Object.assign({ in: showSlide, timeout: { enter: 800, exit: 1200 } }, { children: _jsx(Typography, Object.assign({ variant: "inherit", component: "div", color: "hubYellow.main" }, { children: words[wordIndex] })) })));
+        return (_jsx(Fade, { in: showSlide, timeout: { enter: 800, exit: 1200 }, children: _jsx(Typography, { variant: "inherit", component: "div", color: "hubYellow.main", children: words[wordIndex] }) }));
     }
-    return (_jsx(Collapse, Object.assign({ orientation: "horizontal", in: showSlide, timeout: { enter: 800, exit: 1200 } }, { children: _jsx(Typography, Object.assign({ variant: "inherit", component: "div", color: "hubYellow.main", sx: { overflow: 'hidden', whiteSpace: 'nowrap' } }, { children: words[wordIndex] })) })));
+    return (_jsx(Collapse, { orientation: "horizontal", in: showSlide, timeout: { enter: 800, exit: 1200 }, children: _jsx(Typography, { variant: "inherit", component: "div", color: "hubYellow.main", sx: { overflow: 'hidden', whiteSpace: 'nowrap' }, children: words[wordIndex] }) }));
 };

package/dist/components/ButtonWithTracking/index.js

@@ -18,5 +18,5 @@ export const ButtonWithTracking = (_a) => {
     const tooltipProps = tooltip && typeof tooltip === 'object' && 'title' in tooltip
         ? tooltip
         : { title: tooltip };
-    return (_jsx(Tooltip, Object.assign({}, tooltipProps, { children: _jsx(Button, Object.assign({}, rest, { onClick: handleClick, disableElevation: true }, { children: children })) })));
+    return (_jsx(Tooltip, Object.assign({}, tooltipProps, { children: _jsx(Button, Object.assign({}, rest, { onClick: handleClick, disableElevation: true, children: children })) })));
 };

package/dist/components/CollapsedList/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface CollapsedListProps {
     list: Array<{
         name: string;

package/dist/components/CollapsedList/index.js

@@ -8,16 +8,16 @@ import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
  */
 export const CollapsedList = ({ list, collapseItems = 3, }) => {
     const [showMore, setShowMore] = useState(false);
-    const listItems = useMemo(() => (_jsx(Box, Object.assign({ display: "flex", flexDirection: "column" }, { children: list === null || list === void 0 ? void 0 : list.map((item, index) => {
+    const listItems = useMemo(() => (_jsx(Box, { display: "flex", flexDirection: "column", children: list === null || list === void 0 ? void 0 : list.map((item, index) => {
             var _a;
-            return (_jsxs(Typography, Object.assign({ variant: "body2", display: "flex", alignItems: "center", my: 1 }, { children: [item.logo && (_jsx(Avatar, { variant: "square", component: "span", alt: item.name, src: (_a = item.logo) !== null && _a !== void 0 ? _a : '', sx: {
+            return (_jsxs(Typography, { variant: "body2", display: "flex", alignItems: "center", my: 1, children: [item.logo && (_jsx(Avatar, { variant: "square", component: "span", alt: item.name, src: (_a = item.logo) !== null && _a !== void 0 ? _a : '', sx: {
                             width: '24px',
                             height: '24px',
                             marginRight: 2,
-                        } })), item.name] }), index));
-        }) }))), [list]);
+                        } })), item.name] }, index));
+        }) })), [list]);
     if (!list) {
         return null;
     }
-    return (_jsxs(Box, Object.assign({ display: "flex", flexDirection: "column", justifyContent: "center" }, { children: [_jsx(Collapse, Object.assign({ in: showMore, collapsedSize: collapseItems * 33 }, { children: listItems })), list.length > collapseItems && (_jsxs(Button, Object.assign({ onClick: () => setShowMore(!showMore) }, { children: [showMore ? 'Less' : 'More', showMore ? _jsx(ArrowDropUpIcon, {}) : _jsx(ArrowDropDownIcon, {})] })))] })));
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", justifyContent: "center", children: [_jsx(Collapse, { in: showMore, collapsedSize: collapseItems * 33, children: listItems }), list.length > collapseItems && (_jsxs(Button, { onClick: () => setShowMore(!showMore), children: [showMore ? 'Less' : 'More', showMore ? _jsx(ArrowDropUpIcon, {}) : _jsx(ArrowDropDownIcon, {})] }))] }));
 };

package/dist/components/CollectionSummary/index.js

@@ -19,5 +19,5 @@ export const CollectionSummary = ({ expanded, items, itemsType, maxVisibleItemCo
     if (!items.length) {
         return null;
     }
-    return (_jsx(Box, { children: items.length === 1 ? (_jsx(Typography, Object.assign({ color: "text.secondary" }, { children: stringifyItems }))) : (_jsxs(Stack, Object.assign({ alignItems: "start" }, { children: [_jsx(Button, Object.assign({ onClick: () => setIsExpanded(!isExpanded), variant: "text", sx: { color: color.text.subtle.value, minWidth: 'unset' }, endIcon: isExpanded ? (_jsx(FontAwesomeIcon, { icon: faCaretUp })) : (_jsx(FontAwesomeIcon, { icon: faCaretDown })), size: "small" }, { children: `${items.length} ${itemsType}` })), _jsx(Fade, Object.assign({ in: isExpanded, appear: !isExpanded, unmountOnExit: true }, { children: _jsx(Typography, Object.assign({ variant: "bodySm", color: "text.secondary" }, { children: stringifyItems })) }))] }))) }));
+    return (_jsx(Box, { children: items.length === 1 ? (_jsx(Typography, { color: "text.secondary", children: stringifyItems })) : (_jsxs(Stack, { alignItems: "start", children: [_jsx(Button, { onClick: () => setIsExpanded(!isExpanded), variant: "text", sx: { color: color.text.subtle.value, minWidth: 'unset' }, endIcon: isExpanded ? (_jsx(FontAwesomeIcon, { icon: faCaretUp })) : (_jsx(FontAwesomeIcon, { icon: faCaretDown })), size: "small", children: `${items.length} ${itemsType}` }), _jsx(Fade, { in: isExpanded, appear: !isExpanded, unmountOnExit: true, children: _jsx(Typography, { variant: "bodySm", color: "text.secondary", children: stringifyItems }) })] })) }));
 };

package/dist/components/CookiesBanner/index.js

@@ -60,5 +60,5 @@ export const CookiesBanner = ({ show, cookies, productName, removeCookies, onIni
     if ((removeCookies === null || removeCookies === void 0 ? void 0 : removeCookies.length) && document.cookie) {
         deleteMatchingCookies(removeCookies);
     }
-    return (_jsx(Drawer, Object.assign({ anchor: "bottom", open: show, disableEscapeKeyDown: true }, { children: _jsxs(Box, Object.assign({ display: "flex", flexDirection: "column", p: 4 }, { children: [showCustomizeView ? (_jsx(Box, Object.assign({ display: "flex", flexDirection: "column" }, { children: Object.entries(internalCookies).map(([key, cookie]) => (_jsxs(Box, Object.assign({ display: "flex", alignItems: "center", mb: 3 }, { children: [_jsxs(Box, Object.assign({ display: "flex", flexDirection: "column", width: "90%" }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: cookie.title })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: cookie.description }))] })), _jsx(Box, Object.assign({ display: "flex" }, { children: _jsx(Switch, { checked: cookie.value, onChange: () => handleOnChange(key), disabled: cookie.required }) }))] }), key))) }))) : (_jsx(Box, Object.assign({ display: "flex", justifyContent: "center" }, { children: _jsxs(Typography, Object.assign({ variant: "body1" }, { children: ["We use cookies to enhance your browsing experience and analyze our traffic. By clicking \"Accept All\" you consent to our use of cookies. Read more about our", ' ', _jsx(Link, Object.assign({ href: "https://www.balena.io/privacy-policy", target: "_blank" }, { children: "privacy policy" })), "."] })) }))), _jsxs(Box, Object.assign({ display: "flex", mt: 4, ml: "auto", justifyContent: "space-around", width: "400px" }, { children: [_jsx(Button, Object.assign({ variant: "outlined", onClick: handleReject }, { children: "Reject all" })), _jsx(Button, Object.assign({ variant: "outlined", onClick: () => setShowCustomizeView(!showCustomizeView) }, { children: showCustomizeView ? 'Back' : 'Customize' })), _jsx(Button, Object.assign({ variant: "contained", onClick: handleSaveOrAcceptAll }, { children: showCustomizeView ? 'Save selection' : 'Accept all' }))] }))] })) })));
+    return (_jsx(Drawer, { anchor: "bottom", open: show, disableEscapeKeyDown: true, children: _jsxs(Box, { display: "flex", flexDirection: "column", p: 4, children: [showCustomizeView ? (_jsx(Box, { display: "flex", flexDirection: "column", children: Object.entries(internalCookies).map(([key, cookie]) => (_jsxs(Box, { display: "flex", alignItems: "center", mb: 3, children: [_jsxs(Box, { display: "flex", flexDirection: "column", width: "90%", children: [_jsx(Typography, { variant: "h5", children: cookie.title }), _jsx(Typography, { variant: "body1", children: cookie.description })] }), _jsx(Box, { display: "flex", children: _jsx(Switch, { checked: cookie.value, onChange: () => handleOnChange(key), disabled: cookie.required }) })] }, key))) })) : (_jsx(Box, { display: "flex", justifyContent: "center", children: _jsxs(Typography, { variant: "body1", children: ["We use cookies to enhance your browsing experience and analyze our traffic. By clicking \"Accept All\" you consent to our use of cookies. Read more about our", ' ', _jsx(Link, { href: "https://www.balena.io/privacy-policy", target: "_blank", children: "privacy policy" }), "."] }) })), _jsxs(Box, { display: "flex", mt: 4, ml: "auto", justifyContent: "space-around", width: "400px", children: [_jsx(Button, { variant: "outlined", onClick: handleReject, children: "Reject all" }), _jsx(Button, { variant: "outlined", onClick: () => setShowCustomizeView(!showCustomizeView), children: showCustomizeView ? 'Back' : 'Customize' }), _jsx(Button, { variant: "contained", onClick: handleSaveOrAcceptAll, children: showCustomizeView ? 'Save selection' : 'Accept all' })] })] }) }));
 };

package/dist/components/Copy/index.js

@@ -45,18 +45,18 @@ export const Copy = (_a) => {
     if (!copy) {
         return null;
     }
-    const copyComponent = (_jsx(Tooltip, Object.assign({ title: "Copied!", disableFocusListener: true, disableHoverListener: true, disableTouchListener: true, open: open, PopperProps: {
+    const copyComponent = (_jsx(Tooltip, { title: "Copied!", disableFocusListener: true, disableHoverListener: true, disableTouchListener: true, open: open, PopperProps: {
             disablePortal: true,
-        }, placement: "top" }, { children: _jsx(FontAwesomeIcon, { icon: faCopy, onClick: copyClick, className: "copy", size: "sm", style: Object.assign(Object.assign({ color: color.icon.value, cursor: 'pointer' }, ('variant' in props &&
+        }, placement: "top", children: _jsx(FontAwesomeIcon, { icon: faCopy, onClick: copyClick, className: "copy", size: "sm", style: Object.assign(Object.assign({ color: color.icon.value, cursor: 'pointer' }, ('variant' in props &&
                 props.variant === 'absolute' && {
                 position: 'absolute',
-            })), { padding: theme.spacing(1) }) }) })));
+            })), { padding: theme.spacing(1) }) }) }));
     if (!('children' in props)) {
         return copyComponent;
     }
     const { children, variant = 'adjacent' } = props;
     if (variant === 'adjacent') {
-        return (_jsxs(Box, Object.assign({ sx: {
+        return (_jsxs(Box, { sx: {
                 display: 'flex',
                 alignItems: 'center',
                 '.copy': {
@@ -72,9 +72,9 @@ export const Copy = (_a) => {
                 },
                 width: 'fit-content',
                 maxWidth: '100%',
-            } }, { children: [children, copyComponent] })));
+            }, children: [children, copyComponent] }));
     }
-    return (_jsxs(Box, Object.assign({ sx: {
+    return (_jsxs(Box, { sx: {
             display: 'inline-flex',
             alignItems: 'center',
             justifyContent: 'center',
@@ -94,5 +94,5 @@ export const Copy = (_a) => {
                 '.copy': { visibility: 'visible', opacity: 1 },
                 cursor: 'pointer',
             },
-        }, onClick: copyClick }, { children: [_jsx(Box, Object.assign({ className: "copy-children-container" }, { children: children })), copyComponent] })));
+        }, onClick: copyClick, children: [_jsx(Box, { className: "copy-children-container", children: children }), copyComponent] }));
 };

package/dist/components/DialogWithCloseButton/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DialogProps } from '@mui/material';
 export type DialogWithCloseButtonProps = Omit<DialogProps, 'title'> & {
     title: DialogProps['title'] | JSX.Element;

package/dist/components/DialogWithCloseButton/index.js

@@ -5,13 +5,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faClose } from '@fortawesome/free-solid-svg-icons/faClose';
 export const DialogWithCloseButton = (_a) => {
     var { children, onClose, title } = _a, other = __rest(_a, ["children", "onClose", "title"]);
-    return (_jsxs(Dialog, Object.assign({ onClose: onClose }, other, { children: [title != null && (_jsxs(DialogTitle, Object.assign({ sx: {
+    return (_jsxs(Dialog, Object.assign({ onClose: onClose }, other, { children: [title != null && (_jsxs(DialogTitle, { sx: {
                     display: 'flex',
                     alignItems: 'start',
                 }, onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                } }, { children: [title, onClose ? (_jsx(IconButton, Object.assign({ edge: "end", "aria-label": "close", onClick: (e) => {
+                }, children: [title, onClose ? (_jsx(IconButton, { edge: "end", "aria-label": "close", onClick: (e) => {
                             onClose(e, 'backdropClick');
-                        }, sx: { ml: 'auto' } }, { children: _jsx(FontAwesomeIcon, { icon: faClose }) }))) : null] }))), children] })));
+                        }, sx: { ml: 'auto' }, children: _jsx(FontAwesomeIcon, { icon: faClose }) })) : null] })), children] })));
 };

package/dist/components/DownloadImageDialog/ApplicationInstructions.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DeviceType } from './models';
 export type OsOptions = ReturnType<typeof getUserOs>;
 export declare const getUserOs: () => "Linux" | "MacOS" | "Windows" | "Unknown";

package/dist/components/DownloadImageDialog/ApplicationInstructions.js

@@ -52,7 +52,7 @@ export const ApplicationInstructions = memo(({ deviceType, templateData, }) => {
         }
     }, [currentOs, setCurrentOs, instructions, hasOsSpecificInstructions]);
     if (!deviceType || !instructions) {
-        return (_jsx(Typography, Object.assign({ variant: "body1" }, { children: "Instructions for this device type are not currently available. Please try again later." })));
+        return (_jsx(Typography, { variant: "body1", children: "Instructions for this device type are not currently available. Please try again later." }));
     }
     const interpolatedInstructions = (_a = (hasOsSpecificInstructions
         ? instructions[normalizedOs]
@@ -65,9 +65,9 @@ export const ApplicationInstructions = memo(({ deviceType, templateData, }) => {
         ...interpolatedInstructions,
         'Your device should appear in your application dashboard within a few minutes. Have fun!',
     ];
-    return (_jsxs(Box, Object.assign({ display: "flex", flexDirection: "column", alignItems: "flex-start" }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: "Instructions" })), hasOsSpecificInstructions && (_jsx(Box, Object.assign({ mb: 3 }, { children: _jsx(Box, Object.assign({ sx: { borderBottom: 1, borderColor: 'divider' } }, { children: _jsx(Tabs, Object.assign({ value: Object.keys(instructions).find((key) => key === currentOs), onChange: (_event, value) => setCurrentOs(value !== null && value !== void 0 ? value : 'Unknown'), "aria-label": "os tabs" }, { children: Object.keys(instructions).map((os) => {
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "flex-start", children: [_jsx(Typography, { variant: "h5", children: "Instructions" }), hasOsSpecificInstructions && (_jsx(Box, { mb: 3, children: _jsx(Box, { sx: { borderBottom: 1, borderColor: 'divider' }, children: _jsx(Tabs, { value: Object.keys(instructions).find((key) => key === currentOs), onChange: (_event, value) => setCurrentOs(value !== null && value !== void 0 ? value : 'Unknown'), "aria-label": "os tabs", children: Object.keys(instructions).map((os) => {
                             return _jsx(Tab, { label: os, value: os }, os);
-                        }) })) })) }))), _jsx(InstructionsList, { instructions: finalInstructions }), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(Typography, { children: ["For more details please refer to our", ' ', _jsx(MUILinkWithTracking, Object.assign({ href: `https://www.balena.io/docs/learn/getting-started/${deviceType.slug}/nodejs/` }, { children: "Getting Started Guide" })), "."] }) }))] })));
+                        }) }) }) })), _jsx(InstructionsList, { instructions: finalInstructions }), _jsx(Box, { mt: 2, children: _jsxs(Typography, { children: ["For more details please refer to our", ' ', _jsx(MUILinkWithTracking, { href: `https://www.balena.io/docs/learn/getting-started/${deviceType.slug}/nodejs/`, children: "Getting Started Guide" }), "."] }) })] }));
 });
 const InstructionsItem = ({ node, index }) => {
     const hasChildren = has(node, 'children');
@@ -78,7 +78,7 @@ const InstructionsItem = ({ node, index }) => {
     if (node === null || node === void 0 ? void 0 : node.text) {
         text = node.text;
     }
-    return (_jsxs(OrderedListItem, Object.assign({ index: index + 1, sx: { maxWidth: '100%' } }, { children: [_jsx(Markdown, { children: text, components: {
+    return (_jsxs(OrderedListItem, { index: index + 1, sx: { maxWidth: '100%' }, children: [_jsx(Markdown, { children: text, components: {
                     code: (codeProps) => {
                         return (_jsx("code", Object.assign({ style: {
                                 maxWidth: '100%',
@@ -91,10 +91,10 @@ const InstructionsItem = ({ node, index }) => {
                     br: () => {
                         return _jsx("p", {});
                     },
-                    p: ({ children }) => (_jsx("p", Object.assign({ style: { marginTop: 0, marginBottom: 0 } }, { children: children }))),
+                    p: ({ children }) => (_jsx("p", { style: { marginTop: 0, marginBottom: 0 }, children: children })),
                 } }), hasChildren && (_jsx(List, { children: node.children.map((item, i) => {
                     return _jsx(InstructionsItem, { node: item, index: i }, i);
-                }) }))] })));
+                }) }))] }));
 };
 const InstructionsList = ({ instructions }) => {
     return (_jsx(List, { children: instructions.map((item, i) => {

package/dist/components/DownloadImageDialog/ImageForm.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DownloadImageFormModel } from '.';
 import { DeviceType, OsVersionsByDeviceType } from './models';
 interface ImageFormProps {

package/dist/components/DownloadImageDialog/ImageForm.js

@@ -93,20 +93,20 @@ export const ImageForm = memo(({ compatibleDeviceTypes, osVersions, isInitialDef
             setVariant(variant === 'dev' ? 'prod' : 'dev');
         }
     }, [version, variant, onChange, versionSelectionOpts]);
-    return (_jsxs(Box, Object.assign({ action: downloadUrl, method: "post", component: "form", noValidate: true, autoComplete: "off", p: 2, ref: formElement }, { children: [_jsx("input", { type: "hidden", name: "_token", value: authToken }), _jsx("input", { type: "hidden", name: "appId", value: applicationId }), _jsx("input", { type: "hidden", name: "fileType", value: ".zip" }), _jsxs(Box, Object.assign({ py: 3, display: "flex", flexWrap: "wrap", gap: 2 }, { children: [compatibleDeviceTypes && compatibleDeviceTypes.length > 1 && (_jsxs(Box, Object.assign({ display: "flex", flexDirection: "column", flex: "1", maxWidth: "100%" }, { children: [_jsxs(InputLabel, Object.assign({ htmlFor: "device-type-select", sx: { display: 'flex', alignItems: 'center', mb: 2 } }, { children: ["Select device type", ' ', _jsx(Tooltip, Object.assign({ title: "Applications can support any devices that share the same architecture as their default device type." }, { children: _jsx(HelpIcon, { color: "info", sx: { fontSize: '1rem', marginLeft: 1 } }) }))] })), _jsx(Select, Object.assign({ fullWidth: true, id: "device-type-select", value: model.deviceType.slug, inputProps: {
+    return (_jsxs(Box, { action: downloadUrl, method: "post", component: "form", noValidate: true, autoComplete: "off", p: 2, ref: formElement, children: [_jsx("input", { type: "hidden", name: "_token", value: authToken }), _jsx("input", { type: "hidden", name: "appId", value: applicationId }), _jsx("input", { type: "hidden", name: "fileType", value: ".zip" }), _jsxs(Box, { py: 3, display: "flex", flexWrap: "wrap", gap: 2, children: [compatibleDeviceTypes && compatibleDeviceTypes.length > 1 && (_jsxs(Box, { display: "flex", flexDirection: "column", flex: "1", maxWidth: "100%", children: [_jsxs(InputLabel, { htmlFor: "device-type-select", sx: { display: 'flex', alignItems: 'center', mb: 2 }, children: ["Select device type", ' ', _jsx(Tooltip, { title: "Applications can support any devices that share the same architecture as their default device type.", children: _jsx(HelpIcon, { color: "info", sx: { fontSize: '1rem', marginLeft: 1 } }) })] }), _jsx(Select, { fullWidth: true, id: "device-type-select", value: model.deviceType.slug, inputProps: {
                                     name: 'deviceType',
                                 }, renderValue: (dt) => (_jsx(DeviceTypeItem, { deviceType: compatibleDeviceTypes.find((c) => c.slug === dt) })), onChange: (event) => {
                                     return handleSelectedDeviceTypeChange(compatibleDeviceTypes.find((c) => c.slug === (event === null || event === void 0 ? void 0 : event.target.value)));
-                                } }, { children: compatibleDeviceTypes === null || compatibleDeviceTypes === void 0 ? void 0 : compatibleDeviceTypes.map((dt) => {
+                                }, children: compatibleDeviceTypes === null || compatibleDeviceTypes === void 0 ? void 0 : compatibleDeviceTypes.map((dt) => {
                                     var _a;
-                                    return (_jsxs(MenuItem, Object.assign({ value: dt.slug, sx: { maxWidth: '100%' } }, { children: [_jsx(Avatar, { variant: "square", src: (_a = dt.logo) !== null && _a !== void 0 ? _a : FALLBACK_LOGO_UNKNOWN_DEVICE, sx: { mr: 3, width: '20px', height: '20px' } }), _jsx(Typography, Object.assign({ noWrap: true }, { children: dt.name }))] }), dt.slug));
-                                }) }))] }))), (!isInitialDefault || osType) &&
+                                    return (_jsxs(MenuItem, { value: dt.slug, sx: { maxWidth: '100%' }, children: [_jsx(Avatar, { variant: "square", src: (_a = dt.logo) !== null && _a !== void 0 ? _a : FALLBACK_LOGO_UNKNOWN_DEVICE, sx: { mr: 3, width: '20px', height: '20px' } }), _jsx(Typography, { noWrap: true, children: dt.name })] }, dt.slug));
+                                }) })] })), (!isInitialDefault || osType) &&
                         hasEsrVersions &&
                         model.deviceType && (_jsx(OsTypeSelector, { supportedOsTypes: osTypes, hasEsrVersions: hasEsrVersions !== null && hasEsrVersions !== void 0 ? hasEsrVersions : false, selectedOsTypeSlug: osType, onSelectedOsTypeChange: (ot) => {
                             onSelectedOsTypeChange(ot);
                             setVersion(undefined);
                             onChange('version', undefined);
-                        } }))] })), !isInitialDefault && model.version && (_jsxs(Box, Object.assign({ display: "flex", flexWrap: "wrap", maxWidth: "100%" }, { children: [_jsxs(Box, Object.assign({ display: "flex", flexDirection: "column", maxWidth: "100%", flex: 1 }, { children: [_jsx(InputLabel, Object.assign({ sx: { mb: 2 }, htmlFor: "e2e-download-image-versions-list" }, { children: "Select version" })), _jsx(Select, Object.assign({ fullWidth: true, id: "e2e-download-image-versions-list", value: model.version, inputProps: {
+                        } }))] }), !isInitialDefault && model.version && (_jsxs(Box, { display: "flex", flexWrap: "wrap", maxWidth: "100%", children: [_jsxs(Box, { display: "flex", flexDirection: "column", maxWidth: "100%", flex: 1, children: [_jsx(InputLabel, { sx: { mb: 2 }, htmlFor: "e2e-download-image-versions-list", children: "Select version" }), _jsx(Select, { fullWidth: true, id: "e2e-download-image-versions-list", value: model.version, inputProps: {
                                     name: 'version',
                                 }, onChange: (event) => {
                                     const version = versionSelectionOpts.find((v) => v.value === event.target.value);
@@ -114,46 +114,46 @@ export const ImageForm = memo(({ compatibleDeviceTypes, osVersions, isInitialDef
                                     onChange('version', version === null || version === void 0 ? void 0 : version.value);
                                 }, placeholder: "Choose a version...", renderValue: () => {
                                     return _jsx(VersionSelectItem, { option: version });
-                                } }, { children: versionSelectionOpts === null || versionSelectionOpts === void 0 ? void 0 : versionSelectionOpts.map((option, index) => {
-                                    return (_jsx(MenuItem, Object.assign({ value: option.value }, { children: _jsx(VersionSelectItem, { option: option }) }), index));
-                                }) }))] })), showAllVersionsToggle && (_jsxs(Box, Object.assign({ mx: 2, display: "flex", alignItems: "center", alignSelf: "flex-end", 
+                                }, children: versionSelectionOpts === null || versionSelectionOpts === void 0 ? void 0 : versionSelectionOpts.map((option, index) => {
+                                    return (_jsx(MenuItem, { value: option.value, children: _jsx(VersionSelectItem, { option: option }) }, index));
+                                }) })] }), showAllVersionsToggle && (_jsxs(Box, { mx: 2, display: "flex", alignItems: "center", alignSelf: "flex-end", 
                         // TODO: find a better way to center the checkbox with the input only (without label)
-                        height: 54 }, { children: [_jsx(Checkbox, { id: "e2e-show-all-versions-check", checked: showAllVersions, onChange: handleShowAllVersions }), _jsx(Typography, { children: "Show outdated versions" })] })))] }))), (!isInitialDefault || !variant) && (_jsx(Box, Object.assign({ sx: { mt: 3 } }, { children: _jsx(VariantSelector, { version: version, variant: variant, onVariantChange: (variant) => {
+                        height: 54, children: [_jsx(Checkbox, { id: "e2e-show-all-versions-check", checked: showAllVersions, onChange: handleShowAllVersions }), _jsx(Typography, { children: "Show outdated versions" })] }))] })), (!isInitialDefault || !variant) && (_jsx(Box, { sx: { mt: 3 }, children: _jsx(VariantSelector, { version: version, variant: variant, onVariantChange: (variant) => {
                         setVariant(variant ? 'dev' : 'prod');
-                    } }) }))), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(Box, Object.assign({ display: "flex", flexDirection: "column" }, { children: [_jsxs(FormControl, { children: [_jsx(FormLabel, Object.assign({ id: "network-radio-buttons-group-label" }, { children: "Network" })), _jsxs(RadioGroup, Object.assign({ "aria-labelledby": "network-radio-buttons-group-label", value: model.network, name: "network", onChange: (event) => onChange('network', event.target.value) }, { children: [_jsx(FormControlLabel, { value: "ethernet", control: _jsx(Radio, {}), label: "Ethernet only" }), _jsx(FormControlLabel, { value: "wifi", control: _jsx(Radio, {}), label: "Wifi + Ethernet" })] }))] }), model.network === 'wifi' && (_jsxs(_Fragment, { children: [_jsx(InputLabel, Object.assign({ htmlFor: "device-wifi-ssid", sx: { mb: 2 } }, { children: "WiFi SSID" })), _jsx(TextField, { value: model.wifiSsid, id: "device-wifi-ssid", inputProps: {
+                    } }) })), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsxs(FormControl, { children: [_jsx(FormLabel, { id: "network-radio-buttons-group-label", children: "Network" }), _jsxs(RadioGroup, { "aria-labelledby": "network-radio-buttons-group-label", value: model.network, name: "network", onChange: (event) => onChange('network', event.target.value), children: [_jsx(FormControlLabel, { value: "ethernet", control: _jsx(Radio, {}), label: "Ethernet only" }), _jsx(FormControlLabel, { value: "wifi", control: _jsx(Radio, {}), label: "Wifi + Ethernet" })] })] }), model.network === 'wifi' && (_jsxs(_Fragment, { children: [_jsx(InputLabel, { htmlFor: "device-wifi-ssid", sx: { mb: 2 }, children: "WiFi SSID" }), _jsx(TextField, { value: model.wifiSsid, id: "device-wifi-ssid", inputProps: {
                                     name: 'wifiSsid',
                                     autocomplete: 'wifiSsid-auto-complete',
-                                }, onChange: (event) => onChange('wifiSsid', event.target.value) }), _jsx(InputLabel, Object.assign({ htmlFor: "device-wifi-password", sx: { my: 2 } }, { children: "Wifi Passphrase" })), _jsx(TextField, { type: showPassword ? 'text' : 'password', id: "device-wifi-password", value: model.wifiKey, inputProps: {
+                                }, onChange: (event) => onChange('wifiSsid', event.target.value) }), _jsx(InputLabel, { htmlFor: "device-wifi-password", sx: { my: 2 }, children: "Wifi Passphrase" }), _jsx(TextField, { type: showPassword ? 'text' : 'password', id: "device-wifi-password", value: model.wifiKey, inputProps: {
                                     name: 'wifiKey',
                                 }, 
                                 // InputProps and inputProps are different https://mui.com/material-ui/api/text-field/#TextField-prop-InputProps
                                 InputProps: {
-                                    endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ onClick: () => setShowPassword((show) => !show), onMouseDown: (event) => {
+                                    endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => setShowPassword((show) => !show), onMouseDown: (event) => {
                                                 event.preventDefault();
-                                            }, edge: "end" }, { children: showPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) })) }))),
-                                }, onChange: (event) => onChange('wifiKey', event.target.value) })] }))] })), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(Button, Object.assign({ onClick: () => setShowAdvancedSettings(!showAdvancedSettings), variant: "outlined", sx: { mb: 2 } }, { children: [showAdvancedSettings ? _jsx(RemoveIcon, {}) : _jsx(AddIcon, {}), " Advanced settings"] })), _jsx(Collapse, Object.assign({ in: showAdvancedSettings, collapsedSize: 0 }, { children: _jsxs(Box, Object.assign({ display: "flex", flexDirection: "column" }, { children: [_jsxs(FormControl, { children: [_jsxs(FormLabel, Object.assign({ htmlFor: "poll-interval-label", sx: { display: 'flex' } }, { children: ["Check for updates every X minutes", ' ', _jsx(MUILinkWithTracking, Object.assign({ href: POLL_INTERVAL_DOCS, sx: {
+                                            }, edge: "end", children: showPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) }) })),
+                                }, onChange: (event) => onChange('wifiKey', event.target.value) })] }))] }), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(Button, { onClick: () => setShowAdvancedSettings(!showAdvancedSettings), variant: "outlined", sx: { mb: 2 }, children: [showAdvancedSettings ? _jsx(RemoveIcon, {}) : _jsx(AddIcon, {}), " Advanced settings"] }), _jsx(Collapse, { in: showAdvancedSettings, collapsedSize: 0, children: _jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsxs(FormControl, { children: [_jsxs(FormLabel, { htmlFor: "poll-interval-label", sx: { display: 'flex' }, children: ["Check for updates every X minutes", ' ', _jsx(MUILinkWithTracking, { href: POLL_INTERVAL_DOCS, sx: {
                                                 display: 'flex',
                                                 alignItems: 'center',
                                                 height: '1.5rem',
-                                            } }, { children: _jsx(ArticleIcon, { sx: { ml: 1, fontSize: '1.15rem' } }) }))] })), _jsx(TextField, { id: "poll-interval-label", "aria-labelledby": "poll-interval-label", value: model.appUpdatePollInterval, inputProps: {
+                                            }, children: _jsx(ArticleIcon, { sx: { ml: 1, fontSize: '1.15rem' } }) })] }), _jsx(TextField, { id: "poll-interval-label", "aria-labelledby": "poll-interval-label", value: model.appUpdatePollInterval, inputProps: {
                                         name: 'appUpdatePollInterval',
                                         autocomplete: 'appUpdatePollInterval-auto-complete',
-                                    }, onChange: (event) => onChange('appUpdatePollInterval', event.target.value) })] }), _jsx(InputLabel, Object.assign({ htmlFor: "provision-key-name", sx: { my: 2 } }, { children: "Provisioning Key name" })), _jsx(TextField, { name: "provisioningKeyName", id: "provision-key-name", value: (_a = model.provisioningKeyName) !== null && _a !== void 0 ? _a : '', inputProps: {
+                                    }, onChange: (event) => onChange('appUpdatePollInterval', event.target.value) })] }), _jsx(InputLabel, { htmlFor: "provision-key-name", sx: { my: 2 }, children: "Provisioning Key name" }), _jsx(TextField, { name: "provisioningKeyName", id: "provision-key-name", value: (_a = model.provisioningKeyName) !== null && _a !== void 0 ? _a : '', inputProps: {
                                 name: 'provisioningKeyName',
                                 autocomplete: 'provisioningKeyName-auto-complete',
-                            }, onChange: (event) => onChange('provisioningKeyName', event.target.value) }), _jsx(InputLabel, Object.assign({ htmlFor: "provision-key-expiring", sx: { my: 2 } }, { children: "Provisioning Key expiring on" })), _jsx(TextField, { type: "date", id: "provision-key-expiring", value: (_b = model.provisioningKeyExpiryDate) !== null && _b !== void 0 ? _b : '', inputProps: {
+                            }, onChange: (event) => onChange('provisioningKeyName', event.target.value) }), _jsx(InputLabel, { htmlFor: "provision-key-expiring", sx: { my: 2 }, children: "Provisioning Key expiring on" }), _jsx(TextField, { type: "date", id: "provision-key-expiring", value: (_b = model.provisioningKeyExpiryDate) !== null && _b !== void 0 ? _b : '', inputProps: {
                                 name: 'provisioningKeyExpiryDate',
                                 autocomplete: 'provisioningKeyExpiryDate-auto-complete',
-                            }, onChange: (event) => onChange('provisioningKeyExpiryDate', event.target.value) })] })) }))] })));
+                            }, onChange: (event) => onChange('provisioningKeyExpiryDate', event.target.value) })] }) })] }));
 });
 const DeviceTypeItem = ({ deviceType, }) => {
     var _a;
-    return (_jsxs(Box, Object.assign({ display: "flex" }, { children: [_jsx(Avatar, { variant: "square", src: (_a = deviceType.logo) !== null && _a !== void 0 ? _a : FALLBACK_LOGO_UNKNOWN_DEVICE, sx: { mr: 3, width: '20px', height: '20px' } }), _jsx(Typography, Object.assign({ noWrap: true }, { children: deviceType.name }))] })));
+    return (_jsxs(Box, { display: "flex", children: [_jsx(Avatar, { variant: "square", src: (_a = deviceType.logo) !== null && _a !== void 0 ? _a : FALLBACK_LOGO_UNKNOWN_DEVICE, sx: { mr: 3, width: '20px', height: '20px' } }), _jsx(Typography, { noWrap: true, children: deviceType.name })] }));
 };
 export const VersionSelectItem = ({ option }) => {
     var _a;
-    return (_jsx(Tooltip, Object.assign({ title: (_a = option.knownIssueList) !== null && _a !== void 0 ? _a : undefined }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", maxWidth: "100%" }, { children: [_jsx(Box, { children: option.title }), !!option.line && (_jsx(Chip, { label: option.line, color: lineMap[option.line] })), !!option.isRecommended && (_jsx(Chip, { label: "recommended", sx: {
+    return (_jsx(Tooltip, { title: (_a = option.knownIssueList) !== null && _a !== void 0 ? _a : undefined, children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", maxWidth: "100%", children: [_jsx(Box, { children: option.title }), !!option.line && (_jsx(Chip, { label: option.line, color: lineMap[option.line] })), !!option.isRecommended && (_jsx(Chip, { label: "recommended", sx: {
                         height: 20,
                         backgroundColor: '#CAFECD',
-                    } })), !!option.knownIssueList && (_jsxs(Box, Object.assign({ alignItems: "center", flex: 1, display: "contents" }, { children: [_jsx(WarningAmberIcon, { color: "warning" }), _jsx(Typography, Object.assign({ noWrap: true }, { children: option.knownIssueList }))] })))] })) })));
+                    } })), !!option.knownIssueList && (_jsxs(Box, { alignItems: "center", flex: 1, display: "contents", children: [_jsx(WarningAmberIcon, { color: "warning" }), _jsx(Typography, { noWrap: true, children: option.knownIssueList })] }))] }) }));
 };

package/dist/components/DownloadImageDialog/OsTypeSelector.js

@@ -7,11 +7,11 @@ import { OsTypesEnum } from './models';
 import { Chip } from '../Chip';
 const OsTypeOption = ({ osType }) => {
     if (!osType) {
-        return _jsx(Typography, Object.assign({ variant: "body1" }, { children: "Select OS type..." }));
+        return _jsx(Typography, { variant: "body1", children: "Select OS type..." });
     }
-    return (_jsx(Tooltip, Object.assign({ title: !osType.supportedForDeviceType
+    return (_jsx(Tooltip, { title: !osType.supportedForDeviceType
             ? 'No ESR versions are available for this device type yet. Check the documentation for device types that already have ESR versions.'
-            : undefined }, { children: _jsxs(Box, Object.assign({ display: "flex", width: "100%", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: getOsTypeName(osType.slug) })), _jsxs(Box, { children: [!osType.supportedForDeviceType && (_jsx(Chip, { label: "no versions yet", color: "blue" })), !osType.supportedForApp && (_jsx(Chip, { label: "production and enterprise plan only", color: "orange" }))] })] })) })));
+            : undefined, children: _jsxs(Box, { display: "flex", width: "100%", justifyContent: "space-between", alignItems: "center", children: [_jsx(Typography, { variant: "body1", children: getOsTypeName(osType.slug) }), _jsxs(Box, { children: [!osType.supportedForDeviceType && (_jsx(Chip, { label: "no versions yet", color: "blue" })), !osType.supportedForApp && (_jsx(Chip, { label: "production and enterprise plan only", color: "orange" }))] })] }) }));
 };
 export const OsTypeSelector = ({ supportedOsTypes, hasEsrVersions, selectedOsTypeSlug, onSelectedOsTypeChange, }) => {
     var _a;
@@ -30,8 +30,8 @@ export const OsTypeSelector = ({ supportedOsTypes, hasEsrVersions, selectedOsTyp
         };
     });
     const selectedOsType = selectOsTypes.find((osType) => osType.slug === selectedOsTypeSlug && osType.supportedForDeviceType);
-    return (_jsxs(Box, Object.assign({ display: "flex", flexDirection: "column", flex: 1 }, { children: [_jsxs(InputLabel, Object.assign({ htmlFor: "newAppApplicationType", sx: { display: 'flex', alignItems: 'center', mb: 2 } }, { children: ["Select OS type", ' ', _jsx(MUILinkWithTracking, Object.assign({ sx: { height: 14 }, href: "https://www.balena.io/docs/reference/OS/extended-support-release" }, { children: _jsx(ArticleIcon, { sx: { width: 14, height: 14, marginLeft: 1 } }) }))] })), _jsx(Select, Object.assign({ id: "newAppApplicationType", fullWidth: true, disabled: supportedOsTypes.length === 0, value: (_a = selectedOsType === null || selectedOsType === void 0 ? void 0 : selectedOsType.slug) !== null && _a !== void 0 ? _a : OsTypesEnum.DEFAULT, renderValue: (selected) => (_jsx(Box, Object.assign({ display: "flex", width: "100%" }, { children: _jsx(OsTypeOption, { osType: selectOsTypes.find((osType) => selected === osType.slug) }) }))), onChange: (event) => {
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", flex: 1, children: [_jsxs(InputLabel, { htmlFor: "newAppApplicationType", sx: { display: 'flex', alignItems: 'center', mb: 2 }, children: ["Select OS type", ' ', _jsx(MUILinkWithTracking, { sx: { height: 14 }, href: "https://www.balena.io/docs/reference/OS/extended-support-release", children: _jsx(ArticleIcon, { sx: { width: 14, height: 14, marginLeft: 1 } }) })] }), _jsx(Select, { id: "newAppApplicationType", fullWidth: true, disabled: supportedOsTypes.length === 0, value: (_a = selectedOsType === null || selectedOsType === void 0 ? void 0 : selectedOsType.slug) !== null && _a !== void 0 ? _a : OsTypesEnum.DEFAULT, renderValue: (selected) => (_jsx(Box, { display: "flex", width: "100%", children: _jsx(OsTypeOption, { osType: selectOsTypes.find((osType) => selected === osType.slug) }) })), onChange: (event) => {
                     const osType = selectOsTypes.find((os) => os.slug === event.target.value);
                     return !osType.disabled && onSelectedOsTypeChange(osType.slug);
-                } }, { children: selectOsTypes.map((option) => (_jsx(MenuItem, Object.assign({ value: option.slug }, { children: _jsx(OsTypeOption, { osType: option }) }), option.slug))) }))] })));
+                }, children: selectOsTypes.map((option) => (_jsx(MenuItem, { value: option.slug, children: _jsx(OsTypeOption, { osType: option }) }, option.slug))) })] }));
 };

package/dist/components/DownloadImageDialog/VariantSelector.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { VersionSelectionOptions } from './version';
 declare const BuildVariants: readonly ["dev", "prod"];
 export type BuildVariant = (typeof BuildVariants)[number];

package/dist/components/DownloadImageDialog/VariantSelector.js

@@ -5,8 +5,8 @@ import { getOsVariantDisplayText } from './utils';
 import { Lightbulb } from '@mui/icons-material';
 const variantInfo = {
     dev: {
-        title: (_jsxs(Box, Object.assign({ display: "flex", gap: 1, flexDirection: "row", alignItems: "center" }, { children: [_jsx(Typography, { children: getOsVariantDisplayText('dev') }), _jsxs(Typography, Object.assign({ variant: "bodySm", color: "customBlue.main", alignItems: "center", display: "flex" }, { children: [_jsx(Lightbulb, { sx: { width: 14, height: 14 } }), "Recommended for first time users"] }))] }))),
-        description: (_jsxs(_Fragment, { children: ["Development images should be used when you are developing an application and want to use the fast", ' ', _jsx(MUILinkWithTracking, Object.assign({ href: "https://balena.io/docs/development/local-mode/" }, { children: "local mode" })), ' ', "workflow", ' ', _jsx("strong", { children: "This variant should never be used in production." })] })),
+        title: (_jsxs(Box, { display: "flex", gap: 1, flexDirection: "row", alignItems: "center", children: [_jsx(Typography, { children: getOsVariantDisplayText('dev') }), _jsxs(Typography, { variant: "bodySm", color: "customBlue.main", alignItems: "center", display: "flex", children: [_jsx(Lightbulb, { sx: { width: 14, height: 14 } }), "Recommended for first time users"] })] })),
+        description: (_jsxs(_Fragment, { children: ["Development images should be used when you are developing an application and want to use the fast", ' ', _jsx(MUILinkWithTracking, { href: "https://balena.io/docs/development/local-mode/", children: "local mode" }), ' ', "workflow", ' ', _jsx("strong", { children: "This variant should never be used in production." })] })),
     },
     prod: {
         title: _jsx(Typography, { children: getOsVariantDisplayText('prod') }),
@@ -15,14 +15,14 @@ const variantInfo = {
 };
 const BuildVariants = ['dev', 'prod'];
 export const VariantSelector = ({ version, variant, onVariantChange, }) => {
-    return (_jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Select edition" }), _jsx(RadioGroup, Object.assign({ "aria-labelledby": "variant-radio-buttons-group", name: "developmentMode", value: variant === 'dev', onChange: (event) => {
+    return (_jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Select edition" }), _jsx(RadioGroup, { "aria-labelledby": "variant-radio-buttons-group", name: "developmentMode", value: variant === 'dev', onChange: (event) => {
                     onVariantChange(event.target.value === 'true');
-                } }, { children: BuildVariants.map((buildVariant, index) => {
+                }, children: BuildVariants.map((buildVariant, index) => {
                     const isDev = buildVariant === 'dev';
                     const isDisabled = version == null ||
                         (version.hasPrebuiltVariants && !version.rawVersions[buildVariant]);
-                    return (_jsx(Tooltip, Object.assign({ title: isDisabled
+                    return (_jsx(Tooltip, { title: isDisabled
                             ? 'This edition is not available for the selected version'
-                            : undefined }, { children: _jsxs(Box, Object.assign({ display: "flex", flexDirection: "column" }, { children: [_jsx(FormControlLabel, { sx: { opacity: isDisabled ? 0.4 : 1 }, disabled: isDisabled, value: isDev, control: _jsx(Radio, {}), label: variantInfo[buildVariant].title }), _jsx(Typography, Object.assign({ sx: { opacity: isDisabled ? 0.4 : 1 }, variant: "bodySm" }, { children: variantInfo[buildVariant].description }))] })) }), index));
-                }) }), "varian")] }));
+                            : undefined, children: _jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsx(FormControlLabel, { sx: { opacity: isDisabled ? 0.4 : 1 }, disabled: isDisabled, value: isDev, control: _jsx(Radio, {}), label: variantInfo[buildVariant].title }), _jsx(Typography, { sx: { opacity: isDisabled ? 0.4 : 1 }, variant: "bodySm", children: variantInfo[buildVariant].description })] }) }, index));
+                }) }, "varian")] }));
 };

package/dist/components/DownloadImageDialog/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DropDownButtonProps } from '../DropDownButton';
 import { DeviceType, Dictionary, OsVersionsByDeviceType } from './models';
 export declare enum ActionType {

package/dist/components/DownloadImageDialog/index.js

@@ -236,7 +236,7 @@ export const DownloadImageDialog = ({ open, applicationId, releaseId, compatible
     const handleChange = useCallback((key, value) => {
         setFromModel((oldState) => (Object.assign(Object.assign({}, oldState), { [key]: value })));
     }, [setFromModel]);
-    return (_jsxs(DialogWithCloseButton, Object.assign({ title: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [_jsx(Avatar, { variant: "square", alt: defaultDisplayName, src: logoSrc, sx: { mr: 2 } }), _jsx(Typography, Object.assign({ variant: "h5" }, { children: "Add new device" }))] })), open: open, onClose: onClose, maxWidth: "lg", fullWidth: true, sx: { p: 4 } }, { children: [_jsx(DialogContent, Object.assign({ sx: { m: 0 } }, { children: _jsxs(Grid, Object.assign({ container: true, pb: 5, spacing: [0, 0, 4] }, { children: [_jsx(Grid, Object.assign({ xs: 12, sm: 12, md: 6, lg: 7 }, { children: isFetching ? (_jsx(Spinner, {})) : (_jsxs(_Fragment, { children: [isEmpty(osVersions) && (_jsx(Alert, Object.assign({ color: "warning" }, { children: "No OS versions available for download" }))), !!osType && !!compatibleDeviceTypes && (_jsx(ImageForm, { applicationId: applicationId, releaseId: releaseId, compatibleDeviceTypes: compatibleDeviceTypes, osVersions: osVersions, isInitialDefault: isInitialDefault, hasEsrVersions: deviceTypeHasEsr[formModel.deviceType.slug], formElement: formElement, downloadUrl: downloadUrl, authToken: authToken, osType: osType, osTypes: osTypes, model: formModel, onSelectedOsTypeChange: setOsTypeCallback, onSelectedDeviceTypeChange: (deviceType) => setFromModel(getInitialState(deviceType, applicationId, releaseId)), onChange: handleChange }))] })) })), _jsxs(Grid, Object.assign({ xs: 12, sm: 12, md: 6, lg: 5, pb: 0 }, { children: [_jsx(Divider, { variant: "fullWidth", sx: {
+    return (_jsxs(DialogWithCloseButton, { title: _jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Avatar, { variant: "square", alt: defaultDisplayName, src: logoSrc, sx: { mr: 2 } }), _jsx(Typography, { variant: "h5", children: "Add new device" })] }), open: open, onClose: onClose, maxWidth: "lg", fullWidth: true, sx: { p: 4 }, children: [_jsx(DialogContent, { sx: { m: 0 }, children: _jsxs(Grid, { container: true, pb: 5, spacing: [0, 0, 4], children: [_jsx(Grid, { xs: 12, sm: 12, md: 6, lg: 7, children: isFetching ? (_jsx(Spinner, {})) : (_jsxs(_Fragment, { children: [isEmpty(osVersions) && (_jsx(Alert, { color: "warning", children: "No OS versions available for download" })), !!osType && !!compatibleDeviceTypes && (_jsx(ImageForm, { applicationId: applicationId, releaseId: releaseId, compatibleDeviceTypes: compatibleDeviceTypes, osVersions: osVersions, isInitialDefault: isInitialDefault, hasEsrVersions: deviceTypeHasEsr[formModel.deviceType.slug], formElement: formElement, downloadUrl: downloadUrl, authToken: authToken, osType: osType, osTypes: osTypes, model: formModel, onSelectedOsTypeChange: setOsTypeCallback, onSelectedDeviceTypeChange: (deviceType) => setFromModel(getInitialState(deviceType, applicationId, releaseId)), onChange: handleChange }))] })) }), _jsxs(Grid, { xs: 12, sm: 12, md: 6, lg: 5, pb: 0, children: [_jsx(Divider, { variant: "fullWidth", sx: {
                                         mt: 2,
                                         mb: 3,
                                         display: {
@@ -248,19 +248,19 @@ export const DownloadImageDialog = ({ open, applicationId, releaseId, compatible
                                         dockerImage: formModel.version
                                             ? getDockerArtifact(formModel.deviceType.slug, stripVersionBuild(formModel.version))
                                             : '',
-                                    } })] })), ((_f = formModel.deviceType.imageDownloadAlerts) !== null && _f !== void 0 ? _f : []).map((alert) => {
-                            return (_jsx(Grid, Object.assign({ xs: 12, pt: 0 }, { children: _jsx(Alert, Object.assign({ severity: alert.type }, { children: alert.message }), alert.message) })));
-                        })] })) })), _jsx(DialogActions, Object.assign({ sx: {
+                                    } })] }), ((_f = formModel.deviceType.imageDownloadAlerts) !== null && _f !== void 0 ? _f : []).map((alert) => {
+                            return (_jsx(Grid, { xs: 12, pt: 0, children: _jsx(Alert, { severity: alert.type, children: alert.message }, alert.message) }));
+                        })] }) }), _jsx(DialogActions, { sx: {
                     display: 'flex',
                     position: 'absolute',
                     bottom: 0,
                     right: 0,
                     justifyContent: 'end',
-                } }, { children: _jsx(DropDownButton, { className: "e2e-download-image-submit", items: actions }) }))] })));
+                }, children: _jsx(DropDownButton, { className: "e2e-download-image-submit", items: actions }) })] }));
 };
 // TODO: remove as soon as we have a generic Spinner component
 const Spinner = () => {
-    return (_jsx(Box, Object.assign({ style: {
+    return (_jsx(Box, { style: {
             position: 'absolute',
             top: 0,
             right: 0,
@@ -271,5 +271,5 @@ const Spinner = () => {
             alignItems: 'center',
             backgroundColor: 'rgb(0, 0, 0, 0.4)',
             color: 'white',
-        } }, { children: "Loading..." })));
+        }, children: "Loading..." }));
 };

package/dist/components/DropDownButton/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonGroupProps, MenuItemProps, ButtonProps, TooltipProps } from '@mui/material';
 type MenuItemType<T> = MenuItemWithTrackingProps & T & {
     tooltip?: Omit<TooltipProps, 'children'> | TooltipProps['title'];

package/dist/components/DropDownButton/index.js

@@ -48,11 +48,11 @@ export const DropDownButton = (_a) => {
     };
     return (_jsxs(_Fragment, { children: [children ? (_jsx(Button, Object.assign({ "aria-controls": !!anchorEl ? 'dropdown' : undefined, "aria-expanded": !!anchorEl ? 'true' : undefined, onClick: (event) => {
                     setAnchorEl(event.currentTarget);
-                }, endIcon: anchorEl ? _jsx(KeyboardArrowUp, {}) : _jsx(KeyboardArrowDown, {}) }, buttonProps, { children: children }))) : (_jsxs(ButtonGroup, Object.assign({ variant: "contained", disableElevation: true }, buttonProps, { children: [_jsx(ButtonWithTracking, Object.assign({ onClick: handleClick, eventName: memoizedItems[selectedIndex].eventName, eventProperties: memoizedItems[selectedIndex].eventProperties, tooltip: memoizedItems[selectedIndex].tooltip }, { children: memoizedItems[selectedIndex].children })), _jsx(Button, Object.assign({ onClick: handleToggle, 
+                }, endIcon: anchorEl ? _jsx(KeyboardArrowUp, {}) : _jsx(KeyboardArrowDown, {}) }, buttonProps, { children: children }))) : (_jsxs(ButtonGroup, Object.assign({ variant: "contained", disableElevation: true }, buttonProps, { children: [_jsx(ButtonWithTracking, { onClick: handleClick, eventName: memoizedItems[selectedIndex].eventName, eventProperties: memoizedItems[selectedIndex].eventProperties, tooltip: memoizedItems[selectedIndex].tooltip, children: memoizedItems[selectedIndex].children }), _jsx(Button, { onClick: handleToggle, 
                         // It doesn't look good without it, hence the addition.
-                        sx: (theme) => ({ pl: 2, pr: `calc(${theme.spacing(2)} + 2px)` }) }, { children: anchorEl ? _jsx(ArrowDropUp, {}) : _jsx(ArrowDropDown, {}) }))] }))), _jsx(Menu, Object.assign({ anchorEl: anchorEl, open: !!anchorEl, onClose: () => {
+                        sx: (theme) => ({ pl: 2, pr: `calc(${theme.spacing(2)} + 2px)` }), children: anchorEl ? _jsx(ArrowDropUp, {}) : _jsx(ArrowDropDown, {}) })] }))), _jsx(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => {
                     setAnchorEl(null);
-                } }, { children: memoizedItems.map((item, index) => (_jsx(MenuItemWithTracking, Object.assign({}, item, { onClick: (event) => handleMenuItemClick(event, index) }, { children: item.children }), index))) }))] }));
+                }, children: memoizedItems.map((item, index) => (_jsx(MenuItemWithTracking, Object.assign({}, item, { onClick: (event) => handleMenuItemClick(event, index), children: item.children }), index))) })] }));
 };
 /**
  * This MenuItem will send analytics in case the analytics context is passed through the provider (AnalyticsProvider).
@@ -69,5 +69,5 @@ export const MenuItemWithTracking = (_a) => {
     const tooltipProps = tooltip && typeof tooltip === 'object' && 'title' in tooltip
         ? tooltip
         : { title: tooltip };
-    return (_jsx(Tooltip, Object.assign({}, tooltipProps, { children: _jsx(MenuItem, Object.assign({}, menuItem, { onClick: handleClick }, { children: children })) })));
+    return (_jsx(Tooltip, Object.assign({}, tooltipProps, { children: _jsx(MenuItem, Object.assign({}, menuItem, { onClick: handleClick, children: children })) })));
 };

package/dist/components/Form/FieldTemplates/ObjectFieldTemplate.d.ts

@@ -1,2 +1,2 @@
-import { ObjectFieldTemplateProps, RJSFSchema } from '@rjsf/utils';
-export declare const ObjectFieldTemplate: <T = any, S extends import("json-schema").JSONSchema7 = RJSFSchema, F extends import("@rjsf/utils").GenericObjectType = any>(props: ObjectFieldTemplateProps<T, S, F>) => import("react/jsx-runtime").JSX.Element;
+import { FormContextType, ObjectFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+export declare const ObjectFieldTemplate: <T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: ObjectFieldTemplateProps<T, S, F>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/FieldTemplates/ObjectFieldTemplate.js

@@ -11,5 +11,5 @@ export const ObjectFieldTemplate = (props) => {
     return (_jsxs(_Fragment, { children: [title && (_jsx(TitleFieldTemplate, { id: titleId(idSchema), title: title, required: required, schema: schema, uiSchema: uiSchema, registry: registry })), description && (_jsx(DescriptionFieldTemplate, { id: descriptionId(idSchema), description: description, schema: schema, uiSchema: uiSchema, registry: registry })), _jsxs(Grid, Object.assign({ container: true, spacing: 2, style: { marginTop: '10px' } }, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema['ui:grid']) === null || _a === void 0 ? void 0 : _a.container) !== null && _b !== void 0 ? _b : {}), { children: [properties.map((element, index) => {
                         var _a, _b, _c, _d, _e, _f, _g;
                         return element.hidden ? (element.content) : (_jsx(Grid, Object.assign({ item: true, xs: 12, sx: { marginBottom: '10px' } }, ((_g = (_e = (_c = (_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[element.name]) === null || _a === void 0 ? void 0 : _a['ui:grid']) === null || _b === void 0 ? void 0 : _b.item) !== null && _c !== void 0 ? _c : (_d = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema['ui:grid']) === null || _d === void 0 ? void 0 : _d[element.name]) !== null && _e !== void 0 ? _e : (_f = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema['ui:grid']) === null || _f === void 0 ? void 0 : _f.item) !== null && _g !== void 0 ? _g : {}), { children: element.content }), index));
-                    }), canExpand(schema, uiSchema, formData) && (_jsx(Grid, Object.assign({ container: true, justifyContent: "flex-end" }, { children: _jsx(Grid, Object.assign({ item: true }, { children: _jsx(AddButton, { className: "object-property-expand", onClick: onAddClick(schema), disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }) })) })))] }))] }));
+                    }), canExpand(schema, uiSchema, formData) && (_jsx(Grid, { container: true, justifyContent: "flex-end", children: _jsx(Grid, { item: true, children: _jsx(AddButton, { className: "object-property-expand", onClick: onAddClick(schema), disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }) }) }))] }))] }));
 };

package/dist/components/Form/Widgets/FileWidget.js

@@ -144,13 +144,13 @@ export const FileWidget = ({ onChange, multiple, schema, uiSchema, }) => {
         disabled,
         noDrag: false,
     });
-    return (_jsx(Tooltip, Object.assign({ title: disabledReason }, { children: _jsxs(Box, Object.assign({ sx: {
+    return (_jsx(Tooltip, { title: disabledReason, children: _jsxs(Box, { sx: {
                 '.dropzone': Object.assign(Object.assign(Object.assign({}, (disabled
                     ? disabledStyle
                     : isDragActive
                         ? dragStyle
                         : restingStyle)), { '.browse-files-text': { textDecoration: 'underline' } }), (!disabled && { '&:hover': hoverStyle })),
-            } }, { children: [schema.title && (_jsx(InputLabel, Object.assign({ htmlFor: fileUploadId }, { children: schema.title }))), _jsxs(Stack, Object.assign({ id: fileUploadId, className: "dropzone", sx: {
+            }, children: [schema.title && (_jsx(InputLabel, { htmlFor: fileUploadId, children: schema.title })), _jsxs(Stack, Object.assign({ id: fileUploadId, className: "dropzone", sx: {
                         borderStyle: 'dashed',
                         borderRadius: '8px',
                         flexDirection: 'column',
@@ -159,22 +159,22 @@ export const FileWidget = ({ onChange, multiple, schema, uiSchema, }) => {
                         cursor: disabled ? 'default' : 'pointer',
                         gap: 3,
                         p: isSmall ? 4 : 5,
-                    } }, getRootProps(), { children: [_jsx("input", Object.assign({ type: "file" }, getInputProps())), _jsxs(Stack, Object.assign({ direction: isSmall ? 'row' : 'column', gap: isSmall ? 1 : 3, alignItems: "center" }, { children: [_jsx(FontAwesomeIcon, Object.assign({ icon: isSmall ? faUpload : uploadIcon !== null && uploadIcon !== void 0 ? uploadIcon : faUpload }, (isSmall
+                    } }, getRootProps(), { children: [_jsx("input", Object.assign({ type: "file" }, getInputProps())), _jsxs(Stack, { direction: isSmall ? 'row' : 'column', gap: isSmall ? 1 : 3, alignItems: "center", children: [_jsx(FontAwesomeIcon, Object.assign({ icon: isSmall ? faUpload : uploadIcon !== null && uploadIcon !== void 0 ? uploadIcon : faUpload }, (isSmall
                                     ? { size: 'lg' }
                                     : // TODO: icon sizes need to be properly added to the design tokens
-                                        { fontSize: '48px' }))), _jsxs(Typography, Object.assign({ variant: "bodyLg" }, { children: ["Drag and drop or", ' ', _jsxs(Typography, Object.assign({ className: "browse-files-text", variant: "bodyLg", component: Link }, { children: ["browse ", !!browseResourceName ? `${browseResourceName} ` : '', "files"] }))] }))] })), !!descriptiveText && (_jsx(Typography, Object.assign({ color: designTokens.color.text.subtle.value, component: "p" }, { children: descriptiveText })))] })), _jsxs(Stack, Object.assign({ gap: 2 }, { children: [_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", gap: 3 }, { children: [_jsx(Typography, Object.assign({ color: designTokens.color.text.subtle.value }, { children: accept == null
+                                        { fontSize: '48px' }))), _jsxs(Typography, { variant: "bodyLg", children: ["Drag and drop or", ' ', _jsxs(Typography, { className: "browse-files-text", variant: "bodyLg", component: Link, children: ["browse ", !!browseResourceName ? `${browseResourceName} ` : '', "files"] })] })] }), !!descriptiveText && (_jsx(Typography, { color: designTokens.color.text.subtle.value, component: "p", children: descriptiveText }))] })), _jsxs(Stack, { gap: 2, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", gap: 3, children: [_jsx(Typography, { color: designTokens.color.text.subtle.value, children: accept == null
                                         ? ''
                                         : `Supported formats: ${uniq(Object.values(accept)
                                             // The values of accept are arrays of file types, take them and flatten them
                                             .flat()
                                             // Remove the dot from the file type and capitalize it
-                                            .map((fileType) => fileType.slice(1).toUpperCase())).join(', ')}` })), maxSize != null && (_jsxs(Typography, Object.assign({ color: designTokens.color.text.subtle.value, align: "right" }, { children: ["Maximum size: ", fileSizeToReadable(maxSize)] })))] })), hideUploadedFiles && !!errorFiles.length && (_jsx(Stack, Object.assign({ color: "error.main", gap: 1 }, { children: errorFiles
+                                            .map((fileType) => fileType.slice(1).toUpperCase())).join(', ')}` }), maxSize != null && (_jsxs(Typography, { color: designTokens.color.text.subtle.value, align: "right", children: ["Maximum size: ", fileSizeToReadable(maxSize)] }))] }), hideUploadedFiles && !!errorFiles.length && (_jsx(Stack, { color: "error.main", gap: 1, children: errorFiles
                                 .flatMap((errorFile) => errorFile.errors)
-                                .map((error) => getErrorMessage(error.code, error.message, maxSize !== null && maxSize !== void 0 ? maxSize : Infinity)) }))), !hideUploadedFiles && (_jsxs(Stack, Object.assign({ gap: 1 }, { children: [files.map((file, index) => (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", gap: 2, bgcolor: designTokens.color.bg.value, p: 3, borderRadius: "8px" }, (mobile && { flexWrap: 'wrap' }), { children: [_jsxs(Stack, Object.assign({ direction: "row" }, (mobile && { justifyContent: 'space-between' }), { gap: 2, alignItems: "center", width: "100%" }, { children: [_jsxs(Stack, Object.assign({ direction: "row", gap: 2, alignItems: "center", maxWidth: "45%" }, { children: [_jsx(FontAwesomeIcon, { icon: getFileTypeIcon(file.type) }), _jsx(Typography, Object.assign({}, (mobile
+                                .map((error) => getErrorMessage(error.code, error.message, maxSize !== null && maxSize !== void 0 ? maxSize : Infinity)) })), !hideUploadedFiles && (_jsxs(Stack, { gap: 1, children: [files.map((file, index) => (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", gap: 2, bgcolor: designTokens.color.bg.value, p: 3, borderRadius: "8px" }, (mobile && { flexWrap: 'wrap' }), { children: [_jsxs(Stack, Object.assign({ direction: "row" }, (mobile && { justifyContent: 'space-between' }), { gap: 2, alignItems: "center", width: "100%", children: [_jsxs(Stack, { direction: "row", gap: 2, alignItems: "center", maxWidth: "45%", children: [_jsx(FontAwesomeIcon, { icon: getFileTypeIcon(file.type) }), _jsx(Typography, Object.assign({}, (mobile
                                                             ? { maxWidth: '100%' }
-                                                            : { width: '150px' }), { noWrap: true }, { children: file.name }))] })), file.loadingPercentage != null && (_jsx(LinearProgress, { variant: "determinate", value: file.loadingPercentage, sx: Object.assign(Object.assign({ width: mobile ? '100%' : '150px' }, (mobile && { maxWidth: '45%' })), { height: '8px' }) }))] })), _jsxs(Stack, Object.assign({ direction: "row" }, (mobile
+                                                            : { width: '150px' }), { noWrap: true, children: file.name }))] }), file.loadingPercentage != null && (_jsx(LinearProgress, { variant: "determinate", value: file.loadingPercentage, sx: Object.assign(Object.assign({ width: mobile ? '100%' : '150px' }, (mobile && { maxWidth: '45%' })), { height: '8px' }) }))] })), _jsxs(Stack, Object.assign({ direction: "row" }, (mobile
                                             ? { justifyContent: 'space-between', width: '100%' }
-                                            : { gap: 2 }), { alignItems: "center" }, { children: [_jsxs(Stack, Object.assign({ direction: "row", gap: 2 }, { children: [_jsx(Typography, Object.assign({ color: designTokens.color.text.subtle.value }, { children: file.type })), _jsx(Typography, Object.assign({ color: designTokens.color.text.subtle.value }, { children: fileSizeToReadable(file.size) }))] })), _jsx(IconButtonWithTracking, Object.assign({ eventName: "FileWidget: Delete uploaded file", "aria-label": "Delete uploaded file", onClick: () => removeFile(index), 
+                                            : { gap: 2 }), { alignItems: "center", children: [_jsxs(Stack, { direction: "row", gap: 2, children: [_jsx(Typography, { color: designTokens.color.text.subtle.value, children: file.type }), _jsx(Typography, { color: designTokens.color.text.subtle.value, children: fileSizeToReadable(file.size) })] }), _jsx(IconButtonWithTracking, { eventName: "FileWidget: Delete uploaded file", "aria-label": "Delete uploaded file", onClick: () => removeFile(index), 
                                                     // So that the Button padding does not affect the Stack padding
-                                                    sx: { p: '0' } }, { children: _jsx(FontAwesomeIcon, { icon: faTrash }) }))] }))] })))), errorFiles.map(({ file, errors }) => (_jsxs(Stack, Object.assign({ gap: 1, bgcolor: designTokens.color.bg.value, p: 3, borderRadius: "8px", border: "1px solid", borderColor: designTokens.color.border.danger.value }, { children: [_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", gap: 2 }, { children: [_jsxs(Stack, Object.assign({ direction: "row", gap: 2, alignItems: "center", width: "100%" }, { children: [_jsx(FontAwesomeIcon, { icon: getFileTypeIcon(file.type) }), _jsx(Typography, { children: file.name })] })), _jsxs(Stack, Object.assign({ direction: "row", gap: 2, alignItems: "center" }, { children: [_jsx(Typography, Object.assign({ color: designTokens.color.text.subtle.value }, { children: file.type })), _jsx(Typography, Object.assign({ color: designTokens.color.text.subtle.value }, { children: fileSizeToReadable(file.size) }))] }))] })), _jsx(Stack, Object.assign({ gap: 1 }, { children: errors.map((error) => (_jsxs(Stack, Object.assign({ gap: 2, color: designTokens.color.text.danger.value, direction: "row", alignItems: "center" }, { children: [_jsx(FontAwesomeIcon, { icon: faCircleExclamation }), getErrorMessage(error.code, error.message, maxSize !== null && maxSize !== void 0 ? maxSize : Infinity)] })))) }))] }))))] })))] }))] })) })));
+                                                    sx: { p: '0' }, children: _jsx(FontAwesomeIcon, { icon: faTrash }) })] }))] })))), errorFiles.map(({ file, errors }) => (_jsxs(Stack, { gap: 1, bgcolor: designTokens.color.bg.value, p: 3, borderRadius: "8px", border: "1px solid", borderColor: designTokens.color.border.danger.value, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", gap: 2, children: [_jsxs(Stack, { direction: "row", gap: 2, alignItems: "center", width: "100%", children: [_jsx(FontAwesomeIcon, { icon: getFileTypeIcon(file.type) }), _jsx(Typography, { children: file.name })] }), _jsxs(Stack, { direction: "row", gap: 2, alignItems: "center", children: [_jsx(Typography, { color: designTokens.color.text.subtle.value, children: file.type }), _jsx(Typography, { color: designTokens.color.text.subtle.value, children: fileSizeToReadable(file.size) })] })] }), _jsx(Stack, { gap: 1, children: errors.map((error) => (_jsxs(Stack, { gap: 2, color: designTokens.color.text.danger.value, direction: "row", alignItems: "center", children: [_jsx(FontAwesomeIcon, { icon: faCircleExclamation }), getErrorMessage(error.code, error.message, maxSize !== null && maxSize !== void 0 ? maxSize : Infinity)] }))) })] })))] }))] })] }) }));
 };

package/dist/components/Form/Widgets/PasswordWidget.js

@@ -13,16 +13,14 @@ export const PasswordWidget = ({ id, label, value, disabled, name, placeholder,
     const change = ({ target: { value } }) => {
         return onChange(value === '' ? options.emptyValue : value);
     };
-    return (_jsxs(FormControl, { children: [_jsx(TextField, Object.assign({ label: label, required: required, id: id, type: showPassword ? 'text' : 'password' }, {
-                value,
+    return (_jsxs(FormControl, { children: [_jsx(TextField, { label: label, required: required, id: id, type: showPassword ? 'text' : 'password', value,
                 disabled,
                 name,
-                placeholder,
-            }, { onChange: change, onBlur: onBlur &&
+                placeholder, onChange: change, onBlur: onBlur &&
                     ((event) => onBlur(id, event.target.value)), onFocus: onFocus &&
                     ((event) => onFocus(id, event.target.value)), InputProps: {
-                    endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ onClick: () => setShowPassword((show) => !show), onMouseDown: (event) => {
+                    endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => setShowPassword((show) => !show), onMouseDown: (event) => {
                                 event.preventDefault();
-                            }, edge: "end" }, { children: showPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) })) }))),
-                } })), options.showPasswordStrengthMeter && (_jsx(Suspense, Object.assign({ fallback: null }, { children: _jsx(PasswordStrength, { password: value }) })))] }));
+                            }, edge: "end", children: showPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) }) })),
+                } }), options.showPasswordStrengthMeter && (_jsx(Suspense, { fallback: null, children: _jsx(PasswordStrength, { password: value }) }))] }));
 };

package/dist/components/Form/Widgets/SelectWidget.js

@@ -28,15 +28,13 @@ export const SelectWidget = ({ id, label, value, disabled, name, placeholder, on
     // 	    label: string;
     // 	    schema?: RJSFSchema | undefined;
     // 	}[]
-    return (_jsxs(FormControl, { children: [_jsx(InputLabel, Object.assign({ htmlFor: id, required: required }, { children: label })), _jsx(Autocomplete, Object.assign({ fullWidth: true, id: id, value: Array.isArray(value)
+    return (_jsxs(FormControl, { children: [_jsx(InputLabel, { htmlFor: id, required: required, children: label }), _jsx(Autocomplete, Object.assign({ fullWidth: true, id: id, value: Array.isArray(value)
                     ? selectOptions.filter((option) => value.some((v) => isEqual(option.value, v)))
                     : value !== undefined
                         ? selectOptions.find((option) => isEqual(option.value, value))
-                        : undefined }, {
-                name,
+                        : undefined, name,
                 placeholder,
-                multiple,
-            }, { disabled: disabled, options: selectOptions, isOptionEqualToValue: (option, value) => isEqual(option, value), getOptionLabel: (option) => Array.isArray(option)
+                multiple, disabled: disabled, options: selectOptions, isOptionEqualToValue: (option, value) => isEqual(option, value), getOptionLabel: (option) => Array.isArray(option)
                     ? option.map((o) => o.label).join(', ')
                     : option.label, getOptionDisabled: (option) => Array.isArray(option)
                     ? option.some((o) => o.disabled)

package/dist/components/Form/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormProps as RjsFormProps } from '@rjsf/core';
 import { BoxProps, ButtonProps } from '@mui/material';
 import { IChangeEvent } from '@rjsf/core';

package/dist/components/Form/index.js

@@ -23,7 +23,7 @@ const FormWrapper = styled('div')({
 export const RJSForm = forwardRef((_a, ref) => {
     var { hideSubmitButton, submitButtonProps, actionButtons, validator = ajvValidator, widgets, children, sx, onFocus, onBlur, onClick, templates } = _a, otherProps = __rest(_a, ["hideSubmitButton", "submitButtonProps", "actionButtons", "validator", "widgets", "children", "sx", "onFocus", "onBlur", "onClick", "templates"]);
     // paddingY is resolving an outline glitch that is truncated when inside a container.
-    return (_jsx(FormWrapper, { children: _jsx(Box, Object.assign({ sx: Object.assign({ paddingY: '1px' }, sx), onFocus: onFocus, onBlur: onBlur, onClick: onClick }, { children: _jsxs(Form, Object.assign({ ref: ref, validator: validator, showErrorList: false, widgets: Object.assign(Object.assign({}, internalWidgets), (widgets || {})), templates: Object.assign({ ObjectFieldTemplate }, templates) }, otherProps, { children: [hideSubmitButton && _jsx(Fragment, {}), actionButtons === null || actionButtons === void 0 ? void 0 : actionButtons.map((_a, index) => {
+    return (_jsx(FormWrapper, { children: _jsx(Box, { sx: Object.assign({ paddingY: '1px' }, sx), onFocus: onFocus, onBlur: onBlur, onClick: onClick, children: _jsxs(Form, Object.assign({ ref: ref, validator: validator, showErrorList: false, widgets: Object.assign(Object.assign({}, internalWidgets), (widgets || {})), templates: Object.assign({ ObjectFieldTemplate }, templates) }, otherProps, { children: [hideSubmitButton && _jsx(Fragment, {}), actionButtons === null || actionButtons === void 0 ? void 0 : actionButtons.map((_a, index) => {
                         var { sx } = _a, buttonProps = __rest(_a, ["sx"]);
                         return (_jsx(Button, Object.assign({ sx: [
                                 {
@@ -33,6 +33,6 @@ export const RJSForm = forwardRef((_a, ref) => {
                                 },
                                 ...(Array.isArray(sx) ? sx : [sx]),
                             ] }, buttonProps)));
-                    }), !hideSubmitButton && (_jsx(Button, Object.assign({ children: 'Submit' }, submitButtonProps, { color: "primary", variant: "contained", type: "submit" }))), children] })) })) }));
+                    }), !hideSubmitButton && (_jsx(Button, Object.assign({ children: 'Submit' }, submitButtonProps, { color: "primary", variant: "contained", type: "submit" }))), children] })) }) }));
 });
 export { Templates };

package/dist/components/IconButtonWithTracking/index.js

@@ -18,5 +18,5 @@ export const IconButtonWithTracking = (_a) => {
     const tooltipProps = tooltip && typeof tooltip === 'object' && 'title' in tooltip
         ? tooltip
         : { title: tooltip };
-    return (_jsx(Tooltip, Object.assign({}, tooltipProps, { children: _jsx(IconButton, Object.assign({}, rest, { onClick: handleClick }, { children: children })) })));
+    return (_jsx(Tooltip, Object.assign({}, tooltipProps, { children: _jsx(IconButton, Object.assign({}, rest, { onClick: handleClick, children: children })) })));
 };

package/dist/components/LimitedRowImages/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface LimitedRowImagesProps {
     items: Array<{
         logo: string | null;

package/dist/components/LimitedRowImages/index.js

@@ -9,12 +9,12 @@ export const LimitedRowImages = ({ items, numberBeforeTruncate, }) => {
         return _jsx(_Fragment, { children: "No supported devices" });
     }
     const slicedItems = items.slice(0, numberBeforeTruncate !== null && numberBeforeTruncate !== void 0 ? numberBeforeTruncate : 3);
-    return (_jsxs(Box, Object.assign({ display: "flex", flexDirection: "row", alignItems: "center" }, { children: [slicedItems.map((item, index) => {
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", children: [slicedItems.map((item, index) => {
                 var _a;
                 return (_jsx(Avatar, { variant: "square", alt: item.name, src: (_a = item.logo) !== null && _a !== void 0 ? _a : '', sx: {
                         width: 24,
                         height: 24,
                         marginRight: 1,
                     } }, index));
-            }), ' ', items.length > slicedItems.length && (_jsxs(Typography, Object.assign({ height: "fit-content", variant: "bodySm" }, { children: ["+ ", items.length - slicedItems.length, " more"] })))] })));
+            }), ' ', items.length > slicedItems.length && (_jsxs(Typography, { height: "fit-content", variant: "bodySm", children: ["+ ", items.length - slicedItems.length, " more"] }))] }));
 };

package/dist/components/MUILinkWithTracking/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { LinkProps } from '@mui/material';
 export interface MUILinkWithTrackingProps extends LinkProps {
     eventName?: string;

package/dist/components/MUILinkWithTracking/index.js

@@ -22,5 +22,5 @@ export const MUILinkWithTracking = (_a) => {
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
     };
-    return (_jsx(Link, Object.assign({}, rest, { onClick: handleClick, target: target, rel: target === '_blank' ? 'noreferrer' : undefined }, { children: children })));
+    return (_jsx(Link, Object.assign({}, rest, { onClick: handleClick, target: target, rel: target === '_blank' ? 'noreferrer' : undefined, children: children })));
 };

package/dist/components/Map/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="google.maps" />
 import * as React from 'react';
 export interface UIMarker {
     id: string | number;

package/dist/components/Map/index.js

@@ -98,14 +98,14 @@ const BaseMap = ({ className, data = [], dataMap, getIcon, onItemClick, apiKey,
         return marker;
     })
         .filter((x) => !!x), [data, dataMap, getIcon, onItemClick]);
-    return (_jsx(Box, Object.assign({ height: "100%", className: className }, { children: apiKey && (_jsx(LoadScript, Object.assign({ googleMapsApiKey: apiKey, version: "3", language: "en" }, { children: _jsx(GoogleMap, Object.assign({ mapContainerStyle: {
+    return (_jsx(Box, { height: "100%", className: className, children: apiKey && (_jsx(LoadScript, { googleMapsApiKey: apiKey, version: "3", language: "en", children: _jsx(GoogleMap, { mapContainerStyle: {
                     height: '100%',
                     minHeight: '300px',
                     opacity: 1,
-                }, options: defaultMapOptions, onLoad: (map) => onGoogleMapsApiLoad(map, markers), onClick: mapClick }, { children: markers.map((marker) => (_jsx(Marker, { position: {
+                }, options: defaultMapOptions, onLoad: (map) => onGoogleMapsApiLoad(map, markers), onClick: mapClick, children: markers.map((marker) => (_jsx(Marker, { position: {
                         lat: isNaN(marker.lat) ? 0 : marker.lat,
                         lng: isNaN(marker.lng) ? 0 : marker.lng,
-                    }, clickable: markers.length > 1, onClick: marker.click, title: marker.title, icon: marker.icon }, marker.id))) })) }))) })));
+                    }, clickable: markers.length > 1, onClick: marker.click, title: marker.title, icon: marker.icon }, marker.id))) }) })) }));
 };
 /** [View story source](https://github.com/balena-io-modules/rendition/blob/master/src/components/Map/Map.stories.tsx) */
 export const Map = BaseMap;

package/dist/components/Markdown/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
 /**
  * This component will render a Markdown text.

package/dist/components/OrderedListItem/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ListItemProps } from '@mui/material';
 export interface OrderedListItemProps extends ListItemProps {
     index: number;

package/dist/components/OrderedListItem/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, ListItem, ListItemIcon, Typography, } from '@mui/material';
 export const OrderedListItem = (_a) => {
     var { index, children, sx } = _a, orderedListItemProps = __rest(_a, ["index", "children", "sx"]);
-    return (_jsxs(ListItem, Object.assign({ sx: Object.assign({ pl: 0 }, sx) }, orderedListItemProps, { children: [_jsx(ListItemIcon, { children: _jsx(Box, Object.assign({ sx: {
+    return (_jsxs(ListItem, Object.assign({ sx: Object.assign({ pl: 0 }, sx) }, orderedListItemProps, { children: [_jsx(ListItemIcon, { children: _jsx(Box, { sx: {
                         borderRadius: '50%',
                         backgroundColor: 'info.main',
                         width: '1.5em',
@@ -11,5 +11,5 @@ export const OrderedListItem = (_a) => {
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
-                    } }, { children: _jsx(Typography, Object.assign({ variant: "body2", color: "white" }, { children: index })) })) }), children] })));
+                    }, children: _jsx(Typography, { variant: "body2", color: "white", children: index }) }) }), children] })));
 };

package/dist/components/RouterLinkWithTracking/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { LinkProps } from 'react-router-dom';
 export interface RouterLinkWithTrackingProps extends LinkProps {
     eventName?: string;

package/dist/components/RouterLinkWithTracking/index.js

@@ -22,5 +22,5 @@ export const RouterLinkWithTracking = (_a) => {
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
     };
-    return (_jsx(Link, Object.assign({}, rest, { onClick: handleClick, "data-underline": "false" }, { children: children })));
+    return (_jsx(Link, Object.assign({}, rest, { onClick: handleClick, "data-underline": "false", children: children })));
 };

package/dist/components/SnackbarProvider/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Alert } from '@mui/material';
 import { closeSnackbar, SnackbarProvider, } from 'notistack';
 const Toast = React.forwardRef(({ message, id, variant }, ref) => {
-    return (_jsx(Alert, Object.assign({ ref: ref, onClose: () => closeSnackbar(id), severity: variant === 'default' ? 'success' : variant, sx: { alignItems: 'center' } }, { children: message })));
+    return (_jsx(Alert, { ref: ref, onClose: () => closeSnackbar(id), severity: variant === 'default' ? 'success' : variant, sx: { alignItems: 'center' }, children: message }));
 });
 export const SnackbarProviderBase = (props) => (_jsx(SnackbarProvider, Object.assign({ Components: {
         default: Toast,

package/dist/components/Spinner/index.js

@@ -4,13 +4,13 @@ import { color } from '@balena/design-tokens';
 // TODO use design tokens when available
 const SIZE_MAPPING = {
     small: '14px',
-    medium: '20px',
+    medium: '20px', // 20px is the default size of the old rendition Spinner
     large: '24px',
 };
 export const Spinner = ({ show = true, children, label, sx, bgVariant = 'light', size = 'medium', zIndex, progress, }) => {
-    const SpinnerContent = (_jsxs(_Fragment, { children: [_jsx(CircularProgress, Object.assign({ size: SIZE_MAPPING[size] }, (progress != null && { variant: 'determinate', value: progress }))), label != null && (_jsx(Typography, Object.assign({ color: bgVariant === 'dark' ? color.text.inverse.value : 'default' }, { children: label })))] }));
+    const SpinnerContent = (_jsxs(_Fragment, { children: [_jsx(CircularProgress, Object.assign({ size: SIZE_MAPPING[size] }, (progress != null && { variant: 'determinate', value: progress }))), label != null && (_jsx(Typography, { color: bgVariant === 'dark' ? color.text.inverse.value : 'default', children: label }))] }));
     if (children == null) {
-        return (_jsx(Box, Object.assign({ sx: [
+        return (_jsx(Box, { sx: [
                 {
                     display: show ? 'flex' : 'none',
                     alignItems: 'center',
@@ -23,18 +23,18 @@ export const Spinner = ({ show = true, children, label, sx, bgVariant = 'light',
             ], onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
-            } }, { children: SpinnerContent })));
+            }, children: SpinnerContent }));
     }
-    return (_jsxs(Box, Object.assign({ sx: [
+    return (_jsxs(Box, { sx: [
             {
                 position: 'relative',
                 height: '100%',
                 width: '100%',
             },
             ...(Array.isArray(sx) ? sx : [sx]),
-        ] }, { children: [_jsx(Box, Object.assign({ sx: Object.assign({ width: '100%', height: '100%' }, (show &&
+        ], children: [_jsx(Box, { sx: Object.assign({ width: '100%', height: '100%' }, (show &&
                     bgVariant === 'light' && {
                     opacity: 0.4,
                     transition: 'opacity 250ms',
-                })) }, { children: children })), _jsx(Backdrop, Object.assign({ sx: Object.assign(Object.assign({ gap: 1, position: 'absolute' }, (bgVariant === 'light' && { backgroundColor: 'unset' })), { zIndex }), open: show }, { children: SpinnerContent }))] })));
+                })), children: children }), _jsx(Backdrop, { sx: Object.assign(Object.assign({ gap: 1, position: 'absolute' }, (bgVariant === 'light' && { backgroundColor: 'unset' })), { zIndex }), open: show, children: SpinnerContent })] }));
 };

package/dist/components/SurroundingOverlay/index.js

@@ -41,7 +41,7 @@ export const SurroundingOverlay = (_a) => {
             scrollingElement === null || scrollingElement === void 0 ? void 0 : scrollingElement.removeEventListener('scroll', () => updateRect());
         };
     }, [scrollingElement, targetElement, updateRect, containerRef]);
-    return (_jsxs(Box, Object.assign({ ref: containerRef, position: "relative" }, { children: [children, clickedRect && Object.values(clickedRect).every((v) => v != null) && (_jsxs(_Fragment, { children: [_jsx(Layer, Object.assign({}, otherProps, { sx: {
+    return (_jsxs(Box, { ref: containerRef, position: "relative", children: [children, clickedRect && Object.values(clickedRect).every((v) => v != null) && (_jsxs(_Fragment, { children: [_jsx(Layer, Object.assign({}, otherProps, { sx: {
                             top: 0,
                             left: 0,
                             right: 0,
@@ -61,5 +61,5 @@ export const SurroundingOverlay = (_a) => {
                             right: 0,
                             height: clickedRect.height + padding * 2,
                             width: clickedRect.right - padding,
-                        } }))] }))] })));
+                        } }))] }))] }));
 };

package/dist/components/Tabs/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type BoxProps, type TabProps } from '@mui/material';
 import { type TabPanelProps } from '@mui/lab';
 export interface TabsProps {

package/dist/components/Tabs/index.js

@@ -15,9 +15,9 @@ export const Tabs = ({ tabs, tabsListBoxProps, defaultTab, onTabChange, }) => {
         onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(parseInt(newValue, 10));
     };
     const _a = tabsListBoxProps !== null && tabsListBoxProps !== void 0 ? tabsListBoxProps : {}, { sx } = _a, boxProps = __rest(_a, ["sx"]);
-    return (_jsxs(TabContext, Object.assign({ value: tab }, { children: [_jsx(Box, Object.assign({ sx: [
+    return (_jsxs(TabContext, { value: tab, children: [_jsx(Box, Object.assign({ sx: [
                     { borderBottom: 1, borderColor: 'divider' },
                     // See: https://mui.com/system/getting-started/the-sx-prop/#passing-the-sx-prop
                     ...(Array.isArray(sx) ? sx : [sx]),
-                ] }, boxProps, { children: _jsx(TabList, Object.assign({ onChange: handleChange }, { children: tabs.map(({ label, tabProps }, index) => (_jsx(Tab, Object.assign({ label: label, value: index.toString() }, tabProps)))) })) })), tabs.map(({ render, tabPanelProps }, index) => (_jsx(TabPanel, Object.assign({ value: index.toString() }, tabPanelProps, { children: render }))))] })));
+                ] }, boxProps, { children: _jsx(TabList, { onChange: handleChange, children: tabs.map(({ label, tabProps }, index) => (_jsx(Tab, Object.assign({ label: label, value: index.toString() }, tabProps)))) }) })), tabs.map(({ render, tabPanelProps }, index) => (_jsx(TabPanel, Object.assign({ value: index.toString() }, tabPanelProps, { children: render }))))] }));
 };

package/dist/components/Tooltip/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipProps } from '@mui/material';
 /**
  * This component will replace material one as it does not work by default on disabled elements

package/dist/components/Truncate/index.js

@@ -4,12 +4,12 @@ import { Tooltip, Typography } from '@mui/material';
  * This component will truncate text depending on the settings passed by props.
  */
 export const Truncate = ({ children, lineCamp, tooltip, }) => {
-    return (_jsx(Tooltip, Object.assign({ title: tooltip && typeof children === 'string' ? children : undefined }, { children: _jsx(Typography, Object.assign({ component: "span", sx: {
+    return (_jsx(Tooltip, { title: tooltip && typeof children === 'string' ? children : undefined, children: _jsx(Typography, { component: "span", sx: {
                 lineHeight: '2rem',
                 display: '-webkit-box',
                 overflow: 'hidden !important',
                 textOverflow: 'ellipsis',
                 WebkitLineClamp: lineCamp,
                 WebkitBoxOrient: 'vertical',
-            } }, { children: children })) })));
+            }, children: children }) }));
 };

package/dist/components/VirtualizedAutocomplete/index.d.ts

@@ -9,4 +9,6 @@ export interface VirtualizedAutocompleteWithPaginationProps<Value, Multiple exte
         totalItems: number;
     }>;
 }
-export declare const VirtualizedAutocomplete: <Value, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType<any> = "div">({ renderOption, getOptionLabel, value, ...props }: VirtualizedAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent> | VirtualizedAutocompleteWithPaginationProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => import("react/jsx-runtime").JSX.Element;
+declare const VirtualizedAutocompleteBase: <Value, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = "div">({ renderOption, getOptionLabel, value, ...props }: VirtualizedAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent> | VirtualizedAutocompleteWithPaginationProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => import("react/jsx-runtime").JSX.Element;
+export declare const VirtualizedAutocomplete: typeof VirtualizedAutocompleteBase;
+export {};

package/dist/components/VirtualizedAutocomplete/index.js

@@ -32,7 +32,7 @@ const ListboxComponent = (_a) => {
     ]);
     return (_jsxs(Box, Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), { padding: 0, height: document.documentElement.clientHeight * 0.4 < optionHeightsTotal
                 ? '40vh'
-                : optionHeightsTotal, display: 'flex', flexDirection: 'column' }) }, { children: [_jsx(VList, Object.assign({ style: {
+                : optionHeightsTotal, display: 'flex', flexDirection: 'column' }), children: [_jsx(VList, { style: {
                     flex: 1,
                 }, onRangeChange: (_, lastItemIndex) => {
                     if (itemCount != null &&
@@ -40,12 +40,12 @@ const ListboxComponent = (_a) => {
                         lastItemIndex + 1 < itemCount) {
                         loadNextPage === null || loadNextPage === void 0 ? void 0 : loadNextPage();
                     }
-                } }, { children: itemData.map((item, i) => (_createElement(ListItemButton, Object.assign({}, item.props, { key: Math.random(), sx: {
+                }, children: itemData.map((item, i) => (_createElement(ListItemButton, Object.assign({}, item.props, { key: Math.random(), sx: {
                         mt: i === 0 ? `${MUI_LIST_VERTICAL_PADDING}px` : 0,
                         mb: i === (itemCount !== null && itemCount !== void 0 ? itemCount : itemData.length) - 1
                             ? `${MUI_LIST_VERTICAL_PADDING}px`
                             : 0,
-                    } }), item.option))) })), isNextPageLoading && (_jsx(Box, Object.assign({ style: {
+                    } }), item.option))) }), isNextPageLoading && (_jsx(Box, { style: {
                     position: 'absolute',
                     top: 0,
                     right: 0,
@@ -56,7 +56,7 @@ const ListboxComponent = (_a) => {
                     alignItems: 'center',
                     backgroundColor: 'rgb(0, 0, 0, 0.4)',
                     color: 'white',
-                } }, { children: "Loading..." })))] })));
+                }, children: "Loading..." }))] })));
 };
 const VirtualizedAutocompleteBase = (_a) => {
     var { renderOption, getOptionLabel, value } = _a, props = __rest(_a, ["renderOption", "getOptionLabel", "value"]);

package/dist/contexts/AnalyticsContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AnalyticsUrlParams, Client, WebTracker } from 'analytics-client';
 export declare enum AnalyticsStoreActions {
     setAnalyticsData = "set_analytics_data"

package/dist/contexts/AnalyticsContext.js

@@ -68,7 +68,7 @@ export const AnalyticsContextProvider = ({ initialState, children }) => {
         }
     }, [initialState]);
     const value = { state, dispatch };
-    return (_jsx(AnalyticsStateContext.Provider, Object.assign({ value: value }, { children: children })));
+    return (_jsx(AnalyticsStateContext.Provider, { value: value, children: children }));
 };
 export const useAnalyticsContext = () => {
     const context = useContext(AnalyticsStateContext);

package/dist/docs/utils.d.ts

@@ -32,12 +32,12 @@ export declare const ColorRow: ({ token, description, }: {
 /**
  * split pascalcase into lowercase words separated with dots or dashes, and remove first separator
  */
-export declare const formatTokenName: (tokenName: string, separator: '.' | '-') => string;
-export declare const getVariableFromTokenName: (tokenName: string, type: 'css' | 'js') => string;
+export declare const formatTokenName: (tokenName: string, separator: "." | "-") => string;
+export declare const getVariableFromTokenName: (tokenName: string, type: "css" | "js") => string;
 export declare const getCategoriesFromTokens: (tokens: JsonToken[]) => string[];
 export declare const LensToggle: (props: ToggleButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TypeScaleItem: ({ variant, isParagraph, }: {
     variant: TypographyVariant;
-    isParagraph?: boolean | undefined;
+    isParagraph?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/docs/utils.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Box, ToggleButton, ToggleButtonGroup, Typography, } from '@mui/material';
 import { GridView, TableRows } from '@mui/icons-material';
 import { color } from '@balena/design-tokens';
-export const ColorTable = ({ children }) => (_jsxs("table", Object.assign({ style: { width: '100%', borderCollapse: 'collapse' } }, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", Object.assign({ style: { textAlign: 'left', width: '75px' } }, { children: "Color" })), _jsx("th", Object.assign({ style: { textAlign: 'left' } }, { children: "Token" })), _jsx("th", Object.assign({ style: { textAlign: 'left' } }, { children: "Description" })), _jsx("th", Object.assign({ style: { textAlign: 'left' } }, { children: "Variables" })), _jsx("th", Object.assign({ style: { textAlign: 'left' } }, { children: "Value" }))] }) }), _jsx("tbody", { children: children })] })));
+export const ColorTable = ({ children }) => (_jsxs("table", { style: { width: '100%', borderCollapse: 'collapse' }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: { textAlign: 'left', width: '75px' }, children: "Color" }), _jsx("th", { style: { textAlign: 'left' }, children: "Token" }), _jsx("th", { style: { textAlign: 'left' }, children: "Description" }), _jsx("th", { style: { textAlign: 'left' }, children: "Variables" }), _jsx("th", { style: { textAlign: 'left' }, children: "Value" })] }) }), _jsx("tbody", { children: children })] }));
 export const ColorRow = ({ token, description, }) => {
     return (_jsxs("tr", { children: [_jsx("td", { children: _jsx("div", { style: {
                         width: '100%',
@@ -41,11 +41,11 @@ export const LensToggle = (props) => {
     const handleChange = (_, newLens) => {
         setLens(newLens);
     };
-    return (_jsxs(ToggleButtonGroup, Object.assign({ onChange: handleChange, exclusive: true }, props, { children: [_jsx(ToggleButton, Object.assign({ value: 'grid', title: "Grid lens", selected: lens === 'grid' }, { children: _jsx(GridView, {}) })), _jsx(ToggleButton, Object.assign({ value: 'table', title: "Table lens", selected: lens === 'table' }, { children: _jsx(TableRows, {}) }))] })));
+    return (_jsxs(ToggleButtonGroup, Object.assign({ onChange: handleChange, exclusive: true }, props, { children: [_jsx(ToggleButton, { value: 'grid', title: "Grid lens", selected: lens === 'grid', children: _jsx(GridView, {}) }), _jsx(ToggleButton, { value: 'table', title: "Table lens", selected: lens === 'table', children: _jsx(TableRows, {}) })] })));
 };
 export const TypeScaleItem = ({ variant, isParagraph, }) => {
     const text = !isParagraph
         ? 'Lorem ipsum dolor sit amet'
         : 'Lorem ipsum dolor sit amet consectetur. Pretium consectetur et risus ac nisl egestas aliquam odio ac. Aenean urna consectetur at suspendisse. Magnis tincidunt non blandit velit accumsan orci amet mus.';
-    return (_jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx(Typography, Object.assign({ variant: "overline", sx: { color: color.text.accent.value } }, { children: variant })), _jsxs(Typography, Object.assign({ variant: variant }, { children: [text, " "] }))] })));
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Typography, { variant: "overline", sx: { color: color.text.accent.value }, children: variant }), _jsxs(Typography, { variant: variant, children: [text, " "] })] }));
 };

package/dist/theme.js

@@ -690,7 +690,7 @@ export const theme = createTheme({
             styleOverrides: {
                 root: {
                     '--DataGrid-rowBorderColor': color.border.subtle.value,
-                    '--DataGrid-containerBackground': '#f2f4fa',
+                    '--DataGrid-containerBackground': '#f2f4fa', // TODO use a design token when we get rid of rendition in autoui
                     border: 'none',
                     fontSize: '1rem',
                     '.MuiDataGrid-columnHeaderTitle': {
@@ -855,9 +855,9 @@ export const theme = createTheme({
         },
         MuiCheckbox: {
             defaultProps: {
-                icon: (_jsx("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("rect", { x: "0.5", y: "0.5", width: "19", height: "19", rx: "3.5", fill: "white", stroke: "currentColor" }) }))),
-                checkedIcon: (_jsxs("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("rect", { width: "20", height: "20", rx: "4" }), _jsx("path", { d: "M15.2832 6.22852C15.5879 6.50977 15.5879 7.00195 15.2832 7.2832L9.2832 13.2832C9.00195 13.5879 8.50977 13.5879 8.22852 13.2832L5.22852 10.2832C4.92383 10.002 4.92383 9.50977 5.22852 9.22852C5.50977 8.92383 6.00195 8.92383 6.2832 9.22852L8.74414 11.6895L14.2285 6.22852C14.5098 5.92383 15.002 5.92383 15.2832 6.22852Z", fill: "white" })] }))),
-                indeterminateIcon: (_jsxs("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("rect", { width: "20", height: "20", rx: "4" }), _jsx("rect", { x: "5", y: "9", width: "10", height: "2", fill: "white" })] }))),
+                icon: (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("rect", { x: "0.5", y: "0.5", width: "19", height: "19", rx: "3.5", fill: "white", stroke: "currentColor" }) })),
+                checkedIcon: (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { width: "20", height: "20", rx: "4" }), _jsx("path", { d: "M15.2832 6.22852C15.5879 6.50977 15.5879 7.00195 15.2832 7.2832L9.2832 13.2832C9.00195 13.5879 8.50977 13.5879 8.22852 13.2832L5.22852 10.2832C4.92383 10.002 4.92383 9.50977 5.22852 9.22852C5.50977 8.92383 6.00195 8.92383 6.2832 9.22852L8.74414 11.6895L14.2285 6.22852C14.5098 5.92383 15.002 5.92383 15.2832 6.22852Z", fill: "white" })] })),
+                indeterminateIcon: (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { width: "20", height: "20", rx: "4" }), _jsx("rect", { x: "5", y: "9", width: "10", height: "2", fill: "white" })] })),
             },
             styleOverrides: {
                 root: {
@@ -876,8 +876,8 @@ export const theme = createTheme({
         },
         MuiRadio: {
             defaultProps: {
-                icon: (_jsx("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("circle", { cx: "10", cy: "10", r: "9.5", fill: "white", stroke: "currentColor" }) }))),
-                checkedIcon: (_jsxs("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("circle", { cx: "10", cy: "10", r: "9.5", fill: "white", stroke: "currentColor" }), _jsx("circle", { cx: "10", cy: "10", r: "4", fill: "currentColor" })] }))),
+                icon: (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("circle", { cx: "10", cy: "10", r: "9.5", fill: "white", stroke: "currentColor" }) })),
+                checkedIcon: (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "10", cy: "10", r: "9.5", fill: "white", stroke: "currentColor" }), _jsx("circle", { cx: "10", cy: "10", r: "4", fill: "currentColor" })] })),
             },
             styleOverrides: {
                 root: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "6.1.2",
+  "version": "6.1.3",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -42,7 +42,7 @@
     "rehype-raw": "^6.1.1",
     "remark-gfm": "^3.0.1",
     "rimraf": "^5.0.0",
-    "typescript": "^4.9.5",
+    "typescript": "^5.5.2",
     "virtua": "^0.13.0",
     "zxcvbn": "^4.4.2"
   },
@@ -112,6 +112,6 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2024-06-20T17:35:51.977Z"
+    "publishedAt": "2024-06-20T21:22:31.290Z"
   }
 }