@balena/ui-shared-components 12.3.1-build-download-image-dialog-improvements-9e6786b8a8c3db0909c9d84e6e6903684963b939-1 → 12.3.1-build-guides-and-surveys-510f50444fd9bb84644c63fecd721dbe7d61f092-1

package/dist/components/DownloadImageDialog/ImageForm.js

@@ -1,17 +1,19 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Avatar, Box, Checkbox, Chip, Divider, FormControl, FormControlLabel, FormLabel, InputAdornment, InputLabel, Radio, RadioGroup, TextField, Tooltip, Typography, IconButton, Autocomplete, Stack, Accordion, AccordionSummary, AccordionDetails, } from '@mui/material';
+import { Avatar, Box, Button, Checkbox, Chip, Collapse, Divider, FormControl, FormControlLabel, FormLabel, InputAdornment, InputLabel, Radio, RadioGroup, TextField, Tooltip, Typography, IconButton, Autocomplete, Stack, } from '@mui/material';
 import HelpIcon from '@mui/icons-material/Help';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { getPreferredVersionOpts, transformVersions } from './version';
 import { OsTypeSelector } from './OsTypeSelector';
 import { VariantSelector } from './VariantSelector';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
 import ArticleIcon from '@mui/icons-material/Article';
 import { MUILinkWithTracking } from '../MUILinkWithTracking';
 import { Visibility, VisibilityOff } from '@mui/icons-material';
 import { FALLBACK_LOGO_UNKNOWN_DEVICE } from './utils';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronRight, faTriangleExclamation, } from '@fortawesome/free-solid-svg-icons';
+import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
 import { Callout } from '../Callout';
 import { token } from '../../utils/token';
 const POLL_INTERVAL_DOCS = 'https://www.balena.io/docs/reference/supervisor/bandwidth-reduction/#side-effects--warnings';
@@ -97,7 +99,7 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
         onChange('deviceType', newDeviceType);
     }, [compatibleDeviceTypes, model.deviceType.slug, onChange]);
     const recommendedVersion = useMemo(() => { var _a; return (_a = versionSelectionOpts.find((v) => { var _a; return !((_a = v.knownIssueList) === null || _a === void 0 ? void 0 : _a.length); })) === null || _a === void 0 ? void 0 : _a.value; }, [versionSelectionOpts]);
