@cccsaurora/howler-ui 2.12.0-dev.43 → 2.12.0-dev.47

package/api/auth/login.js

@@ -10,7 +10,6 @@ export const post = (body) => {
 export const get = (search) => {
     const nonce = localStorage.getItem(`${MY_LOCAL_STORAGE_PREFIX}.${StorageKey.LOGIN_NONCE}`);
     if (nonce) {
-        console.log('Adding nonce');
         search.set('nonce', JSON.parse(nonce));
         localStorage.removeItem(`${MY_LOCAL_STORAGE_PREFIX}.${StorageKey.LOGIN_NONCE}`);
     }

package/api/dossier/hit.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-cycle */
 import { hget, joinAllUri } from '@cccsaurora/howler-ui/api';
 import { uri as parentUri } from '.';
 const uri = (id) => joinAllUri(parentUri(), 'hit', id);

package/api/dossier/index.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-cycle
 import { hdelete, hget, hpost, hput, joinAllUri, joinUri, uri as parentUri } from '@cccsaurora/howler-ui/api';
 import * as hit from './hit';
 export const uri = (id) => {

package/api/hit/comments/react.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-cycle
 import { hdelete, hput, joinUri } from '@cccsaurora/howler-ui/api';
 import { uri as parentUri } from '@cccsaurora/howler-ui/api/hit/comments';
 export const uri = (hit, comment) => {

package/components/elements/Comment.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Celebration, Check, Clear, Delete, Edit, Favorite, FireTruck, FormatQuote, Mood, RocketLaunch, ThumbDown, ThumbUp } from '@mui/icons-material';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import { Celebration, Check, Clear, Delete, Edit, Favorite, FireTruck, FormatQuote, Mood, MoreHoriz, RocketLaunch, ThumbDown, ThumbUp } from '@mui/icons-material';
 import { CardActions, CardContent, Chip, CircularProgress, Collapse, Fade, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Stack, TextField, Tooltip, Typography } from '@mui/material';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
@@ -91,7 +90,7 @@ const Comment = ({ comment, handleDelete, handleEdit, handleQuote, handleReact,
                                         }), children: t('comments.edited') })), _jsx(Tooltip, { title: new Date(comment.timestamp).toLocaleString(), children: _jsx(Typography, { variant: "caption", sx: theme => ({
                                                 marginRight: `${theme.spacing(1)} !important`,
                                                 color: shiftColor(theme.palette.text.primary, 0.25)
-                                            }), children: twitterShort(comment.timestamp) }) }), extra, (handleDelete || handleEdit || handleQuote) && (_jsx(Fade, { in: showInteractions, children: _jsx(IconButton, { size: "small", sx: [{ marginLeft: 'auto !important' }, editing && { display: 'none' }], id: `comment${comment.id}-button`, "aria-haspopup": "true", "aria-controls": anchorEl ? `comment${comment.id}-action-menu` : undefined, "aria-expanded": anchorEl ? 'true' : undefined, onClick: handleOpen, children: _jsx(MoreHorizIcon, { fontSize: "small" }) }) })), _jsxs(Menu, { id: `comment${comment.id}-action-menu`, anchorEl: anchorEl, open: !!anchorEl, onClose: handleClose, MenuListProps: {
+                                            }), children: twitterShort(comment.timestamp) }) }), extra, (handleDelete || handleEdit || handleQuote) && (_jsx(Fade, { in: showInteractions, children: _jsx(IconButton, { size: "small", sx: [{ marginLeft: 'auto !important' }, editing && { display: 'none' }], id: `comment${comment.id}-button`, "aria-haspopup": "true", "aria-controls": anchorEl ? `comment${comment.id}-action-menu` : undefined, "aria-expanded": anchorEl ? 'true' : undefined, onClick: handleOpen, children: _jsx(MoreHoriz, { fontSize: "small" }) }) })), _jsxs(Menu, { id: `comment${comment.id}-action-menu`, anchorEl: anchorEl, open: !!anchorEl, onClose: handleClose, MenuListProps: {
                                             dense: true,
                                             'aria-labelledby': `comment${comment.id}-button`
                                         }, anchorOrigin: {

package/components/elements/EditRow.js

@@ -1,8 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Delete } from '@mui/icons-material';
-import CheckIcon from '@mui/icons-material/Check';
-import CloseIcon from '@mui/icons-material/Close';
-import EditIcon from '@mui/icons-material/Edit';
+import { Check, Close, Delete, Edit } from '@mui/icons-material';
 import { Box, Checkbox, CircularProgress, IconButton, Slider, Stack, TableCell, TableRow, TextField, Typography } from '@mui/material';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import { isNull, isUndefined } from 'lodash-es';
@@ -110,9 +107,9 @@ const EditRow = ({ titleKey, descriptionKey, value, onEdit, validate, failOnVali
                                                 setError(false);
                                             }, onKeyDown: checkForActions, fullWidth: true, label: t('password.confirm'), type: "password", error: error, sx: { '& input': { fontSize: '13.5px !important' } }, InputProps: {
                                                 endAdornment: loading && _jsx(CircularProgress, { size: 24 })
-                                            } }))] }), _jsx(IconButton, { onClick: onSubmit, disabled: loading, children: _jsx(CheckIcon, { fontSize: "small" }) }), _jsx(IconButton, { onClick: () => setEditing(false), disabled: loading, children: _jsx(CloseIcon, { fontSize: "small" }) }), optional && (_jsx(IconButton, { onClick: () => {
+                                            } }))] }), _jsx(IconButton, { onClick: onSubmit, disabled: loading, children: _jsx(Check, { fontSize: "small" }) }), _jsx(IconButton, { onClick: () => setEditing(false), disabled: loading, children: _jsx(Close, { fontSize: "small" }) }), optional && (_jsx(IconButton, { onClick: () => {
                                         setEditing(false);
                                         onEdit(null);
-                                    }, disabled: loading, children: _jsx(Delete, { fontSize: "small" }) }))] }) })) : (_jsxs(TableCell, { sx: cellSx, width: "100%", children: [type === 'checkbox' ? (_jsx(Checkbox, { onChange: ev => onChange(ev.target.checked), checked: value.toString() === 'true' })) : ((value ?? t('none'))), type === 'range' && value && 'px'] })), onEdit && !editing && type !== 'checkbox' && (_jsx(TableCell, { sx: cellSx, align: "right", children: _jsx(IconButton, { onClick: () => setEditing(true), children: _jsx(EditIcon, { fontSize: "small" }) }) }))] }), descriptionKey && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(descriptionKey) }) }) }))] }));
+                                    }, disabled: loading, children: _jsx(Delete, { fontSize: "small" }) }))] }) })) : (_jsxs(TableCell, { sx: cellSx, width: "100%", children: [type === 'checkbox' ? (_jsx(Checkbox, { onChange: ev => onChange(ev.target.checked), checked: value.toString() === 'true' })) : ((value ?? t('none'))), type === 'range' && value && 'px'] })), onEdit && !editing && type !== 'checkbox' && (_jsx(TableCell, { sx: cellSx, align: "right", children: _jsx(IconButton, { onClick: () => setEditing(true), children: _jsx(Edit, { fontSize: "small" }) }) }))] }), descriptionKey && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(descriptionKey) }) }) }))] }));
 };
 export default EditRow;

