@lnco-ai/ui 1.0.0

package/dist/Thumbnail/Thumbnail.d.ts

@@ -0,0 +1,28 @@
+import { SkeletonProps, SxProps } from '@mui/material';
+import { ThumbnailSizeType } from '@lnco-ai/sdk';
+type ThumbnailProps = {
+    alt: string;
+    id?: string;
+    /**
+     * default thumbnail component
+     */
+    defaultComponent?: JSX.Element;
+    isLoading?: boolean;
+    maxWidth?: string | number;
+    maxHeight?: string | number;
+    /**
+     * size of the thumbnail to fetch
+     */
+    size?: ThumbnailSizeType;
+    sx?: SxProps;
+    /**
+     * default thumbnail src link, override defaultValue
+     */
+    url?: string;
+    /**
+     * skeleton's variant
+     */
+    variant?: SkeletonProps['variant'];
+};
+declare const Thumbnail: ({ id, url, defaultComponent, alt, sx, maxWidth, maxHeight, variant, isLoading, }: ThumbnailProps) => JSX.Element | null;
+export default Thumbnail;

package/dist/Thumbnail/Thumbnail.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from '@mui/material';
+import { StyledImage } from '../StyledComponents/StyledBaseComponents.js';
+import { Variant } from '../types.js';
+const Thumbnail = ({ id, url, defaultComponent, alt, sx, maxWidth = '100%', maxHeight = '100%', variant = Variant.RECT, isLoading = false, }) => {
+    if (url) {
+        return (_jsx(StyledImage, { src: url, id: id, alt: alt, sx: [
+                {
+                    objectFit: 'cover',
+                    width: maxWidth,
+                    height: maxHeight,
+                    maxWidth,
+                    maxHeight,
+                },
+                // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+                ...(Array.isArray(sx) ? sx : [sx]),
+            ] }));
+    }
+    if (defaultComponent) {
+        return defaultComponent;
+    }
+    if (isLoading) {
+        return _jsx(Skeleton, { variant: variant, width: maxWidth, height: maxHeight });
+    }
+    return null;
+};
+export default Thumbnail;

package/dist/Tree/Breadcrumbs.d.ts

@@ -0,0 +1,14 @@
+import type { NavigationElement } from './types.js';
+export type BreadcrumbsProps = {
+    onSelect: (el: NavigationElement) => void;
+    elements: NavigationElement[];
+    rootElements?: NavigationElement[];
+    /**
+     * defines whether a root item should be displayed
+     * does not filter over elements
+     */
+    selectedId?: string;
+    maxLength?: number;
+};
+declare const Breadcrumbs: ({ onSelect, elements, rootElements, selectedId, maxLength, }: BreadcrumbsProps) => JSX.Element | null;
+export default Breadcrumbs;

package/dist/Tree/Breadcrumbs.js

@@ -0,0 +1,30 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import truncate from 'lodash.truncate';
+import { Button, Breadcrumbs as MuiBreadcrumbs, Stack, Tooltip, } from '@mui/material';
+const DEFAULT_MAX_LENGTH = 15;
+const Breadcrumbs = ({ onSelect, elements, rootElements = [], selectedId, maxLength = DEFAULT_MAX_LENGTH, }) => {
+    if (!elements) {
+        return null;
+    }
+    // include root if selected or show elements
+    const idx = rootElements.findIndex(({ id }) => id == selectedId);
+    const showRootIdx = idx < 0 ? rootElements.length : idx + 1;
+    const allElements = [
+        // show rootElements until selectedId
+        ...rootElements.slice(0, showRootIdx),
+        // show elements if selected id not in rootElements
+        ...(idx < 0 ? elements : []),
+    ];
+    return (_jsx(MuiBreadcrumbs, { separator: '\u203A', "aria-label": 'breadcrumb', children: allElements.map((ele) => (_jsx(Tooltip, { title: ele.name, children: _jsx(Button, { variant: 'text', color: 'inherit', sx: {
+                    textTransform: 'none',
+                    p: 0,
+                    minWidth: 0,
+                    '&:hover': {
+                        textDecoration: 'underline',
+                        background: 'none',
+                    },
+                }, onClick: () => {
+                    onSelect(ele);
+                }, children: _jsxs(Stack, { direction: 'row', gap: 1, children: [ele.icon, truncate(ele.name, { length: maxLength })] }) }, ele.id) }))) }));
+};
+export default Breadcrumbs;