-    return (_jsxs(Box, { action: downloadUrl, method: "post", component: "form", noValidate: true, autoComplete: "off", p: 2, ref: formElement, children: [_jsx("input", { type: "hidden", name: "deviceType", value: model.deviceType.slug }), _jsx("input", { type: "hidden", name: "_token", value: authToken }), _jsx("input", { type: "hidden", name: "appId", value: applicationId }), _jsx("input", { type: "hidden", name: "fileType", value: ".zip" }), _jsx("input", { type: "hidden", name: "version", value: model.version }), _jsxs(Box, { py: 3, display: "flex", flexWrap: "wrap", gap: 2, children: [compatibleDeviceTypes && compatibleDeviceTypes.length > 1 && (_jsxs(Stack, { flex: "1", maxWidth: "100%", children: [_jsxs(InputLabel, { htmlFor: "device-type-select", sx: { display: 'flex', alignItems: 'center', mb: 2, gap: 1 }, children: ["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' } }) })] }), _jsx(Autocomplete, { fullWidth: true, id: "device-type-select", value: model.deviceType, options: compatibleDeviceTypes, getOptionLabel: (option) => option.name, renderOption: (props, option) => {
+    return (_jsxs(Box, { action: downloadUrl, method: "post", component: "form", noValidate: true, autoComplete: "off", p: 2, ref: formElement, children: [_jsx("input", { type: "hidden", name: "deviceType", value: model.deviceType.slug }), _jsx("input", { type: "hidden", name: "_token", value: authToken }), _jsx("input", { type: "hidden", name: "appId", value: applicationId }), _jsx("input", { type: "hidden", name: "fileType", value: ".zip" }), _jsx("input", { type: "hidden", name: "version", value: model.version }), _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(Autocomplete, { fullWidth: true, id: "device-type-select", value: model.deviceType, options: compatibleDeviceTypes, getOptionLabel: (option) => option.name, renderOption: (props, option) => {
                                     var _a;
                                     return (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { variant: "square", src: (_a = option.logo) !== null && _a !== void 0 ? _a : FALLBACK_LOGO_UNKNOWN_DEVICE, sx: { mr: 3, width: '20px', height: '20px' } }), _jsx(Typography, { noWrap: true, children: option.name })] })));
                                 }, renderInput: (_a) => {
@@ -115,16 +117,16 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
                                     popper: { sx: { width: 'fit-content' } },
                                 } })] })), (!isInitialDefault || osType) &&
                         hasEsrVersions &&
-                        model.deviceType && (_jsx(OsTypeSelector, { supportedOsTypes: osTypes, hasEsrVersions: hasEsrVersions !== null && hasEsrVersions !== void 0 ? hasEsrVersions : false, selectedOsTypeSlug: osType, onSelectedOsTypeChange: onSelectedOsTypeChange }))] }), !isInitialDefault && version && (_jsxs(Box, { display: "flex", flexWrap: "wrap", maxWidth: "100%", children: [_jsxs(Stack, { maxWidth: "100%", flex: 1, children: [_jsx(InputLabel, { sx: { mb: 2 }, htmlFor: "e2e-download-image-versions-list", children: "OS version" }), _jsx(Autocomplete, { fullWidth: true, id: "e2e-download-image-versions-list", value: version, getOptionLabel: (option) => option.value, isOptionEqualToValue: (option, value) => option.value === value.value, options: versionSelectionOpts, onChange: (_event, ver) => {
+                        model.deviceType && (_jsx(OsTypeSelector, { supportedOsTypes: osTypes, hasEsrVersions: hasEsrVersions !== null && hasEsrVersions !== void 0 ? hasEsrVersions : false, selectedOsTypeSlug: osType, onSelectedOsTypeChange: onSelectedOsTypeChange }))] }), !isInitialDefault && 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(Autocomplete, { fullWidth: true, id: "e2e-download-image-versions-list", value: version, getOptionLabel: (option) => option.value, isOptionEqualToValue: (option, value) => option.value === value.value, options: versionSelectionOpts, onChange: (_event, ver) => {
                                     handleVersionChange(ver);
                                 }, placeholder: "Choose a version...", renderOption: (props, option) => (_jsx(Box, Object.assign({ component: "li" }, props, { children: _jsx(VersionSelectItem, { option: option, isRecommended: option.value === recommendedVersion }) }))), renderInput: (_a) => {
                                     var { InputProps } = _a, params = __rest(_a, ["InputProps"]);
                                     return (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, InputProps), { endAdornment: (_jsxs(_Fragment, { children: [version.value === recommendedVersion && (_jsx(Chip, { sx: { ml: 1 }, color: "green", label: "recommended" })), !!(version === null || version === void 0 ? void 0 : version.knownIssueList) && (_jsx(Tooltip, { title: version.knownIssueList, children: _jsx(FontAwesomeIcon, { icon: faTriangleExclamation, color: token('color.icon.warning') }) })), InputProps.endAdornment] })) }) })));
                                 }, disableClearable: true })] }), showAllVersionsToggle && (_jsx(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(FormControlLabel, { control: _jsx(Checkbox, { id: "e2e-show-all-versions-check", checked: showAllVersions, onChange: handleShowAllVersions }), label: "Show outdated versions" }) }))] })), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), (!isInitialDefault || !variant) && (_jsx(Box, { sx: { mt: 3 }, children: _jsx(VariantSelector, { version: version, variant: variant, onVariantChange: (v) => {
+                        height: 54, children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { id: "e2e-show-all-versions-check", checked: showAllVersions, onChange: handleShowAllVersions }), label: "Show outdated versions" }) }))] })), (!isInitialDefault || !variant) && (_jsx(Box, { sx: { mt: 3 }, children: _jsx(VariantSelector, { version: version, variant: variant, onVariantChange: (v) => {
                         handleVariantChange(v ? 'dev' : 'prod');
-                    } }) })), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(Stack, { children: [_jsxs(FormControl, { children: [_jsx(FormLabel, { id: "network-radio-buttons-group-label", children: _jsx(Typography, { variant: "titleSm", children: "Network" }) }), _jsxs(RadioGroup, { "aria-labelledby": "network-radio-buttons-group-label", value: model.network, name: "network", onChange: (event) => {
+                    } }) })), _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", slotProps: {
                                     htmlInput: {
@@ -147,39 +149,34 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
                                     },
                                 }, onChange: (event) => {
                                     onChange('wifiKey', event.target.value);
-                                } })] }))] }), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(Accordion, { disableGutters: true, elevation: 0, expanded: showAdvancedSettings, onChange: () => {
+                                } })] }))] }), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(Button, { onClick: () => {
                     setShowAdvancedSettings(!showAdvancedSettings);
-                }, sx: {
-                    border: 'none',
-                    '&::before': {
-                        display: 'none',
-                    },
-                }, children: [_jsx(AccordionSummary, { expandIcon: _jsx(FontAwesomeIcon, { icon: faChevronRight }), sx: { flexDirection: 'row-reverse', gap: 1 }, children: _jsx(Typography, { variant: "titleSm", children: "Advanced settings" }) }), _jsx(AccordionDetails, { children: _jsxs(Stack, { 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, slotProps: {
-                                                htmlInput: {
-                                                    name: 'appUpdatePollInterval',
-                                                    autoComplete: 'appUpdatePollInterval-auto-complete',
-                                                },
-                                            }, 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 : '', slotProps: {
+                }, 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, slotProps: {
                                         htmlInput: {
-                                            name: 'provisioningKeyName',
-                                            autoComplete: 'provisioningKeyName-auto-complete',
+                                            name: 'appUpdatePollInterval',
+                                            autoComplete: 'appUpdatePollInterval-auto-complete',
                                         },
                                     }, 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 : '', slotProps: {
-                                        htmlInput: {
-                                            name: 'provisioningKeyExpiryDate',
-                                            autoComplete: 'provisioningKeyExpiryDate-auto-complete',
-                                        },
-                                    }, onChange: (event) => {
-                                        onChange('provisioningKeyExpiryDate', event.target.value);
-                                    } })] }) })] })] }));
+                                        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 : '', slotProps: {
+                                htmlInput: {
+                                    name: 'provisioningKeyName',
+                                    autoComplete: 'provisioningKeyName-auto-complete',
+                                },
+                            }, 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 : '', slotProps: {
+                                htmlInput: {
+                                    name: 'provisioningKeyExpiryDate',
+                                    autoComplete: 'provisioningKeyExpiryDate-auto-complete',
+                                },
+                            }, onChange: (event) => {
+                                onChange('provisioningKeyExpiryDate', event.target.value);
+                            } })] }) })] }));
 });
 // TODO: We need a better way than just copying the styling. Consider creating a component to export
 const VersionSelectItem = ({ option, isRecommended, }) => {

package/dist/components/DownloadImageDialog/OsTypeSelector.js

@@ -30,7 +30,7 @@ export const OsTypeSelector = ({ supportedOsTypes, hasEsrVersions, selectedOsTyp
         };
     });
     const selectedOsType = selectOsTypes.find((osType) => osType.slug === selectedOsTypeSlug && osType.supportedForDeviceType);
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", flex: 1, children: [_jsxs(InputLabel, { htmlFor: "newAppApplicationType", sx: { display: 'flex', alignItems: 'center', mb: 2 }, children: ["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) => {
+    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);
                     if (!osType.disabled) {
                         onSelectedOsTypeChange(osType.slug);

package/dist/components/DownloadImageDialog/VariantSelector.js

@@ -4,20 +4,19 @@ import { MUILinkWithTracking } from '../MUILinkWithTracking';
 import { getOsVariantDisplayText } from './utils';
 import { Lightbulb } from '@mui/icons-material';
 import { token } from '../../utils/token';
-import { Callout } from '../Callout';
-const variantInfo = (selected) => ({
+const variantInfo = {
     dev: {
         title: (_jsxs(Box, { display: "flex", gap: 1, flexDirection: "row", alignItems: "center", children: [_jsx(Typography, { children: getOsVariantDisplayText('dev') }), _jsxs(Typography, { variant: "bodySm", color: token('color.text'), 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.", selected === 'dev' && (_jsxs(Callout, { severity: "warning", children: ["This variant should never be used in production for security reasons.", ' ', _jsx(MUILinkWithTracking, { href: "https://docs.balena.io/reference/OS/overview/#development-vs-production-mode", children: "Learn more." })] }))] })),
+        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') }),
         description: (_jsx(_Fragment, { children: "Production images are ready for production deployments, but don't offer easy access for local development." })),
     },
-});
+};
 const BuildVariants = ['dev', 'prod'];
 export const VariantSelector = ({ version, variant, onVariantChange, }) => {
-    return (_jsxs(FormControl, { children: [_jsx(FormLabel, { children: _jsx(Typography, { variant: "titleSm", children: "Select edition" }) }), _jsx(RadioGroup, { "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) => {
                     const isDev = buildVariant === 'dev';
@@ -25,6 +24,6 @@ export const VariantSelector = ({ version, variant, onVariantChange, }) => {
                         (version.hasPrebuiltVariants && !version.rawVersions[buildVariant]);
                     return (_jsx(Tooltip, { title: isDisabled
                             ? 'This edition is not available for the selected version'
-                            : 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(variant)[buildVariant].title }), _jsx(Typography, { sx: { opacity: isDisabled ? 0.4 : 1 }, variant: "bodySm", children: variantInfo(variant)[buildVariant].description })] }) }, index));
+                            : 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "12.3.1-build-download-image-dialog-improvements-9e6786b8a8c3db0909c9d84e6e6903684963b939-1",
+  "version": "12.3.1-build-guides-and-surveys-510f50444fd9bb84644c63fecd721dbe7d61f092-1",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -32,7 +32,7 @@
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "ajv-keywords": "^5.1.0",
-    "analytics-client": "^2.0.1",
+    "analytics-client": "^2.1.0",
     "color": "^5.0.0",
     "color-hash": "^2.0.2",
     "date-fns": "^4.1.0",
@@ -138,6 +138,6 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2025-04-16T18:53:25.988Z"
+    "publishedAt": "2025-04-17T15:40:27.105Z"
   }
 }