@lnco-ai/ui 1.0.0

package/dist/index.js

@@ -0,0 +1,60 @@
+export * from './theme.js';
+export * from './constants.js';
+export * from './items/index.js';
+export * from './hooks/useFullscreen.js';
+export * from './hooks/useMobileView.js';
+export * from './buttons/hooks.js';
+export * from './icons/index.js';
+export * from './buttons/index.js';
+export { default as Loader } from './Loader/Loader.js';
+export { default as TextDisplay } from './TextDisplay/TextDisplay.js';
+export { withFlavor } from './TextDisplay/withFlavor.js';
+export { default as Header } from './Header/Header.js';
+export { default as Sidebar } from './Sidebar/Sidebar.js';
+export { default as DrawerHeader } from './DrawerHeader/DrawerHeader.js';
+export { default as MainMenu } from './MainMenu/MainMenu.js';
+export { useMainMenuOpenContext } from './MainMenu/hooks.js';
+export * from './MainMenu/MainMenu.js';
+export * from './MainMenu/MenuItem/MenuItem.js';
+export { default as Navigation } from './Navigation/Navigation.js';
+export { default as HomeMenu } from './Navigation/HomeMenu.js';
+export { default as ItemMenu } from './Navigation/ItemMenu.js';
+export { default as Main } from './Main/Main.js';
+export { default as withCollapse } from './Collapse/withCollapse.js';
+export { default as GraaspLogo } from './GraaspLogo/GraaspLogo.js';
+export { default as EpflLogo } from './GraaspLogo/EpflLogo.js';
+export { default as ItemLoginWrapper } from './itemLogin/ItemLoginWrapper.js';
+export { default as ForbiddenContent } from './itemLogin/ForbiddenContent.js';
+export { default as Card } from './Card/Card.js';
+export { default as FolderCard } from './Card/FolderCard.js';
+export { default as LinkCard } from './Card/LinkCard.js';
+export { default as Thumbnail } from './Thumbnail/Thumbnail.js';
+export { default as Avatar } from './Avatar/Avatar.js';
+export * from './Avatar/stringToColor.js';
+export { default as ItemBadges } from './ItemBadges/ItemBadges.js';
+export { default as ItemFlagDialog } from './ItemFlag/ItemFlagDialog.js';
+export { default as ItemFlagButton } from './ItemFlag/ItemFlagButton.js';
+export { default as CreativeCommons } from './CreativeCommons/CreativeCommons.js';
+export { default as CookiesBanner } from './CookiesBanner/CookiesBanner.js';
+export { default as SignedInWrapper } from './Authorization/SignedInWrapper.js';
+export { default as PreventGuestWrapper } from './Authorization/PreventGuestWrapper.js';
+export { default as RedirectionContent } from './Authorization/RedirectionContent.js';
+export { UserSwitch } from './UserSwitch/UserSwitch.js';
+export { UserSwitchWrapper } from './UserSwitch/UserSwitchWrapper.js';
+export { default as CustomInitialLoader } from './CustomInitialLoader/CustomInitialLoader.js';
+export { default as Select } from './Select/Select.js';
+export { default as ItemSkeleton } from './items/ItemSkeleton/ItemSkeleton.js';
+export { default as SearchInput } from './SearchInput/SearchInput.js';
+export * from './SearchInput/SearchInput.js';
+export { default as PlatformSwitch } from './PlatformSwitch/PlatformSwitch.js';
+export * from './PlatformSwitch/PlatformSwitch.js';
+export * from './PlatformSwitch/hooks.js';
+export { default as FileDropper, } from './upload/FileDropper/FileDropper.js';
+export { default as UploadFileButton, } from './upload/UploadFileButton/UploadFileButton.js';
+export { default as RowMenu } from './Tree/RowMenu.js';
+export { default as RowMenus } from './Tree/RowMenus.js';
+export { default as Breadcrumbs, } from './Tree/Breadcrumbs.js';
+export * from './ThemeContext/ThemeContext.js';
+export * from './types.js';
+export { default as DraggingWrapper } from './draggable/DraggingWrapper.js';
+export * from './draggable/types.js';