package/dist/Tree/RowMenu.d.ts

@@ -0,0 +1,12 @@
+import type { NavigationElement } from './types.js';
+export interface RowMenuProps {
+    item: NavigationElement;
+    onNavigate: (item: NavigationElement) => void;
+    selectedId?: string;
+    onClick: (item: NavigationElement) => void;
+    isDisabled?: (item: NavigationElement) => boolean;
+    id?: string;
+    arrowId?: string;
+}
+declare const RowMenu: ({ item, onNavigate, onClick, selectedId, isDisabled, id, arrowId, }: RowMenuProps) => JSX.Element | null;
+export default RowMenu;

package/dist/Tree/RowMenu.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { KeyboardArrowRight } from '@mui/icons-material';
+import { Button, CircularProgress, IconButton, Stack, Typography, styled, } from '@mui/material';
+import { useState } from 'react';
+import { ItemType } from '@lnco-ai/sdk';
+import ItemIcon from '../icons/ItemIcon.js';
+const StyledButton = styled(Button, {
+    shouldForwardProp: (prop) => prop !== 'isSelected',
+})(({ theme, isSelected }) => ({
+    color: theme.palette.text.primary,
+    width: '100%',
+    justifyContent: 'start',
+    background: isSelected ? theme.palette.grey[200] : 'none',
+    textTransform: 'none',
+    pl: 1,
+}));
+const RowMenu = ({ item, onNavigate, onClick, selectedId, isDisabled, id, arrowId, }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    return (_jsx(Stack, { direction: 'row', justifyContent: 'space-between', id: id, sx: {
+            '& .arrow': {
+                visibility: 'hidden',
+            },
+            '&:hover .arrow': {
+                visibility: 'unset',
+            },
+        }, children: _jsxs(Stack, { direction: 'row', alignItems: 'center', width: '100%', children: [_jsx(StyledButton, { onClick: () => {
+                        onClick(item);
+                    }, isSelected: selectedId === item.id, disabled: isDisabled?.(item), startIcon: _jsx(ItemIcon, { size: '20px', alt: `${item.name} icon`, type: ItemType.FOLDER }), children: _jsx(Typography, { sx: {
+                            textOverflow: 'ellipsis',
+                            overflow: 'hidden',
+                            whiteSpace: 'nowrap',
+                        }, variant: 'body1', children: item.name }) }), isLoading && _jsx(CircularProgress, { size: 20 }), !isLoading && (_jsx(IconButton, { className: 'arrow', onClick: () => {
+                        setIsLoading(true);
+                        onNavigate(item);
+                    }, id: arrowId, size: 'small', children: _jsx(KeyboardArrowRight, {}) }))] }) }));
+};
+export default RowMenu;

package/dist/Tree/RowMenus.d.ts

@@ -0,0 +1,18 @@
+import { DiscriminatedItem } from '@lnco-ai/sdk';
+import { RowMenuProps } from './RowMenu.js';
+import { NavigationElement } from './types.js';
+export type RowMenusProps = {
+    elements?: NavigationElement[];
+    onNavigate: RowMenuProps['onNavigate'];
+    selectedId?: RowMenuProps['selectedId'];
+    onClick: RowMenuProps['onClick'];
+    isDisabled?: RowMenuProps['isDisabled'];
+    setPage?: (page: number) => void;
+    nbPages?: number;
+    page?: number;
+    emptyContent?: JSX.Element;
+    buildRowMenuId?: (id: DiscriminatedItem['id']) => string;
+    buildRowMenuArrowId?: (id: DiscriminatedItem['id']) => string;
+};
+declare const RowMenus: ({ elements, onNavigate, selectedId, onClick, isDisabled, setPage, nbPages, page, emptyContent, buildRowMenuId, buildRowMenuArrowId, }: RowMenusProps) => JSX.Element;
+export default RowMenus;

package/dist/Tree/RowMenus.js

