@balena/ui-shared-components 12.4.1-build-remove-unused-icon-abf38bf8f1d9d6827561fcd27fe2fe90534402d9-1 → 12.4.1-build-upgrade-storybook-9-e3144c3663dd553c1ab03e825591993c6ffb3a41-1

package/dist/components/CollapsedList/index.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Box, Button, Collapse, Typography } from '@mui/material';
 import { useMemo, useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown';
-import { faCaretUp } from '@fortawesome/free-solid-svg-icons/faCaretUp';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
 /**
  * This will collapse a long list and allow to expand it by clicking the "expand" button.
  */
@@ -22,5 +21,5 @@ export const CollapsedList = ({ list, collapseItems = 3, }) => {
     }
     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(FontAwesomeIcon, { icon: faCaretUp })) : (_jsx(FontAwesomeIcon, { icon: faCaretDown }))] }))] }));
+                }, children: [showMore ? 'Less' : 'More', showMore ? _jsx(ArrowDropUpIcon, {}) : _jsx(ArrowDropDownIcon, {})] }))] }));
 };

package/dist/components/DownloadImageDialog/ImageForm.js

@@ -1,15 +1,17 @@
 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, Radio, RadioGroup, TextField, Tooltip, Typography, IconButton, Autocomplete, Stack, Accordion, AccordionSummary, AccordionDetails, accordionSummaryClasses, } 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 { faFileLines } from '@fortawesome/free-solid-svg-icons/faFileLines';