package/dist/itemLogin/ForbiddenContent.d.ts

@@ -0,0 +1,20 @@
+export type ForbiddenContentProps = {
+    /**
+     * Id to put on the root component
+     */
+    id?: string;
+    /**
+     * Id of the current member used to display the authenticated alternative
+     */
+    memberId?: string;
+    /**
+     * Title to display
+     */
+    title?: string;
+    /**
+     * Text to display if the member is authenticated (logged-in)
+     */
+    authenticatedText?: string;
+};
+declare const ForbiddenContent: ({ id, memberId, title, authenticatedText, }: ForbiddenContentProps) => JSX.Element;
+export default ForbiddenContent;

package/dist/itemLogin/ForbiddenContent.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ForbiddenText from './ForbiddenText.js';
+const ForbiddenContent = ({ id, memberId, title, authenticatedText, }) => (_jsx(ForbiddenText, { id: id, title: title, helperText: memberId ? authenticatedText : undefined }));
+export default ForbiddenContent;

package/dist/itemLogin/ForbiddenText.d.ts

@@ -0,0 +1,8 @@
+import { UUID } from '@lnco-ai/sdk';
+export type ForbiddenTextProps = {
+    id?: UUID;
+    title?: string;
+    helperText?: string;
+};
+declare const ForbiddenText: ({ id, title, helperText, }: ForbiddenTextProps) => JSX.Element;
+export default ForbiddenText;

package/dist/itemLogin/ForbiddenText.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BanIcon } from 'lucide-react';
+import { Stack, Typography } from '@mui/material';
+import { FORBIDDEN_TEXT } from './constants.js';
+const ForbiddenText = ({ id, title = FORBIDDEN_TEXT, helperText, }) => (_jsxs(Stack, { id: id, direction: 'row', alignItems: 'center', justifyContent: 'center', spacing: 2, children: [_jsx(BanIcon, { fontSize: '4em' }), _jsxs(Stack, { direction: 'column', children: [_jsx(Typography, { variant: 'h4', children: title }), _jsx(Typography, { color: 'text.secondary', maxWidth: '50ch', children: helperText })] })] }));
+export default ForbiddenText;

package/dist/itemLogin/ItemLoginScreen.d.ts

@@ -0,0 +1,26 @@
+import { ReactElement } from 'react';
+import { ItemLoginSchemaType, UUID } from '@lnco-ai/sdk';
+export type SignInPropertiesType = {
+    memberId?: string;
+    username?: string;
+    password?: string;
+};
+export type ItemLoginScreenProps = {
+    itemId: UUID;
+    /**
+     * item login schema object
+     */
+    itemLoginSchemaType?: ItemLoginSchemaType;
+    signIn: (args: {
+        itemId: string;
+    } & SignInPropertiesType) => void;
+    /**
+     * content to display when the user doesn't have access
+     */
+    ForbiddenContent?: ReactElement;
+    passwordInputId?: string;
+    signInButtonId?: string;
+    usernameInputId?: string;
+};
+declare const ItemLoginScreen: ({ ForbiddenContent, itemId, itemLoginSchemaType, passwordInputId, signIn, signInButtonId, usernameInputId, }: ItemLoginScreenProps) => JSX.Element;
+export default ItemLoginScreen;

