@cccsaurora/howler-ui 2.12.0-dev.168

package/components/elements/addons/search/phrase/PhraseLexer.js

@@ -0,0 +1,130 @@
+export default class PhraseLexer {
+    _phrase = null;
+    _buffer = null;
+    _tokens = null;
+    _consumers = null;
+    _consumer = null;
+    _startIndex = 0;
+    _endIndex = -1;
+    find(cursor, tokens) {
+        const index = tokens.findIndex(t => t.startIndex <= cursor && cursor <= t.endIndex);
+        const token = tokens.at(index);
+        return { index, token };
+    }
+    parse(phrase, cursor = 0) {
+        this._phrase = phrase;
+        this._buffer = [];
+        this._tokens = [];
+        this._consumers = this.consumers();
+        this._consumer = null;
+        this._startIndex = 0;
+        this._endIndex = -1;
+        for (let i = 0; i < this._phrase.length; i++) {
+            this._endIndex += 1;
+            const next = this._phrase[i];
+            this._buffer.push(next);
+            // console.log(this._buffer.join(''));
+            // Prevent duplication of next character
+            //  when aquiring new consumer lock.
+            let newLock = false;
+            // Try to find a consumer to lock on.
+            if (!this._consumer) {
+                this._consumer = this.lock();
+                if (this._consumer) {
+                    newLock = true;
+                    // console.log('new lock...');
+                    // console.log(this._consumer);
+                    this._consumer.init(this._buffer, this);
+                }
+            }
+            // If we have a consumer, write next character into it
+            //  and then see if it can consume the buffer.
+            if (this._consumer) {
+                if (newLock) {
+                    newLock = false;
+                }
+                else {
+                    this._consumer.append(next, this);
+                }
+                const token = this._consumer.consume(this);
+                if (token) {
+                    this._tokens.push(token);
+                    this._buffer = [];
+                    this._consumer = null;
+                    this._startIndex = this._endIndex + 1;
+                }
+            }
+        }
+        // Always add a EOP (end-of-phrase) token.
+        this._tokens.push({ type: 'eop', startIndex: phrase.length, endIndex: phrase.length, value: '' });
+        // Flatten token structure.
+        // By collapsing all children token, we can find the exact token for the current cursor position.
+        const flatTokens = this._tokens.flatMap(t => (t.children && t.children.length > 0 ? t.children : [t]));
+        // Find the index of the token within range or cursor.
+        const { token: parent, index: parentIndex } = this.find(cursor, this._tokens);
+        const { token: current, index: currentIndex } = this.find(cursor, flatTokens);
+        // Figure out which token to use to generate suggestions.
+        // When at the start of a token, use the previous one.
+        // console.log(currentIndex);
+        // console.log(flatTokens[currentIndex - 1]);
+        const filter = cursor === current.startIndex && flatTokens[currentIndex - 1] ? flatTokens[currentIndex - 1] : current;
+        return {
+            cursor,
+            parentIndex,
+            parent,
+            currentIndex,
+            current,
+            suggest: {
+                token: filter,
+                parent: this.find(filter.startIndex, this._tokens).token,
+                value: filter.value.substring(0, cursor - filter.startIndex)
+            },
+            tokens: this._tokens
+        };
+    }
+    lock() {
+        return this._consumers.find(c => c.lock(this));
+    }
+    buffer() {
+        return this._buffer;
+    }
+    bufferValue() {
+        return this._buffer.join('');
+    }
+    start() {
+        return this._startIndex;
+    }
+    end() {
+        return this._endIndex;
+    }
+    ahead(inc) {
+        const start = this._endIndex + 1;
+        if (inc) {
+            return this._phrase.slice(start, start + inc);
+        }
+        return this._phrase.substring(start);
+    }
+    behind(inc) {
+        if (inc) {
+            return this.bufferValue().slice(-inc);
+        }
+        return this.bufferValue();
+    }
+    behindEndsWithAny(trim, ...values) {
+        const behind = trim ? this.behind().trimEnd() : this.behind();
+        return values.some(v => behind.endsWith(v));
+    }
+    testBehind(regex) {
+        return regex.test(this.behind());
+    }
+    aheadStartsWithAny(trim, ...values) {
+        const ahead = trim ? this.ahead().trimStart() : this.ahead();
+        return values.some(v => ahead.startsWith(v));
+    }
+    aheadIsEmpty(trim = false) {
+        return trim ? this.ahead().trim().length === 0 : this.ahead().length === 0;
+    }
+    testAhead(regex) {
+        return regex.test(this.ahead());
+    }
+}