@@ -0,0 +1,7 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pagination, Stack } from '@mui/material';
+import RowMenu from './RowMenu.js';
+const RowMenus = ({ elements, onNavigate, selectedId, onClick, isDisabled, setPage, nbPages, page, emptyContent = _jsx(_Fragment, {}), buildRowMenuId = (id) => id, buildRowMenuArrowId = (id) => id, }) => {
+    return (_jsxs(Stack, { height: '100%', flex: 1, direction: 'column', justifyContent: 'space-between', children: [_jsxs(Stack, { children: [elements?.map((ele) => (_jsx(RowMenu, { item: ele, onNavigate: onNavigate, selectedId: selectedId, onClick: onClick, isDisabled: isDisabled, id: buildRowMenuId(ele.id), arrowId: buildRowMenuArrowId(ele.id) }, ele.id))), !elements?.length && emptyContent] }), nbPages && (_jsx(Stack, { direction: 'row', justifyContent: 'end', children: nbPages > 1 && (_jsx(Pagination, { sx: { justifyContent: 'end' }, size: 'small', count: nbPages, page: page, onChange: (_, p) => setPage?.(p) })) }))] }));
+};
+export default RowMenus;

package/dist/Tree/types.d.ts

@@ -0,0 +1,6 @@
+export type NavigationElement = {
+    id: string;
+    name: string;
+    path: string;
+    icon?: JSX.Element;
+};

package/dist/Tree/types.js

@@ -0,0 +1 @@
+export {};

package/dist/UserSwitch/UserSwitch.d.ts

@@ -0,0 +1,17 @@
+import { MouseEventHandler } from 'react';
+import { CurrentAccount } from '@lnco-ai/sdk';
+type Props = {
+    Actions?: JSX.Element | JSX.Element[];
+    buildMemberMenuItemId?: (id: string) => string;
+    ButtonContent?: JSX.Element;
+    buttonId?: string;
+    isMemberLoading?: boolean;
+    currentMember?: CurrentAccount | null;
+    menuId?: string;
+    onMemberClick?: (_id: string) => MouseEventHandler;
+    avatar?: JSX.Element;
+    signedOutTooltipText?: string;
+    dataUmamiEvent?: string;
+};
+export declare const UserSwitch: ({ Actions, ButtonContent, buttonId, isMemberLoading, currentMember, menuId, avatar, dataUmamiEvent, signedOutTooltipText, }: Props) => JSX.Element;
+export default UserSwitch;

package/dist/UserSwitch/UserSwitch.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Menu, MenuItem, Skeleton, Tooltip, Typography, styled, useMediaQuery, useTheme, } from '@mui/material';
+import { useState } from 'react';
+import { AccountType } from '@lnco-ai/sdk';
+import { SHORT_TEXT_WIDTH, SMALL_AVATAR_SIZE } from '../constants.js';
+import { Variant } from '../types.js';
+const HEADER_USERNAME_MAX_WIDTH = 120;
+const StyledWrapper = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    '&:hover': {
+        cursor: 'pointer',
+    },
+}));
+export const UserSwitch = ({ Actions, ButtonContent, buttonId, isMemberLoading = false, currentMember, menuId, avatar, dataUmamiEvent, signedOutTooltipText = 'You are not signed in.', }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+    const memberName = currentMember?.name;
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const renderCurrentMemberInfo = () => {
+        if (!currentMember || !currentMember.id) {
+            return null;
+        }
+        return (_jsxs(MenuItem, { children: [avatar, _jsxs("div", { children: [_jsx(Typography, { variant: 'h6', noWrap: true, children: memberName }), currentMember.type === AccountType.Individual && (_jsx(_Fragment, { children: _jsx(Typography, { variant: 'subtitle2', noWrap: true, children: currentMember.email }) }))] })] }));
+    };
+    // renders default button
+    // shows given content or current member information
+    const renderButtonContent = () => {
+        if (ButtonContent) {
+            return ButtonContent;
+        }
+        if (isMemberLoading) {
+            return (_jsxs(StyledWrapper, { children: [_jsx(Skeleton, { variant: Variant.CIRCLE, width: SMALL_AVATAR_SIZE, height: SMALL_AVATAR_SIZE }), _jsx(Skeleton, { variant: 'text', width: SHORT_TEXT_WIDTH, sx: { mx: 2 } })] }));
+        }
+        return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: memberName ?? signedOutTooltipText, children: _jsx("span", { children: avatar }) }), memberName && !isMobile && (_jsx(Typography, { variant: 'subtitle1', sx: { mx: 2, maxWidth: HEADER_USERNAME_MAX_WIDTH }, noWrap: true, children: memberName }))] }));
+    };
+    const currentMemberInfo = renderCurrentMemberInfo();
+    return (_jsxs(_Fragment, { children: [_jsx(StyledWrapper, { onClick: handleClick, id: buttonId, role: 'button', "aria-haspopup": 'menu', "aria-controls": menuId, "aria-expanded": Boolean(anchorEl), tabIndex: 0, "data-umami-event": dataUmamiEvent, children: renderButtonContent() }), _jsxs(Menu, { id: menuId, anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose, children: [currentMemberInfo, Boolean(currentMemberInfo && Actions) && _jsx(Divider, {}), Actions] })] }));
+};
+export default UserSwitch;

