@stack-spot/portal-components 0.0.18 → 1.0.0-dev.1768482754546

package/dist/components/FadingOverflow.d.ts

@@ -0,0 +1,37 @@
+import { WithStyle } from '@stack-spot/portal-theme';
+type Side = 'top' | 'right' | 'left' | 'bottom';
+type ScrollType = 'none' | 'wheel' | 'bar' | 'arrows';
+interface Props extends WithStyle {
+    /**
+     * How to scroll the content.
+     * - none: overflow is hidden. No scrolling.
+     * - wheel: the content is solely scrollable through the mouse wheel and keyboard arrows, no scroll bars are rendered.
+     * - bar: this is the normal browser scroll. The content will be scrollable through the mouse wheel, keyboard and scrollbar.
+     * - arrows: arrows will be placed in the far edges of the sides that must be scrolled. The content is scrolled through the mouse wheel,
+     * keyboard and these arrows. Hovering an arrow slowly scrolls the content, clicking the arrow fully scrolls the content in its direction.
+     * There are no scrollbars in this scenario.
+     * @default 'none'
+     */
+    scroll?: ScrollType;
+    /**
+     * If true, a horizontal scroll can be performed by using the vertical mouse wheel.
+     * @default false
+     */
+    enableHorizontalScrollWithVerticalWheel?: boolean;
+    /**
+     * Which sides to fade when the content overflows.
+     *
+     * Important: it seems the current solution doesn't support mixing vertical and horizontal scrolls. I'm not sure if this is possible, I
+     * believed combining linear gradients would work, but it doesn't.
+     */
+    sides?: Side[];
+    children?: React.ReactNode;
+}
+/**
+ * This component applies a fading graphical effect to its content if it overflows in any of the sides specified by the props.
+ *
+ * This also controls how this overflow is scrolled, introducing a new scrolling technique, which applies arrows to the overflowing side.
+ */
+export declare const FadingOverflow: ({ children, scroll, sides, enableHorizontalScrollWithVerticalWheel, className, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FadingOverflow.d.ts.map

package/dist/components/FadingOverflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FadingOverflow.d.ts","sourceRoot":"","sources":["../../src/components/FadingOverflow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAKxE,KAAK,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAC/C,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;AAErD,UAAU,KAAM,SAAQ,SAAS;IAC/B;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,uCAAuC,CAAC,EAAE,OAAO,CAAC;IAClD;;;;;OAKG;IACH,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAwFD;;;;GAIG;AACH,eAAO,MAAM,cAAc,GACzB,2FAAoG,KAAK,4CAuI1G,CAAA"}

package/dist/components/FadingOverflow.js

@@ -0,0 +1,228 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconBox } from '@citric/core';
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@citric/icons';
+import { listToClass, theme } from '@stack-spot/portal-theme';
+import { debounce } from 'lodash';
+import { useEffect, useRef } from 'react';
+import { styled } from 'styled-components';
+// Scrolling can be very fast, this sets a lower limit for us to run listeners without impacting performance.
+const MIN_CHECK_INTERVAL_MS = 20;
+// The interval which to scroll the content when a scroll arrow is hovered.
+const SCROLL_INTERVAL_MS = 20;
+// This sets the speed of the scroll when the user hovers a scroll arrow.
+const SCROLL_PX = 4;
+// Fade masks
+const masks = {
+    right: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+    left: 'linear-gradient(to right, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+    top: 'linear-gradient(to bottom, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+    bottom: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+    horizontal: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
+    vertical: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
+};
+const OverflowBox = styled.div `
+  &.hidden-scroll-bars::-webkit-scrollbar, &.scroll-arrows ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  &.scroll-arrows {
+    position: relative;
+
+    > .content {
+      width: 100%;
+    }
+  }
+
+  .scroll-to-left, .scroll-to-right, .scroll-to-top, .scroll-to-bottom {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+
+    ${IconBox} {
+      background-color: ${theme.color.light[300]};
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &.visible {
+      opacity: 0.6;
+      pointer-events: auto;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .scroll-to-left {
+    right: unset;
+    height: unset;
+  }
+  
+  .scroll-to-right {
+    left: unset;
+    height: unset;
+  }
+  
+  .scroll-to-top {
+    bottom: unset;
+    width: unset;
+  }
+  
+  .scroll-to-bottom {
+    top: unset;
+    width: unset;
+  }
+`;
+/**
+ * This component applies a fading graphical effect to its content if it overflows in any of the sides specified by the props.
+ *
+ * This also controls how this overflow is scrolled, introducing a new scrolling technique, which applies arrows to the overflowing side.
+ */
+export const FadingOverflow = ({ children, scroll = 'none', sides, enableHorizontalScrollWithVerticalWheel, className, ...props }) => {
+    const ref = useRef(null);
+    const scrollIntervalId = useRef();
+    // Add a margin to compensate for rounding inaccuracies
+    const SCROLL_MARGIN = 2;
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        const element = ref.current;
+        const fadeTop = !sides || sides.includes('top');
+        const fadeRight = !sides || sides.includes('right');
+        const fadeBottom = !sides || sides.includes('bottom');
+        const fadeLeft = !sides || sides.includes('left');
+        const overflow = scroll === 'none' ? 'clip' : 'auto';
+        element.style.overflowX = (fadeLeft || fadeRight) ? overflow : '';
+        element.style.overflowY = (fadeTop || fadeBottom) ? overflow : '';
+        if (scroll === 'arrows' || scroll === 'wheel')
+            element.classList.add('hidden-scroll-bars');
+        function stopScrolling() {
+            clearInterval(scrollIntervalId.current);
+        }
+        function checkOverflow() {
+            // masking (fading)
+            const overflowsRight = element.clientWidth < element.scrollWidth && element.scrollLeft < (element.scrollWidth - element.clientWidth);
+            const overflowsLeft = element.scrollLeft > 0;
+            const overflowsBottom = element.clientHeight < element.scrollHeight
+                && element.scrollTop < (element.scrollHeight - element.clientHeight - SCROLL_MARGIN);
+            const overflowsTop = element.scrollTop > 0;
+            const masksToApply = [];
+            if (overflowsLeft && fadeLeft && overflowsRight && fadeRight)
+                masksToApply.push(masks.horizontal);
+            else {
+                if (overflowsRight && fadeRight)
+                    masksToApply.push(masks.right);
+                if (overflowsLeft && fadeLeft)
+                    masksToApply.push(masks.left);
+            }
+            if (overflowsTop && fadeTop && overflowsBottom && fadeBottom)
+                masksToApply.push(masks.vertical);
+            else {
+                if (overflowsTop && fadeTop)
+                    masksToApply.push(masks.top);
+                if (overflowsBottom && fadeBottom)
+                    masksToApply.push(masks.bottom);
+            }
+            element.style.maskImage = masksToApply.join(', ');
+            // arrow buttons
+            if (scroll !== 'arrows')
+                return;
+            function startScrolling(side) {
+                stopScrolling();
+                const direction = side === 'bottom' || side === 'top' ? 'scrollTop' : 'scrollLeft';
+                const multiplier = side === 'bottom' || side === 'right' ? 1 : -1;
+                scrollIntervalId.current = window.setInterval(() => {
+                    element[direction] += SCROLL_PX * multiplier;
+                }, SCROLL_INTERVAL_MS);
+            }
+            const startScrollingBySide = {
+                left: () => startScrolling('left'),
+                right: () => startScrolling('right'),
+                top: () => startScrolling('top'),
+                bottom: () => startScrolling('bottom'),
+            };
+            const scrollToMaxBySide = {
+                left: () => element.scrollLeft = 0,
+                right: () => element.scrollLeft = element.scrollWidth - element.clientWidth,
+                top: () => element.scrollTop = 0,
+                bottom: () => element.scrollTop = element.scrollHeight - element.clientHeight,
+            };
+            function enableArrowButton(side) {
+                const button = element.parentNode?.querySelector(`.scroll-to-${side}`);
+                if (button?.classList.contains('visible'))
+                    return;
+                button?.classList.add('visible');
+                button?.addEventListener('mouseenter', startScrollingBySide[side]);
+                button?.addEventListener('mouseleave', stopScrolling);
+                button?.addEventListener('click', scrollToMaxBySide[side]);
+            }
+            function disableArrowButton(side) {
+                const button = element.parentNode?.querySelector(`.scroll-to-${side}`);
+                if (!button?.classList.contains('visible'))
+                    return;
+                button?.classList.remove('visible');
+                stopScrolling();
+                button?.removeEventListener('mouseenter', startScrollingBySide[side]);
+                button?.removeEventListener('mouseleave', stopScrolling);
+                button?.removeEventListener('click', scrollToMaxBySide[side]);
+            }
+            if (overflowsRight && fadeRight)
+                enableArrowButton('right');
+            else
+                disableArrowButton('right');
+            if (overflowsLeft && fadeLeft)
+                enableArrowButton('left');
+            else
+                disableArrowButton('left');
+            if (overflowsTop && fadeTop)
+                enableArrowButton('top');
+            else
+                disableArrowButton('top');
+            if (overflowsBottom && fadeBottom)
+                enableArrowButton('bottom');
+            else
+                disableArrowButton('bottom');
+        }
+        const debouncedCheck = debounce(checkOverflow, MIN_CHECK_INTERVAL_MS);
+        const resizeObserver = new ResizeObserver(debouncedCheck);
+        resizeObserver.observe(element);
+        element.addEventListener('scroll', debouncedCheck);
+        return () => {
+            stopScrolling();
+            resizeObserver.disconnect();
+            element.removeEventListener('scroll', debouncedCheck);
+        };
+    }, [sides, ref.current, scroll]);
+    useEffect(() => {
+        if (!enableHorizontalScrollWithVerticalWheel || !ref.current)
+            return;
+        const element = ref.current;
+        function scrollWithWheel(event) {
+            if (event.deltaY) {
+                element.scrollLeft += event.deltaY;
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        }
+        element.addEventListener('wheel', scrollWithWheel);
+        return () => element.removeEventListener('wheel', scrollWithWheel);
+    }, [ref.current, enableHorizontalScrollWithVerticalWheel]);
+    return scroll === 'arrows' ? (_jsxs(OverflowBox, { ...props, className: listToClass(['scroll-arrows', className]), children: [_jsx("div", { className: "content", ref: ref, children: children }), _jsx("div", { className: "scroll-to-left", "aria-hidden": true, children: _jsx(IconBox, { size: "xs", children: _jsx(ChevronLeft, {}) }) }), _jsx("div", { className: "scroll-to-right", "aria-hidden": true, children: _jsx(IconBox, { size: "xs", children: _jsx(ChevronRight, {}) }) }), _jsx("div", { className: "scroll-to-top", "aria-hidden": true, children: _jsx(IconBox, { size: "xs", children: _jsx(ChevronUp, {}) }) }), _jsx("div", { className: "scroll-to-bottom", "aria-hidden": true, children: _jsx(IconBox, { size: "xs", children: _jsx(ChevronDown, {}) }) })] })) : _jsx(OverflowBox, { ...props, className: className, ref: ref, children: children });
+};
+//# sourceMappingURL=FadingOverflow.js.map

package/dist/components/FadingOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FadingOverflow.js","sourceRoot":"","sources":["../../src/components/FadingOverflow.tsx"],"names":[],"mappings":"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"}

package/dist/components/FileTreeView/More.d.ts

@@ -0,0 +1,23 @@
+import * as icons from '@citric/icons';
+export type IconName = keyof typeof icons;
+export type MenuOption = {
+    /**
+     * The text that will be displayed for the option.
+     */
+    label: string;
+    /**
+     * The icon that will be displayed alongside the text.
+     */
+    icon: IconName;
+    /**
+     * The function that will be executed when the option is clicked.
+     */
+    onClick: VoidFunction;
+};
+interface Props {
+    loading?: boolean;
+    menu: MenuOption[];
+}
+export declare function More({ loading, menu }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=More.d.ts.map

package/dist/components/FileTreeView/More.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"More.d.ts","sourceRoot":"","sources":["../../../src/components/FileTreeView/More.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,eAAe,CAAA;AAMtC,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,KAAK,CAAA;AAEzC,MAAM,MAAM,UAAU,GAAG;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IACf;;OAEG;IACH,OAAO,EAAE,YAAY,CAAC;CACrB,CAAA;AAED,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,UAAU,EAAE,CAAC;CACpB;AA8CD,wBAAgB,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,KAAK,2CAuC5C"}

package/dist/components/FileTreeView/More.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, IconBox, Text } from '@citric/core';
+import * as icons from '@citric/icons';
+import { EllipsisVertical } from '@citric/icons';
+import { IconButton } from '@citric/ui';
+import { theme } from '@stack-spot/portal-theme';
+import { createElement, useState } from 'react';
+const styles = {
+    MoreWrapper: {
+        position: 'relative',
+        'button': {
+            width: '2rem',
+            height: '2rem',
+        },
+        '.drop': {
+            zIndex: 1,
+            position: 'absolute',
+            listStyle: 'none',
+            display: 'flex',
+            margin: '0',
+            padding: '0.25rem',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'flex-start',
+            gap: '0.5rem',
+            borderRadius: '0.25rem',
+            border: `0.063rem solid ${theme.color.light[400]}`,
+            backgroundColor: `${theme.color.light[500]}`,
+            boxShadow: `0 0 0 0.125rem ${theme.color.gray[600]}`,
+            right: '2px',
+            width: 'max-content',
+            'ul': {
+                padding: 0,
+                margin: 0,
+            },
+            '.item-list-float': {
+                minWidth: '230px',
+                listStyleType: 'none',
+                padding: '8px',
+                paddingRight: '12px',
+                display: 'flex',
+                alignItems: 'center',
+                cursor: 'pointer',
+                '&:hover': {
+                    backgroundColor: `${theme.color.light[600]}`,
+                },
+            },
+        },
+    },
+};
+export function More({ loading, menu }) {
+    const [opened, setOpened] = useState(false);
+    return (_jsxs(Box, { sx: styles.MoreWrapper, children: [_jsx(IconButton, { color: "light", size: "sm", appearance: "circle", "aria-label": "More options", disabled: loading, onClick: () => setOpened((old) => !old), onBlur: () => setTimeout(() => setOpened(false), 200), children: _jsx(IconBox, { size: "xs", children: _jsx(EllipsisVertical, {}) }) }), opened && (_jsx("div", { className: "drop", children: _jsx("ul", { className: "drop-wrapper", children: menu.map((menuItem, key) => (_jsxs("li", { role: "button", className: "item-list-float", onClick: menuItem.onClick, children: [_jsx(IconBox, { size: "sm", children: createElement(icons[menuItem.icon]) }), _jsx(Text, { appearance: "body2", children: menuItem.label })] }, key))) }) }))] }));
+}
+//# sourceMappingURL=More.js.map

package/dist/components/FileTreeView/More.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"More.js","sourceRoot":"","sources":["../../../src/components/FileTreeView/More.tsx"],"names":[],"mappings":"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"}