package/components/elements/addons/search/phrase/index.d.ts

@@ -0,0 +1,40 @@
+export type PhraseAnalysis = {
+    cursor: number;
+    parentIndex: number;
+    parent: PhraseToken;
+    currentIndex: number;
+    current: PhraseToken;
+    suggest: {
+        token: PhraseToken;
+        parent: PhraseToken;
+        value: string;
+    };
+    tokens?: PhraseToken[];
+};
+export type PhraseToken = {
+    value: string;
+    startIndex: number;
+    endIndex: number;
+    type?: string;
+    children?: PhraseToken[];
+};
+export type PhraseSuggester = {
+    suggest: (phrase: PhraseAnalysis) => string[];
+};
+export type PhraseSuggestorValue = {
+    field: string;
+    values: string[];
+};
+export declare class PhraseBuffer {
+    constructor(type?: string);
+    private type;
+    private startIndex;
+    private endIndex;
+    private buffer;
+    init(startIndex: number, buffer?: string[]): PhraseBuffer;
+    append(value: string): PhraseBuffer;
+    value(): string;
+    start(index?: number): number;
+    end(index?: number): number;
+    token(): PhraseToken;
+}

package/components/elements/addons/search/phrase/index.js

@@ -0,0 +1,45 @@
+export class PhraseBuffer {
+    constructor(type) {
+        this.type = type;
+    }
+    type;
+    startIndex = 0;
+    endIndex = -1;
+    buffer = [];
+    init(startIndex, buffer) {
+        this.buffer = buffer ? [...buffer] : [];
+        this.startIndex = startIndex;
+        this.endIndex = startIndex + (buffer ? buffer.length : 0);
+        return this;
+    }
+    append(value) {
+        this.buffer.push(value);
+        this.endIndex += value.length;
+        return this;
+    }
+    value() {
+        return this.buffer.join('');
+    }
+    start(index) {
+        if (index !== undefined) {
+            this.startIndex = index;
+        }
+        return this.startIndex;
+    }
+    end(index) {
+        if (index !== undefined) {
+            this.endIndex = index;
+        }
+        return this.endIndex;
+    }
+    token() {
+        return this.endIndex > 0
+            ? {
+                type: this.type,
+                value: this.value(),
+                startIndex: this.startIndex,
+                endIndex: this.endIndex - 1
+            }
+            : null;
+    }
+}

package/components/elements/addons/search/phrase/word/WordLexer.d.ts

@@ -0,0 +1,5 @@
+import type PhraseConsumer from '../PhraseConsumer';
+import PhraseLexer from '../PhraseLexer';
+export default class WordLexer extends PhraseLexer {
+    consumers(): PhraseConsumer<PhraseLexer>[];
+}

package/components/elements/addons/search/phrase/word/WordLexer.js

@@ -0,0 +1,8 @@
+import PhraseLexer from '../PhraseLexer';
+import WhitespaceConsumer from './consumers/WhitespaceConsumer';
+import WordConsumer from './consumers/WordConsumer';
+export default class WordLexer extends PhraseLexer {
+    consumers() {
+        return [new WordConsumer(), new WhitespaceConsumer()];
+    }
+}

package/components/elements/addons/search/phrase/word/WordSuggester.d.ts

@@ -0,0 +1,6 @@
+import type { PhraseAnalysis, PhraseSuggester } from '..';
+export default class WordSuggestor implements PhraseSuggester {
+    private suggestions;
+    constructor(suggestions: string[]);
+    suggest(phrase: PhraseAnalysis): string[];
+}