package/dist/UserSwitch/UserSwitchWrapper.d.ts

@@ -0,0 +1,37 @@
+import { CurrentAccount } from '@lnco-ai/sdk';
+type UserMenuItem = {
+    icon: JSX.Element;
+    text: string;
+    redirect_path: string;
+    id?: string;
+};
+type Props = {
+    buildMemberMenuItemId?: (id: string) => string;
+    ButtonContent?: JSX.Element;
+    buttonId?: string;
+    currentMember?: CurrentAccount | null;
+    isCurrentMemberLoading?: boolean;
+    profilePath: string;
+    redirectPath: string;
+    avatar: JSX.Element;
+    seeProfileButtonId?: string;
+    seeProfileText?: string;
+    signedOutTooltipText?: string;
+    signInMenuItemId?: string;
+    /**
+     * Async function used to perform the sign out
+     * @param memberId Id of the user to sign out (current user)
+     * @returns Promise of void
+     */
+    signOut: () => Promise<void>;
+    signOutMenuItemId?: string;
+    signOutText?: string;
+    switchMemberText?: string;
+    /**
+     * Name of the event that will be sent to Umami for tracking user actions
+     */
+    dataUmamiEvent?: string;
+    userMenuItems?: UserMenuItem[];
+};
+export declare const UserSwitchWrapper: ({ buildMemberMenuItemId, ButtonContent, buttonId, currentMember, isCurrentMemberLoading, profilePath, redirectPath, avatar, seeProfileButtonId, seeProfileText, signedOutTooltipText, signInMenuItemId, signOut, signOutMenuItemId, signOutText, switchMemberText, userMenuItems, dataUmamiEvent, }: Props) => JSX.Element;
+export default UserSwitchWrapper;