package/dist/itemLogin/ItemLoginScreen.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container, Stack, TextField, styled } from '@mui/material';
+import { useRef, useState, } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ItemLoginSchemaType } from '@lnco-ai/sdk';
+import Button from '../buttons/Button/Button.js';
+import ForbiddenText from './ForbiddenText.js';
+const WrapperContainer = styled(Container)({
+    margin: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
+    textAlign: 'center',
+    justifyContent: 'center',
+    height: '100%',
+});
+const StyledTextField = styled(TextField)(({ theme }) => ({
+    margin: theme.spacing(1, 0),
+}));
+const ItemLoginScreen = ({ ForbiddenContent = _jsx(ForbiddenText, {}), itemId, itemLoginSchemaType, passwordInputId, signIn, signInButtonId, usernameInputId, }) => {
+    const { t } = useTranslation();
+    const passwordFieldRef = useRef(null);
+    const [password, setPassword] = useState('');
+    const [username, setUsername] = useState('');
+    // no item login detected
+    if (!itemLoginSchemaType ||
+        !Object.values(ItemLoginSchemaType).includes(itemLoginSchemaType)) {
+        return ForbiddenContent;
+    }
+    const withPassword = [ItemLoginSchemaType.UsernameAndPassword].includes(itemLoginSchemaType);
+    const onClickSignIn = () => {
+        const signInProperties = { username };
+        if (withPassword) {
+            signInProperties.password = password;
+        }
+        signIn({ itemId, ...signInProperties });
+    };
+    const onPasswordChange = (e) => {
+        setPassword(e.target.value);
+    };
+    const onUsernameChange = (e) => {
+        setUsername(e.target.value);
+    };
+    const handlePressEnter = (e) => {
+        if (e.key === 'Enter') {
+            onClickSignIn();
+        }
+    };
+    const handleUsernamePressEnter = (e) => {
+        if (e.key === 'Enter') {
+            if (withPassword) {
+                console.log(passwordFieldRef.current);
+                // focus next field
+                passwordFieldRef.current?.focus();
+            }
+            else {
+                // single field, send the login
+                onClickSignIn();
+            }
+        }
+    };
+    const shouldSignInBeDisabled = () => {
+        const usernameError = !username?.length;
+        const passwordError = withPassword && !password?.length;
+        return usernameError || passwordError;
+    };
+    // validation for the username is length between 3 and 50 chars
+    const error = Boolean(username) && (username.length < 3 || username.length > 50);
+    return (_jsxs(WrapperContainer, { maxWidth: 'xs', children: [_jsx(Stack, { alignItems: 'center', children: _jsx(StyledTextField, { error: error, autoFocus: true, onChange: onUsernameChange, label: t('Pseudonym'), color: 'primary', variant: 'outlined', fullWidth: true, type: 'text', id: usernameInputId, value: username, onKeyDown: handleUsernamePressEnter }) }), withPassword && (_jsx(StyledTextField, { onChange: onPasswordChange, label: t('Password'), value: password, type: 'password', color: 'primary', variant: 'outlined', id: passwordInputId, onKeyDown: handlePressEnter, 
+                // used to set focus when first field is filled
+                inputRef: passwordFieldRef })), _jsx(Button, { onClick: onClickSignIn, id: signInButtonId, disabled: shouldSignInBeDisabled(), children: t('Sign In') })] }));
+};
+export default ItemLoginScreen;

package/dist/itemLogin/ItemLoginWrapper.d.ts

@@ -0,0 +1,23 @@
+import { ReactElement, ReactNode } from 'react';
+import { CurrentAccount, DiscriminatedItem, ItemLoginSchemaType, UUID } from '@lnco-ai/sdk';
+import { SignInPropertiesType } from './ItemLoginScreen.js';
+export type ItemLoginAuthorizationProps = {
+    signIn: (args: {
+        itemId: string;
+    } & SignInPropertiesType) => void;
+    itemId: UUID;
+    itemErrorStatusCode: number | null;
+    currentAccount?: CurrentAccount | null;
+    item?: DiscriminatedItem;
+    itemLoginSchemaType?: ItemLoginSchemaType;
+    usernameInputId?: string;
+    signInButtonId?: string;
+    passwordInputId?: string;
+    children?: ReactNode;
+    forbiddenContent?: ReactElement;
+    isLoading?: boolean;
+    enrollContent?: ReactElement;
+    requestAccessContent?: ReactElement;
+};
+declare const ItemLoginAuthorization: ({ currentAccount, item, itemErrorStatusCode, itemLoginSchemaType, itemId, signIn, isLoading, usernameInputId, signInButtonId, passwordInputId, forbiddenContent, enrollContent, requestAccessContent, children, }: ItemLoginAuthorizationProps) => ReactNode;
+export default ItemLoginAuthorization;