package/components/elements/addons/search/phrase/word/WordSuggester.js

@@ -0,0 +1,9 @@
+export default class WordSuggestor {
+    suggestions;
+    constructor(suggestions) {
+        this.suggestions = suggestions;
+    }
+    suggest(phrase) {
+        return this.suggestions.filter(s => s.indexOf(phrase.suggest.value) > -1);
+    }
+}

package/components/elements/addons/search/phrase/word/consumers/WhitespaceConsumer.d.ts

@@ -0,0 +1,7 @@
+import type { PhraseToken } from '../..';
+import PhraseConsumer from '../../PhraseConsumer';
+import type PhraseLexer from '../../PhraseLexer';
+export default class WhitespaceConsumer extends PhraseConsumer<PhraseLexer> {
+    lock(lexer: PhraseLexer): boolean;
+    consume(lexer: PhraseLexer): PhraseToken;
+}

package/components/elements/addons/search/phrase/word/consumers/WhitespaceConsumer.js

@@ -0,0 +1,17 @@
+import PhraseConsumer from '../../PhraseConsumer';
+export default class WhitespaceConsumer extends PhraseConsumer {
+    lock(lexer) {
+        return lexer.bufferValue().match(/\s/) && lexer.ahead(1) !== ' ';
+    }
+    consume(lexer) {
+        if (lexer.ahead(1) !== ' ') {
+            return {
+                type: 'whitespace',
+                startIndex: lexer.start(),
+                endIndex: lexer.end(),
+                value: this._buffer.join('')
+            };
+        }
+        return null;
+    }
+}

package/components/elements/addons/search/phrase/word/consumers/WordConsumer.d.ts

@@ -0,0 +1,7 @@
+import type { PhraseToken } from '../..';
+import PhraseConsumer from '../../PhraseConsumer';
+import type PhraseLexer from '../../PhraseLexer';
+export default class WordConsumer extends PhraseConsumer<PhraseLexer> {
+    lock(lexer: PhraseLexer): boolean;
+    consume(lexer: PhraseLexer): PhraseToken;
+}

package/components/elements/addons/search/phrase/word/consumers/WordConsumer.js

@@ -0,0 +1,17 @@
+import PhraseConsumer from '../../PhraseConsumer';
+export default class WordConsumer extends PhraseConsumer {
+    lock(lexer) {
+        return !lexer.bufferValue().match(/\s/) && (lexer.ahead(1) === ' ' || lexer.ahead(1) === '');
+    }
+    consume(lexer) {
+        if (lexer.ahead(1) === ' ' || lexer.aheadIsEmpty(true)) {
+            return {
+                type: 'word',
+                startIndex: lexer.start(),
+                endIndex: lexer.end(),
+                value: this._buffer.join('')
+            };
+        }
+        return null;
+    }
+}

package/components/elements/display/Classification.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const Classification: FC;
+export default Classification;

package/components/elements/display/Classification.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip, useMediaQuery, useTheme } from '@mui/material';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+const Classification = () => {
+    const { config } = useContext(ApiConfigContext);
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const isSm = useMediaQuery(theme.breakpoints.down('md'));
+    const label = useMemo(() => {
+        if (isSm) {
+            return config.c12nDef?.UNRESTRICTED?.replace(/[a-z]/g, '').replace(/ /g, '') ?? '???';
+        }
+        else {
+            return config.c12nDef?.UNRESTRICTED ?? 'Unknown';
+        }
+    }, [config.c12nDef?.UNRESTRICTED, isSm]);
+    const color = useMemo(() => config.c12nDef?.levels_styles_map?.[label.replace(/\/\/.+/, '')]?.color ?? 'default', [config.c12nDef?.levels_styles_map, label]);
+    return _jsx(Chip, { label: t(label), color: color, sx: { mr: 1, fontSize: '.9rem', p: 2, textTransform: 'uppercase' } });
+};
+export default Classification;

package/components/elements/display/DocumentationButton.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const DocumentationButton: FC;
+export default DocumentationButton;