package/dist/UserSwitch/UserSwitchWrapper.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AccountCircle as AccountCircleIcon, MeetingRoom as MeetingRoomIcon, } from '@mui/icons-material';
+import { ListItemIcon, MenuItem, Typography } from '@mui/material';
+import { AccountType, redirect } from '@lnco-ai/sdk';
+import Loader from '../Loader/Loader.js';
+import { UserSwitch } from './UserSwitch.js';
+export const UserSwitchWrapper = ({ buildMemberMenuItemId, ButtonContent, buttonId, currentMember, 
+// domain,
+isCurrentMemberLoading = false, 
+// isCurrentMemberSuccess,
+profilePath, redirectPath, avatar, seeProfileButtonId, seeProfileText = 'See Profile', signedOutTooltipText = 'You are not signed in.', signInMenuItemId, signOut, signOutMenuItemId, signOutText = 'Sign Out', 
+// switchMember,
+switchMemberText = 'Sign in', userMenuItems = [], dataUmamiEvent, }) => {
+    // get stored sessions
+    // const sessions = getStoredSessions();
+    // const { data } = useMembers(sessions.map(({ id }) => id));
+    // const members = data?.data?.toSeq()?.toList();
+    // save current member in sessions if it doesn't exist
+    // it is not possible to do it on /auth since it's a backend call
+    // useEffect(() => {
+    //   if (currentMember && isCurrentMemberSuccess) {
+    //     const token = getCurrentSession();
+    //     if (token) {
+    //       storeSession(
+    //         { id: currentMember.get('id'), token, createdAt: Date.now() },
+    //         domain,
+    //       );
+    //     }
+    //   }
+    // }, [currentMember, isCurrentMemberSuccess]);
+    if (isCurrentMemberLoading) {
+        return _jsx(Loader, {});
+    }
+    const handleSignOut = async () => {
+        if (currentMember) {
+            await signOut();
+        }
+        // on sign out success should redirect to sign in
+        redirect(window, redirectPath);
+    };
+    const handleSignIn = () => {
+        // setCurrentSession(null, domain);
+        // saveUrlForRedirection(window.location.href, domain);
+        return redirect(window, redirectPath);
+    };
+    const goToProfile = () => {
+        redirect(window, profilePath);
+    };
+    // const onMemberClick = (memberId: string) => () =>
+    //   switchMember({ memberId, domain });
+    let Actions;
+    const MenuItems = userMenuItems.map((item) => (_jsxs(MenuItem, { onClick: () => redirect(window, item.redirect_path), id: item.id, children: [_jsx(ListItemIcon, { children: item.icon }), _jsx(Typography, { variant: 'subtitle2', children: item.text })] }, item.text)));
+    if (currentMember && currentMember.id) {
+        Actions =
+            currentMember.type === AccountType.Individual
+                ? [
+                    _jsxs(MenuItem, { onClick: goToProfile, id: seeProfileButtonId, children: [_jsx(ListItemIcon, { children: _jsx(AccountCircleIcon, { fontSize: 'large' }) }), _jsx(Typography, { variant: 'subtitle2', children: seeProfileText })] }, 'seeProfile'),
+                ]
+                : [];
+        Actions.push(...MenuItems);
+        Actions.push(_jsxs(MenuItem, { onClick: handleSignOut, id: signOutMenuItemId, children: [_jsx(ListItemIcon, { children: _jsx(MeetingRoomIcon, { fontSize: 'large' }) }), _jsx(Typography, { variant: 'subtitle2', children: signOutText })] }, 'signout'));
+    }
+    else {
+        Actions = [
+            _jsxs(MenuItem, { onClick: handleSignIn, id: signInMenuItemId, children: [_jsx(ListItemIcon, { children: _jsx(AccountCircleIcon, { fontSize: 'large' }) }), _jsx(Typography, { variant: 'subtitle2', children: switchMemberText })] }, 'signin'),
+        ];
+    }
+    return (_jsx(UserSwitch, { ButtonContent: ButtonContent, Actions: Actions, 
+        // onMemberClick={onMemberClick}
+        currentMember: currentMember, 
+        // members={members}
+        signedOutTooltipText: signedOutTooltipText, buttonId: buttonId, buildMemberMenuItemId: buildMemberMenuItemId, avatar: avatar, dataUmamiEvent: dataUmamiEvent }));
+};
+export default UserSwitchWrapper;

package/dist/appComponents/ErrorFallback.d.ts

@@ -0,0 +1,57 @@
+import { UserFeedback } from './types.js';
+interface ErrorFallbackProps {
+    error: unknown;
+    componentStack: string;
+    eventId: string;
+    captureFeedback: (userFeedback: UserFeedback) => void;
+    title?: string;
+    formTitle?: string;
+    nameLabel?: string;
+    nameHelper?: string;
+    emailLabel?: string;
+    emailHelper?: string;
+    commentLabel?: string;
+    commentHelper?: string;
+    thanksMessage?: string;
+    sendButtonLabel?: string;
+    errorDetailsLabel?: string;
+}
+/**
+ *
+ * @returns A form to submit user feedback.
+ *
+ * @example
+const ErrorBoundary: FC<{ children?: ReactNode }> = ({ children }) => {
+  const { t: tFallback } = useTranslation('translations', {
+    keyPrefix: 'ERROR_BOUNDARY.FALLBACK',
+  });
+  return (
+    <Sentry.ErrorBoundary
+      // eslint-disable-next-line react/no-unstable-nested-components
+      fallback={({ error, componentStack, eventId }) => (
+        <ErrorFallback
+          error={error}
+          componentStack={componentStack}
+          eventId={eventId}
+          captureUserFeedback={Sentry.captureUserFeedback}
+          title={tFallback('MESSAGE_TITLE')}
+          formTitle={tFallback('MESSAGE_FEEDBACK')}
+          nameLabel={tFallback('NAME_LABEL')}
+          nameHelper={tFallback('NAME_HELPER')}
+          emailLabel={tFallback('EMAIL_LABEL')}
+          emailHelper={tFallback('EMAIL_HELPER')}
+          commentLabel={tFallback('COMMENT_LABEL')}
+          commentHelper={tFallback('COMMENT_HELPER')}
+          thanksMessage={tFallback('THANKS_FOR_FEEDBACK')}
+          sendButtonLabel={tFallback('SEND')}
+          errorDetailsLabel={tFallback('ERROR_DETAILS')}
+        />
+      )}
+    >
+      {children}
+    </Sentry.ErrorBoundary>
+  );
+};
+ */
+declare const ErrorFallback: ({ error, componentStack, eventId, captureFeedback, title, formTitle, nameLabel, nameHelper, emailLabel, emailHelper, commentLabel, commentHelper, thanksMessage, sendButtonLabel, errorDetailsLabel, }: ErrorFallbackProps) => JSX.Element;
+export default ErrorFallback;