package/dist/itemLogin/ItemLoginWrapper.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StatusCodes } from 'http-status-codes';
+import { AccountType, } from '@lnco-ai/sdk';
+import CustomInitialLoader from '../CustomInitialLoader/CustomInitialLoader.js';
+import ForbiddenText from './ForbiddenText.js';
+import ItemLoginScreen from './ItemLoginScreen.js';
+const ItemLoginAuthorization = ({ currentAccount, item, itemErrorStatusCode, itemLoginSchemaType, itemId, signIn, isLoading, usernameInputId, signInButtonId, passwordInputId, forbiddenContent = _jsx(ForbiddenText, {}), enrollContent, requestAccessContent, children, }) => {
+    if (isLoading) {
+        return _jsx(CustomInitialLoader, {});
+    }
+    // the item could be fetched without errors
+    // because the user is signed in and has access
+    // or because the item is public
+    if (item && item.id) {
+        return children;
+    }
+    if (currentAccount) {
+        if (currentAccount.type === AccountType.Individual) {
+            // user is logged in and item login enabled - request automatic membership
+            if (itemLoginSchemaType) {
+                return enrollContent ?? forbiddenContent;
+            }
+            // user is logged in and item login disabled
+            // cannot access to item - request access
+            if (itemErrorStatusCode === StatusCodes.FORBIDDEN) {
+                return requestAccessContent ?? forbiddenContent;
+            }
+            // any other error return forbidden message
+            return forbiddenContent;
+        }
+        else {
+            return forbiddenContent;
+        }
+    }
+    // signed out but can sign in with item login
+    if (itemLoginSchemaType) {
+        return (_jsx(ItemLoginScreen, { itemId: itemId, signIn: signIn, itemLoginSchemaType: itemLoginSchemaType, usernameInputId: usernameInputId, signInButtonId: signInButtonId, passwordInputId: passwordInputId }));
+    }
+    // either the item does not allow item login
+    // or the user is already signed in as normal user and hasn't the access to this item
+    return forbiddenContent;
+};
+export default ItemLoginAuthorization;

package/dist/itemLogin/constants.d.ts

@@ -0,0 +1 @@
+export declare const FORBIDDEN_TEXT = "You cannot access this item";

package/dist/itemLogin/constants.js

@@ -0,0 +1 @@
+export const FORBIDDEN_TEXT = 'You cannot access this item';

package/dist/items/AppItem.d.ts

@@ -0,0 +1,60 @@
+import { AppItemType, Member } from '@lnco-ai/sdk';
+import { ContextPayload, Token } from './appItemHooks.js';
+/**
+ * This query param is added to the fetched url to fix an issue where the browser
+ * is able to aggressively cache the `index.html` file for the app.
+ * This aggressive caching behavior is an issue as when apps get updated, the index.html file
+ * changes but the browser has an old version of it, and tries to fetch javascript and assets that are out of date
+ * resulting in the app not being able to load.
+ *
+ * This could be also fixed by not overriding the `index.html` file when releasing a new app version
+ * and simply pushing it to another subpath than `/latest/`. In this case the agressive caching behavior would not be a problem.
+ */
+export declare const CURRENT_TIMESTAMP_QUERY_PARAM = "ts";
+type AppItemProps = {
+    /**
+     * corresponding item of the app
+     */
+    item: AppItemType;
+    /**
+     * function to fetch the app token
+     */
+    requestApiAccessToken: (args: {
+        id: string;
+        key: string;
+        origin: string;
+    }) => Promise<{
+        token: Token;
+    }>;
+    /**
+     * context passed to the app
+     */
+    contextPayload: ContextPayload;
+    /**
+     * app height
+     */
+    height?: number | string;
+    /**
+     * id prop passed to the iframe
+     */
+    frameId?: string;
+    /**
+     * Whether manual resize is enabled (as opposed to automatic resize, default)
+     */
+    isResizable?: boolean;
+    /**
+     * id of the member currently signed in
+     */
+    memberId?: Member['id'];
+    /**
+     * Whether the caption is shown
+     */
+    showCaption?: boolean;
+    /**
+     * Whether the item should be shown in a collapsible element
+     */
+    showCollapse?: boolean;
+    onCollapse?: (c: boolean) => void;
+};
+declare const _default: import("react").MemoExoticComponent<({ item, contextPayload, requestApiAccessToken, height, frameId, memberId, isResizable, showCaption, showCollapse, onCollapse, }: AppItemProps) => JSX.Element>;
+export default _default;

