@lnco-ai/ui 1.0.0

package/dist/draggable/DraggingWrapper.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// we could replace dnd with this https://docs.dndkit.com
+import { Grid2 as Grid } from '@mui/material';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import DraggableElement from './DraggableElement.js';
+import InBetween from './InBetween.js';
+const DraggingWrapper = ({ id, rows = [], getRowId, onDropInRow: onDropInRowFn, onDropBetweenRow: onDropBetweenRowFn, renderComponent, isMovable, enableMoveInBetween = true, allowFiles = true, canDrop, nbColumns = 1, }) => {
+    const onDropInRow = (draggedRow, targetRow) => {
+        onDropInRowFn?.(draggedRow, targetRow);
+    };
+    const onDropBetweenRow = (draggedRow, previousRow) => {
+        onDropBetweenRowFn?.(draggedRow, previousRow);
+    };
+    return (
+    // we need context={window} to use multiple times in the document
+    // https://github.com/react-dnd/react-dnd/issues/3257#issuecomment-1239254032
+    _jsx(DndProvider, { backend: HTML5Backend, context: window, children: _jsxs(Grid, { container: true, id: id, width: '100%', children: [_jsx(Grid, { size: 12, children: _jsx(InBetween, { onDrop: onDropBetweenRow, enableMoveInBetween: enableMoveInBetween, renderComponent: renderComponent }) }), rows.map((row) => (_jsxs(Grid, { size: Math.floor(12 / nbColumns), children: [_jsx(DraggableElement, { canDrop: canDrop, allowFiles: allowFiles, isMovable: isMovable, row: row, renderComponent: renderComponent, onDrop: onDropInRow }, getRowId?.(row)), _jsx(InBetween, { allowFiles: allowFiles, renderComponent: renderComponent, enableMoveInBetween: enableMoveInBetween, previousRow: row, onDrop: onDropBetweenRow })] })))] }) }));
+};
+export default DraggingWrapper;

package/dist/draggable/InBetween.d.ts

@@ -0,0 +1,10 @@
+import type { DraggableAndDroppableProps, DroppedFile } from './types.js';
+export type InBetweenProps<T> = {
+    previousRow?: T;
+    enableMoveInBetween: boolean;
+    onDrop: (draggedRow: T | DroppedFile, previous?: T) => void;
+    renderComponent: (el: T | DroppedFile, args: DraggableAndDroppableProps) => JSX.Element;
+    allowFiles?: boolean;
+};
+declare const InBetween: <T extends object>({ previousRow, onDrop, enableMoveInBetween, renderComponent, allowFiles, }: InBetweenProps<T>) => JSX.Element;
+export default InBetween;

package/dist/draggable/InBetween.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// we could replace dnd with this https://docs.dndkit.com
+import { Box } from '@mui/material';
+import { useDrop } from 'react-dnd';
+import { NativeTypes } from 'react-dnd-html5-backend';
+const InBetween = ({ previousRow, onDrop, enableMoveInBetween, renderComponent, allowFiles = true, }) => {
+    const accept = ['row'];
+    if (allowFiles) {
+        accept.push(NativeTypes.FILE);
+    }
+    const [{ isOver, data }, drop] = useDrop(() => ({
+        accept,
+        drop: (draggedRow) => {
+            return onDrop(draggedRow, previousRow);
+        },
+        canDrop: () => enableMoveInBetween,
+        collect: (monitor) => ({
+            isOver: !!monitor.isOver(),
+            canDrop: !!monitor.canDrop(),
+            data: monitor.getItem(),
+        }),
+    }), [onDrop]);
+    const spacing = 12;
+    return (_jsxs(Box, { ref: drop, children: [(!isOver || !enableMoveInBetween) && (_jsx(Box, { style: { padding: 0, height: spacing, width: '100%' } })), isOver && enableMoveInBetween && (_jsx(Box, { sx: {
+                    opacity: 0.5,
+                    paddingTop: spacing / 8,
+                    paddingBottom: spacing / 8,
+                }, children: renderComponent(data, {
+                    isOver: false,
+                    isDragging: false,
+                    isMovable: false,
+                }) }))] }));
+};
+export default InBetween;

package/dist/draggable/types.d.ts

@@ -0,0 +1,10 @@
+export type DraggableAndDroppableProps = {
+    isDragging: boolean;
+    isOver: boolean;
+    isMovable: boolean;
+};
+export type DroppedFile = {
+    dataTransfer: DataTransfer;
+    files: File[];
+    items: DataTransferItemList;
+};

package/dist/draggable/types.js

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

package/dist/enums/errors.d.ts

@@ -0,0 +1,3 @@
+export declare const Errors: {
+    readonly BlobURL: "errorBlobUrl";
+};

package/dist/enums/errors.js

@@ -0,0 +1,3 @@
+export const Errors = {
+    BlobURL: 'errorBlobUrl',
+};

package/dist/hooks/useFullscreen.d.ts

