@balena/ui-shared-components 5.1.0 → 5.2.0-build-spinner-1983f8cedfb5b10c4e6e61effe5e97db93ff8d8a-1

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

@@ -0,0 +1,15 @@
+import { BoxProps } from '@mui/material';
+export interface SpinnerProps extends Pick<BoxProps, 'sx' | 'children'> {
+    show?: boolean;
+    label?: string;
+    zIndex?: number;
+    bgVariant?: 'light' | 'dark';
+    size?: keyof typeof SIZE_MAPPING;
+}
+declare const SIZE_MAPPING: {
+    small: string;
+    medium: string;
+    large: string;
+};
+export declare const Spinner: ({ show, children, label, sx, zIndex, bgVariant, size, }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Spinner/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, CircularProgress, Typography, Backdrop, } from '@mui/material';
+import { color } from '@balena/design-tokens';
+// TODO use design tokens when available
+const SIZE_MAPPING = {
+    small: '14px',
+    medium: '20px',
+    large: '24px',
+};
+export const Spinner = ({ show = true, children, label, sx, zIndex, bgVariant = 'light', size = 'medium', }) => {
+    const SpinnerContent = (_jsxs(_Fragment, { children: [_jsx(CircularProgress, { size: SIZE_MAPPING[size] }), label != null && (_jsx(Typography, Object.assign({ color: bgVariant === 'dark' ? color.text.inverse.value : 'default' }, { children: label })))] }));
+    return children ? (_jsxs(Box, Object.assign({ position: "relative", height: "100%" }, { children: [children, _jsx(Backdrop, Object.assign({ sx: [
+                    {
+                        gap: 1,
+                        position: 'absolute',
+                        backgroundColor: bgVariant === 'light' ? color.bg.overlay.light.value : null,
+                    },
+                    ...(Array.isArray(sx) ? sx : [sx]),
+                ], open: show }, { children: SpinnerContent }))] }))) : (_jsx(Box, Object.assign({ sx: [
+            Object.assign({ display: show ? 'flex' : 'none', alignItems: 'center', justifyContent: 'center', gap: 1, height: '100%', width: '100%' }, (zIndex != null && { zIndex })),
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        } }, { children: SpinnerContent })));
+};

package/dist/index.d.ts

@@ -34,6 +34,8 @@ export { OrderedListItem } from './components/OrderedListItem';
 export type { RouterLinkWithTrackingProps } from './components/RouterLinkWithTracking';
 export { RouterLinkWithTracking } from './components/RouterLinkWithTracking';
 export { SnackbarProviderBase as SnackbarProvider } from './components/SnackbarProvider';
+export type { SpinnerProps } from './components/Spinner';
+export { Spinner } from './components/Spinner';
 export { SurroundingOverlay } from './components/SurroundingOverlay';
 export type { SurroundingOverlayProps } from './components/SurroundingOverlay';
 export type { TooltipProps } from './components/Tooltip';

package/dist/index.js

@@ -15,6 +15,7 @@ export { MUILinkWithTracking } from './components/MUILinkWithTracking';
 export { OrderedListItem } from './components/OrderedListItem';
 export { RouterLinkWithTracking } from './components/RouterLinkWithTracking';
 export { SnackbarProviderBase as SnackbarProvider } from './components/SnackbarProvider';
+export { Spinner } from './components/Spinner';
 export { SurroundingOverlay } from './components/SurroundingOverlay';
 export { Tooltip } from './components/Tooltip';
 export { Tabs } from './components/Tabs';

package/dist/theme.js

@@ -642,12 +642,12 @@ export const theme = createTheme({
             },
         },
         MuiLink: {
+            defaultProps: { underline: 'none' },
             styleOverrides: {
                 root: {
-                    color: '#00AEEF',
-                    textDecoration: 'none',
+                    color: color.text.accent.value,
                     '&:hover': {
-                        color: '#008bbf',
+                        color: color.palette.blue[800].value,
                     },
                 },
             },
@@ -790,5 +790,13 @@ export const theme = createTheme({
                 },
             },
         },
+        MuiBackdrop: {
+            styleOverrides: {
+                root: {
+                    background: color.bg.overlay.dark.value,
+                },
+                invisible: { background: 'unset' },
+            },
+        },
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "5.1.0",
+  "version": "5.2.0-build-spinner-1983f8cedfb5b10c4e6e61effe5e97db93ff8d8a-1",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -9,7 +9,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@balena/design-tokens": "^0.4.1",
+    "@balena/design-tokens": "0.4.1-build-overlay-colors-0c9aa36223db9deb5784fc2aa0ec6409d337fa78-1",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
@@ -110,6 +110,6 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2024-04-11T12:52:02.651Z"
+    "publishedAt": "2024-04-12T14:34:25.137Z"
   }
 }