+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, faEye, faEyeSlash, faQuestionCircle, faTriangleExclamation, } from '@fortawesome/free-solid-svg-icons';
+import { faChevronRight, 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';
@@ -118,7 +120,7 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
                         }, renderInput: (_a) => {
                             var _b;
                             var { InputProps } = _a, params = __rest(_a, ["InputProps"]);
-                            return (_jsx(TextField, Object.assign({}, params, { label: _jsxs(Stack, { direction: "row", alignItems: "center", 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(FontAwesomeIcon, { icon: faQuestionCircle, color: "info", fontSize: "1rem" }) })] }), slotProps: {
+                            return (_jsx(TextField, Object.assign({}, params, { label: _jsxs(Stack, { direction: "row", alignItems: "center", 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' } }) })] }), slotProps: {
                                     input: Object.assign(Object.assign({}, InputProps), { startAdornment: (_jsx(Avatar, { variant: "square", src: (_b = model.deviceType.logo) !== null && _b !== void 0 ? _b : FALLBACK_LOGO_UNKNOWN_DEVICE, sx: { mr: 3, width: '20px', height: '20px' } })) }),
                                 } })));
                         }, onChange: (_event, value) => {
@@ -165,7 +167,7 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
                                                     setShowPassword((show) => !show);
                                                 }, onMouseDown: (event) => {
                                                     event.preventDefault();
-                                                }, edge: "end", children: showPassword ? (_jsx(FontAwesomeIcon, { icon: faEyeSlash })) : (_jsx(FontAwesomeIcon, { icon: faEye })) }) })),
+                                                }, edge: "end", children: showPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) }) })),
                                     },
                                 }, onChange: (event) => {
                                     onChange({ wifiKey: event.target.value });
@@ -192,8 +194,7 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
                                                 display: 'flex',
                                                 alignItems: 'center',
                                                 height: '1.5rem',
-                                                gap: 1,
-                                            }, children: _jsx(FontAwesomeIcon, { icon: faFileLines, fontSize: "1.15rem" }) })] }) }), _jsx(TextField, { name: "provisioningKeyName", value: (_a = model.provisioningKeyName) !== null && _a !== void 0 ? _a : '', slotProps: {
+                                            }, children: _jsx(ArticleIcon, { sx: { ml: 1, fontSize: '1.15rem' } }) })] }) }), _jsx(TextField, { name: "provisioningKeyName", value: (_a = model.provisioningKeyName) !== null && _a !== void 0 ? _a : '', slotProps: {
                                     htmlInput: {
                                         name: 'provisioningKeyName',
                                         autoComplete: 'provisioningKeyName-auto-complete',

package/dist/components/DownloadImageDialog/OsTypeSelector.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, InputLabel, MenuItem, Select, Tooltip, Typography, Stack, } from '@mui/material';
 import { getOsTypeName } from './utils';
+import ArticleIcon from '@mui/icons-material/Article';
 import { MUILinkWithTracking } from '../MUILinkWithTracking';
 import { OsTypesEnum } from './models';
 import { Chip } from '../Chip';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faFileLines } from '@fortawesome/free-solid-svg-icons';
 const OsTypeOption = ({ osType }) => {
     if (!osType) {
         return _jsx(Typography, { variant: "body1", children: "Select OS type..." });
@@ -31,7 +30,7 @@ export const OsTypeSelector = ({ supportedOsTypes, hasEsrVersions, selectedOsTyp
         };
     });
     const selectedOsType = selectOsTypes.find((osType) => osType.slug === selectedOsTypeSlug && osType.supportedForDeviceType);
-    return (_jsxs(Stack, { flex: 1, children: [_jsx(Stack, { direction: "row", alignItems: "center", gap: 1, children: _jsxs(InputLabel, { id: "newAppApplicationType-label", sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: ["OS type", _jsx(MUILinkWithTracking, { sx: { height: 12 }, href: "https://www.balena.io/docs/reference/OS/extended-support-release", children: _jsx(FontAwesomeIcon, { icon: faFileLines, fontSize: "1rem" }) })] }) }), _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(Stack, { flex: 1, children: [_jsx(Stack, { direction: "row", alignItems: "center", gap: 1, children: _jsxs(InputLabel, { id: "newAppApplicationType-label", sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: ["OS type", _jsx(MUILinkWithTracking, { sx: { height: 12 }, href: "https://www.balena.io/docs/reference/OS/extended-support-release", children: _jsx(ArticleIcon, { sx: { fontSize: '1rem' } }) })] }) }), _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

@@ -2,13 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Stack, Tooltip, Typography, } from '@mui/material';
 import { MUILinkWithTracking } from '../MUILinkWithTracking';
 import { getOsVariantDisplayText } from './utils';
+import { Lightbulb } from '@mui/icons-material';
 import { token } from '../../utils/token';
 import { Callout } from '../Callout';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faLightbulb } from '@fortawesome/free-solid-svg-icons';
 const variantInfo = (selected) => ({
     dev: {
-        title: (_jsxs(Stack, { gap: 1, direction: "row", alignItems: "center", children: [_jsx(Typography, { children: getOsVariantDisplayText('dev') }), _jsxs(Typography, { variant: "bodySm", color: token('color.text.accent'), alignItems: "center", display: "flex", children: [_jsx(FontAwesomeIcon, { icon: faLightbulb, width: 14, height: 14 }), "Recommended for first time users"] })] })),
+        title: (_jsxs(Stack, { gap: 1, direction: "row", alignItems: "center", children: [_jsx(Typography, { children: getOsVariantDisplayText('dev') }), _jsxs(Typography, { variant: "bodySm", color: token('color.text.accent'), alignItems: "center", display: "flex", children: [_jsx(Lightbulb, { sx: { width: 14, height: 14 } }), "Recommended for first time users"] })] })),
         description: (_jsxs(Stack, { gap: 1, children: [_jsxs(Typography, { 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", size: "sm", 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" }), "."] }))] })),
     },
     prod: {

package/dist/components/DownloadImageDialog/index.js

@@ -5,6 +5,7 @@ import { FALLBACK_LOGO_UNKNOWN_DEVICE, isUrlAccessible, stripVersionBuild, } fro
 import { ImageForm } from './ImageForm';
 import { ApplicationInstructions } from './ApplicationInstructions';
 import { DropDownButton } from '../DropDownButton';
+import DownloadIcon from '@mui/icons-material/Download';
 import pickBy from 'lodash/pickBy';
 import debounce from 'lodash/debounce';
 import isEmpty from 'lodash/isEmpty';
@@ -14,8 +15,6 @@ import { enqueueSnackbar } from 'notistack';
 import { DialogWithCloseButton } from '../DialogWithCloseButton';
 import { Callout } from '../Callout';
 import { Spinner } from '../Spinner';
-import { faDownload } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 const etcherLogoBase64 = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnPgogIDx0aXRsZT5FdGNoZXI8L3RpdGxlPgogIDxnIGlkPSJzdmdfMSIgc3Ryb2tlPSJudWxsIj4KICAgPHBhdGggaWQ9InN2Z18yIiBjbGFzcz0ic3QxIiBkPSJtNDEyLjkwMzgzLDM1OC4wNjcxM2wwLDE3MS40OTU4M2M3LjQ5MjU0LC0xLjY2NTAxIDE0LjE1MjU3LC0zLjMzMDAyIDIwLjgxMjYsLTcuNDkyNTRsMTQyLjM1ODE5LC04MS41ODUzOWMyMC44MTI2LC0xMS42NTUwNiAzMy4zMDAxNiwtMzQuMTMyNjYgMzMuMzAwMTYsLTU4LjI3NTI4bDAsLTE2Mi4zMzgyOGMwLC02LjY2MDAzIC0wLjgzMjUsLTEzLjMyMDA2IC0zLjMzMDAyLC0xOS4xNDc1OWwtMTU0LjAxMzI0LDg5LjA3NzkzYy0zMi40Njc2NiwyMi40Nzc2MSAtMzkuMTI3NjksNDMuMjkwMjEgLTM5LjEyNzY5LDY4LjI2NTMzbDAsLTAuMDAwMDF6IiBmaWxsPSIjQTVERTM3IiBzdHJva2U9Im51bGwiLz4KICAgPHBhdGggaWQ9InN2Z18zIiBjbGFzcz0ic3QyIiBkPSJtNjYyLjY1NTAzLDE2Ny40MjM3MWwtNTYuNjEwMjcsMzIuNDY3NjZjMS42NjUwMSw1LjgyNzUzIDMuMzMwMDIsMTIuNDg3NTYgMy4zMzAwMiwxOS4xNDc1OWwwLDE2My4xNzA3OWMwLDI0LjE0MjYyIC0xMy4zMjAwNiw0Ni42MjAyMiAtMzMuMzAwMTYsNTguMjc1MjhsLTE0Mi4zNTgxOSw4MS41ODUzOWMtNi42NjAwMywzLjMzMDAyIC0xMy4zMjAwNiw1LjgyNzUzIC0yMC44MTI2LDcuNDkyNTRsMCw2NC45MzUzMWM5Ljk5MDA1LC0xLjY2NTAxIDE5Ljk4MDEsLTQuOTk1MDIgMjguMzA1MTQsLTkuOTkwMDVsMTg0LjgxNTg5LC0xMDUuNzI4MDFjMjUuODA3NjIsLTE0Ljk4NTA3IDQxLjYyNTIsLTQyLjQ1NzcgNDEuNjI1MiwtNzIuNDI3ODVsMCwtMjExLjQ1NjAyYzAsLTkuMTU3NTQgLTEuNjY1MDEsLTE4LjMxNTA5IC00Ljk5NTAyLC0yNy40NzI2M2wtMC4wMDAwMSwweiIgZmlsbD0iI0M4RjE3OCIgc3Ryb2tlPSJudWxsIi8+CiAgIDxwYXRoIGlkPSJzdmdfNCIgY2xhc3M9InN0MSIgZD0ibTM5OS41ODM3NiwzMDMuOTU0MzZjOC4zMjUwNCwtMTMuMzIwMDYgMjAuODEyNiwtMjUuODA3NjIgMzkuMTI3NjksLTM2LjYzMDE4bDE1NS42NzgyNSwtODkuOTEwNDNjLTQuOTk1MDIsLTYuNjYwMDMgLTExLjY1NTA2LC0xMi40ODc1NiAtMTguMzE1MDksLTE2LjY1MDA4bC0xNDIuMzU4MTksLTgxLjU4NTM5Yy0yMC44MTI2LC0xMS42NTUwNiAtNDYuNjIwMjIsLTExLjY1NTA2IC02Ny40MzI4MiwwbC0xNDEuNTI1NjgsODEuNTg1MzljLTcuNDkyNTQsNC4xNjI1MiAtMTMuMzIwMDYsOS45OTAwNSAtMTkuMTQ3NTksMTYuNjUwMDhsMTU0Ljg0NTc1LDg5LjkxMDQzYzE4LjMxNTA5LDExLjY1NTA2IDMwLjgwMjY1LDIzLjMxMDExIDM5LjEyNzY5LDM2LjYzMDE4bC0wLjAwMDAxLDB6IiBmaWxsPSIjQTVERTM3IiBzdHJva2U9Im51bGwiLz4KICAgPHBhdGggaWQ9InN2Z181IiBjbGFzcz0ic3QyIiBkPSJtMjI0Ljc1NzkyLDE2MS41OTYxOGwxNDEuNTI1NjgsLTgxLjU4NTM5YzIwLjgxMjYsLTExLjY1NTA2IDQ2LjYyMDIyLC0xMS42NTUwNiA2Ny40MzI4MiwwbDE0Mi4zNTgxOSw4MS41ODUzOWM3LjQ5MjU0LDQuMTYyNTIgMTMuMzIwMDYsOS45OTAwNSAxOC4zMTUwOSwxNi42NTAwOGw1Ni42MTAyNywtMzIuNDY3NjZjLTYuNjYwMDMsLTkuMTU3NTQgLTE0Ljk4NTA3LC0xNi42NTAwOCAtMjQuOTc1MTIsLTIxLjY0NTFsLTE4NC44MTU4OSwtMTA3LjM5MzAyYy0yNS44MDc2MiwtMTQuOTg1MDcgLTU3LjQ0Mjc4LC0xNC45ODUwNyAtODMuMjUwNCwwbC0xODMuMTUwODgsMTA2LjU2MDUxYy05Ljk5MDA1LDUuODI3NTMgLTE4LjMxNTA5LDEzLjMyMDA2IC0yNC45NzUxMiwyMi40Nzc2MWw1Ni42MTAyNywzMi40Njc2NmM0LjE2MjUyLC02LjY2MDAzIDEwLjgyMjU1LC0xMi40ODc1NiAxOC4zMTUwOSwtMTYuNjUwMDh6IiBmaWxsPSIjQzhGMTc4IiBzdHJva2U9Im51bGwiLz4KICAgPHBhdGggaWQ9InN2Z182IiBjbGFzcz0ic3QyIiBkPSJtMzY2LjI4MzYsNTIyLjA3MDQxbC0xNDEuNTI1NjgsLTgxLjU4NTM5Yy0yMC44MTI2LC0xMS42NTUwNiAtMzMuMzAwMTYsLTM0LjEzMjY2IC0zMy4zMDAxNiwtNTguMjc1MjhsMCwtMTYzLjE3MDc5YzAsLTYuNjYwMDMgMC44MzI1LC0xMi40ODc1NiAyLjQ5NzUxLC0xOC4zMTUwOWwtNTYuNjEwMjcsLTMyLjQ2NzY2Yy0zLjMzMDAyLDkuMTU3NTQgLTQuOTk1MDIsMTcuNDgyNTggLTQuOTk1MDIsMjYuNjQwMTNsMCwyMTIuMjg4NTJjMCwyOS45NzAxNCAxNS44MTc1OCw1Ny40NDI3OCA0MS42MjUyLDcxLjU5NTM0bDE4My45ODMzOSwxMDUuNzI4MDFjOC4zMjUwNCw0Ljk5NTAyIDE4LjMxNTA5LDguMzI1MDQgMjguMzA1MTQsOS45OTAwNWwwLC02NC45MzUzMWMtNi42NjAwMywtMC44MzI1IC0xMy4zMjAwNiwtMy4zMzAwMiAtMTkuOTgwMSwtNy40OTI1NGwtMC4wMDAwMSwwLjAwMDAxeiIgZmlsbD0iI0M4RjE3OCIgc3Ryb2tlPSJudWxsIi8+CiAgIDxwYXRoIGlkPSJzdmdfNyIgY2xhc3M9InN0MSIgZD0ibTM0Ny4xMzYwMSwyODguOTY5MjlsLTE1My4xODA3NCwtODguMjQ1NDJjLTEuNjY1MDEsNS44Mjc1MyAtMi40OTc1MSwxMi40ODc1NiAtMi40OTc1MSwxOC4zMTUwOWwwLDE2My4xNzA3OWMwLDI0LjE0MjYyIDEyLjQ4NzU2LDQ2LjYyMDIyIDMzLjMwMDE2LDU4LjI3NTI4bDE0MS41MjU2OCw4MS41ODUzOWM2LjY2MDAzLDMuMzMwMDIgMTMuMzIwMDYsNS44Mjc1MyAyMC44MTI2LDcuNDkyNTRsMCwtMTcxLjQ5NTgzYy0wLjgzMjUsLTI0Ljk3NTEyIC03LjQ5MjU0LC00NS43ODc3MiAtMzkuOTYwMTksLTY5LjA5NzgzbDAsLTAuMDAwMDF6IiBmaWxsPSIjQTVERTM3IiBzdHJva2U9Im51bGwiLz4KICA8L2c+CiA8L2c+Cgo8L3N2Zz4=';
 const ETCHER_OPEN_IMAGE_URL = 'https://www.balena.io/etcher/open-image-url';
 export var ActionType;
@@ -151,7 +150,7 @@ export const DownloadImageDialog = ({ open, applicationId, releaseId, compatible
                     onDownloadStart === null || onDownloadStart === void 0 ? void 0 : onDownloadStart(formModel, ActionType.downloadOs);
                     formElement.current.submit();
                 }),
-                children: (_jsxs(_Fragment, { children: [_jsx(FontAwesomeIcon, { icon: faDownload }), " Download balenaOS", ' ', formModel.version && downloadSize ? ` (~${downloadSize})` : ''] })),
+                children: (_jsxs(_Fragment, { children: [_jsx(DownloadIcon, {}), " Download balenaOS", ' ', formModel.version && downloadSize ? ` (~${downloadSize})` : ''] })),
             },
         ];
         if (downloadConfig) {
@@ -165,7 +164,7 @@ export const DownloadImageDialog = ({ open, applicationId, releaseId, compatible
                     onDownloadStart === null || onDownloadStart === void 0 ? void 0 : onDownloadStart(formModel, ActionType.downloadConfigFile);
                     await downloadConfig(formModel);
                 },
-                children: (_jsxs(_Fragment, { children: [_jsx(FontAwesomeIcon, { icon: faDownload }), " Download configuration file only"] })),
+                children: (_jsxs(_Fragment, { children: [_jsx(DownloadIcon, {}), " Download configuration file only"] })),
             });
         }
         return dropDownButtonActions;

package/dist/components/DropDownButton/index.js

@@ -6,9 +6,8 @@ import { ButtonWithTracking } from '../ButtonWithTracking';
 import { useAnalyticsContext } from '../../contexts/AnalyticsContext';
 import groupBy from 'lodash/groupBy';
 import flatMap from 'lodash/flatMap';
+import { KeyboardArrowDown, KeyboardArrowUp, ArrowDropDown, ArrowDropUp, } from '@mui/icons-material';
 import { Tooltip } from '../Tooltip';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCaretDown, faCaretUp, faChevronDown, faChevronUp, } from '@fortawesome/free-solid-svg-icons';
 /**
  * This component implements a Dropdown button using MUI (This can be removed as soon as MUI implements it. Check
  * progress: https://mui.com/material-ui/discover-more/roadmap/#new-components)
@@ -50,9 +49,9 @@ 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(FontAwesomeIcon, { icon: faChevronUp })) : (_jsx(FontAwesomeIcon, { icon: faChevronDown })) }, 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, 
+                }, 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(FontAwesomeIcon, { icon: faCaretUp })) : (_jsx(FontAwesomeIcon, { icon: faCaretDown })) })] }))), _jsx(Menu, { 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);

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormControl, IconButton, InputAdornment, TextField, } from '@mui/material';
 import { Suspense, lazy, useState } from 'react';
-import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
 const PasswordStrength = lazy(async () => {
     const importedModule = await import('../PasswordStrength');
     return {
@@ -28,6 +27,6 @@ export const PasswordWidget = ({ id, label, value, disabled, name, placeholder,
                                 setShowPassword((show) => !show);
                             }, onMouseDown: (event) => {
                                 event.preventDefault();
-                            }, edge: "end", children: showPassword ? (_jsx(FontAwesomeIcon, { icon: faEyeSlash })) : (_jsx(FontAwesomeIcon, { icon: faEye })) }) })),
+                            }, edge: "end", children: showPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) }) })),
                 } }), options.showPasswordStrengthMeter && (_jsx(Suspense, { fallback: null, children: _jsx(PasswordStrength, { password: value }) }))] }));
 };

package/dist/components/RJST/components/Widget/Formats/HashWidget.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Code } from '@mui/icons-material';
 import { Copy } from '../../../../Copy';
 import { JsonTypes, truncateHash, widgetFactory } from '../utils';
 export const HashWidget = widgetFactory('Hash', {}, [JsonTypes.string])(({ value, }) => {
-    return _jsx(Copy, { copy: value, children: truncateHash(value) });
+    return (_jsx(Copy, { copy: value, children: _jsx(Code, { children: truncateHash(value) }) }));
 });

package/dist/components/TagManagementDialog/AddTagForm.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import * as uuid from 'uuid';
 import find from 'lodash/find';
 import startsWith from 'lodash/startsWith';
 import isEmpty from 'lodash/isEmpty';
@@ -9,6 +8,7 @@ import { Callout } from '../Callout';
 import { useTranslation } from '../../hooks/useTranslations';
 import { stopKeyDownEvent, withPreventDefault, } from '../../utils/eventHandling';
 import { SimpleConfirmationDialog, } from '../SimpleConfirmationDialog';
+import { useRandomUUID } from '../../hooks/useRandomUUID';
 const RESERVED_NAMESPACES = ['io.resin.', 'io.balena.'];
 const newTagValidationRules = (t, key, existingTags) => {
     return [
@@ -42,7 +42,8 @@ export const AddTagForm = ({ itemType, existingTags, overridableTags = [], addTa
     const [confirmationDialogOptions, setConfirmationDialogOptions] = React.useState();
     const tagKeyInput = React.useRef(null);
     const valueInput = React.useRef(null);
-    const formUuid = `add-tag-form-${uuid.v1()}`;
+    const formId = useRandomUUID();
+    const formUuid = `add-tag-form-${formId}`;
     const checkNewTagValidity = (key) => {
         const failedRule = newTagValidationRules(t, key, existingTags).find((rule) => rule.test());
         const hasErrors = !!failedRule;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "12.4.1-build-remove-unused-icon-abf38bf8f1d9d6827561fcd27fe2fe90534402d9-1",
+  "version": "12.4.1-build-upgrade-storybook-9-e3144c3663dd553c1ab03e825591993c6ffb3a41-1",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -17,6 +17,7 @@
     "@emotion/styled": "^11.10.6",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/icons-material": "^6.3.1",
     "@mui/lab": "6.0.0-beta.24",
     "@mui/material": "^6.3.1",
     "@mui/styled-engine-sc": "^6.3.1",
@@ -38,6 +39,7 @@
     "jest": "^29.7.0",
     "lodash": "^4.17.21",
     "notistack": "^3.0.1",
+    "qs": "^6.14.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
@@ -54,17 +56,11 @@
   },
   "devDependencies": {
     "@balena/lint": "^9.3.0",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-links": "^8.6.12",
-    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/addon-docs": "^9.0.0",
+    "@storybook/addon-links": "^9.0.0",
+    "@storybook/addon-onboarding": "^9.0.0",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/manager-api": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-webpack5": "^8.6.12",
-    "@storybook/test": "^8.6.12",
-    "@storybook/theming": "^8.6.12",
+    "@storybook/react-webpack5": "^9.0.0",
     "@types/color": "^4.2.0",
     "@types/color-hash": "^2.0.0",
     "@types/lodash": "^4.17.14",
@@ -74,11 +70,11 @@
     "@types/react-dom": "^18.0.11",
     "@types/react-helmet": "^6.1.6",
     "@types/zxcvbn": "^4.4.4",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-plugin-storybook": "^9.0.0",
     "husky": "^9.0.0",
     "lint-staged": "^15.0.0",
     "prop-types": "^15.8.1",
-    "storybook": "^8.6.12",
+    "storybook": "^9.0.0",
     "ts-loader": "^9.5.1",
     "webpack": "^5.88.2"
   },
@@ -137,6 +133,9 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2025-05-29T14:45:04.810Z"
+    "publishedAt": "2025-05-29T14:49:18.486Z"
+  },
+  "overrides": {
+    "storybook": "$storybook"
   }
 }