@@ -0,0 +1,5 @@
+export type FullscreenHookType = {
+    isFullscreen: boolean;
+    toggleFullscreen: () => void;
+};
+export declare const useFullscreen: () => FullscreenHookType;

package/dist/hooks/useFullscreen.js

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+export const useFullscreen = () => {
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const toggleFullscreen = () => {
+        if (document) {
+            const bodyElem = document.body;
+            if (!document.fullscreenElement) {
+                bodyElem
+                    .requestFullscreen()
+                    .then(() => setIsFullscreen(true))
+                    .catch((err) => {
+                    console.error(`Error attempting to enable fullscreen mode: ${err.message} (${err.name})`);
+                });
+            }
+            else {
+                document.exitFullscreen();
+                setIsFullscreen(false);
+            }
+        }
+    };
+    // listen to fullscreen changes happening when pressing "ESC" etc ...
+    useEffect(() => {
+        const fullScreenChangeHandler = () => {
+            if (!document.fullscreenElement) {
+                // exits fullScreen
+                setIsFullscreen(false);
+            }
+            else {
+                // enters fullScreen
+                setIsFullscreen(true);
+            }
+        };
+        window.addEventListener('fullscreenchange', fullScreenChangeHandler);
+        return () => window.removeEventListener('fullscreenchange', fullScreenChangeHandler);
+    }, []);
+    return { isFullscreen, toggleFullscreen };
+};

package/dist/hooks/useMobileView.d.ts

@@ -0,0 +1,4 @@
+export type MobileViewHookType = {
+    isMobile: boolean;
+};
+export declare const useMobileView: () => MobileViewHookType;

package/dist/hooks/useMobileView.js

@@ -0,0 +1,6 @@
+import { useMediaQuery, useTheme } from '@mui/material';
+export const useMobileView = () => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+    return { isMobile };
+};

package/dist/icons/AnalyticsIcon.d.ts

@@ -0,0 +1,15 @@
+import { SxProps } from '@mui/material';
+export type AnalyticsIconProps = {
+    sx?: SxProps;
+    size?: number;
+    primaryColor?: string;
+    primaryOpacity?: number;
+    secondaryColor?: string;
+    secondaryOpacity?: number;
+    selected?: boolean;
+    disabled?: boolean;
+    disabledColor?: string;
+    disableHover?: boolean;
+};
+declare const AnalyticsIcon: ({ size, sx, primaryColor, primaryOpacity, secondaryColor, secondaryOpacity, disabledColor, disabled, selected, disableHover, }: AnalyticsIconProps) => JSX.Element;
+export default AnalyticsIcon;

package/dist/icons/AnalyticsIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PRIMARY_COLOR, SECONDARY_COLOR } from '../theme.js';
+import { SVGWrapper, StyledG } from './StyledSVGComponents.js';
+const AnalyticsIcon = ({ size = 50, sx, primaryColor = PRIMARY_COLOR, primaryOpacity = 1, secondaryColor = SECONDARY_COLOR, secondaryOpacity = 1, disabledColor, disabled = false, selected, disableHover = true, }) => {
+    return (_jsx(SVGWrapper, { sx: sx, size: size, viewBox: '0 0 1080 1080', children: _jsxs(StyledG, { primaryColor: primaryColor, primaryOpacity: primaryOpacity, secondaryColor: secondaryColor, secondaryOpacity: secondaryOpacity, selected: selected, disabledColor: disabledColor, disabled: disabled, disableHover: disableHover, children: [_jsx("circle", { cx: '540', cy: '540', r: '540' }), _jsx("path", { d: 'M795.03,549.17h-243.54c-8,0-14.51-6.51-14.51-14.51V274.34c0-9.43-7.88-17.04-17.45-16.48-51.86,3.03-102.08,22.79-145.22,57.14-41.37,32.94-73.48,76.78-92.88,126.79-18.62,48.02-24.05,98.9-15.7,147.15,9.26,53.51,34.51,101.73,75.06,143.34,50.92,52.25,114.66,79.86,184.32,79.86,33.65,0,67.41-6.41,100.37-19.05,32.02-12.28,61.69-29.81,88.19-52.1,55.32-46.54,90.03-108.1,97.74-173.34,.55-4.69-.93-9.41-4.06-12.93-3.13-3.52-7.62-5.54-12.33-5.54Zm-243.54,58.61h189.73c-13.08,32.89-35.62,63.42-65.26,88.36-43.36,36.47-98.33,57.39-150.83,57.39-25.61,0-50.29-4.86-73.36-14.45-25.08-10.42-48.29-26.47-68.99-47.71-32.13-32.97-52.08-70.8-59.29-112.43-6.54-37.76-2.18-77.86,12.6-115.96,15.42-39.77,41.96-76.04,74.74-102.13,20.84-16.59,43.56-28.8,67.55-36.29v210.11c0,40.32,32.8,73.12,73.12,73.12Z' }), _jsx("path", { d: 'M584.11,228.53c-9.53-.57-17.53,7.05-17.53,16.48V505.34c0,9.1,7.41,16.51,16.51,16.51h245.52c9.01,0,16.35-7.3,16.35-16.26v-.16c0-146.67-114.58-268.3-260.85-276.89Zm198.16,234.71h-157.08v-168.94c79.71,21.68,141.18,87.79,157.08,168.94Z' })] }) }));
+};
+export default AnalyticsIcon;

