@balena/ui-shared-components 13.0.0-build-upgrade-storybook-9-438bc209db8ac0658743037813f035cdb3e395a8-1 → 13.0.0-build-rename-and-require-widget-extracontext-8a761b0e057cdaba8527bd7cde97ff3ea5faa969-1

package/dist/components/CollapsedList/index.js

@@ -1,8 +1,9 @@
 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 ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown';
+import { faCaretUp } from '@fortawesome/free-solid-svg-icons/faCaretUp';
 /**
  * This will collapse a long list and allow to expand it by clicking the "expand" button.
  */
@@ -21,5 +22,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(ArrowDropUpIcon, {}) : _jsx(ArrowDropDownIcon, {})] }))] }));
+                }, children: [showMore ? 'Less' : 'More', showMore ? (_jsx(FontAwesomeIcon, { icon: faCaretUp })) : (_jsx(FontAwesomeIcon, { icon: faCaretDown }))] }))] }));
 };

package/dist/components/DownloadImageDialog/ApplicationInstructions.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import has from 'lodash/has';
 import { interpolateMustache } from './utils';
 import { Box, List, Tab, Tabs, Typography } from '@mui/material';
-import { memo, useEffect, useMemo, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { MUILinkWithTracking } from '../MUILinkWithTracking';
 import { OrderedListItem } from '../OrderedListItem';
 import { Markdown } from '../Markdown';
@@ -19,50 +19,38 @@ export const getUserOs = () => {
     }
     return 'Unknown';
 };
-const dtJsonTocontractOsKeyMap = {
-    windows: 'Windows',
-    osx: 'MacOS',
-    linux: 'Linux',
-};
 export const ApplicationInstructions = memo(function ApplicationInstructions({ deviceType, templateData, }) {
     var _a;
     const [currentOs, setCurrentOs] = useState(getUserOs());
-    const instructions = useMemo(() => {
-        if ((deviceType === null || deviceType === void 0 ? void 0 : deviceType.instructions) == null ||
-            Array.isArray(deviceType.instructions) ||
-            typeof deviceType.instructions !== 'object') {
-            return deviceType === null || deviceType === void 0 ? void 0 : deviceType.instructions;
-        }
-        const instructionsByOs = deviceType.instructions;
-        return Object.fromEntries(Object.entries(instructionsByOs).map(([key, value]) => {
-            const normalizedKey = key in dtJsonTocontractOsKeyMap
-                ? dtJsonTocontractOsKeyMap[key]
-                : key;
-            return [normalizedKey, value];
-        }));
-    }, [deviceType === null || deviceType === void 0 ? void 0 : deviceType.instructions]);
-    const hasOsSpecificInstructions = !Array.isArray(instructions);
+    const hasOsSpecificInstructions = !Array.isArray(deviceType.instructions);
     const normalizedOs = currentOs === 'Unknown' ? 'Linux' : currentOs;
     useEffect(() => {
-        if (hasOsSpecificInstructions && instructions) {
-            const oses = Object.keys(instructions);
+        if (hasOsSpecificInstructions && deviceType.instructions) {
+            const oses = Object.keys(deviceType.instructions);
             if (!oses.includes(currentOs) && oses.length > 0) {
                 setCurrentOs(oses[0]);
             }
         }
-    }, [currentOs, setCurrentOs, instructions, hasOsSpecificInstructions]);
-    if (!deviceType || !instructions) {
+    }, [
+        currentOs,
+        setCurrentOs,
+        deviceType.instructions,
+        hasOsSpecificInstructions,
+    ]);
+    if (!deviceType.instructions) {
         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] : instructions)) === null || _a === void 0 ? void 0 : _a.map((instruction) => interpolateMustache(templateData, instruction.replace(/<a/, '<a target="_blank"')));
+    const interpolatedInstructions = (_a = (hasOsSpecificInstructions
+        ? deviceType.instructions[normalizedOs]
+        : deviceType.instructions)) === null || _a === void 0 ? void 0 : _a.map((instruction) => interpolateMustache(templateData, instruction.replace(/<a/, '<a target="_blank"')));
     const finalInstructions = [
         'Use the form on the left to configure and download balenaOS for your new device.',
         ...interpolatedInstructions,
         'Your device should appear in your application dashboard within a few minutes. Have fun!',
     ];