package/components/elements/addons/buttons/index.d.ts

@@ -1,3 +1,3 @@
 export declare const MuiButtonColors: readonly ["inherit", "primary", "secondary", "success", "error", "info", "warning"];
 export type MuiButtonColorType = (typeof MuiButtonColors)[number];
-export declare function isMuiButtonColor(color: string): boolean;
+export declare const isMuiButtonColor: (color: string) => boolean;

package/components/elements/addons/buttons/index.js

@@ -1,4 +1,4 @@
 export const MuiButtonColors = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
-export function isMuiButtonColor(color) {
+export const isMuiButtonColor = (color) => {
     return MuiButtonColors.some(c => c === color);
-}
+};

package/components/elements/display/HandlebarsMarkdown.js

@@ -7,10 +7,11 @@ import { useTranslation } from 'react-i18next';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
 import { hashCode } from '@cccsaurora/howler-ui/utils/utils';
 import Markdown, {} from '../display/Markdown';
-import { helpers } from './handlebars/helpers';
+import { useHelpers } from './handlebars/helpers';
 const THROTTLER = new Throttler(500);
 const HandlebarsMarkdown = ({ md, object = {}, disableLinks = false }) => {
     const { t } = useTranslation();
+    const helpers = useHelpers();
     const [rendered, setRendered] = useState('');
     const [mdComponents, setMdComponents] = useState({});
     const handlebars = useMemo(() => {
@@ -28,7 +29,7 @@ const HandlebarsMarkdown = ({ md, object = {}, disableLinks = false }) => {
         return instance;
     }, []);
     useEffect(() => {
-        helpers().forEach(helper => {
+        helpers.forEach(helper => {
             if (handlebars.helpers[helper.keyword] && !helper.componentCallback) {
                 return;
             }
@@ -50,7 +51,7 @@ const HandlebarsMarkdown = ({ md, object = {}, disableLinks = false }) => {
                 return helper.callback(...args);
             });
         });
-    }, [handlebars, mdComponents]);
+    }, [handlebars, helpers, mdComponents]);
     useEffect(() => {
         THROTTLER.debounce(async () => {
             try {

package/components/elements/display/TypingIndicator.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Circle from '@mui/icons-material/Circle';
+import { Circle } from '@mui/icons-material';
 import { alpha, Stack } from '@mui/material';
 const TypingIndicator = () => {
     return (_jsxs(Stack, { direction: "row", sx: theme => ({

package/components/elements/display/handlebars/helpers.d.ts

@@ -6,4 +6,4 @@ export interface HowlerHelper {
     callback?: Handlebars.HelperDelegate;
     componentCallback?: (...args: any[]) => ReactElement | Promise<ReactElement>;
 }
-export declare const helpers: () => HowlerHelper[];
+export declare const useHelpers: () => HowlerHelper[];

package/components/elements/display/handlebars/helpers.js

@@ -8,138 +8,143 @@ import { flatten } from 'flat';
 import Handlebars from 'handlebars';
 import { capitalize, get, groupBy, isObject } from 'lodash-es';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import {} from 'react';
+import { useMemo } from 'react';
+import { usePluginStore } from 'react-pluggable';
 import JSONViewer from '../json/JSONViewer';
-export const helpers = () => [
-    {
-        keyword: 'equals',
-        documentation: 'Checks the equality of the string representation of the two arguments.',
-        callback: (arg1, arg2) => arg1?.toString() === arg2.toString()
-    },
-    {
-        keyword: 'and',
-        documentation: 'Runs the comparison `arg1 && arg2`, and returns the result.',
-        callback: (arg1, arg2) => arg1 && arg2
-    },
-    {
-        keyword: 'or',
-        documentation: 'Runs the comparison `arg1 || arg2`, and returns the result.',
-        callback: (arg1, arg2) => arg1 || arg2
-    },
-    { keyword: 'not', documentation: 'Runs the comparison `!arg`, and returns the result.', callback: arg => !arg },
-    {
-        keyword: 'curly',
-        documentation: 'Wraps the given argument in curly braces.',
-        callback: arg1 => new Handlebars.SafeString(`{{${arg1}}}`)
-    },
-    {
-        keyword: 'join',
-        documentation: 'Joins two string arguments with a given string `sep`, or the empty string as a default.',
-        callback: (arg1, arg2, context) => [arg1?.toString() ?? '', arg2?.toString() ?? ''].join(context.hash?.sep ?? '')
-    },
-    {
-        keyword: 'upper',
-        documentation: 'Returns the uppercase representation of a string argment.',
-        callback: (val) => val.toLocaleUpperCase()
-    },
-    {
-        keyword: 'lower',
-        documentation: 'Returns the lowercase representation of a string argment.',
-        callback: (val) => val.toLocaleLowerCase()
-    },
-    {
-        keyword: 'fetch',
-        documentation: 'Fetches the url provided and returns the given (flattened) key from the returned JSON object. Note that the result must be JSON!',
-        callback: async (url, key) => {
-            try {
-                const response = await fetch(url);
-                const json = await response.json();
-                return flatten(json)[key];
+export const useHelpers = () => {
+    const pluginStore = usePluginStore();
+    const allHelpers = useMemo(() => [
+        {
+            keyword: 'equals',
+            documentation: 'Checks the equality of the string representation of the two arguments.',
+            callback: (arg1, arg2) => arg1?.toString() === arg2.toString()
+        },
+        {
+            keyword: 'and',
+            documentation: 'Runs the comparison `arg1 && arg2`, and returns the result.',
+            callback: (arg1, arg2) => arg1 && arg2
+        },
+        {
+            keyword: 'or',
+            documentation: 'Runs the comparison `arg1 || arg2`, and returns the result.',
+            callback: (arg1, arg2) => arg1 || arg2
+        },
+        { keyword: 'not', documentation: 'Runs the comparison `!arg`, and returns the result.', callback: arg => !arg },
+        {
+            keyword: 'curly',
+            documentation: 'Wraps the given argument in curly braces.',
+            callback: arg1 => new Handlebars.SafeString(`{{${arg1}}}`)
+        },
+        {
+            keyword: 'join',
+            documentation: 'Joins two string arguments with a given string `sep`, or the empty string as a default.',
+            callback: (arg1, arg2, context) => [arg1?.toString() ?? '', arg2?.toString() ?? ''].join(context.hash?.sep ?? '')
+        },
+        {
+            keyword: 'upper',
+            documentation: 'Returns the uppercase representation of a string argment.',
+            callback: (val) => val.toLocaleUpperCase()
+        },
+        {
+            keyword: 'lower',
+            documentation: 'Returns the lowercase representation of a string argment.',
+            callback: (val) => val.toLocaleLowerCase()
+        },
+        {
+            keyword: 'fetch',
+            documentation: 'Fetches the url provided and returns the given (flattened) key from the returned JSON object. Note that the result must be JSON!',
+            callback: async (url, key) => {
+                try {
+                    const response = await fetch(url);
+                    const json = await response.json();
+                    return flatten(json)[key];
+                }
+                catch (e) {
+                    return '';
+                }
             }
-            catch (e) {
-                return '';
+        },
+        {
+            keyword: 'howler',
+            documentation: 'Given a howler hit ID, this helper renders a hit card for that ID.',
+            componentCallback: id => {
+                if (!id) {
+                    return _jsx(AppListEmpty, {});
+                }
+                return _jsx(HitCard, { id: id, layout: HitLayout.NORMAL });
             }
-        }
-    },
-    {
-        keyword: 'howler',
-        documentation: 'Given a howler hit ID, this helper renders a hit card for that ID.',
-        componentCallback: id => {
-            if (!id) {
-                return _jsx(AppListEmpty, {});
+        },
+        {
+            keyword: 'entries',
+            documentation: 'Given a dict, return an array of {key, value} objects.',
+            callback: obj => {
+                if (!isObject(obj)) {
+                    return new Handlebars.SafeString('Invalid Object.');
+                }
+                return Object.entries(obj).map(([key, value]) => ({ key, value }));
             }
-            return _jsx(HitCard, { id: id, layout: HitLayout.NORMAL });
-        }
-    },
-    {
-        keyword: 'entries',
-        documentation: 'Given a dict, return an array of {key, value} objects.',
-        callback: obj => {
-            if (!isObject(obj)) {
-                return new Handlebars.SafeString('Invalid Object.');
+        },
+        {
+            keyword: 'render_json',
+            documentation: 'Given a howler hit ID, this helper renders a hit card for that ID.',
+            componentCallback: data => {
+                if (!data) {
+                    return _jsx(AppListEmpty, {});
+                }
+                return _jsx(JSONViewer, { data: data });
             }
-            return Object.entries(obj).map(([key, value]) => ({ key, value }));
-        }
-    },
-    {
-        keyword: 'render_json',
-        documentation: 'Given a howler hit ID, this helper renders a hit card for that ID.',
-        componentCallback: data => {
-            if (!data) {
-                return _jsx(AppListEmpty, {});
+        },
+        {
+            keyword: 'to_json',
+            documentation: 'Convert any object into a JSON string.',
+            callback: obj => {
+                return new Handlebars.SafeString(JSON.stringify(obj));
             }
-            return _jsx(JSONViewer, { data: data });
-        }
-    },
-    {
-        keyword: 'to_json',
-        documentation: 'Convert any object into a JSON string.',
-        callback: obj => {
-            return new Handlebars.SafeString(JSON.stringify(obj));
-        }
-    },
-    {
-        keyword: 'parse_json',
-        documentation: 'Convert JSON string into and object.',
-        callback: str => {
-            return JSON.parse(str);
-        }
-    },
-    {
-        keyword: 'get',
-        documentation: 'Returns the given (flattened) key from the provided object.',
-        callback: async (data, key) => {
-            try {
-                return get(data, key);
+        },
+        {
+            keyword: 'parse_json',
+            documentation: 'Convert JSON string into and object.',
+            callback: str => {
+                return JSON.parse(str);
             }
-            catch (e) {
-                return '';
+        },
+        {
+            keyword: 'get',
+            documentation: 'Returns the given (flattened) key from the provided object.',
+            callback: async (data, key) => {
+                try {
+                    return get(data, key);
+                }
+                catch (e) {
+                    return '';
+                }
             }
-        }
-    },
-    {
-        keyword: 'includes',
-        documentation: 'Checks if field is in string',
-        callback: (arg1, arg2) => {
-            return !!arg2 && !!arg1?.includes(arg2);
-        }
-    },
-    {
-        keyword: 'table',
-        documentation: 'Render a table in markdown given an array of cells',
-        componentCallback: (cells) => {
-            const columns = Object.keys(groupBy(cells, 'column'));
-            const rows = groupBy(cells, 'row');
-            return (_jsx(Paper, { sx: { width: '95%', overflowX: 'auto', m: 1 }, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsx(TableRow, { children: columns.map(col => (_jsx(TableCell, { sx: { maxWidth: '150px' }, children: col
-                                        .split(/[_-]/)
-                                        .map(word => capitalize(word))
-                                        .join(' ') }, col))) }) }), _jsx(TableBody, { sx: { '& td': { wordBreak: 'break-word' } }, children: Object.entries(rows).map(([rowId, _cells]) => {
-                                return (_jsx(TableRow, { children: columns.map(col => {
-                                        const cell = _cells.find(row => row.column === col);
-                                        return _jsx(TableCell, { children: cell?.value ?? 'N/A' }, col + cell?.value);
-                                    }) }, rowId));
-                            }) })] }) }));
-        }
-    },
-    ...howlerPluginStore.plugins.flatMap(plugin => howlerPluginStore.pluginStore.executeFunction(`${plugin}.helpers`))
-];
+        },
+        {
+            keyword: 'includes',
+            documentation: 'Checks if field is in string',
+            callback: (arg1, arg2) => {
+                return !!arg2 && !!arg1?.includes(arg2);
+            }
+        },
+        {
+            keyword: 'table',
+            documentation: 'Render a table in markdown given an array of cells',
+            componentCallback: (cells) => {
+                const columns = Object.keys(groupBy(cells, 'column'));
+                const rows = groupBy(cells, 'row');
+                return (_jsx(Paper, { sx: { width: '95%', overflowX: 'auto', m: 1 }, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsx(TableRow, { children: columns.map(col => (_jsx(TableCell, { sx: { maxWidth: '150px' }, children: col
+                                            .split(/[_-]/)
+                                            .map(word => capitalize(word))
+                                            .join(' ') }, col))) }) }), _jsx(TableBody, { sx: { '& td': { wordBreak: 'break-word' } }, children: Object.entries(rows).map(([rowId, _cells]) => {
+                                    return (_jsx(TableRow, { children: columns.map(col => {
+                                            const cell = _cells.find(row => row.column === col);
+                                            return _jsx(TableCell, { children: cell?.value ?? 'N/A' }, col + cell?.value);
+                                        }) }, rowId));
+                                }) })] }) }));
+            }
+        },
+        ...howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.helpers`))
+    ], [pluginStore]);
+    return allHelpers;
+};

package/components/elements/display/modals/LoginErrorModal.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ErrorIcon from '@mui/icons-material/Error';
+import { Error } from '@mui/icons-material';
 import { Button, Divider, Stack, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 const LoginErrorModal = ({ error }) => {
     const { t } = useTranslation();
-    return (_jsxs(Stack, { direction: "row", spacing: 3, alignItems: "center", children: [_jsx("img", { src: "/images/doggie.png", alt: "" }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(ErrorIcon, { color: "error" }), _jsx(Typography, { variant: "h5", children: t('user.error.modal.header') })] }), _jsx(Divider, { orientation: "horizontal", sx: { mt: 1, mb: 1 } }), _jsx(Typography, { variant: "body1", children: t('user.error.modal.body') }), _jsx(Typography, { variant: "body1", sx: { mt: 1 }, children: t('user.error.modal.details') }), _jsx("code", { style: { fontSize: '0.8rem' }, children: error.toString() }), _jsx(Stack, { direction: "row", justifyContent: "end", sx: { pt: 1 }, children: _jsx(Button, { onClick: () => window.location.reload(), children: t('user.error.modal.reload') }) })] })] }));
+    return (_jsxs(Stack, { direction: "row", spacing: 3, alignItems: "center", children: [_jsx("img", { src: "/images/doggie.png", alt: "" }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Error, { color: "error" }), _jsx(Typography, { variant: "h5", children: t('user.error.modal.header') })] }), _jsx(Divider, { orientation: "horizontal", sx: { mt: 1, mb: 1 } }), _jsx(Typography, { variant: "body1", children: t('user.error.modal.body') }), _jsx(Typography, { variant: "body1", sx: { mt: 1 }, children: t('user.error.modal.details') }), _jsx("code", { style: { fontSize: '0.8rem' }, children: error.toString() }), _jsx(Stack, { direction: "row", justifyContent: "end", sx: { pt: 1 }, children: _jsx(Button, { onClick: () => window.location.reload(), children: t('user.error.modal.reload') }) })] })] }));
 };
 export default LoginErrorModal;

package/components/hooks/useMyPreferences.js

@@ -1,7 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Api, Article, Book, Code, Dashboard, Description, Edit, FormatListBulleted, Help, HelpCenter, Key, ManageSearch, QueryStats, SavedSearch, Search, SettingsSuggest, Shield, Storage, SupervisorAccount, Terminal, Topic } from '@mui/icons-material';
-import ExitToAppIcon from '@mui/icons-material/ExitToApp';
-import SettingsIcon from '@mui/icons-material/Settings';
+import { Api, Article, Book, Code, Dashboard, Description, Edit, ExitToApp, FormatListBulleted, Help, HelpCenter, Key, ManageSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, SupervisorAccount, Terminal, Topic } from '@mui/icons-material';
 import { AppBrand } from '@cccsaurora/howler-ui/branding/AppBrand';
 import Classification from '@cccsaurora/howler-ui/components/elements/display/Classification';
 import DocumentationButton from '@cccsaurora/howler-ui/components/elements/display/DocumentationButton';
@@ -203,12 +201,12 @@ const useMyPreferences = () => {
         {
             i18nKey: 'usermenu.settings',
             route: '/settings',
-            icon: _jsx(SettingsIcon, {})
+            icon: _jsx(Settings, {})
         },
         {
             i18nKey: 'usermenu.logout',
             route: '/logout',
-            icon: _jsx(ExitToAppIcon, {})
+            icon: _jsx(ExitToApp, {})
         }
     ], []);
     // This is the basic administrator menu, it is a menu that shows up under the user menu in the account avatar popover.

package/components/hooks/useMySitemap.js

@@ -1,7 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Article, Book, Code, CreateNewFolder, Dashboard, Description, Edit, EditNote, FormatListBulleted, Help, Info, Key, PersonSearch, QueryStats, SavedSearch, Search, SettingsSuggest, Shield, Storage, Terminal, Topic, Work } from '@mui/icons-material';
-import PersonIcon from '@mui/icons-material/Person';
-import SettingsIcon from '@mui/icons-material/Settings';
+import { Article, Book, Code, CreateNewFolder, Dashboard, Description, Edit, EditNote, FormatListBulleted, Help, Info, Key, Person, PersonSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, Terminal, Topic, Work } from '@mui/icons-material';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 // SiteMapContextProps configuration properties.
@@ -31,7 +29,7 @@ const useMySitemap = () => {
                 title: t('route.admin.user.details'),
                 isLeaf: true,
                 breadcrumbs: ['/admin/users'],
-                icon: _jsx(PersonIcon, {})
+                icon: _jsx(Person, {})
             },
             { path: '/help', title: t('route.help'), isRoot: true, icon: _jsx(Help, {}) },
             { path: '/help/api', title: t('route.help.api'), isLeaf: true, icon: _jsx(Storage, {}), breadcrumbs: ['/help'] },
@@ -209,7 +207,7 @@ const useMySitemap = () => {
                 icon: _jsx(Info, {})
             },
             { path: '/home', title: t('route.home'), isRoot: true, icon: _jsx(Dashboard, {}) },
-            { path: '/settings', title: t('page.settings.sitemap'), isRoot: true, icon: _jsx(SettingsIcon, {}) },
+            { path: '/settings', title: t('page.settings.sitemap'), isRoot: true, icon: _jsx(Settings, {}) },
             { path: '/advanced', title: t('route.advanced'), isRoot: true, icon: _jsx(Code, {}) }
         ]
     }), [t]);

package/components/routes/404.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import LinkOffIcon from '@mui/icons-material/LinkOff';
+import { LinkOff } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import { useTranslation } from 'react-i18next';
 const NotFoundPage = () => {
     const { t } = useTranslation();
-    return (_jsxs(PageCenter, { width: "75%", children: [_jsx(Box, { pt: 6, textAlign: "center", fontSize: 200, children: _jsx(LinkOffIcon, { color: "secondary", fontSize: "inherit" }) }), _jsx(Box, { pb: 2, children: _jsx(Typography, { variant: "h2", children: t('page.404.title') }) }), _jsx(Box, { children: _jsx(Typography, { variant: "h5", children: t('page.404.description') }) })] }));
+    return (_jsxs(PageCenter, { width: "75%", children: [_jsx(Box, { pt: 6, textAlign: "center", fontSize: 200, children: _jsx(LinkOff, { color: "secondary", fontSize: "inherit" }) }), _jsx(Box, { pb: 2, children: _jsx(Typography, { variant: "h2", children: t('page.404.title') }) }), _jsx(Box, { children: _jsx(Typography, { variant: "h5", children: t('page.404.description') }) })] }));
 };
 export default NotFoundPage;

package/components/routes/ErrorBoundary.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { ExpandMore } from '@mui/icons-material';
 import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from '@mui/material';
 import React, {} from 'react';
 import ErrorOccured from './ErrorOccured';
@@ -16,7 +16,7 @@ class ErrorBoundary extends React.Component {
     }
     render() {
         if (this.state.hasError) {
-            return (_jsxs(Box, { pt: 6, textAlign: "center", fontSize: 20, children: [_jsx(ErrorOccured, {}), _jsxs(Accordion, { elevation: 0, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, {}), "aria-controls": "panel1-content", id: "panel1-header", children: _jsx(Typography, { align: "center", sx: { width: '100%', fontSize: '1.2rem' }, variant: "h5", children: this.state.error.message }) }), _jsx(AccordionDetails, { children: _jsx("code", { children: _jsx(Typography, { variant: "h6", children: this.state.error.stack }) }) })] })] }));
+            return (_jsxs(Box, { pt: 6, textAlign: "center", fontSize: 20, children: [_jsx(ErrorOccured, {}), _jsxs(Accordion, { elevation: 0, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMore, {}), "aria-controls": "panel1-content", id: "panel1-header", children: _jsx(Typography, { align: "center", sx: { width: '100%', fontSize: '1.2rem' }, variant: "h5", children: this.state.error.message }) }), _jsx(AccordionDetails, { children: _jsx("code", { children: _jsx(Typography, { variant: "h6", children: this.state.error.stack }) }) })] })] }));
         }
         return this.props.children;
     }

package/components/routes/ErrorOccured.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ErrorIcon from '@mui/icons-material/Error';
+import { Error } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
@@ -8,6 +8,6 @@ import { usePluginStore } from 'react-pluggable';
 const ErrorOccured = () => {
     const { t } = useTranslation();
     const pluginStore = usePluginStore();
-    return (_jsxs(PageCenter, { width: "75%", children: [_jsx(Box, { pt: 6, textAlign: "center", fontSize: 200, children: _jsx(ErrorIcon, { fontSize: "inherit", style: { color: '#f44336' } }) }), _jsx(Box, { pb: 2, children: _jsx(Typography, { variant: "h2", children: t('page.error.title') }) }), _jsx(Box, { children: _jsx(Typography, { variant: "h5", children: t('page.error.description') }) }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.support`))] }));
+    return (_jsxs(PageCenter, { width: "75%", children: [_jsx(Box, { pt: 6, textAlign: "center", fontSize: 200, children: _jsx(Error, { fontSize: "inherit", style: { color: '#f44336' } }) }), _jsx(Box, { pb: 2, children: _jsx(Typography, { variant: "h2", children: t('page.error.title') }) }), _jsx(Box, { children: _jsx(Typography, { variant: "h5", children: t('page.error.description') }) }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.support`))] }));
 };
 export default ErrorOccured;

package/components/routes/help/OverviewDocumentation.js

@@ -2,12 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import HandlebarsMarkdown from '@cccsaurora/howler-ui/components/elements/display/HandlebarsMarkdown';
 import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
-import { useMemo } from 'react';
+import {} from 'react';
 import ErrorBoundary from '../ErrorBoundary';
-import { startingTemplate } from '../overviews/startingTemplate';
+import { useStartingTemplate } from '../overviews/startingTemplate';
 const OverviewDocumentation = () => {
     useScrollRestoration();
-    const template = useMemo(() => startingTemplate(), []);
+    const template = useStartingTemplate();
     return (_jsx(PageCenter, { margin: 4, width: "100%", textAlign: "left", children: _jsx(ErrorBoundary, { children: _jsx(HandlebarsMarkdown, { md: template }) }) }));
 };
 export default OverviewDocumentation;

package/components/routes/hits/search/HitQuery.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMonaco } from '@monaco-editor/react';
-import { Height, Search } from '@mui/icons-material';
+import { Height, History, Search } from '@mui/icons-material';
 import { Badge, Box, Card, Skeleton, Tooltip, alpha, useTheme } from '@mui/material';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import TuiIconButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomIconButton';
 import QueryEditor from '@cccsaurora/howler-ui/components/routes/advanced/QueryEditor';
-import HistoryIcon from '@mui/icons-material/History';
 import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -129,7 +128,7 @@ const HitQuery = ({ searching = false, disabled = false, compact = false, trigge
                 p: 0.5,
                 height: multiline ? `${DEFAULT_MULTILINE_HEIGHT + y}px` : theme.spacing(5)
             }
-        ], onKeyDown: e => e.stopPropagation(), children: [_jsx(TuiIconButton, { disabled: query.includes('\n#') || disabled, sx: { mr: 1, alignSelf: 'start' }, onClick: () => setMultiline(!multiline), color: multiline ? 'primary' : theme.palette.text.primary, transparent: !multiline, size: compact ? 'small' : 'medium', children: _jsx(Height, { sx: { fontSize: '20px' } }) }), _jsx(QueryEditor, { query: preppedQuery, setQuery: setQuery, language: "lucene", height: multiline ? '100%' : '20px', onMount: onMount, editorOptions: options }), fzfSearch && (_jsx(Tooltip, { title: t('route.history'), children: _jsx(HistoryIcon, {}) })), _jsx(TuiIconButton, { disabled: searching || disabled, onClick: search, sx: { ml: 1, alignSelf: 'start', flexShrink: 0 }, size: compact ? 'small' : 'medium', children: _jsx(Tooltip, { title: t('route.search'), children: _jsx(Badge, { invisible: !isDirty, color: "warning", variant: "dot", children: _jsx(Search, { sx: { fontSize: '20px' } }) }) }) }), !loaded && (_jsx(Skeleton, { variant: "rectangular", sx: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, height: "100%" })), multiline && (_jsx(Box, { sx: {
+        ], onKeyDown: e => e.stopPropagation(), children: [_jsx(TuiIconButton, { disabled: query.includes('\n#') || disabled, sx: { mr: 1, alignSelf: 'start' }, onClick: () => setMultiline(!multiline), color: multiline ? 'primary' : theme.palette.text.primary, transparent: !multiline, size: compact ? 'small' : 'medium', children: _jsx(Height, { sx: { fontSize: '20px' } }) }), _jsx(QueryEditor, { query: preppedQuery, setQuery: setQuery, language: "lucene", height: multiline ? '100%' : '20px', onMount: onMount, editorOptions: options }), fzfSearch && (_jsx(Tooltip, { title: t('route.history'), children: _jsx(History, {}) })), _jsx(TuiIconButton, { disabled: searching || disabled, onClick: search, sx: { ml: 1, alignSelf: 'start', flexShrink: 0 }, size: compact ? 'small' : 'medium', children: _jsx(Tooltip, { title: t('route.search'), children: _jsx(Badge, { invisible: !isDirty, color: "warning", variant: "dot", children: _jsx(Search, { sx: { fontSize: '20px' } }) }) }) }), !loaded && (_jsx(Skeleton, { variant: "rectangular", sx: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, height: "100%" })), multiline && (_jsx(Box, { sx: {
                     position: 'absolute',
                     left: 0,
                     right: 0,

package/components/routes/home/ViewCard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import OpenInNewIcon from '@mui/icons-material/esm/OpenInNew';
+import { OpenInNew } from '@mui/icons-material';
 import { Card, CardContent, IconButton, Skeleton, Stack, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
@@ -34,6 +34,6 @@ const ViewCard = ({ viewId, limit }) => {
         });
     }, [dispatchApi, limit, view?.query]);
     const onClick = useCallback((query) => navigate('/hits?query=' + query), [navigate]);
-    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", onClick: () => onClick(view.query), children: _jsx(OpenInNewIcon, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : hits.length > 0 ? (hits.map(h => (_jsx(Card, { variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate((h.howler.is_bundle ? '/bundles/' : '/hits/') + h.howler.id), children: _jsx(CardContent, { children: _jsx(HitBanner, { layout: HitLayout.DENSE, hit: h }) }) }, h.howler.id)))) : (_jsx(AppListEmpty, {}))] }) }));
+    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : hits.length > 0 ? (hits.map(h => (_jsx(Card, { variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate((h.howler.is_bundle ? '/bundles/' : '/hits/') + h.howler.id), children: _jsx(CardContent, { children: _jsx(HitBanner, { layout: HitLayout.DENSE, hit: h }) }) }, h.howler.id)))) : (_jsx(AppListEmpty, {}))] }) }));
 };
 export default ViewCard;

package/components/routes/overviews/OverviewViewer.js

@@ -14,7 +14,7 @@ import { useSearchParams } from 'react-router-dom';
 import hitsData from '@cccsaurora/howler-ui/utils/hit.json';
 import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
 import OverviewEditor from './OverviewEditor';
-import { startingTemplate } from './startingTemplate';
+import { useStartingTemplate } from './startingTemplate';
 const OverviewViewer = () => {
     const theme = useTheme();
     const { t } = useTranslation();
@@ -34,6 +34,7 @@ const OverviewViewer = () => {
     const [x, setX] = useState(0);
     const analyticContext = useContext(AnalyticContext);
     const wrapper = useRef();
+    const startingTemplate = useStartingTemplate();
     useEffect(() => {
         (async () => {
             setLoading(true);
@@ -212,6 +213,6 @@ const OverviewViewer = () => {
                                     mt: -1,
                                     '& > *': { width: '100%' },
                                     '& > div > :first-child': { mt: 0 }
-                                }, children: _jsx(HitOverview, { content: content || startingTemplate(), hit: exampleHit }) })] }))] })] }));
+                                }, children: _jsx(HitOverview, { content: content || startingTemplate, hit: exampleHit }) })] }))] })] }));
 };
 export default OverviewViewer;

package/components/routes/overviews/startingTemplate.d.ts

@@ -1 +1 @@
-export declare const startingTemplate: () => string;
+export declare const useStartingTemplate: () => string;

package/components/routes/overviews/startingTemplate.js

@@ -1,6 +1,8 @@
-import { helpers } from '@cccsaurora/howler-ui/components/elements/display/handlebars/helpers';
-export const startingTemplate = () => {
-    const helperText = helpers()
+import { useHelpers } from '@cccsaurora/howler-ui/components/elements/display/handlebars/helpers';
+import { useMemo } from 'react';
+export const useStartingTemplate = () => {
+    const helpers = useHelpers();
+    const helperText = useMemo(() => helpers
         .map(helper => `
 ### \`${helper.keyword}\`
 
@@ -8,8 +10,8 @@ ${helper.documentation}
 
 ---
 `.trim())
-        .join('\n');
-    return `
+        .join('\n'), [helpers]);
+    return useMemo(() => `
 # Creating an Overview
 
 Overviews can be used to modify the way data is presented on alerts that match the overview's settings. Overviews are, by design, easy to create and quite flexible.
@@ -177,5 +179,5 @@ You can also make basic fetch requests for, and parse, JSON data from external s
 ## Full Helper List
 
 ${helperText}
-`;
+`, [helperText]);
 };

package/components/routes/settings/SecuritySection.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import AddIcon from '@mui/icons-material/Add';
+import { Add } from '@mui/icons-material';
 import { Chip, Grid, IconButton, TableCell, TableRow } from '@mui/material';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import useMyLocalStorage from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
@@ -26,6 +26,6 @@ const SecuritySection = ({ user, editPassword, addApiKey, removeApiKey, editQuot
     return (_jsxs(SettingsSection, { title: t('page.settings.security.title'), colSpan: 3, children: [!isOAuth && editPassword && (_jsx(EditRow, { titleKey: "page.settings.security.table.password", value: "\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF", onEdit: editPassword, type: "password" })), config?.configuration.auth.allow_apikeys && (_jsxs(TableRow, { sx: { cursor: 'pointer' }, children: [_jsx(TableCell, { style: { whiteSpace: 'nowrap' }, children: t('page.settings.security.table.apikeys') }), _jsx(TableCell, { width: "100%", children: _jsxs(Grid, { container: true, spacing: 1, children: [user?.apikeys?.map(apiKey => (_jsx(Grid, { item: true, children: _jsx(Chip, { label: apiKey[0].toLocaleLowerCase() +
                                             (apiKey[1].length > 0
                                                 ? ` (${apiKey[1].map(permission => t(APIKEY_LABELS[permission])).join(', ')})`
-                                                : ''), style: { backgroundColor: moment.utc(apiKey[2]).isBefore(moment().utc()) ? 'orange' : 'default' }, onDelete: removeApiKey ? () => removeApiKey(apiKey) : null }) }, apiKey[0]))), user?.apikeys?.length < 1 && (_jsx(Grid, { item: true, children: _jsx(Trans, { i18nKey: "none" }) }))] }) }), _jsx(TableCell, { align: "right", children: addApiKey && (_jsx(IconButton, { onClick: addApiKey, children: _jsx(AddIcon, { fontSize: "small" }) })) })] })), _jsx(EditRow, { titleKey: "page.settings.security.table.apiquota", descriptionKey: "page.settings.security.table.apiquota.description", value: user?.api_quota, validate: value => value && /^[0-9]*$/m.test(value.toString()), type: "number", onEdit: editQuota }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'security'))] }));
+                                                : ''), style: { backgroundColor: moment.utc(apiKey[2]).isBefore(moment().utc()) ? 'orange' : 'default' }, onDelete: removeApiKey ? () => removeApiKey(apiKey) : null }) }, apiKey[0]))), user?.apikeys?.length < 1 && (_jsx(Grid, { item: true, children: _jsx(Trans, { i18nKey: "none" }) }))] }) }), _jsx(TableCell, { align: "right", children: addApiKey && (_jsx(IconButton, { onClick: addApiKey, children: _jsx(Add, { fontSize: "small" }) })) })] })), _jsx(EditRow, { titleKey: "page.settings.security.table.apiquota", descriptionKey: "page.settings.security.table.apiquota.description", value: user?.api_quota, validate: value => value && /^[0-9]*$/m.test(value.toString()), type: "number", onEdit: editQuota }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'security'))] }));
 };
 export default SecuritySection;

package/package.json

@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.12.0-dev.43",
+  "version": "2.12.0-dev.47",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",

package/plugins/store.d.ts

@@ -6,7 +6,7 @@ export declare class HitEvent extends Event {
     constructor(type: string, hit: Hit);
 }
 declare class HowlerPluginStore {
-    pluginStore: import("react-pluggable").PluginStore;
+    private _pluginStore;
     plugins: string[];
     private _leadFormats;
     private _pivotFormats;
@@ -18,6 +18,7 @@ declare class HowlerPluginStore {
     get leadFormats(): string[];
     get pivotFormats(): string[];
     get operations(): string[];
+    get pluginStore(): import("react-pluggable").PluginStore;
 }
 declare const howlerPluginStore: HowlerPluginStore;
 export default howlerPluginStore;

package/plugins/store.js

@@ -7,7 +7,7 @@ export class HitEvent extends Event {
     }
 }
 class HowlerPluginStore {
-    pluginStore = createPluginStore();
+    _pluginStore = createPluginStore();
     plugins = [];
     _leadFormats = [];
     _pivotFormats = [];
@@ -47,6 +47,9 @@ class HowlerPluginStore {
     get operations() {
         return this._operations;
     }
+    get pluginStore() {
+        return this._pluginStore;
+    }
 }
 const howlerPluginStore = new HowlerPluginStore();
 export default howlerPluginStore;