package/dist/icons/BuildIcon.d.ts

@@ -0,0 +1,15 @@
+import { SxProps } from '@mui/material';
+export type BuildIconProps = {
+    size?: number;
+    sx?: SxProps;
+    primaryColor?: string;
+    primaryOpacity?: number;
+    secondaryColor?: string;
+    secondaryOpacity?: number;
+    selected?: boolean;
+    disabled?: boolean;
+    disabledColor?: string;
+    disableHover?: boolean;
+};
+declare const BuildIcon: ({ size, primaryColor, primaryOpacity, secondaryColor, secondaryOpacity, disabledColor, disabled, sx, selected, disableHover, }: BuildIconProps) => JSX.Element;
+export default BuildIcon;

package/dist/icons/BuildIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PRIMARY_COLOR, SECONDARY_COLOR } from '../theme.js';
+import { SVGWrapper, StyledG } from './StyledSVGComponents.js';
+const BuildIcon = ({ size = 50, primaryColor = PRIMARY_COLOR, primaryOpacity = 1, secondaryColor = SECONDARY_COLOR, secondaryOpacity = 1, disabledColor, disabled = false, sx, selected, disableHover = true, }) => {
+    return (_jsx(SVGWrapper, { size: size, viewBox: '0 0 1080 1080', sx: sx, children: _jsxs(StyledG, { selected: selected, primaryColor: primaryColor, primaryOpacity: primaryOpacity, secondaryColor: secondaryColor, secondaryOpacity: secondaryOpacity, disabledColor: disabledColor, disabled: disabled, disableHover: disableHover, children: [_jsx("circle", { cx: '540', cy: '540', r: '540' }), _jsx("path", { d: 'M656.39,481.93h-228.19c-30.88,0-56-25.12-56-56V250.47c0-30.88,25.12-56,56-56h228.19c30.88,0,56,25.12,56,56v175.46c0,30.88-25.12,56-56,56Zm-228.19-236.33c-2.69,0-4.87,2.18-4.87,4.87v175.46c0,2.69,2.18,4.87,4.87,4.87h228.19c2.69,0,4.87-2.18,4.87-4.87V250.47c0-2.69-2.18-4.87-4.87-4.87h-228.19Z' }), _jsx("path", { d: 'M845.1,805.78h-228.19c-30.88,0-56-25.12-56-56v-175.46c0-30.88,25.12-56,56-56h228.19c30.88,0,56,25.12,56,56v175.46c0,30.88-25.12,56-56,56Zm-228.19-236.33c-2.69,0-4.87,2.18-4.87,4.87v175.46c0,2.69,2.18,4.87,4.87,4.87h228.19c2.69,0,4.87-2.18,4.87-4.87v-175.46c0-2.69-2.18-4.87-4.87-4.87h-228.19Z' }), _jsx("path", { d: 'M467.68,805.78H239.48c-30.88,0-56-25.12-56-56v-175.46c0-30.88,25.12-56,56-56h228.19c30.88,0,56,25.12,56,56v175.46c0,30.88-25.12,56-56,56Zm-228.19-236.33c-2.69,0-4.87,2.18-4.87,4.87v175.46c0,2.69,2.18,4.87,4.87,4.87h228.19c2.69,0,4.87-2.18,4.87-4.87v-175.46c0-2.69-2.18-4.87-4.87-4.87H239.48Z' })] }) }));
+};
+export default BuildIcon;

package/dist/icons/EtherpadIcon.d.ts

@@ -0,0 +1,7 @@
+import { SxProps, Theme } from '@mui/material';
+type Props = {
+    color?: string;
+    sx?: SxProps<Theme>;
+};
+declare const EtherpadIcon: ({ color: initialColor, sx }: Props) => JSX.Element;
+export default EtherpadIcon;