package/dist/items/AppItem.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton, styled } from '@mui/material';
+import { memo, useMemo, useRef, useState } from 'react';
+import { appendQueryParamToUrl, getAppExtra, } from '@lnco-ai/sdk';
+import withCollapse from '../Collapse/withCollapse.js';
+import { SCREEN_MAX_HEIGHT } from '../constants.js';
+import { useAppCommunication } from './appItemHooks.js';
+import { iframeCommonStyles } from './iframeStyles.js';
+import withCaption from './withCaption.js';
+import withResizing from './withResizing.js';
+const AppIFrame = styled('iframe')(({ isResizable }) => ({
+    ...iframeCommonStyles,
+    /**
+     * IMPORTANT to not override the height when using dynamic sizing
+     * The present styles are applied with higher specificity, so the dynamic height
+     * provided by the app using the resizing mechanism is ignored.
+     */
+    height: !isResizable ? undefined : '100%',
+}));
+const DEFAULT_APP_HEIGHT = 400;
+const APP_ITEM_WIDTH = '100%';
+/**
+ * This query param is added to the fetched url to fix an issue where the browser
+ * is able to aggressively cache the `index.html` file for the app.
+ * This aggressive caching behavior is an issue as when apps get updated, the index.html file
+ * changes but the browser has an old version of it, and tries to fetch javascript and assets that are out of date
+ * resulting in the app not being able to load.
+ *
+ * This could be also fixed by not overriding the `index.html` file when releasing a new app version
+ * and simply pushing it to another subpath than `/latest/`. In this case the agressive caching behavior would not be a problem.
+ */
+export const CURRENT_TIMESTAMP_QUERY_PARAM = 'ts';
+const AppItem = ({ item, contextPayload, requestApiAccessToken, height = DEFAULT_APP_HEIGHT, frameId, memberId, isResizable = false, showCaption = true, showCollapse = false, onCollapse, }) => {
+    // state
+    const [isIFrameLoading, setIsIFrameLoading] = useState(true);
+    const iFrameRef = useRef(null);
+    const appUrl = getAppExtra(item.extra)?.url || '';
+    useAppCommunication({
+        item,
+        appUrl,
+        iFrameRef,
+        contextPayload,
+        requestApiAccessToken,
+    });
+    const onLoad = () => setIsIFrameLoading(false);
+    const appUrlWithQuery = useMemo(() => appendQueryParamToUrl(appUrl, {
+        itemId: item.id,
+        // this ensures that the index.html can not be aggressively cached by the browser
+        [CURRENT_TIMESTAMP_QUERY_PARAM]: Date.now().toString(),
+    }), [item]);
+    const iframe = (_jsx(AppIFrame, { "data-testid": frameId, id: frameId, ref: iFrameRef, isResizable: isResizable, onLoad: onLoad, src: appUrlWithQuery, sx: { visibility: isIFrameLoading ? 'hidden' : 'visible' }, title: item?.name, width: APP_ITEM_WIDTH, allow: 'fullscreen; serial; microphone' }));
+    const ResizableIframe = withResizing({
+        height,
+        memberId: memberId,
+        itemId: item.id,
+        component: iframe,
+    });
+    let component = (_jsxs(_Fragment, { children: [isIFrameLoading && (_jsx(Skeleton, { variant: 'rectangular', width: '100%', height: SCREEN_MAX_HEIGHT })), isResizable ? _jsx(ResizableIframe, {}) : iframe] }));
+    if (showCaption) {
+        component = withCaption({
+            item,
+        })(component);
+    }
+    if (showCollapse) {
+        component = withCollapse({ item, onCollapse })(component);
+    }
+    return component;
+};
+export default memo(AppItem);