-    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) => {
+    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(deviceType.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) => {
+                        }, "aria-label": "os tabs", children: Object.keys(deviceType.instructions).map((os) => {
                             return _jsx(Tab, { label: os, value: os }, os);
                         }) }) }) })), _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" }), "."] }) })] }));
 });

package/dist/components/DownloadImageDialog/ImageForm.js

@@ -1,17 +1,15 @@
 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 ArticleIcon from '@mui/icons-material/Article';
+import { faFileLines } from '@fortawesome/free-solid-svg-icons/faFileLines';
 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 { faChevronRight, faEye, faEyeSlash, faQuestionCircle, 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';
@@ -120,7 +118,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(HelpIcon, { color: "info", sx: { 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(FontAwesomeIcon, { icon: faQuestionCircle, color: "info", 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) => {
@@ -167,7 +165,7 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
                                                     setShowPassword((show) => !show);
                                                 }, onMouseDown: (event) => {
                                                     event.preventDefault();
-                                                }, edge: "end", children: showPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) }) })),
+                                                }, edge: "end", children: showPassword ? (_jsx(FontAwesomeIcon, { icon: faEyeSlash })) : (_jsx(FontAwesomeIcon, { icon: faEye })) }) })),
                                     },
                                 }, onChange: (event) => {
                                     onChange({ wifiKey: event.target.value });
@@ -194,7 +192,8 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
                                                 display: 'flex',
                                                 alignItems: 'center',
                                                 height: '1.5rem',
-                                            }, children: _jsx(ArticleIcon, { sx: { ml: 1, fontSize: '1.15rem' } }) })] }) }), _jsx(TextField, { name: "provisioningKeyName", value: (_a = model.provisioningKeyName) !== null && _a !== void 0 ? _a : '', slotProps: {
+                                                gap: 1,
+                                            }, children: _jsx(FontAwesomeIcon, { icon: faFileLines, 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,10 +1,12 @@
 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';
+// TODO: replace with PRO version if we will have access to it
+import { faFileLines } from '@fortawesome/free-solid-svg-icons';
 const OsTypeOption = ({ osType }) => {
     if (!osType) {
         return _jsx(Typography, { variant: "body1", children: "Select OS type..." });
@@ -30,7 +32,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(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) => {
+    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) => {
                     const osType = selectOsTypes.find((os) => os.slug === event.target.value);
                     if (!osType.disabled) {
                         onSelectedOsTypeChange(osType.slug);

package/dist/components/DownloadImageDialog/VariantSelector.js

@@ -2,12 +2,13 @@ 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(Lightbulb, { sx: { 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(FontAwesomeIcon, { icon: faLightbulb, 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,7 +5,6 @@ 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';
@@ -15,6 +14,8 @@ 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;
@@ -150,7 +151,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(DownloadIcon, {}), " Download balenaOS", ' ', formModel.version && downloadSize ? ` (~${downloadSize})` : ''] })),
+                children: (_jsxs(_Fragment, { children: [_jsx(FontAwesomeIcon, { icon: faDownload }), " Download balenaOS", ' ', formModel.version && downloadSize ? ` (~${downloadSize})` : ''] })),
             },
         ];
         if (downloadConfig) {
@@ -164,7 +165,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(DownloadIcon, {}), " Download configuration file only"] })),
+                children: (_jsxs(_Fragment, { children: [_jsx(FontAwesomeIcon, { icon: faDownload }), " Download configuration file only"] })),
             });
         }
         return dropDownButtonActions;

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

@@ -29,40 +29,11 @@ export interface OsVersion {
 export interface OsVersionsByDeviceType {
     [deviceTypeSlug: string]: OsVersion[];
 }
-/** @deprecated the legacy device-type.json format */
-export interface OsSpecificDeviceTypeJsonInstructions {
-    linux: string[];
-    osx: string[];
-    windows: string[];
-}
 export type OsSpecificContractInstructions = Record<'Linux' | 'MacOS' | 'Windows', string[]>;
 export interface DeviceTypeDownloadAlert {
     type: string;
     message: string;
 }
-/** @deprecated */
-export interface DeviceTypeOptions {
-    options: DeviceTypeOptionsGroup[];
-    collapsed: boolean;
-    isCollapsible: boolean;
-    isGroup: boolean;
-    message: string;
-    name: string;
-}
-/** @deprecated */
-export interface DeviceTypeOptionsGroup {
-    default: number | string;
-    message: string;
-    name: string;
-    type: string;
-    min?: number;
-    max?: number;
-    docs?: string;
-    hidden?: boolean;
-    when?: Dictionary<number | string | boolean>;
-    choices?: string[] | number[];
-    choicesLabels?: Dictionary<string>;
-}
 export interface DeviceType {
     slug: string;
     name: string;
@@ -70,7 +41,5 @@ export interface DeviceType {
     contract?: Record<string, any> | null;
     /** @deprecated */
     imageDownloadAlerts?: DeviceTypeDownloadAlert[];
-    instructions?: string[] | OsSpecificDeviceTypeJsonInstructions | OsSpecificContractInstructions;
-    /** @deprecated */
-    options?: DeviceTypeOptions[];
+    instructions?: string[] | OsSpecificContractInstructions;
 }

package/dist/components/DropDownButton/index.js

@@ -6,8 +6,9 @@ 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)
@@ -49,9 +50,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(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, 
+                }, 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, 
                         // 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, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => {
+                        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: () => {
                     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,7 +1,8 @@
 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 { Visibility, VisibilityOff } from '@mui/icons-material';
+import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 const PasswordStrength = lazy(async () => {
     const importedModule = await import('../PasswordStrength');
     return {
@@ -27,6 +28,6 @@ export const PasswordWidget = ({ id, label, value, disabled, name, placeholder,
                                 setShowPassword((show) => !show);
                             }, onMouseDown: (event) => {
                                 event.preventDefault();
-                            }, edge: "end", children: showPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) }) })),
+                            }, edge: "end", children: showPassword ? (_jsx(FontAwesomeIcon, { icon: faEyeSlash })) : (_jsx(FontAwesomeIcon, { icon: faEye })) }) })),
                 } }), options.showPasswordStrengthMeter && (_jsx(Suspense, { fallback: null, children: _jsx(PasswordStrength, { password: value }) }))] }));
 };

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