package/dist/icons/EtherpadIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgIcon } from '@mui/material';
+const EtherpadIcon = ({ color: initialColor, sx }) => {
+    const color = initialColor ?? 'currentcolor';
+    return (_jsxs(SvgIcon, { viewBox: '0 0 420 420', version: '1.1', id: 'svg148', xmlnsXlink: 'http://www.w3.org/1999/xlink', xmlns: 'http://www.w3.org/2000/svg', sx: sx, children: [_jsxs("defs", { children: [_jsx("rect", { id: 'c', x: '42', y: '167', width: '168', height: '27', rx: '13.5' }), _jsxs("filter", { id: 'f', x: '-.0571', y: '-.356', width: '1.11', height: '2.01', children: [_jsx("feOffset", { dx: '0', dy: '8', in: 'SourceAlpha', result: 'shadowOffsetOuter1' }), _jsx("feGaussianBlur", { in: 'shadowOffsetOuter1', result: 'shadowBlurOuter1', stdDeviation: '4' }), _jsx("feColorMatrix", { in: 'shadowBlurOuter1', values: '0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.0568181818 0' })] }), _jsx("rect", { id: 'b', x: '41', y: '110', width: '142', height: '25', rx: '12.5' }), _jsxs("filter", { id: 'e', x: '-.0676', y: '-.384', width: '1.14', height: '2.09', children: [_jsx("feOffset", { dx: '0', dy: '8', in: 'SourceAlpha', result: 'shadowOffsetOuter1' }), _jsx("feGaussianBlur", { in: 'shadowOffsetOuter1', result: 'shadowBlurOuter1', stdDeviation: '4' }), _jsx("feColorMatrix", { in: 'shadowBlurOuter1', values: '0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.0568181818 0' })] }), _jsx("rect", { id: 'a', x: '41', y: '226', width: '105', height: '25', rx: '12.5' }), _jsxs("filter", { id: 'd', x: '-.0914', y: '-.384', width: '1.18', height: '2.09', children: [_jsx("feOffset", { dx: '0', dy: '8', in: 'SourceAlpha', result: 'shadowOffsetOuter1' }), _jsx("feGaussianBlur", { in: 'shadowOffsetOuter1', result: 'shadowBlurOuter1', stdDeviation: '4' }), _jsx("feColorMatrix", { in: 'shadowBlurOuter1', values: '0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.0568181818 0' })] })] }), _jsx("g", { transform: 'translate(40,25)', fill: 'none', fillRule: 'evenodd', children: _jsx("g", { transform: 'translate(-415,-351)', children: _jsx("g", { transform: 'translate(415,351)', children: _jsxs("g", { transform: 'translate(0,15)', children: [_jsx("rect", { width: '340', height: '340', rx: '70', fill: color }), _jsx("path", { d: 'm238 138c-2.89-2.88-7.56-2.88-10.4 0s-2.89 7.54 0 10.4c7.78 7.75 12.1 18 12.1 28.9s-4.28 21.2-12.1 28.9c-2.89 2.88-2.89 7.54 0 10.4 1.44 1.44 3.33 2.16 5.22 2.16s3.78-0.72 5.22-2.16c10.6-10.5 16.4-24.5 16.4-39.3s-5.82-28.8-16.4-39.3z', fill: '#fff', fillRule: 'nonzero', opacity: '.754' }), _jsx("path", { d: 'm267 113c-2.82-2.88-7.39-2.88-10.2 0-2.82 2.88-2.82 7.55 0 10.4 28.6 29.2 28.6 76.7 0 106-2.82 2.88-2.82 7.55 0 10.4 1.41 1.44 3.26 2.16 5.11 2.16s3.7-0.72 5.11-2.16c34.2-34.9 34.2-91.8 0-127z', fill: '#fff', fillRule: 'nonzero', opacity: '.754' }), _jsx("use", { width: '100%', height: '100%', fill: '#000000', filter: 'url(#f)', xlinkHref: '#c' }), _jsx("use", { width: '100%', height: '100%', fill: '#ffffff', fillRule: 'evenodd', xlinkHref: '#c' }), _jsx("use", { width: '100%', height: '100%', fill: '#000000', filter: 'url(#e)', xlinkHref: '#b' }), _jsx("use", { width: '100%', height: '100%', fill: '#ffffff', fillRule: 'evenodd', xlinkHref: '#b' }), _jsx("use", { width: '100%', height: '100%', fill: '#000000', filter: 'url(#d)', xlinkHref: '#a' }), _jsx("use", { width: '100%', height: '100%', fill: '#ffffff', fillRule: 'evenodd', xlinkHref: '#a' })] }) }) }) })] }));
+};
+export default EtherpadIcon;

package/dist/icons/H5PIcon.d.ts

@@ -0,0 +1,6 @@
+type H5PProps = {
+    size: string | number;
+    color?: string;
+};
+declare const H5PIcon: ({ size, color }: H5PProps) => JSX.Element;
+export default H5PIcon;