package/dist/items/DocumentItem.d.ts

@@ -0,0 +1,19 @@
+import { DocumentItemType } from '@lnco-ai/sdk';
+export type DocumentItemProps = {
+    id?: string;
+    emptyMessage?: string;
+    showEmpty?: boolean;
+    /**
+     * Show the item name as the Alert title
+     */
+    showTitle?: boolean;
+    onCollapse?: (c: boolean) => void;
+} & ({
+    showCollapse: true;
+    item: DocumentItemType;
+} | {
+    showCollapse?: false;
+    item: Pick<DocumentItemType, 'extra' | 'name'>;
+});
+declare const DocumentItem: ({ id, item, emptyMessage, showEmpty, showCollapse, showTitle, onCollapse, }: DocumentItemProps) => JSX.Element;
+export default DocumentItem;

package/dist/items/DocumentItem.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import { getDocumentExtra } from '@lnco-ai/sdk';
+import TextDisplay from '../TextDisplay/TextDisplay.js';
+import { withFlavor } from '../TextDisplay/withFlavor.js';
+import withCollapse from '../Collapse/withCollapse.js';
+const DocumentItem = ({ id, item, emptyMessage = 'This document is empty…', showEmpty, showCollapse, showTitle, onCollapse, }) => {
+    let component;
+    const extra = getDocumentExtra(item.extra);
+    if (!extra?.content && showEmpty) {
+        component = (_jsx(Typography, { variant: 'body2', sx: { fontStyle: 'italic', color: 'lightgrey' }, children: emptyMessage }));
+    }
+    else {
+        component = withFlavor({
+            content: _jsx(TextDisplay, { id: id, content: extra?.content }),
+            flavor: extra?.flavor,
+            title: showTitle ? item?.name : undefined,
+        });
+    }
+    if (showCollapse) {
+        component = withCollapse({ item, onCollapse })(component);
+    }
+    return component;
+};
+export default DocumentItem;

package/dist/items/DownloadButtonFileItem.d.ts

@@ -0,0 +1,9 @@
+type DownloadButtonFileItemProps = {
+    id?: string;
+    name: string;
+    caption?: string;
+    url: string;
+    onClick?: () => void;
+};
+declare const DownloadButtonFileItem: ({ id, name, caption, url, onClick, }: DownloadButtonFileItemProps) => JSX.Element;
+export default DownloadButtonFileItem;

package/dist/items/DownloadButtonFileItem.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DownloadIcon, FileIcon } from 'lucide-react';
+import { Button, Stack, Typography, styled } from '@mui/material';
+const StyledLink = styled('a')({
+    textDecoration: 'none',
+});
+const DownloadButtonFileItem = ({ id, name = 'File', caption = '', url, onClick, }) => {
+    return (_jsx(StyledLink, { id: id, href: url, target: '_blank', rel: 'noreferrer', download: name, children: _jsx(Button, { size: 'large', variant: 'contained', startIcon: _jsx(FileIcon, {}), onClick: onClick, sx: { textTransform: 'none' }, children: _jsxs(Stack, { direction: 'row', gap: 4, alignItems: 'center', children: [_jsxs(Stack, { direction: 'column', alignItems: 'flex-start', children: [_jsx(Typography, { children: name }), _jsx(Typography, { variant: 'caption', children: caption })] }), _jsx(DownloadIcon, {})] }) }) }));
+};
+export default DownloadButtonFileItem;

package/dist/items/EtherpadItem.d.ts