package/dist/components/FileTreeView/index.d.ts

@@ -0,0 +1,32 @@
+import { MenuOption } from './More.js';
+export interface FileDir {
+    /**
+     * The name of the directory or file.
+     * */
+    name: string;
+    /**
+     * dirs - An array containing the directories present in the file tree.
+     */
+    dirs: FileDir[];
+    /**
+     * isFile - A flag indicating whether the item is a file (`true`) or a directory (`false`).
+     */
+    isFile?: boolean;
+    /**
+     * itemLink - The URL or path link associated with the item in the file tree.
+     */
+    itemLink: string;
+    /**
+     * The menu options that will be rendered at the end of the line for this item.
+     */
+    menuOptions?: MenuOption[];
+}
+interface Props {
+    /**
+     * Represents the hierarchical structure of directories and files, providing the component with an organized view of the file system.
+     */
+    fileTree: FileDir;
+}
+export declare const FileTreeView: ({ fileTree }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/FileTreeView/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FileTreeView/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAQ,MAAM,QAAQ,CAAA;AA4EzC,MAAM,WAAW,OAAO;IACtB;;SAEK;IACL,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;CAC5B;AAED,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,GAAI,cAAc,KAAK,4CAwE/C,CAAA"}

package/dist/components/FileTreeView/index.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, IconBox, Text } from '@citric/core';
+import { ChevronRight, Code, Folder } from '@citric/icons';
+import { theme } from '@stack-spot/portal-theme';
+import { useState } from 'react';
+import { useAnchorTag } from '../../context/anchor.js';
+import { More } from './More.js';
+const styles = {
+    FileTreeViewWrapper: {
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        margin: '16px',
+    },
+    AccordionItemWrapper: {
+        width: '100%',
+        'ul': {
+            listStyleType: 'none',
+            margin: 0,
+            padding: 0,
+            flexDirection: 'column',
+            marginLeft: '20px',
+            justifyContent: 'center',
+        },
+        'li': {
+            display: 'flex',
+            listStyleType: 'none',
+            margin: '2px 0',
+            padding: 0,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: '4px',
+        },
+        '.accordion-node-group': {
+            justifyContent: 'space-between',
+            width: '100%',
+            '&:hover': {
+                backgroundColor: `${theme.color.light[500]}`,
+                borderRadius: '4px',
+            },
+            'a': {
+                display: 'flex',
+                alignItems: 'center',
+                textDecoration: 'underline',
+                'label': {
+                    '&:hover': {
+                        cursor: 'pointer',
+                    },
+                },
+            },
+        },
+        '.accordion-node': {
+            cursor: 'pointer',
+            flexDirection: 'row',
+            display: 'flex',
+            gap: '4px',
+            alignItems: 'center',
+            background: 'transparent',
+            color: 'inherit',
+            border: 'none',
+            '.icon': {
+                transition: 'transform ease-in-out 0.3s',
+            },
+            '.open': {
+                transform: 'rotate(90deg)',
+            },
+        },
+        'actions': {
+            display: 'flex',
+            flexDirection: 'row',
+            gap: '4px',
+            alignItems: 'center',
+        },
+    },
+};
+export const FileTreeView = ({ fileTree }) => {
+    const AccordionItem = ({ name, isFile, dirs, defaultOpened = false, menuOptions, itemLink }) => {
+        const Link = useAnchorTag();
+        const [opened, setOpened] = useState(defaultOpened);
+        const onExpand = () => {
+            setOpened(old => !old);
+        };
+        const FolderItem = () => (_jsxs("li", { className: "accordion-node-group", children: [_jsxs("button", { className: "accordion-node", onClick: onExpand, children: [_jsx(IconBox, { className: `icon ${opened ? 'open' : ''}`, children: _jsx(ChevronRight, {}) }), _jsx(IconBox, { children: _jsx(Folder, {}) }), _jsx(Text, { children: name !== '' ? name : '/' })] }), menuOptions &&
+                    _jsx("div", { className: "actions", children: _jsx(More, { menu: menuOptions }) })] }));
+        const FileItem = () => (_jsxs("li", { className: "accordion-node-group", children: [_jsxs(Link, { href: itemLink, children: [_jsx(IconBox, { children: _jsx(Code, {}) }), _jsx(Text, { as: "label", children: name })] }), menuOptions &&
+                    _jsx("div", { className: "actions", children: _jsx(More, { menu: menuOptions }) })] }));
+        return (_jsxs(Box, { sx: styles.AccordionItemWrapper, children: [isFile ? _jsx(FileItem, {}) : _jsx(FolderItem, {}), _jsx("ul", { className: "accordion-children", children: opened && !isFile && dirs && dirs.length > 0 && (_jsx(_Fragment, { children: dirs?.map((subDir, index) => (_jsx("li", { children: _jsx(AccordionItem, { ...subDir }) }, index))) })) })] }));
+    };
+    return (_jsx(Box, { sx: styles.FileTreeViewWrapper, children: _jsx(AccordionItem, { ...fileTree, defaultOpened: true }) }));
+};
+//# sourceMappingURL=index.js.map