package/dist/icons/H5PIcon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const H5PIcon = ({ size, color }) => {
+    const fillColor = color ?? 'currentColor';
+    return (_jsxs("svg", { width: size, height: size, version: '1.1', viewBox: '0 0 1300 1300', xmlns: 'http://www.w3.org/2000/svg', children: [_jsx("path", { d: 'M 95.74,650.3 V 406.99 H 246.59 V 616.24 H 409.61 V 406.99 h 121.75 l -1.307,5.4745 c -2.5392,10.635 -47.071,207.77 -52.49,232.36 -3.0226,13.718 -4.9042,25.533 -4.1815,26.256 0.7227,0.723 30.515,5.3399 66.205,10.26 l 64.891,8.9462 9.8954,-11.577 c 27.937,-32.684 75.421,-33.24 102.84,-1.2047 35.938,41.985 4.7303,107.54 -51.078,107.29 -19.803,-0.087 -35.659,-7.3743 -50.547,-23.231 l -11.784,-12.551 -64.806,9.1844 c -35.644,5.0515 -65.351,9.7291 -66.017,10.395 -2.5401,2.5401 10.5,34.529 20.974,51.451 19.244,31.091 42.436,50.852 76.365,65.064 8.6293,3.6149 16.146,7.0049 16.703,7.5333 0.55756,0.5285 -39.132,0.9609 -88.2,0.9609 h -89.213 v -180.05 h -163.02 v 180.05 h -150.85 z', fill: fillColor, id: 'path2' }), _jsx("path", { d: 'm 763.7,891.5 c 1.2712,-1.1737 7.9008,-3.9462 14.732,-6.1611 58.229,-18.879 103.08,-90.97 103.13,-165.77 0.03,-43.193 -12.994,-76.78 -41.351,-106.63 -19.256,-20.271 -39.728,-33.177 -66.904,-42.178 -17.859,-5.9149 -22.878,-6.4619 -60.827,-6.6287 -38.795,-0.17059 -42.686,0.23875 -62.676,6.5945 -11.722,3.727 -22.957,7.4073 -24.967,8.1784 -2.3603,0.90573 -3.2737,0.22951 -2.5802,-1.9102 0.59044,-1.8218 4.5292,-18.367 8.7528,-36.767 l 7.6793,-33.455 h 220.99 v -100.35 l 113.75,1.2124 c 106.04,1.1303 115.07,1.5628 133.21,6.383 50.455,13.403 80.167,40.402 95.377,86.669 5.6162,17.083 6.4237,23.632 6.601,53.528 0.1509,25.428 -0.8842,38.073 -4.0828,49.878 -13.928,51.405 -51.002,87.442 -103.98,101.07 -19.479,5.0099 -65.583,8.1775 -121.05,8.3168 l -41.971,0.1053 v 180.05 h -88.078 c -50.624,0 -87.095,-0.9075 -85.766,-2.1341 z m 261.63,-281.61 c 16.962,-5.037 32.185,-19.719 36.303,-35.012 7.7315,-28.713 -8.2767,-57.752 -36.215,-65.695 -4.8411,-1.3763 -26.594,-3.2014 -48.34,-4.0558 l -39.538,-1.5534 v 113.44 l 37.321,-1.6092 c 22.552,-0.97241 42.524,-3.1542 50.468,-5.5133 z', fill: fillColor, id: 'path3' })] }));
+};
+export default H5PIcon;

package/dist/icons/ItemIcon.d.ts

@@ -0,0 +1,23 @@
+import { ItemType, LocalFileItemExtra, S3FileItemExtra, UnionOfConst } from '@lnco-ai/sdk';
+export type ItemIconProps = {
+    alt: string;
+    /**
+     * item type
+     */
+    type: UnionOfConst<typeof ItemType> | 'upload';
+    /**
+     * An HTML Color to use for the foreground of the icon
+     */
+    color?: string;
+    /**
+     * @deprecated Use the `mimetype` prop.
+     * To extract the mimetype from the item extra use the `getMimetype` function exported from @lnco-ai/sdk
+     * Item extra used to define the mimetype
+     */
+    extra?: LocalFileItemExtra | S3FileItemExtra;
+    mimetype?: string;
+    iconSrc?: string;
+    size?: string;
+};
+declare const ItemIcon: ({ color, extra, mimetype: defaultMimetype, iconSrc, alt, size, type, }: ItemIconProps) => JSX.Element;
+export default ItemIcon;

package/dist/icons/ItemIcon.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ItemType, MimeTypes, getMimetype, } from '@lnco-ai/sdk';
+import { AppWindowIcon, CableIcon, ClapperboardIcon, FileIcon, FileTextIcon, FileUpIcon, FolderArchiveIcon, FolderIcon, ImageIcon, LinkIcon, Music2Icon, TextIcon, } from 'lucide-react';
+import { StyledImage } from '../StyledComponents/StyledBaseComponents.js';
+const MAX_ICON_SIZE = '25px';
+const ItemIcon = ({ color, extra, mimetype: defaultMimetype, iconSrc, alt = '', size = MAX_ICON_SIZE, type, }) => {
+    const mimetype = extra ? getMimetype(extra) : defaultMimetype;
+    if (iconSrc) {
+        return (_jsx(StyledImage, { sx: {
+                // icons should be squared
+                maxHeight: size,
+                maxWidth: size,
+                height: size,
+                width: size,
+                objectFit: 'cover',
+                borderRadius: 1,
+            }, alt: alt, src: iconSrc }));
+    }
+    let Icon = FileIcon;
+    switch (type) {
+        case ItemType.FOLDER:
+            Icon = FolderIcon;
+            break;
+        case ItemType.SHORTCUT:
+            Icon = CableIcon;
+            break;
+        case ItemType.DOCUMENT: {
+            Icon = TextIcon;
+            break;
+        }
+        case ItemType.LOCAL_FILE:
+        case ItemType.S3_FILE: {
+            if (mimetype) {
+                if (MimeTypes.isImage(mimetype)) {
+                    Icon = ImageIcon;
+                    break;
+                }
+                if (MimeTypes.isVideo(mimetype)) {
+                    Icon = ClapperboardIcon;
+                    break;
+                }
+                if (MimeTypes.isAudio(mimetype)) {
+                    Icon = Music2Icon;
+                    break;
+                }
+                if (MimeTypes.isPdf(mimetype)) {
+                    Icon = FileTextIcon;
+                    break;
+                }
+                if (MimeTypes.isZip(mimetype)) {
+                    Icon = FolderArchiveIcon;
+                    break;
+                }
+            }
+            Icon = FileIcon;
+            break;
+        }
+        case ItemType.LINK: {
+            Icon = LinkIcon;
+            break;
+        }
+        case ItemType.APP: {
+            Icon = AppWindowIcon;
+            break;
+        }
+        case 'upload': {
+            Icon = FileUpIcon;
+            break;
+        }
+        default:
+            break;
+    }
+    return _jsx(Icon, { color: color, size: size });
+};
+export default ItemIcon;