package/dist/appComponents/ErrorFallback.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExpandMore as ExpandMoreIcon, Send as SendIcon, WarningAmber as WarningIcon, } from '@mui/icons-material';
+import { Accordion, AccordionDetails, AccordionSummary, Alert, Box, Button, Container, Paper, Stack, TextField, Typography, useTheme, } from '@mui/material';
+import { useState } from 'react';
+// DEFAULTS
+const TITLE = 'Sorry, something went wrong with this application';
+const FORM_TITLE = 'Our team has been notified. If you would like to help, please, tell us what happened below.';
+const ERROR_DETAILS = 'Details of the error';
+const NAME_LABEL = 'Name';
+const NAME_HELPER = 'Provide your name (optional)';
+const EMAIL_LABEL = 'Email';
+const EMAIL_HELPER = 'Provide your email (optional)';
+const COMMENT_LABEL = 'Comment';
+const COMMENT_HELPER = 'Tell us what happened (optional)';
+const THANKS_FOR_FEEDBACK = 'Thank you for your feedback!';
+const SEND = 'Send your feedback';
+/**
+ *
+ * @returns A form to submit user feedback.
+ *
+ * @example
+const ErrorBoundary: FC<{ children?: ReactNode }> = ({ children }) => {
+  const { t: tFallback } = useTranslation('translations', {
+    keyPrefix: 'ERROR_BOUNDARY.FALLBACK',
+  });
+  return (
+    <Sentry.ErrorBoundary
+      // eslint-disable-next-line react/no-unstable-nested-components
+      fallback={({ error, componentStack, eventId }) => (
+        <ErrorFallback
+          error={error}
+          componentStack={componentStack}
+          eventId={eventId}
+          captureUserFeedback={Sentry.captureUserFeedback}
+          title={tFallback('MESSAGE_TITLE')}
+          formTitle={tFallback('MESSAGE_FEEDBACK')}
+          nameLabel={tFallback('NAME_LABEL')}
+          nameHelper={tFallback('NAME_HELPER')}
+          emailLabel={tFallback('EMAIL_LABEL')}
+          emailHelper={tFallback('EMAIL_HELPER')}
+          commentLabel={tFallback('COMMENT_LABEL')}
+          commentHelper={tFallback('COMMENT_HELPER')}
+          thanksMessage={tFallback('THANKS_FOR_FEEDBACK')}
+          sendButtonLabel={tFallback('SEND')}
+          errorDetailsLabel={tFallback('ERROR_DETAILS')}
+        />
+      )}
+    >
+      {children}
+    </Sentry.ErrorBoundary>
+  );
+};
+ */
+const ErrorFallback = ({ error, componentStack, eventId, captureFeedback, title = TITLE, formTitle = FORM_TITLE, nameLabel = NAME_LABEL, nameHelper = NAME_HELPER, emailLabel = EMAIL_LABEL, emailHelper = EMAIL_HELPER, commentLabel = COMMENT_LABEL, commentHelper = COMMENT_HELPER, thanksMessage = THANKS_FOR_FEEDBACK, sendButtonLabel = SEND, errorDetailsLabel = ERROR_DETAILS, }) => {
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    const [comment, setComment] = useState('');
+    const [feedbackGiven, setFeedbackGiven] = useState(false);
+    const theme = useTheme();
+    const sendUserFeedback = () => {
+        const userFeedback = {
+            associatedEventId: eventId,
+            name,
+            email,
+            message: comment,
+        };
+        captureFeedback(userFeedback);
+        setFeedbackGiven(true);
+    };
+    return (_jsx(Container, { maxWidth: 'lg', children: _jsx(Paper, { variant: 'outlined', sx: { p: 4 }, children: _jsxs(Stack, { direction: 'column', spacing: 1, children: [_jsxs(Stack, { direction: 'row', spacing: 2, alignItems: 'center', children: [_jsx(WarningIcon, { sx: { color: theme.palette.error.main } }), _jsx(Typography, { variant: 'h2', color: theme.palette.error.dark, fontSize: '1.8rem', children: title })] }), feedbackGiven ? (_jsx(Alert, { severity: 'success', children: thanksMessage })) : (_jsx(Box, { id: 'user-feedback', children: _jsxs(Stack, { direction: 'column', spacing: 1, children: [_jsx(Typography, { variant: 'body1', children: formTitle }), _jsx(TextField, { value: name, onChange: (e) => setName(e.target.value), label: nameLabel, helperText: nameHelper }), _jsx(TextField, { value: email, onChange: (e) => setEmail(e.target.value), label: emailLabel, helperText: emailHelper }), _jsx(TextField, { multiline: true, rows: 5, value: comment, onChange: (e) => setComment(e.target.value), label: commentLabel, helperText: commentHelper }), _jsx(Box, { children: _jsx(Button, { startIcon: _jsx(SendIcon, {}), onClick: sendUserFeedback, children: sendButtonLabel }) })] }) })), _jsxs(Accordion, { children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, {}), "aria-controls": 'error-details', id: 'error-details', children: errorDetailsLabel }), _jsxs(AccordionDetails, { children: [_jsx(Typography, { variant: 'caption', children: JSON.stringify(error) }), _jsx(Typography, { variant: 'caption', children: componentStack })] })] })] }) }) }));
+};
+export default ErrorFallback;