@@ -0,0 +1,26 @@
+import { CSSProperties } from 'react';
+/**
+ * @see https://etherpad.org/doc/v1.8.18/#index_embed-parameters
+ */
+type EtherpadEmbedOptions = {
+    showLineNumbers?: boolean;
+    showControls?: boolean;
+    showChat?: boolean;
+    useMonospaceFont?: boolean;
+    userName?: string;
+    userColor?: string;
+    noColors?: boolean;
+    alwaysShowChat?: boolean;
+    lang?: string;
+    rtl?: boolean;
+    '#L'?: number;
+};
+type EtherpadItemProps = {
+    itemId: string;
+    padUrl: string;
+    iframeId?: string;
+    options?: EtherpadEmbedOptions;
+    style?: CSSProperties;
+};
+declare const EtherpadItem: ({ itemId, padUrl, iframeId, options, style, }: EtherpadItemProps) => JSX.Element;
+export default EtherpadItem;

package/dist/items/EtherpadItem.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const EtherpadItem = ({ itemId, padUrl, iframeId = `etherpad-container-${itemId}`, options, style, }) => {
+    const src = new URL(padUrl);
+    if (options) {
+        Object.entries(options).forEach(([param, value]) => src.searchParams.set(param, String(value)));
+    }
+    return (_jsx("iframe", { id: iframeId, src: src.href, frameBorder: 0, sandbox: 'allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts allow-same-origin', style: {
+            width: '100%',
+            height: '100%',
+            border: 'none',
+            display: 'block',
+            ...style,
+        } }));
+};
+export default EtherpadItem;

package/dist/items/FileAudio.d.ts

@@ -0,0 +1,9 @@
+import { SxProps } from '@mui/material';
+type FileAudioProps = {
+    id?: string;
+    url?: string;
+    type: string;
+    sx?: SxProps;
+};
+declare const FileAudio: ({ id, url, type, sx }: FileAudioProps) => JSX.Element;
+export default FileAudio;

package/dist/items/FileAudio.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from '@mui/material';
+const FileAudio = ({ id, url, type, sx }) => {
+    const StyledAudio = styled('audio')({
+        maxWidth: '100%',
+        width: '100%',
+    });
+    return (_jsx(StyledAudio, { sx: sx, id: id, controls: true, children: _jsx("source", { src: url, type: type }) }));
+};
+export default FileAudio;

package/dist/items/FileImage.d.ts

@@ -0,0 +1,7 @@
+type FileImageProps = {
+    alt: string;
+    url?: string;
+    id?: string;
+};
+declare const FileImage: ({ id, url, alt }: FileImageProps) => JSX.Element;
+export default FileImage;

package/dist/items/FileImage.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const FileImage = ({ id, url, alt }) => {
+    return (_jsx("img", { id: id, src: url, alt: alt, title: alt, style: {
+            // do not overflow the parent
+            maxWidth: '100%',
+            // display bigger than the original size if the parent wants it
+            width: '100%',
+        } }));
+};
+export default FileImage;

package/dist/items/FileItem.d.ts

@@ -0,0 +1,25 @@
+import { LocalFileItemType, S3FileItemType } from '@lnco-ai/sdk';
+export type FileItemProps = {
+    /**
+     * blob content of the file, overridden by fileUrl
+     * */
+    content?: Blob;
+    /**
+     * url of the file, overrides content
+     * */
+    fileUrl?: string;
+    defaultItem?: JSX.Element;
+    errorMessage?: string;
+    id?: string;
+    item: LocalFileItemType | S3FileItemType;
+    maxHeight?: number | string;
+    /**
+     * use a custom pdf reader from the link if defined
+     * */
+    pdfViewerLink?: string;
+    showCollapse?: boolean;
+    onClick?: () => void;
+    onCollapse?: (c: boolean) => void;
+};
+declare const _default: import("react").MemoExoticComponent<({ content, fileUrl, defaultItem, errorMessage, id, item, maxHeight, showCollapse, pdfViewerLink, onClick, onCollapse, }: FileItemProps) => JSX.Element>;
+export default _default;