package/dist/icons/LibraryIcon.d.ts

@@ -0,0 +1,16 @@
+import { SxProps } from '@mui/material';
+export type LibraryIconProps = {
+    disabled?: boolean;
+    disabledColor?: string;
+    primaryColor?: string;
+    primaryOpacity?: number;
+    secondaryColor?: string;
+    secondaryOpacity?: number;
+    selected?: boolean;
+    showSetting?: boolean;
+    size?: number;
+    sx?: SxProps;
+    disableHover?: boolean;
+};
+declare const LibraryIcon: ({ size, primaryColor, primaryOpacity, secondaryColor, disabledColor, secondaryOpacity, sx, showSetting, selected, disableHover, }: LibraryIconProps) => JSX.Element;
+export default LibraryIcon;

package/dist/icons/LibraryIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PRIMARY_COLOR, SECONDARY_COLOR } from '../theme.js';
+import { SVGWrapper, StyledG } from './StyledSVGComponents.js';
+const LibraryIcon = ({ size = 50, primaryColor = PRIMARY_COLOR, primaryOpacity = 1, secondaryColor = SECONDARY_COLOR, disabledColor = '#CCC', secondaryOpacity = 1, sx, showSetting = false, selected, disableHover = true, }) => {
+    return (_jsxs(SVGWrapper, { sx: sx, size: size, viewBox: '0 0 1080 1080', children: [_jsxs(StyledG, { primaryColor: primaryColor, primaryOpacity: primaryOpacity, secondaryColor: secondaryColor, secondaryOpacity: secondaryOpacity, selected: selected, disabledColor: disabledColor, disableHover: disableHover, children: [_jsx("circle", { fill: primaryColor, cx: '540', cy: '540', r: '540' }), _jsx("path", { d: 'M368.54,261.87h-106.6c-12.21,0-22.15,9.94-22.15,22.15v503.58c0,12.22,9.94,22.15,22.15,22.15h106.6c12.21,0,22.15-9.94,22.15-22.15V284.02c0-12.21-9.94-22.15-22.15-22.15Zm-22.15,44.3v459.28h-62.3V306.17h62.3Z' }), _jsx("path", { d: 'M548.76,261.87h-106.6c-12.22,0-22.15,9.94-22.15,22.15v503.58c0,12.22,9.94,22.15,22.15,22.15h106.6c12.21,0,22.15-9.94,22.15-22.15V284.02c0-12.21-9.94-22.15-22.15-22.15Zm-84.45,503.58V306.17h62.3v459.28h-62.3Z' }), _jsx("path", { d: 'M919.72,741.33l-187.72-467.29c-2.21-5.49-6.42-9.8-11.86-12.12-5.44-2.32-11.46-2.39-16.95-.18l-98.92,39.74c-5.49,2.21-9.79,6.42-12.12,11.86s-2.39,11.46-.18,16.95l187.72,467.29c2.21,5.49,6.42,9.79,11.86,12.11,2.76,1.18,5.69,1.78,8.7,1.78,2.84,0,5.62-.54,8.26-1.6l98.92-39.74c5.49-2.21,9.79-6.42,12.12-11.86,2.32-5.44,2.39-11.46,.18-16.95Zm-49.36-4.04l-57.81,23.22-171.21-426.18,57.81-23.22,171.21,426.18Z' })] }), showSetting && (_jsx("g", { id: 'SVGRepo_iconCarrier', transform: 'translate(-14.742 50.121)', children: _jsx("path", { transform: 'matrix(9,0,0,9,550,550)', d: 'm56.74 20.89-1-2.31c3.33-7.53 3.11-7.75 2.46-8.41l-4.2-4.17-0.42-0.35h-0.49c-0.26 0-1 0-7.51 2.93l-2.38-1c-3.11-7.58-3.43-7.58-4.33-7.58h-6c-0.9 0-1.25 0-4.1 7.66l-2.37 1c-4.4-1.88-6.95-2.82-7.65-2.82h-0.56l-4.58 4.49c-0.7 0.65-0.94 0.88 2.58 8.3l-1 2.3c-7.79 3-7.79 3.3-7.79 4.23v5.89c0 0.92 0 1.25 7.82 4l1 2.29c-3.33 7.53-3.11 7.76-2.46 8.41l4.24 4.25 0.42 0.37h0.5c0.25 0 1 0 7.5-3l2.38 1c3.1 7.63 3.41 7.63 4.32 7.63h6c0.92 0 1.25 0 4.11-7.66l2.39-1c4.37 1.85 6.93 2.79 7.61 2.79h0.57l4.62-4.52c0.66-0.66 0.89-0.89-2.62-8.28l1-2.3c7.81-3 7.81-3.33 7.81-4.23v-5.87c-0.04-0.93-0.04-1.25-7.87-4.04zm-20.74 16.91a9.8 9.8 0 1 1 10-9.8 9.91 9.91 0 0 1-10 9.8z', fill: primaryColor, stroke: secondaryColor, strokeWidth: '5' }) }))] }));
+};
+export default LibraryIcon;