package/components/elements/display/DocumentationButton.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Help } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useLocation } from 'react-router-dom';
+const DocumentationButton = () => {
+    const { t } = useTranslation();
+    const location = useLocation();
+    const [link, i18nKey] = useMemo(() => {
+        switch (location.pathname) {
+            case '/action': {
+                return ['/help/actions', 'documentation.open.actions'];
+            }
+            case '/search':
+            case '/advanced': {
+                return ['/help/search', 'documentation.open.search'];
+            }
+            case '/views':
+            case '/views/create': {
+                return ['/help/views', 'documentation.open.views'];
+            }
+            case '/templates':
+            case '/templates/view': {
+                return ['/help/templates', 'documentation.open.templates'];
+            }
+            default: {
+                return [null, null];
+            }
+        }
+    }, [location.pathname]);
+    return (link && (_jsx(Tooltip, { title: t(i18nKey), children: _jsx(IconButton, { size: "small", component: Link, to: link, sx: { ml: -2, color: 'text.secondary', opacity: 0.8 }, children: _jsx(Help, { sx: { fontSize: '16px' } }) }) })));
+};
+export default DocumentationButton;

package/components/elements/display/DynamicTabs.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+declare const DynamicTabs: React.FC<{
+    tabs: {
+        title: string;
+        children: React.ReactNode;
+    }[];
+}>;
+export default DynamicTabs;

package/components/elements/display/DynamicTabs.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Tab, Tabs } from '@mui/material';
+import * as React from 'react';
+const CustomTabPanel = (props) => {
+    const { children, value, index, ...other } = props;
+    return (_jsx("div", { role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `tab-${index}`, ...other, children: value === index && _jsx(Box, { sx: { p: 1 }, children: children }) }));
+};
+const a11yProps = (index) => {
+    return {
+        id: `tab-${index}`,
+        'aria-controls': `tabpanel-${index}`
+    };
+};
+const DynamicTabs = ({ tabs }) => {
+    const [value, setValue] = React.useState(0);
+    const handleChange = (_event, newValue) => {
+        setValue(newValue);
+    };
+    return (_jsxs(Box, { sx: { width: '100%' }, children: [_jsx(Box, { sx: { borderBottom: 1, borderColor: 'divider' }, children: _jsx(Tabs, { value: value, onChange: handleChange, "aria-label": "dynamic tabs", children: tabs.map((t, index) => (_jsx(Tab, { label: t.title, ...a11yProps(index) }, t.title))) }) }), tabs.map((t, index) => (_jsx(CustomTabPanel, { value: value, index: index, children: t.children }, t.title)))] }));
+};
+export default DynamicTabs;

package/components/elements/display/HandlebarsMarkdown.d.ts

@@ -0,0 +1,9 @@
+import { type MarkdownProps } from '../display/Markdown';
+interface HandlebarsMarkdownProps extends MarkdownProps {
+    object?: {
+        [index: string]: any;
+    };
+    disableLinks?: boolean;
+}
+declare const _default: import("react").NamedExoticComponent<HandlebarsMarkdownProps>;
+export default _default;