package/dist/components/FileTreeView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FileTreeView/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/InfiniteScroll.d.ts

@@ -0,0 +1,11 @@
+import { Props as ReactInfiniteScrollProps } from 'react-infinite-scroll-component';
+/**
+ * Renders a component that provides infinite scroll.
+ *
+ * The component wraps around the ReactInfiniteScroll component.
+ * It provides a loading indicator using citric loading circular and custom styles.
+ *
+ * By default, it adds the scrollable target as page and overflow hidden.
+ */
+export declare const InfiniteScroll: ({ style, children, scrollableTarget, ...props }: Omit<ReactInfiniteScrollProps, "loader">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InfiniteScroll.d.ts.map

package/dist/components/InfiniteScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfiniteScroll.d.ts","sourceRoot":"","sources":["../../src/components/InfiniteScroll.tsx"],"names":[],"mappings":"AAEA,OAA4B,EAAE,KAAK,IAAI,wBAAwB,EAAE,MAAM,iCAAiC,CAAA;AAExG;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,iDAAiD,IAAI,CAAC,wBAAwB,EAAE,QAAQ,CAAC,4CAWvH,CAAA"}

package/dist/components/InfiniteScroll.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from '@citric/core';
+import { LoadingCircular } from '@citric/ui';
+import ReactInfiniteScroll from 'react-infinite-scroll-component';
+/**
+ * Renders a component that provides infinite scroll.
+ *
+ * The component wraps around the ReactInfiniteScroll component.
+ * It provides a loading indicator using citric loading circular and custom styles.
+ *
+ * By default, it adds the scrollable target as page and overflow hidden.
+ */
+export const InfiniteScroll = ({ style, children, scrollableTarget, ...props }) => (_jsx(ReactInfiniteScroll, { loader: _jsx(Flex, { alignItems: "center", justifyContent: "center", p: 4, flex: 1, "data-test-hint": "loading", children: _jsx(LoadingCircular, {}) }), scrollableTarget: scrollableTarget || 'page', style: { overflow: 'hidden', ...style }, ...props, children: children }));
+//# sourceMappingURL=InfiniteScroll.js.map

package/dist/components/InfiniteScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfiniteScroll.js","sourceRoot":"","sources":["../../src/components/InfiniteScroll.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,mBAA0D,MAAM,iCAAiC,CAAA;AAExG;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,KAAK,EAA4C,EAAE,EAAE,CAAC,CAC3H,KAAC,mBAAmB,IAClB,MAAM,EAAE,KAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,oBAAiB,SAAS,YAC/F,KAAC,eAAe,KAAG,GACd,EACP,gBAAgB,EAAE,gBAAgB,IAAI,MAAM,EAC5C,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,KACnC,KAAK,YAER,QAAQ,GACW,CACvB,CAAA"}

package/dist/components/InfoMaintenanceBanner.d.ts

@@ -0,0 +1,8 @@
+interface InfoMaintenanceBannerProps {
+    date: Date;
+    initialHour: string;
+    endHour: string;
+}
+export declare const InfoMaintenanceBanner: ({ date, initialHour, endHour }: InfoMaintenanceBannerProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=InfoMaintenanceBanner.d.ts.map

package/dist/components/InfoMaintenanceBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoMaintenanceBanner.d.ts","sourceRoot":"","sources":["../../src/components/InfoMaintenanceBanner.tsx"],"names":[],"mappings":"AAIA,UAAU,0BAA0B;IAClC,IAAI,EAAE,IAAI,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,qBAAqB,GAAI,gCAAgC,0BAA0B,4CAK/F,CAAA"}

package/dist/components/InfoMaintenanceBanner.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from '@citric/core';
+import { interpolate, useTranslate } from '@stack-spot/portal-translate';
+import { useDateFormatter } from '../hooks/date.js';
+export const InfoMaintenanceBanner = ({ date, initialHour, endHour }) => {
+    const t = useTranslate(dictionary);
+    const { formatSimpleDate } = useDateFormatter();
+    const dateToString = formatSimpleDate(date);
+    return _jsx(Text, { children: interpolate(t.info, dateToString, initialHour, endHour) });
+};
+const dictionary = {
+    en: {
+        info: 'We would like to inform you that StackSpot will undergo maintenance on $0, from $1 (GMT-3) to $2. During this period, this web portal will be temporarily unavailable.',
+    },
+    pt: {
+        info: 'Gostaríamos de informar que a StackSpot passará por manutenção no dia $0, das $1 (GMT-3) às $2. Durante este período, este portal web estará temporariamente indisponível.',
+    },
+};
+//# sourceMappingURL=InfoMaintenanceBanner.js.map

package/dist/components/InfoMaintenanceBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoMaintenanceBanner.js","sourceRoot":"","sources":["../../src/components/InfoMaintenanceBanner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAQhD,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAA8B,EAAE,EAAE;IAClG,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,EAAE,gBAAgB,EAAE,GAAG,gBAAgB,EAAE,CAAA;IAC/C,MAAM,YAAY,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAA;IAC3C,OAAO,KAAC,IAAI,cAAE,WAAW,CAAC,CAAC,CAAC,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,CAAC,GAAQ,CAAA;AAC/E,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,IAAI,EAAE,wKAAwK;KAC/K;IACD,EAAE,EAAE;QACF,IAAI,EAAE,4KAA4K;KACnL;CACF,CAAA"}

package/dist/components/LazyMarkdown/BlockquoteMd.d.ts

@@ -0,0 +1,11 @@
+/**
+ * BlockquoteMd component that renders a styled blockquote with an icon and text based on the provided props.
+ *
+ * @param {Object} props - The props for the BlockquoteMd component.
+ * @param {any} props.props - The properties passed to the component.
+ * @returns {JSX.Element} The BlockquoteMd component.
+ */
+export declare const BlockquoteMd: ({ props }: {
+    props: any;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BlockquoteMd.d.ts.map

package/dist/components/LazyMarkdown/BlockquoteMd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockquoteMd.d.ts","sourceRoot":"","sources":["../../../src/components/LazyMarkdown/BlockquoteMd.tsx"],"names":[],"mappings":"AAQA;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GAAI,WAAW;IAAE,KAAK,EAAE,GAAG,CAAA;CAAE,4CAoCrD,CAAA"}