package/dist/icons/PlayIcon.d.ts

@@ -0,0 +1,15 @@
+import { SxProps } from '@mui/material';
+export type PlayIconProps = {
+    size?: number;
+    sx?: SxProps;
+    primaryColor?: string;
+    primaryOpacity?: number;
+    secondaryColor?: string;
+    secondaryOpacity?: number;
+    selected?: boolean;
+    disabled?: boolean;
+    disabledColor?: string;
+    disableHover?: boolean;
+};
+declare const PlayIcon: ({ size, primaryColor, primaryOpacity, secondaryColor, secondaryOpacity, sx, disabledColor, disabled, selected, disableHover, }: PlayIconProps) => JSX.Element;
+export default PlayIcon;

package/dist/icons/PlayIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PRIMARY_COLOR, SECONDARY_COLOR } from '../theme.js';
+import { SVGWrapper, StyledG } from './StyledSVGComponents.js';
+const PlayIcon = ({ size = 50, primaryColor = PRIMARY_COLOR, primaryOpacity = 1, secondaryColor = SECONDARY_COLOR, secondaryOpacity = 1, sx, disabledColor, disabled = false, selected, disableHover = true, }) => {
+    return (_jsx(SVGWrapper, { sx: sx, size: size, viewBox: '0 0 1080 1080', children: _jsxs(StyledG, { selected: selected, primaryColor: primaryColor, primaryOpacity: primaryOpacity, secondaryColor: secondaryColor, secondaryOpacity: secondaryOpacity, disabledColor: disabledColor, disabled: disabled, disableHover: disableHover, children: [_jsx("circle", { cx: '540', cy: '540', r: '540' }), _jsx("path", { d: 'M439.21,340.8l292.95,195.48-292.95,195.48V340.8m-29.63-92.75c-19.29,0-37.21,15.34-37.21,37.16v502.13c0,21.83,17.92,37.16,37.21,37.16,6.91,0,13.99-1.97,20.49-6.3l376.25-251.07c22.01-14.69,22.01-47.03,0-61.72L430.07,254.35c-6.5-4.34-13.58-6.3-20.49-6.3h0Z' })] }) }));
+};
+export default PlayIcon;

package/dist/icons/ResizingIcon.d.ts

@@ -0,0 +1,2 @@
+declare const ResizingIcon: () => JSX.Element;
+export default ResizingIcon;

package/dist/icons/ResizingIcon.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { UnfoldVerticalIcon } from 'lucide-react';
+import { Box, styled, useTheme } from '@mui/material';
+const RESIZING_ICON_LEVEL_BACKGROUND_COLOR = 300;
+const RESIZING_ICON_LEVEL_BACKGROUND_COLOR_FOCUS = 500;
+const StyledIcon = styled(UnfoldVerticalIcon)(({ theme }) => ({
+    backgroundColor: theme.palette.grey[RESIZING_ICON_LEVEL_BACKGROUND_COLOR],
+    padding: theme.spacing(0.5),
+    '&:hover': {
+        backgroundColor: theme.palette.grey[RESIZING_ICON_LEVEL_BACKGROUND_COLOR_FOCUS],
+        transition: 'all 0.3s ease-in-out',
+    },
+    '&:focus': {
+        backgroundColor: theme.palette.grey[RESIZING_ICON_LEVEL_BACKGROUND_COLOR_FOCUS],
+    },
+}));
+const ResizingIcon = () => {
+    const theme = useTheme();
+    return (_jsx(Box, { display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(StyledIcon, { color: theme.palette.primary.main }) }));
+};
+export default ResizingIcon;

package/dist/icons/StyledSVGComponents.d.ts