package/components/elements/display/HandlebarsMarkdown.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable no-console */
+import Handlebars from 'handlebars';
+import asyncHelpers from 'handlebars-async-helpers';
+import { memo, useEffect, useMemo, useState } from 'react';
+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 { 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(() => {
+        const instance = asyncHelpers(Handlebars);
+        instance.registerHelper('img', async (context) => {
+            const hash = Object.fromEntries(await Promise.all(Object.entries(context.hash).map(async ([key, val]) => [key, await val])));
+            if (!hash.src) {
+                return '';
+            }
+            const props = Object.entries(hash)
+                .map(([key, val]) => `${key}="${val}"`)
+                .join(' ');
+            return new Handlebars.SafeString(`<img ${props} >`);
+        });
+        return instance;
+    }, []);
+    useEffect(() => {
+        helpers.forEach(helper => {
+            if (handlebars.helpers[helper.keyword] && !helper.componentCallback) {
+                return;
+            }
+            handlebars.registerHelper(helper.keyword, (...args) => {
+                console.debug(`Running helper ${helper.keyword}`);
+                if (helper.componentCallback) {
+                    const id = hashCode(JSON.stringify([helper.keyword, ...args])).toString();
+                    if (!mdComponents[id]) {
+                        const result = helper.componentCallback(...args);
+                        if (result instanceof Promise) {
+                            result.then(_result => setMdComponents(_components => ({ ..._components, [id]: _result })));
+                        }
+                        else {
+                            setMdComponents(_components => ({ ..._components, [id]: result }));
+                        }
+                    }
+                    return new Handlebars.SafeString(`\`${id}\``);
+                }
+                return helper.callback(...args);
+            });
+        });
+    }, [handlebars, helpers, mdComponents]);
+    useEffect(() => {
+        THROTTLER.debounce(async () => {
+            try {
+                const compiled = handlebars.compile(md || '');
+                setRendered(await compiled(object));
+            }
+            catch (err) {
+                // eslint-disable-next-line no-console
+                console.error(err);
+                setRendered(`
+<h2 style="color: red">${t('markdown.error')}</h2>
+
+**\`${err.toString()}\`**
+
+<code style="font-size: 0.8rem"><pre>
+${err.stack}
+</pre></code>
+        `);
+            }
+        });
+    }, [md, handlebars, object, t]);
+    return _jsx(Markdown, { md: rendered, disableLinks: disableLinks, components: mdComponents });
+};
+export default memo(HandlebarsMarkdown);

package/components/elements/display/HowlerAvatar.d.ts

@@ -0,0 +1,6 @@
+import type { AvatarProps } from '@mui/material';
+type HowlerAvatarProps = AvatarProps & {
+    userId: string;
+};
+declare const _default: import("react").NamedExoticComponent<HowlerAvatarProps>;
+export default _default;