@@ -61,7 +61,7 @@ export const SelectWidget = ({ id, label, value, disabled, name, placeholder, on
                     ? option.some((o) => o.disabled)
                     : !!option.disabled, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { slotProps: {
                         htmlInput: Object.assign(Object.assign({}, params.inputProps), (inputProps !== null && inputProps !== void 0 ? inputProps : {})),
-                    } }, (multiple && {
+                    }, placeholder: placeholder }, (multiple && {
                     onKeyDown: (e) => {
                         // Prevent deleting the last chip with backspace or delete https://github.com/mui/material-ui/issues/21129#issuecomment-636919142
                         if (e.key === 'Backspace' || e.key === 'Delete') {

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

@@ -4,7 +4,7 @@ import { faTimesCircle } from '@fortawesome/free-solid-svg-icons/faTimesCircle';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { JsonTypes, widgetFactory } from '../utils';
 import { Box, Typography } from '@mui/material';
-export const BooleanAsIconWidget = widgetFactory('BooleanAsIcon', {}, [
+export const BooleanAsIconWidget = widgetFactory('BooleanAsIcon', [
     JsonTypes.boolean,
     JsonTypes.number,
     JsonTypes.null,

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

@@ -3,6 +3,6 @@ import { Tooltip } from '@mui/material';
 import { Copy } from '../../../../Copy';
 import { JsonTypes, widgetFactory } from '../utils';
 import { Code } from '../../../../Code';
-export const CodeWidget = widgetFactory('Code', {}, [JsonTypes.string])(({ value, }) => {
+export const CodeWidget = widgetFactory('Code', [JsonTypes.string])(({ value, }) => {
     return (_jsx(Copy, { copy: value, children: _jsx(Tooltip, { title: value, children: _jsx(Code, { noWrap: true, children: value }) }) }));
 });

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

@@ -3,7 +3,7 @@ import { Tooltip, Typography } from '@mui/material';
 import { useTranslation } from '../../../../../hooks/useTranslations';
 import { JsonTypes, widgetFactory } from '../utils';
 import { token } from '../../../../../utils/token';
-export const DisabledTextWidget = widgetFactory('DisabledText', {}, [
+export const DisabledTextWidget = widgetFactory('DisabledText', [
     JsonTypes.string,
     JsonTypes.number,
     JsonTypes.null,

package/dist/components/RJST/components/Widget/Formats/DurationWidget.d.ts

@@ -1,6 +1 @@
-export declare const DurationWidget: import("../utils").Widget<object, {
-    value: {
-        start?: number | Date | null;
-        end?: number | Date | null;
-    };
-}>;
+export declare const DurationWidget: import("../utils").Widget<object, object>;

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { intervalToDuration } from 'date-fns';
 import { JsonTypes, widgetFactory } from '../utils';
 import { Typography } from '@mui/material';
-export const DurationWidget = widgetFactory('Duration', {}, [JsonTypes.object])(({ value, }) => {
+export const DurationWidget = widgetFactory('Duration', [JsonTypes.object])(({ value }) => {
     const duration = React.useMemo(() => {
         var _a, _b, _c;
         if (!value.start || !value.end) {

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

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { UiOption, JsonTypes, widgetFactory, formatTimestamp, timeSince, } from '../utils';
 import { Material, Tooltip } from '../../../../..';
 const { Typography } = Material;
-export const ElapsedTimeWidget = widgetFactory('ElapsedTime', {
+export const ElapsedTimeWidget = widgetFactory('ElapsedTime', [JsonTypes.string, JsonTypes.number], {
     dtFormat: UiOption.string,
-}, [JsonTypes.string, JsonTypes.number])(({ value }) => {
+})(({ value }) => {
     if (!value) {
         return null;
     }

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

@@ -1,7 +1,6 @@
 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: _jsx(Code, { children: truncateHash(value) }) }));
+export const HashWidget = widgetFactory('Hash', [JsonTypes.string])(({ value, }) => {
+    return _jsx(Copy, { copy: value, children: truncateHash(value) });
 });

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

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { JsonTypes, widgetFactory } from '../utils';
-export const PercentageWidget = widgetFactory('Percentage', {}, [
+export const PercentageWidget = widgetFactory('Percentage', [
     JsonTypes.string,
     JsonTypes.number,
 ])(({ value }) => {

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
 import { JsonTypes, widgetFactory } from '../utils';
 import { token } from '../../../../../utils/token';
-export const PlaceholderTextWidget = widgetFactory('PlaceholderText', {}, [
+export const PlaceholderTextWidget = widgetFactory('PlaceholderText', [
     JsonTypes.string,
     JsonTypes.number,
     JsonTypes.null,

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

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { JsonTypes, widgetFactory } from '../utils';
-export const TemperatureWidget = widgetFactory('Temperature', {}, [
+export const TemperatureWidget = widgetFactory('Temperature', [
     JsonTypes.number,
 ])(({ value }) => {
     return _jsx(_Fragment, { children: value ? `~${value}°C` : '-' });

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

@@ -19,7 +19,14 @@ const getArrayValue = (value, uiSchema) => {
     return arrayString;
 };
 const DATE_TIME_FORMATS = ['date-time', 'date', 'time'];
-const TxtWidget = widgetFactory('Txt', {
+const TxtWidget = widgetFactory('Txt', [
+    JsonTypes.string,
+    JsonTypes.null,
+    JsonTypes.integer,
+    JsonTypes.number,
+    JsonTypes.boolean,
+    JsonTypes.array,
+], {
     dtFormat: UiOption.string,
     align: Object.assign(Object.assign({}, UiOption.string), { enum: ['inherit', 'left', 'center', 'right', 'justify'] }),
     gutterBottom: UiOption.bolean,
@@ -27,14 +34,7 @@ const TxtWidget = widgetFactory('Txt', {
     paragraph: UiOption.boolean,
     sx: UiOption.object,
     variant: UiOption.string,
-}, [
-    JsonTypes.string,
-    JsonTypes.null,
-    JsonTypes.integer,
-    JsonTypes.number,
-    JsonTypes.boolean,
-    JsonTypes.array,
-])(({ value, schema, uiSchema }) => {
+})(({ value, schema, uiSchema }) => {
     var _a;
     let displayValue = isArray(value)
         ? getArrayValue(value, uiSchema)

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
 import { JsonTypes, widgetFactory } from '../utils';
-export const WrapWidget = widgetFactory('Wrap', {}, [JsonTypes.string])(({ value, }) => {
+export const WrapWidget = widgetFactory('Wrap', [JsonTypes.string])(({ value, }) => {
     return (_jsx(Typography, { sx: { maxWidth: '475px', whitespace: 'normal' }, children: value }));
 });

package/dist/components/RJST/components/Widget/index.d.ts

@@ -1,2 +1,2 @@
 import type { WidgetProps } from './utils';
-export declare const Widget: ({ value, extraContext, schema, extraFormats, uiSchema, }: WidgetProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Widget: ({ value, resource, schema, extraFormats, uiSchema, }: WidgetProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/RJST/components/Widget/index.js

@@ -31,7 +31,7 @@ const getWidget = (value, format, uiSchemaWidget, extraFormats) => {
     });
     return (_b = (_a = extraFormat === null || extraFormat === void 0 ? void 0 : extraFormat.widget) !== null && _a !== void 0 ? _a : typeWidgets[valueType]) !== null && _b !== void 0 ? _b : typeWidgets.default;
 };
-export const Widget = ({ value, extraContext, schema = {}, extraFormats, uiSchema, }) => {
+export const Widget = ({ value, resource, schema = {}, extraFormats, uiSchema, }) => {
     const format = getSchemaFormat(schema);
     if (!format) {
         return _jsx(_Fragment, { children: value });
@@ -43,5 +43,5 @@ export const Widget = ({ value, extraContext, schema = {}, extraFormats, uiSchem
         return null;
     }
     const WidgetComponent = getWidget(processedValue, format, undefined, extraFormats);
-    return (_jsx(WidgetComponent, { extraContext: extraContext, value: processedValue !== null && processedValue !== void 0 ? processedValue : null, schema: schema }));
+    return (_jsx(WidgetComponent, { resource: resource, value: processedValue !== null && processedValue !== void 0 ? processedValue : null, schema: schema }));
 };

package/dist/components/RJST/components/Widget/utils.d.ts

@@ -19,7 +19,7 @@ export interface WidgetProps<T extends object = object> {
     schema: JSONSchema | undefined;
     extraFormats?: Format[];
     uiSchema?: UiSchema;
-    extraContext?: T;
+    resource: T;
 }
 export interface Widget<T extends object = object, ExtraProps = object> {
     uiOptions?: UiOptions;
@@ -49,7 +49,7 @@ export type UiOptions = {
     [key: string]: JSONSchema;
 };
 export declare const UiOption: UiOptions;
-export declare const widgetFactory: <ST extends Array<keyof JsonTypesTypeMap>>(displayName: string, uiOptions: Widget["uiOptions"], supportedTypes: ST) => <T extends object, ExtraProps extends object = object, V extends WidgetProps["value"] | null = JsonTypesTypeMap[ST[number]]>(widgetFn: (props: Overwrite<WidgetProps<T>, {
+export declare const widgetFactory: <ST extends Array<keyof JsonTypesTypeMap>>(displayName: string, supportedTypes: ST, uiOptions?: Widget["uiOptions"]) => <T extends object, ExtraProps extends object = object, V extends WidgetProps["value"] | null = JsonTypesTypeMap[ST[number]]>(widgetFn: (props: Overwrite<WidgetProps<T>, {
     value: V;
 }> & ExtraProps) => JSX.Element | null) => Widget<T, ExtraProps>;
 export declare const formatTimestamp: (timestamp: string | number, uiSchema?: UiSchema) => string;

package/dist/components/RJST/components/Widget/utils.js

@@ -33,7 +33,9 @@ export const UiOption = {
 // TODO: Replace the HOF with a plain function once TS supports optional generic types
 // See: https://github.com/microsoft/TypeScript/issues/14400
 // TODO: convert the fn args to an object once we bump TS
-export const widgetFactory = (displayName, uiOptions, supportedTypes) => {
+export const widgetFactory = (displayName, supportedTypes, 
+// TODO: Implement a way to pass these from RJST to widgets. Likely by adding a uiSchema property or something
+uiOptions = {}) => {
     return (widgetFn) => {
         const widget = widgetFn;
         Object.assign(widget, {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { RJSTSdk, RJSTAction, RJSTModel, RJSTBaseResource, RJSTRawModel } from './schemaOps';
 import { rjstJsonSchemaPick, rjstAddToSchema, generateSchemaFromRefScheme, getPropertyScheme, getSubSchemaFromRefScheme, parseDescription, parseDescriptionProperty } from './schemaOps';
 import type { JSONSchema7 as JSONSchema } from 'json-schema';
-import { rjstDefaultPermissions, rjstGetModelForCollection, rjstGetModelForCollection2, rjstRunTransformers } from './models/helpers';
+import { rjstDefaultPermissions, rjstGetModelForCollection, rjstRunTransformers } from './models/helpers';
 import { rjstGetDisabledReason } from './utils';
 import type { LensTemplate } from './Lenses';
 import type { BoxProps } from '@mui/material';
@@ -58,4 +58,4 @@ export interface RJSTProps<T> extends Omit<BoxProps, 'onChange'> {
     persistFilters?: boolean;
 }
 export declare const RJST: <T extends RJSTBaseResource<T>>({ model: modelRaw, data, formats, actions, sdk, customSort, refresh, getBaseUrl, onEntityClick, onChange, pagination, customLenses, loading, rowKey, noDataInfo, persistFilters, ...boxProps }: RJSTProps<T>) => import("react/jsx-runtime").JSX.Element;
-export { rjstRunTransformers, rjstDefaultPermissions, rjstGetModelForCollection, rjstGetModelForCollection2, rjstAddToSchema, type RJSTAction, type RJSTBaseResource, type RJSTRawModel, type RJSTModel, rjstJsonSchemaPick, rjstGetDisabledReason, getPropertyScheme, getSubSchemaFromRefScheme, parseDescription, parseDescriptionProperty, generateSchemaFromRefScheme, };
+export { rjstRunTransformers, rjstDefaultPermissions, rjstGetModelForCollection, rjstAddToSchema, type RJSTAction, type RJSTBaseResource, type RJSTRawModel, type RJSTModel, rjstJsonSchemaPick, rjstGetDisabledReason, getPropertyScheme, getSubSchemaFromRefScheme, parseDescription, parseDescriptionProperty, generateSchemaFromRefScheme, };

package/dist/components/RJST/index.js

@@ -8,7 +8,7 @@ import { Filters } from './Filters/Filters';
 import { Tags } from './Actions/Tags';
 import { Update } from './Actions/Update';
 import { Create } from './Actions/Create';
-import { rjstDefaultPermissions, rjstGetModelForCollection, rjstGetModelForCollection2, rjstRunTransformers, } from './models/helpers';
+import { rjstDefaultPermissions, rjstGetModelForCollection, rjstRunTransformers, } from './models/helpers';
 import { rjstGetDisabledReason, getFromLocalStorage, getTagsDisabledReason, setToLocalStorage, getSortingFunction, DEFAULT_ITEMS_PER_PAGE, } from './utils';
 import { getLenses } from './Lenses';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -278,7 +278,7 @@ export const RJST = (_a) => {
                         setSelected: $setSelected,
                     })] }) }) })));
 };
-export { rjstRunTransformers, rjstDefaultPermissions, rjstGetModelForCollection, rjstGetModelForCollection2, rjstAddToSchema, rjstJsonSchemaPick, rjstGetDisabledReason, getPropertyScheme, getSubSchemaFromRefScheme, parseDescription, parseDescriptionProperty, generateSchemaFromRefScheme, };
+export { rjstRunTransformers, rjstDefaultPermissions, rjstGetModelForCollection, rjstAddToSchema, rjstJsonSchemaPick, rjstGetDisabledReason, getPropertyScheme, getSubSchemaFromRefScheme, parseDescription, parseDescriptionProperty, generateSchemaFromRefScheme, };
 const getTitleAndLabel = (t, jsonSchema, propertyKey, refScheme) => {
     var _a, _b, _c;
     const subSchema = getSubSchemaFromRefScheme(jsonSchema, refScheme);
@@ -378,7 +378,7 @@ const getColumnsFromSchema = ({ t, schema, idField, isServerSide, customSort, pr
                     ? fieldCustomSort
                     : getSortingFunction(key, val), render: (fieldVal, entry) => {
                 const calculatedField = rjstAdaptRefScheme(fieldVal, val);
-                return (_jsx(Widget, { extraFormats: [...(formats !== null && formats !== void 0 ? formats : []), ...defaultFormats], schema: widgetSchema, value: calculatedField, extraContext: entry }));
+                return (_jsx(Widget, { extraFormats: [...(formats !== null && formats !== void 0 ? formats : []), ...defaultFormats], schema: widgetSchema, value: calculatedField, resource: entry }));
             } });
     });
 };

package/dist/components/RJST/models/helpers.d.ts

@@ -9,9 +9,5 @@ export declare const rjstDefaultPermissions: {
     delete: boolean;
 };
 export declare const rjstRunTransformers: <T extends Dictionary<any>, TResult extends T, TContext = null>(data: T | undefined, transformers: Transformers<T, Omit<TResult, keyof T>, TContext>, context?: TContext) => TResult | undefined;
-/** @deprecated This function will be removed in the next major. Use rjstGetModelForCollection2 instead */
-export declare const rjstGetModelForCollection: <T>(model: RJSTRawModel<T>, context?: {
-    accessRole?: string | null;
-}) => RJSTModel<T>;
-export declare const rjstGetModelForCollection2: <T>(model: RJSTRawModel<T>, permissions: Permissions<T>) => RJSTModel<T>;
+export declare const rjstGetModelForCollection: <T>(model: RJSTRawModel<T>, permissions: Permissions<T>) => RJSTModel<T>;
 export {};

package/dist/components/RJST/models/helpers.js

@@ -28,23 +28,8 @@ export const rjstRunTransformers = (data, transformers, context) => {
     }
     return mutatedData;
 };
-// TODO: Drop me in the next major
-/** @deprecated This function will be removed in the next major. Use rjstGetModelForCollection2 instead */
 // This transformation would happen elsewhere, and it wouldn't be part of RJST
-export const rjstGetModelForCollection = (model, context) => {
-    const accessRole = context === null || context === void 0 ? void 0 : context.accessRole;
-    const schema = model.priorities
-        ? rjstJsonSchemaPick(model.schema, [
-            ...model.priorities.primary,
-            ...model.priorities.secondary,
-            ...model.priorities.tertiary,
-        ])
-        : model.schema;
-    return Object.assign(Object.assign({}, model), { permissions: (accessRole != null && model.permissions[accessRole]) ||
-            model.permissions['default'], schema });
-};
-// This transformation would happen elsewhere, and it wouldn't be part of RJST
-export const rjstGetModelForCollection2 = (model, permissions) => {
+export const rjstGetModelForCollection = (model, permissions) => {
     const schema = model.priorities
         ? rjstJsonSchemaPick(model.schema, [
             ...model.priorities.primary,

package/dist/index.d.ts

@@ -74,7 +74,7 @@ export { SettingsCard, SettingsCardItem } from './components/SettingsCard';
 export { Tag, type TagProps, type TagItem } from './components/Tag';
 export { TagManagementDialog, type TagManagementDialogProps, } from './components/TagManagementDialog';
 export { AnalyticsContextProvider, useAnalyticsContext, AnalyticsStoreActions, } from './contexts/AnalyticsContext';
-export { RJST, type RJSTProps, rjstRunTransformers, rjstDefaultPermissions, rjstGetModelForCollection, rjstGetModelForCollection2, rjstAddToSchema, type RJSTAction, type RJSTBaseResource, type RJSTRawModel, type RJSTModel, rjstJsonSchemaPick, rjstGetDisabledReason, type NoDataInfo, getPropertyScheme, getSubSchemaFromRefScheme, parseDescription, parseDescriptionProperty, generateSchemaFromRefScheme, } from './components/RJST';
+export { RJST, type RJSTProps, rjstRunTransformers, rjstDefaultPermissions, rjstGetModelForCollection, rjstAddToSchema, type RJSTAction, type RJSTBaseResource, type RJSTRawModel, type RJSTModel, rjstJsonSchemaPick, rjstGetDisabledReason, type NoDataInfo, getPropertyScheme, getSubSchemaFromRefScheme, parseDescription, parseDescriptionProperty, generateSchemaFromRefScheme, } from './components/RJST';
 export { removeFieldsWithNoFilter, modifySchemaWithRefSchemes, removeRefSchemeSeparatorsFromFilters, } from './components/RJST/Filters/utils';
 export type { PineFilterObject } from './components/RJST/oData/jsonToOData';
 export { type FormData, FULL_TEXT_SLUG, ajvFilter, getPropertySchema, parseFilterDescription, createModelFilter, createFilter, createFullTextSearchFilter, convertSchemaToDefaultValue, } from './components/RJST/components/Filters/SchemaSieve';

package/dist/index.js

@@ -39,7 +39,7 @@ export { SettingsCard, SettingsCardItem } from './components/SettingsCard';
 export { Tag } from './components/Tag';
 export { TagManagementDialog, } from './components/TagManagementDialog';
 export { AnalyticsContextProvider, useAnalyticsContext, AnalyticsStoreActions, } from './contexts/AnalyticsContext';
-export { RJST, rjstRunTransformers, rjstDefaultPermissions, rjstGetModelForCollection, rjstGetModelForCollection2, rjstAddToSchema, rjstJsonSchemaPick, rjstGetDisabledReason, getPropertyScheme, getSubSchemaFromRefScheme, parseDescription, parseDescriptionProperty, generateSchemaFromRefScheme, } from './components/RJST';
+export { RJST, rjstRunTransformers, rjstDefaultPermissions, rjstGetModelForCollection, rjstAddToSchema, rjstJsonSchemaPick, rjstGetDisabledReason, getPropertyScheme, getSubSchemaFromRefScheme, parseDescription, parseDescriptionProperty, generateSchemaFromRefScheme, } from './components/RJST';
 export { removeFieldsWithNoFilter, modifySchemaWithRefSchemes, removeRefSchemeSeparatorsFromFilters, } from './components/RJST/Filters/utils';
 export { FULL_TEXT_SLUG, ajvFilter, getPropertySchema, parseFilterDescription, createModelFilter, createFilter, createFullTextSearchFilter, convertSchemaToDefaultValue, } from './components/RJST/components/Filters/SchemaSieve';
 export { Filters, } from './components/RJST/components/Filters';

package/dist/theme.js

@@ -860,6 +860,7 @@ export const theme = createTheme({
         MuiTooltip: {
             defaultProps: {
                 arrow: true,
+                disableInteractive: true,
             },
             styleOverrides: {
                 tooltip: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "13.0.0-build-upgrade-storybook-9-438bc209db8ac0658743037813f035cdb3e395a8-1",
+  "version": "13.0.0-build-rename-and-require-widget-extracontext-8a761b0e057cdaba8527bd7cde97ff3ea5faa969-1",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -17,7 +17,6 @@
     "@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",
@@ -39,6 +38,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",
@@ -71,7 +71,7 @@
     "@types/zxcvbn": "^4.4.4",
     "eslint-plugin-storybook": "^9.0.0",
     "husky": "^9.0.0",
-    "lint-staged": "^15.0.0",
+    "lint-staged": "^16.0.0",
     "prop-types": "^15.8.1",
     "storybook": "^9.0.0",
     "ts-loader": "^9.5.1",
@@ -89,9 +89,6 @@
     "build-storybook": "storybook build --docs",
     "deploy-docs": "npm ci && storybook build --docs && mv storybook-static build"
   },
-  "engines": {
-    "node": "^22.0.0"
-  },
   "eslintConfig": {
     "extends": [
       "react-app",
@@ -135,7 +132,7 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2025-05-29T12:37:00.772Z"
+    "publishedAt": "2025-07-23T12:03:49.761Z"
   },
   "overrides": {
     "storybook": "$storybook"