@@ -0,0 +1,35 @@
+import { SxProps } from '@mui/material';
+import { ReactNode } from 'react';
+type SVGWrapperProps = {
+    children: ReactNode;
+    viewBox?: string;
+    size?: number;
+    sx?: SxProps;
+} & React.SVGProps<SVGElement>;
+declare const SVGWrapper: ({ children, viewBox, size, sx, }: SVGWrapperProps) => JSX.Element;
+type SVGPathProps = {
+    sx?: SxProps;
+} & React.SVGProps<SVGPathProps>;
+declare const SVGPath: ({ d, sx }: SVGPathProps) => JSX.Element;
+type StyledGProps = {
+    /** if true, apply selected styles (default: false). Circles get primary color/opacity and paths get secondary color/opacity. */
+    selected?: boolean;
+    /** color of circle when selected. Color of path when not selected. */
+    primaryColor?: string;
+    /** opacity of circle when selected. Opacity of path when not selected. */
+    primaryOpacity?: number;
+    /** color of path when selected. Color of circle when not selected. */
+    secondaryColor?: string;
+    /** opacity of path when selected. Opacity of circle when not selected. */
+    secondaryOpacity?: number;
+    /** if true, apply disabled styles (default: false) */
+    disabled?: boolean;
+    /** if true, does not apply hover styles (default: false). On hover, circles get primary color/opacity and paths get secondary color/opacity. */
+    disableHover?: boolean;
+    /** color of path when disabled. */
+    disabledColor?: string;
+};
+declare const StyledG: (props: StyledGProps & {
+    children: ReactNode;
+}) => ReactNode;
+export { SVGWrapper, SVGPath, StyledG };

package/dist/icons/StyledSVGComponents.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from '@mui/material';
+const SVGWrapper = ({ children, viewBox, size, sx, }) => {
+    const StyledSVG = styled('svg')({
+        width: size,
+        height: size,
+    });
+    return (_jsx(StyledSVG, { viewBox: viewBox, sx: sx, children: children }));
+};
+const SVGPath = ({ d, sx }) => {
+    const StyledPath = styled('path')();
+    return _jsx(StyledPath, { d: d, sx: sx });
+};
+const StyledG = styled('g')(({ selected = false, primaryColor, primaryOpacity, secondaryColor, secondaryOpacity, disabled = false, disabledColor = '#CCC', disableHover = true, }) => {
+    if (disabled) {
+        return {
+            path: {
+                fill: disabledColor,
+                fillOpacity: 0.6,
+            },
+            circle: {
+                fill: 'transparent',
+                fillOpacity: 1,
+            },
+        };
+    }
+    const hoverStyles = disableHover
+        ? {}
+        : {
+            '&:hover': {
+                circle: {
+                    fill: primaryColor,
+                    fillOpacity: primaryOpacity,
+                },
+                path: {
+                    fill: secondaryColor,
+                    fillOpacity: secondaryOpacity,
+                },
+            },
+        };
+    return {
+        path: {
+            fill: selected ? secondaryColor : primaryColor,
+            fillOpacity: selected ? secondaryOpacity : primaryOpacity,
+        },
+        circle: {
+            fill: selected ? primaryColor : 'transparent',
+            fillOpacity: selected ? primaryOpacity : secondaryOpacity,
+        },
+        ...hoverStyles,
+    };
+});
+export { SVGWrapper, SVGPath, StyledG };

package/dist/icons/index.d.ts

@@ -0,0 +1,6 @@
+export { default as AnalyticsIcon } from './AnalyticsIcon.js';
+export { default as BuildIcon } from './BuildIcon.js';
+export { default as EtherpadIcon } from './EtherpadIcon.js';
+export { default as ItemIcon } from './ItemIcon.js';
+export { default as LibraryIcon } from './LibraryIcon.js';
+export { default as PlayIcon } from './PlayIcon.js';

package/dist/icons/index.js

@@ -0,0 +1,6 @@
+export { default as AnalyticsIcon } from './AnalyticsIcon.js';
+export { default as BuildIcon } from './BuildIcon.js';
+export { default as EtherpadIcon } from './EtherpadIcon.js';
+export { default as ItemIcon } from './ItemIcon.js';
+export { default as LibraryIcon } from './LibraryIcon.js';
+export { default as PlayIcon } from './PlayIcon.js';

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+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, type FileDropperProps, } from './upload/FileDropper/FileDropper.js';
+export { default as UploadFileButton, type UploadFileButtonProps, } from './upload/UploadFileButton/UploadFileButton.js';
+export { default as RowMenu, type RowMenuProps } from './Tree/RowMenu.js';
+export { default as RowMenus, type RowMenusProps } from './Tree/RowMenus.js';
+export { default as Breadcrumbs, type BreadcrumbsProps, } from './Tree/Breadcrumbs.js';
+export type { NavigationElement } from './Tree/types.js';
+export * from './ThemeContext/ThemeContext.js';
+export * from './types.js';
+export { default as DraggingWrapper } from './draggable/DraggingWrapper.js';
+export * from './draggable/types.js';