package/components/elements/display/HowlerAvatar.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar, Tooltip, useTheme } from '@mui/material';
+import { AvatarContext } from '@cccsaurora/howler-ui/components/app/providers/AvatarProvider';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
+import { nameToInitials } from '@cccsaurora/howler-ui/utils/stringUtils';
+import { stringToColor } from '@cccsaurora/howler-ui/utils/utils';
+const HowlerAvatar = ({ userId, ...avatarProps }) => {
+    const { getAvatar } = useContext(AvatarContext);
+    const theme = useTheme();
+    const [props, setProps] = useState();
+    const stringAvatar = useCallback((name) => {
+        return {
+            sx: {
+                bgcolor: stringToColor(name),
+                color: theme.palette.getContrastText(stringToColor(name))
+            },
+            children: nameToInitials(name)
+        };
+    }, [theme.palette]);
+    useEffect(() => {
+        if (!userId || userId.toLowerCase() === 'unassigned') {
+            setProps({});
+        }
+        else {
+            getAvatar(userId)
+                .then(av => av && !av.startsWith('http') && !av.startsWith('data:') ? setProps(stringAvatar(av)) : setProps({ src: av }))
+                .catch(e => {
+                // eslint-disable-next-line no-console
+                console.debug(e);
+                setProps({
+                    src: null
+                });
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [userId]);
+    if (userId) {
+        return (_jsx(Tooltip, { title: userId, children: _jsx(Avatar, { ...avatarProps, ...props, sx: { ...(avatarProps?.sx || {}), ...(props?.sx || {}) } }) }));
+    }
+    else {
+        return (_jsx(Avatar, { ...avatarProps, ...props, sx: { ...(avatarProps?.sx || {}), ...(props?.sx || {}) } }));
+    }
+};
+export default memo(HowlerAvatar);

package/components/elements/display/HowlerAvatarHeader.d.ts

@@ -0,0 +1,6 @@
+import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
+import type { FC } from 'react';
+declare const HowlerAvatarHeader: FC<{
+    user: HowlerUser;
+}>;
+export default HowlerAvatarHeader;

package/components/elements/display/HowlerAvatarHeader.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Grid, styled, Typography, useTheme } from '@mui/material';
+import HowlerAvatar from './HowlerAvatar';
+const AvatarContainer = styled(Grid)(({ theme }) => ({
+    marginRight: theme.spacing(4)
+}));
+const HowlerAvatarHeader = ({ user }) => {
+    const theme = useTheme();
+    return (_jsx(AvatarContainer, { item: true, sm: 12, md: 2, children: _jsxs(Grid, { container: true, spacing: 2, justifyContent: "center", children: [_jsx(Grid, { item: true, children: _jsx(HowlerAvatar, { userId: user?.username, sx: {
+                            width: theme.spacing(16),
+                            height: theme.spacing(16),
+                            [theme.breakpoints.down('sm')]: {
+                                width: theme.spacing(24),
+                                height: theme.spacing(24)
+                            },
+                            margin: '0 1rem'
+                        } }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { textAlign: "center", children: user?.name ?? '' }) })] }) }));
+};
+export default HowlerAvatarHeader;

package/components/elements/display/HowlerCard.d.ts

@@ -0,0 +1,3 @@
+import type { CardProps } from '@mui/material';
+declare const _default: import("react").NamedExoticComponent<CardProps>;
+export default _default;

package/components/elements/display/HowlerCard.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card } from '@mui/material';
+import { memo } from 'react';
+const HowlerCard = props => (_jsx(Card, { style: { outline: 'none' }, elevation: props.variant !== 'outlined' ? 4 : 0, ...props }));
+export default memo(HowlerCard);

package/components/elements/display/Image.d.ts

@@ -0,0 +1,3 @@
+import { type DetailedHTMLProps, type FC, type ImgHTMLAttributes } from 'react';
+declare const Image: FC<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>>;
+export default Image;

package/components/elements/display/Image.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Close } from '@mui/icons-material';
+import { Box, IconButton, lighten, Modal } from '@mui/material';
+import { useState } from 'react';
+const Image = props => {
+    const [showModal, setShowModal] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx("img", { ...props, style: { ...(props.style ?? {}), cursor: 'pointer' }, onClick: () => setShowModal(true) }), _jsx(Modal, { open: showModal, onClose: () => setShowModal(false), children: _jsxs(Box, { sx: {
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                    }, onClick: () => setShowModal(false), children: [_jsx(IconButton, { onClick: () => setShowModal(false), sx: theme => ({
+                                position: 'fixed',
+                                top: '2rem',
+                                right: '2rem',
+                                backgroundColor: 'background.paper',
+                                '&:hover': {
+                                    backgroundColor: lighten(theme.palette.background.paper, 0.1)
+                                }
+                            }), children: _jsx(Close, {}) }), _jsx("img", { ...props, style: { ...(props.style ?? {}), maxWidth: '70vw', maxHeight: '70vh' } })] }) })] }));
+};
+export default Image;

package/components/elements/display/ItemManager.d.ts

@@ -0,0 +1,25 @@
+import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
+import type { TuiListItemOnSelect, TuiListItemRenderer } from '@cccsaurora/howler-ui/components/elements/addons/lists';
+import type { FC, ReactNode } from 'react';
+interface ItemManagerProps {
+    aboveSearch?: ReactNode;
+    afterSearch?: ReactNode;
+    belowSearch?: ReactNode;
+    searchFilters?: ReactNode;
+    hasError: boolean;
+    onPageChange: (nextOffset: number) => void;
+    onSearch: () => void;
+    onCreate?: () => void;
+    onSelect?: TuiListItemOnSelect<unknown>;
+    phrase: string;
+    renderer: TuiListItemRenderer<unknown>;
+    response: HowlerSearchResponse<unknown>;
+    searchAdornment?: ReactNode;
+    searching: boolean;
+    createPrompt?: string;
+    searchPrompt: string;
+    setPhrase: (value: string) => void;
+    createIcon?: ReactNode;
+}
+declare const ItemManager: FC<ItemManagerProps>;
+export default ItemManager;