package/dist/appComponents/QuestionLabel.d.ts

@@ -0,0 +1,9 @@
+import { TypographyProps } from '@mui/material';
+type QuestionLabelProps = {
+    typographyProps?: TypographyProps;
+    children: JSX.Element | JSX.Element[];
+    width?: string;
+    dataCy?: string;
+};
+declare const QuestionLabel: ({ typographyProps, children, width, dataCy, }: QuestionLabelProps) => JSX.Element;
+export default QuestionLabel;

package/dist/appComponents/QuestionLabel.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+const QuestionLabel = ({ typographyProps, children, width, dataCy, }) => (_jsx(Typography, { ...typographyProps, sx: { ...typographyProps?.sx, mb: 1, width }, variant: 'h6', "data-cy": dataCy, children: children }));
+export default QuestionLabel;

package/dist/appComponents/index.d.ts

@@ -0,0 +1,6 @@
+export { default as ErrorFallback } from './ErrorFallback.js';
+export { default as QuestionLabel } from './QuestionLabel.js';
+export { default as RequiredChip } from './statusChips/RequiredChip.js';
+export { default as SubmittedChip } from './statusChips/SubmittedChip.js';
+export { default as SavedChip } from './statusChips/SavedChip.js';
+export type { UserFeedback } from './types.js';

package/dist/appComponents/index.js

@@ -0,0 +1,5 @@
+export { default as ErrorFallback } from './ErrorFallback.js';
+export { default as QuestionLabel } from './QuestionLabel.js';
+export { default as RequiredChip } from './statusChips/RequiredChip.js';
+export { default as SubmittedChip } from './statusChips/SubmittedChip.js';
+export { default as SavedChip } from './statusChips/SavedChip.js';

package/dist/appComponents/statusChips/RequiredChip.d.ts

@@ -0,0 +1,3 @@
+import { StatusChipProps } from './types.js';
+declare const RequiredChip: ({ label, tooltip, dataCy, }: StatusChipProps) => JSX.Element;
+export default RequiredChip;

package/dist/appComponents/statusChips/RequiredChip.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WarningRounded as WarningIcon } from '@mui/icons-material';
+import { Chip, Tooltip } from '@mui/material';
+const RequiredChip = ({ label, tooltip, dataCy, }) => (_jsx(Tooltip, { title: tooltip, children: _jsx(Chip, { color: 'warning', icon: _jsx(WarningIcon, {}), label: label, variant: 'outlined', "data-cy": dataCy }) }));
+export default RequiredChip;

package/dist/appComponents/statusChips/SavedChip.d.ts

@@ -0,0 +1,3 @@
+import { StatusChipProps } from './types.js';
+declare const SavedChip: ({ label, tooltip, dataCy, }: StatusChipProps) => JSX.Element;
+export default SavedChip;

package/dist/appComponents/statusChips/SavedChip.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Backup as BackupIcon } from '@mui/icons-material';
+import { Chip, Tooltip } from '@mui/material';
+const SavedChip = ({ label, tooltip, dataCy, }) => (_jsx(Tooltip, { title: tooltip, children: _jsx(Chip, { icon: _jsx(BackupIcon, {}), label: label, variant: 'outlined', "data-cy": dataCy }) }));
+export default SavedChip;

package/dist/appComponents/statusChips/SubmittedChip.d.ts

@@ -0,0 +1,3 @@
+import { StatusChipProps } from './types.js';
+declare const SubmittedChip: ({ label, tooltip, dataCy, }: StatusChipProps) => JSX.Element;
+export default SubmittedChip;

package/dist/appComponents/statusChips/SubmittedChip.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckCircleOutline as CheckCircleOutlineIcon } from '@mui/icons-material';
+import { Chip, Tooltip } from '@mui/material';
+const SubmittedChip = ({ label, tooltip, dataCy, }) => (_jsx(Tooltip, { title: tooltip, children: _jsx(Chip, { color: 'info', icon: _jsx(CheckCircleOutlineIcon, {}), label: label, variant: 'outlined', "data-cy": dataCy }) }));
+export default SubmittedChip;

package/dist/appComponents/statusChips/types.d.ts

@@ -0,0 +1,5 @@
+export type StatusChipProps = {
+    label: string;
+    tooltip: string;
+    dataCy: string;
+};

package/dist/appComponents/statusChips/types.js

@@ -0,0 +1 @@
+export {};

package/dist/appComponents/types.d.ts

@@ -0,0 +1,8 @@
+export type UserFeedback = {
+    message: string;
+    name?: string;
+    email?: string;
+    url?: string;
+    source?: string;
+    associatedEventId?: string;
+};

package/dist/appComponents/types.js

@@ -0,0 +1 @@
+export {};

package/dist/apps.d.ts

@@ -0,0 +1 @@
+export { ErrorFallback, QuestionLabel, SavedChip, SubmittedChip, RequiredChip, type UserFeedback, } from './appComponents/index.js';

package/dist/apps.js

@@ -0,0 +1 @@
+export { ErrorFallback, QuestionLabel, SavedChip, SubmittedChip, RequiredChip, } from './appComponents/index.js';

package/dist/buttons/BookmarkButton/BookmarkButton.d.ts

@@ -0,0 +1,24 @@
+import { SvgIconProps, SxProps } from '@mui/material';
+import { MouseEventHandler } from 'react';
+import { ActionButtonVariant, ColorVariantsType } from '../../types.js';
+export type BookmarkButtonProps = {
+    sx?: SxProps;
+    /**
+     * IconButton's color
+     */
+    color?: ColorVariantsType;
+    handleBookmark: MouseEventHandler;
+    handleUnbookmark: MouseEventHandler;
+    isFavorite?: boolean;
+    className?: string;
+    /**
+     * IconButton's size
+     */
+    size?: SvgIconProps['fontSize'];
+    type?: ActionButtonVariant;
+    ariaLabel?: string;
+    tooltip?: string;
+    text?: string;
+};
+declare const BookmarkButton: ({ ariaLabel, className, color, handleBookmark, handleUnbookmark, isFavorite, size, sx, text, tooltip, type, }: BookmarkButtonProps) => JSX.Element;
+export default BookmarkButton;