@stack-spot/ai-chat-widget 1.8.1 → 1.8.3

package/dist/components/Code.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copied from the extension's webview.
+ */
+import { ExtraProps } from 'react-markdown';
+import { WithChildren } from '../types.js';
+export type CodeAction = (code: string, language: string) => void;
+type CodeProps = React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & ExtraProps & {
+    messageId?: string;
+};
+export interface Props extends WithChildren {
+    showActionBar?: boolean;
+    onInsertCode?: CodeAction;
+    onNewFile?: CodeAction;
+    onCopyCode?: CodeAction;
+    language?: string;
+}
+export declare const Code: ({ className, onInsertCode, onNewFile, onCopyCode, language, children, showActionBar, ...props }: Pick<CodeProps, "className" | "messageId"> & Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Code.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../src/components/Code.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAOH,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAI3C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,UAAU,GAAG,CACvB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb,IAAI,CAAA;AAET,KAAK,SAAS,GAAG,KAAK,CAAC,eAAe,CAAC,WAAW,CAAC,GAC/C,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GACjC,UAAU,GACV;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAE1B,MAAM,WAAW,KAAM,SAAQ,YAAY;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6DD,eAAO,MAAM,IAAI,oGASd,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,CAAC,GAAG,KAAK,4CA+FpD,CAAA"}

package/dist/components/Code.js

@@ -0,0 +1,118 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Copied from the extension's webview.
+ */
+import { AddCode, ChevronDoubleDown, Collapse, Copy } from '@citric/icons';
+import { IconButton } from '@citric/ui';
+import { theme, useThemeKind } from '@stack-spot/portal-theme';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useState } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { materialDark, vs } from 'react-syntax-highlighter/dist/esm/styles/prism/index.js';
+import styled from 'styled-components';
+const CodeBox = styled.code `
+  background: ${theme.color.light[500]};
+  border-radius: 6px;
+  overflow: hidden;
+
+  .highlighter {
+    margin: 0 !important;
+  }
+
+  code {
+    font-size: 13px !important;
+    font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace !important;
+    background-color: transparent !important;
+
+    .linenumber {
+      color: ${theme.color.light.contrastText} !important;
+      opacity: 0.6;
+      min-width: 20px !important;
+    }
+  }
+
+  .action-bar {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    background: ${theme.color.light[600]};
+    padding: 4px 6px;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+
+    button {
+      background: transparent;
+      border: none;
+      opacity: 0.75;
+      transition: opacity 0.2s;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  &.light {
+    border: 1px solid rgb(221, 221, 221);
+
+    > div {
+      border: none !important;
+    }
+
+    .action-bar {
+      background: rgba(0, 0, 0, 0.1);
+    }
+  }
+`;
+const lineNumbersStyle = {
+    userSelect: 'none',
+};
+export const Code = ({ className, onInsertCode, onNewFile, onCopyCode, language, children, showActionBar, ...props }) => {
+    const t = useTranslate(dictionary);
+    const themeKind = useThemeKind();
+    const [showLines, setShowLines] = useState(true);
+    const match = /language-(\w+)/.exec(className || '');
+    const computedLanguage = language ?? (match ?? [])[1]?.toLowerCase() ?? 'txt';
+    const content = String(children ?? '').replaceAll(/\n\t/g, '\n').trim();
+    function onClickInsert() {
+        onInsertCode?.(content, computedLanguage);
+    }
+    function onClickNewFile() {
+        onNewFile?.(content, computedLanguage);
+    }
+    function onClickCopy() {
+        onCopyCode?.(content, computedLanguage);
+        // try-catch because the client may not support `navigator.clipboard`. Example: Chromium Embedded Browser (CEF).
+        try {
+            navigator.clipboard.writeText(content);
+        }
+        catch { /* empty */ }
+    }
+    if (children === undefined)
+        return _jsx(_Fragment, {});
+    if (!(/language-(\w+)/.exec(className || ''))) {
+        return (_jsx("code", { ...props, className: className, children: children }));
+    }
+    return (_jsxs(CodeBox, { className: ['code-box', themeKind].join(' '), children: [showActionBar && (_jsxs("div", { className: "action-bar", role: "toolbar", children: [_jsx(IconButton, { "aria-label": showLines ? t.hideLines : t.showLines, title: showLines ? t.hideLines : t.showLines, onClick: () => setShowLines(v => !v), style: { position: 'relative', transform: showLines ? undefined : 'rotate(180deg)', transition: 'transform 0.2s' }, children: _jsx(Collapse, {}) }), _jsx(IconButton, { "aria-label": t.copy, title: t.copy, onClick: onClickCopy, style: { position: 'relative' }, children: _jsx(Copy, {}) }), onInsertCode
+                        ? (_jsx(IconButton, { "aria-label": t.insert, title: t.insert, onClick: onClickInsert, style: { position: 'relative' }, children: _jsx(ChevronDoubleDown, { style: { transform: 'rotate(90deg)' } }) }))
+                        : null, onNewFile
+                        ? (_jsx(IconButton, { "aria-label": t.newFile, title: t.newFile, onClick: onClickNewFile, style: { position: 'relative' }, children: _jsx(AddCode, {}) }))
+                        : null] })), _jsx("div", { children: _jsx(SyntaxHighlighter, { ...props, className: "highlighter", style: themeKind === 'dark' ? materialDark : vs, language: computedLanguage, PreTag: "div", showLineNumbers: showLines, lineNumberContainerStyle: lineNumbersStyle, lineNumberStyle: lineNumbersStyle, children: content }) })] }));
+};
+const dictionary = {
+    en: {
+        copy: 'Copy code to the clipboard',
+        insert: 'Inject code into editor',
+        newFile: 'Creates a new file with this code as its content',
+        hideLines: 'Hide line numbers',
+        showLines: 'Show line numbers',
+    },
+    pt: {
+        copy: 'Copiar código para a área de transferência',
+        insert: 'Inserir código no editor',
+        newFile: 'Criar um novo arquivo com este código como conteúdo',
+        hideLines: 'Esconder números das linhas',
+        showLines: 'Mostrar números das linhas',
+    },
+};
+//# sourceMappingURL=Code.js.map

package/dist/components/Code.js.map

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

package/dist/components/Fading.d.ts

@@ -0,0 +1,32 @@
+import { WithStyle } from '@stack-spot/portal-theme';
+import { WithChildren } from '../types.js';
+interface Props extends WithChildren, WithStyle {
+    /**
+     * Whether or not the content is visible.
+     */
+    visible: boolean;
+    /**
+     * Duration of the animation in ms.
+     * @default 300
+     */
+    duration?: number;
+    /**
+     * Function to run right before animation to show the content starts.
+     */
+    beforeFadeIn?: () => void;
+    /**
+     * Function to run right before animation to hide the content starts.
+     */
+    beforeFadeOut?: () => void;
+    /**
+     * Function to run right after the animation to show the content ends.
+     */
+    afterFadeIn?: () => void;
+    /**
+     * Function to run right after the animation to hide the content ends.
+     */
+    afterFadeOut?: () => void;
+}
+export declare const Fading: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Fading.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Fading.d.ts","sourceRoot":"","sources":["../../src/components/Fading.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,UAAU,KAAM,SAAQ,YAAY,EAAE,SAAS;IAC7C;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM,kGAgCjB,CAAA"}

package/dist/components/Fading.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+export const Fading = forwardRef(({ visible, children, duration = 300, afterFadeIn, afterFadeOut, beforeFadeIn, beforeFadeOut, className, style }, ref) => {
+    const [isOpaque, setOpaque] = useState(visible);
+    const [isRendered, setRendered] = useState(visible);
+    const previous = useRef(visible);
+    const timeout = useRef([]);
+    const opacity = { transition: `opacity ${duration / 1000}s`, opacity: isOpaque ? 1 : 0 };
+    useEffect(() => {
+        if (previous.current === visible)
+            return;
+        timeout.current.forEach(window.clearTimeout);
+        timeout.current = [];
+        if (visible) {
+            setRendered(true);
+            if (afterFadeIn)
+                timeout.current.push(window.setTimeout(afterFadeIn, duration));
+            beforeFadeIn?.();
+            timeout.current.push(window.setTimeout(() => setOpaque(true), 0));
+        }
+        else {
+            setOpaque(false);
+            beforeFadeOut?.();
+            timeout.current.push(window.setTimeout(() => {
+                setRendered(false);
+                afterFadeOut?.();
+            }, duration));
+        }
+        previous.current = visible;
+    }, [visible]);
+    return isRendered ? _jsx("div", { ref: ref, className: className, style: { ...style, ...opacity }, children: children }) : null;
+});
+//# sourceMappingURL=Fading.js.map

package/dist/components/Fading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fading.js","sourceRoot":"","sources":["../../src/components/Fading.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AA+B/D,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAwB,CACtD,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,KAAK,EAAE,EAC/G,GAAG,EACH,EAAE;IACF,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC/C,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IACnD,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;IAChC,MAAM,OAAO,GAAG,MAAM,CAAW,EAAE,CAAC,CAAA;IACpC,MAAM,OAAO,GAAwB,EAAE,UAAU,EAAE,WAAW,QAAQ,GAAG,IAAI,GAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAE7G,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,CAAC,OAAO,KAAK,OAAO;YAAE,OAAM;QACxC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,CAAA;QAC5C,OAAO,CAAC,OAAO,GAAG,EAAE,CAAA;QACpB,IAAI,OAAO,EAAE,CAAC;YACZ,WAAW,CAAC,IAAI,CAAC,CAAA;YACjB,IAAI,WAAW;gBAAE,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAA;YAC/E,YAAY,EAAE,EAAE,CAAA;YAChB,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;QAEnE,CAAC;aAAM,CAAC;YACN,SAAS,CAAC,KAAK,CAAC,CAAA;YAChB,aAAa,EAAE,EAAE,CAAA;YACjB,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBAC1C,WAAW,CAAC,KAAK,CAAC,CAAA;gBAClB,YAAY,EAAE,EAAE,CAAA;YAClB,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAA;QACf,CAAC;QACD,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAA;IAC5B,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,OAAO,UAAU,CAAC,CAAC,CAAC,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,OAAO,EAAE,YAAG,QAAQ,GAAO,CAAC,CAAC,CAAC,IAAI,CAAA;AACnH,CAAC,CAAC,CAAA"}

package/dist/components/FadingOverflow.d.ts

@@ -0,0 +1,37 @@
+import { WithStyle } from '@stack-spot/portal-theme';
+import { WithChildren } from '../types.js';
+type Side = 'top' | 'right' | 'left' | 'bottom';
+type ScrollType = 'none' | 'wheel' | 'bar' | 'arrows';
+interface Props extends WithChildren, 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[];
+}
+/**
+ * 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;AAIxE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,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,YAAY,EAAE,SAAS;IAC7C;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,uCAAuC,CAAC,EAAE,OAAO,CAAC;IAClD;;;;;OAKG;IACH,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;CAChB;AAwFD;;;;GAIG;AACH,eAAO,MAAM,cAAc,8FAC2E,KAAK,4CAoI1G,CAAA"}

package/dist/components/FadingOverflow.js

@@ -0,0 +1,225 @@
+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 top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+    bottom: 'linear-gradient(to bottom, 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);
+    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');
+        let intervalId;
+        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(intervalId);
+        }
+        function checkOverflow() {
+            // masking (fading)
+            const overflowsRight = element.clientWidth < element.scrollWidth && element.scrollLeft < (element.scrollWidth - element.clientWidth);
+            const overflowsLeft = element.scrollLeft > 0;
+            const overflowsTop = element.clientHeight < element.scrollHeight && element.scrollTop < (element.scrollHeight - element.clientHeight);
+            const overflowsBottom = 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;
+                intervalId = 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":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACjF,OAAO,EAAE,WAAW,EAAE,KAAK,EAAa,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAgC1C,6GAA6G;AAC7G,MAAM,qBAAqB,GAAG,EAAE,CAAA;AAChC,2EAA2E;AAC3E,MAAM,kBAAkB,GAAG,EAAE,CAAA;AAC7B,yEAAyE;AACzE,MAAM,SAAS,GAAG,CAAC,CAAA;AACnB,aAAa;AACb,MAAM,KAAK,GAAG;IACZ,KAAK,EAAE,gGAAgG;IACvG,IAAI,EAAE,iGAAiG;IACvG,GAAG,EAAE,+FAA+F;IACpG,MAAM,EAAE,kGAAkG;IAC1G,UAAU,EAAE,8IAA8I;IAC1J,QAAQ,EAAE,6IAA6I;CACxJ,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA6BxB,OAAO;0BACa,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsC/C,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,uCAAuC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAS,EACzG,EAAE;IACF,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE,OAAM;QACxB,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAA;QAC3B,MAAM,OAAO,GAAG,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;QAC/C,MAAM,SAAS,GAAG,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;QACnD,MAAM,UAAU,GAAG,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACrD,MAAM,QAAQ,GAAG,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;QACjD,IAAI,UAA8B,CAAA;QAClC,MAAM,QAAQ,GAAG,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAA;QACpD,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAA;QACjE,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,OAAO,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAA;QACjE,IAAI,MAAM,KAAK,QAAQ,IAAI,MAAM,KAAK,OAAO;YAAE,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAA;QAE1F,SAAS,aAAa;YACpB,aAAa,CAAC,UAAU,CAAC,CAAA;QAC3B,CAAC;QAED,SAAS,aAAa;YACpB,mBAAmB;YACnB,MAAM,cAAc,GAAG,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,IAAI,OAAO,CAAC,UAAU,GAAG,CAAC,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,CAAA;YACpI,MAAM,aAAa,GAAG,OAAO,CAAC,UAAU,GAAG,CAAC,CAAA;YAC5C,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,IAAI,OAAO,CAAC,SAAS,GAAG,CAAC,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,CAAA;YACrI,MAAM,eAAe,GAAG,OAAO,CAAC,SAAS,GAAG,CAAC,CAAA;YAC7C,MAAM,YAAY,GAAa,EAAE,CAAA;YACjC,IAAI,aAAa,IAAI,QAAQ,IAAI,cAAc,IAAI,SAAS;gBAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;iBAC5F,CAAC;gBACJ,IAAI,cAAc,IAAI,SAAS;oBAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;gBAC/D,IAAI,aAAa,IAAI,QAAQ;oBAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;YAC9D,CAAC;YACD,IAAI,YAAY,IAAI,OAAO,IAAI,eAAe,IAAI,UAAU;gBAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;iBAC1F,CAAC;gBACJ,IAAI,YAAY,IAAI,OAAO;oBAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;gBACzD,IAAI,eAAe,IAAI,UAAU;oBAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;YACpE,CAAC;YACD,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAEjD,gBAAgB;YAChB,IAAI,MAAM,KAAK,QAAQ;gBAAE,OAAM;YAE/B,SAAS,cAAc,CAAC,IAAU;gBAChC,aAAa,EAAE,CAAA;gBACf,MAAM,SAAS,GAAG,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAA;gBAClF,MAAM,UAAU,GAAG,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;gBACjE,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE;oBACnC,OAAO,CAAC,SAAS,CAAC,IAAI,SAAS,GAAG,UAAU,CAAA;gBAC9C,CAAC,EAAE,kBAAkB,CAAC,CAAA;YACxB,CAAC;YAED,MAAM,oBAAoB,GAAG;gBAC3B,IAAI,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC;gBAClC,KAAK,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,CAAC;gBACpC,GAAG,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC;gBAChC,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC;aACvC,CAAA;YAED,MAAM,iBAAiB,GAAG;gBACxB,IAAI,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,UAAU,GAAG,CAAC;gBAClC,KAAK,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW;gBAC3E,GAAG,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,GAAG,CAAC;gBAChC,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY;aAC9E,CAAA;YAED,SAAS,iBAAiB,CAAC,IAAU;gBACnC,MAAM,MAAM,GAAG,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,cAAc,IAAI,EAAE,CAAC,CAAA;gBACtE,IAAI,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;oBAAE,OAAM;gBACjD,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;gBAChC,MAAM,EAAE,gBAAgB,CAAC,YAAY,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAA;gBAClE,MAAM,EAAE,gBAAgB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAA;gBACrD,MAAM,EAAE,gBAAgB,CAAC,OAAO,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAA;YAC5D,CAAC;YAED,SAAS,kBAAkB,CAAC,IAAU;gBACpC,MAAM,MAAM,GAAG,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,cAAc,IAAI,EAAE,CAAC,CAAA;gBACtE,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;oBAAE,OAAM;gBAClD,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;gBACnC,aAAa,EAAE,CAAA;gBACf,MAAM,EAAE,mBAAmB,CAAC,YAAY,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAA;gBACrE,MAAM,EAAE,mBAAmB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAA;gBACxD,MAAM,EAAE,mBAAmB,CAAC,OAAO,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAA;YAC/D,CAAC;YAED,IAAI,cAAc,IAAI,SAAS;gBAAE,iBAAiB,CAAC,OAAO,CAAC,CAAA;;gBACtD,kBAAkB,CAAC,OAAO,CAAC,CAAA;YAChC,IAAI,aAAa,IAAI,QAAQ;gBAAE,iBAAiB,CAAC,MAAM,CAAC,CAAA;;gBACnD,kBAAkB,CAAC,MAAM,CAAC,CAAA;YAC/B,IAAI,YAAY,IAAI,OAAO;gBAAE,iBAAiB,CAAC,KAAK,CAAC,CAAA;;gBAChD,kBAAkB,CAAC,KAAK,CAAC,CAAA;YAC9B,IAAI,eAAe,IAAI,UAAU;gBAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAA;;gBACzD,kBAAkB,CAAC,QAAQ,CAAC,CAAA;QACnC,CAAC;QAED,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,EAAE,qBAAqB,CAAC,CAAA;QACrE,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,cAAc,CAAC,CAAA;QACzD,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;QAC/B,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAA;QAElD,OAAO,GAAG,EAAE;YACV,aAAa,EAAE,CAAA;YACf,cAAc,CAAC,UAAU,EAAE,CAAA;YAC3B,OAAO,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAA;QACvD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAA;IAEhC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,uCAAuC,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE,OAAM;QACpE,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAA;QAE3B,SAAS,eAAe,CAAC,KAAiB;YACxC,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;gBACjB,OAAO,CAAC,UAAU,IAAI,KAAK,CAAC,MAAM,CAAA;gBAClC,KAAK,CAAC,cAAc,EAAE,CAAA;gBACtB,KAAK,CAAC,eAAe,EAAE,CAAA;YACzB,CAAC;QACH,CAAC;QAED,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAA;QAClD,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAA;IACpE,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,uCAAuC,CAAC,CAAC,CAAA;IAE1D,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B,MAAC,WAAW,OAAK,KAAK,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,aAC1E,cAAK,SAAS,EAAC,SAAS,EAAC,GAAG,EAAE,GAAG,YAAG,QAAQ,GAAO,EACnD,cAAK,SAAS,EAAC,gBAAgB,iCAAa,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,YAAC,KAAC,WAAW,KAAG,GAAU,GAAM,EAC9F,cAAK,SAAS,EAAC,iBAAiB,iCAAa,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,YAAC,KAAC,YAAY,KAAG,GAAU,GAAM,EAChG,cAAK,SAAS,EAAC,eAAe,iCAAa,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,YAAC,KAAC,SAAS,KAAG,GAAU,GAAM,EAC3F,cAAK,SAAS,EAAC,kBAAkB,iCAAa,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,YAAC,KAAC,WAAW,KAAG,GAAU,GAAM,IACpF,CACf,CAAC,CAAC,CAAC,KAAC,WAAW,OAAK,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,YAAG,QAAQ,GAAe,CAAA;AACtF,CAAC,CAAA"}

package/dist/components/FallbackBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,33 @@
+import { ErrorDescription } from '@stack-spot/portal-components/error';
+import { Component } from 'react';
+interface State extends ErrorDescription {
+    hasError: boolean;
+}
+interface Props {
+    mini?: boolean;
+    message?: string;
+    children: React.ReactNode;
+}
+/**
+ * An Error Boundary that renders an ErrorFeedback instead of its content if any of its children throws.
+ *
+ * To customize what properties are passed to the ErrorFeedback component, setup an error descriptor for the ErrorManager class. If you're
+ * using the component `Layout` or `RawLayout`, you can use the property `errorDescriptor`.
+ *
+ * To run an error handler every time an error is catch by this boundary, setup an error handler for the ErrorManager class. If you're
+ * using the component `Layout` or `RawLayout`, you can use the property `onError`.
+ */
+export declare class ErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(error: any): {
+        hasError: boolean;
+        message: any;
+        code: number | undefined;
+    };
+    componentDidCatch(error: any, errorInfo: any): void;
+    componentDidUpdate(prevProps: Readonly<Props>): void;
+    private renderError;
+    render(): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};
+//# sourceMappingURL=ErrorBoundary.d.ts.map

package/dist/components/FallbackBoundary/ErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/FallbackBoundary/ErrorBoundary.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAiB,MAAM,qCAAqC,CAAA;AAErF,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,UAAU,KAAM,SAAQ,gBAAgB;IACtC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAWD;;;;;;;;GAQG;AACH,qBAAa,aAAc,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBAC5C,KAAK,EAAE,KAAK;IAKxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,GAAG;;;;;IAM1C,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG;IAK5C,kBAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC;IAI7C,OAAO,CAAC,WAAW;IAWnB,MAAM;CAGP"}

package/dist/components/FallbackBoundary/ErrorBoundary.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconBox, Text } from '@citric/core';
+import { TimesCircle } from '@citric/icons';
+import { ErrorFeedback } from '@stack-spot/portal-components/error';
+import { StackspotAPIError } from '@stack-spot/portal-network';
+import { Component } from 'react';
+import { styled } from 'styled-components';
+const ErrorBox = styled.div `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+/**
+ * An Error Boundary that renders an ErrorFeedback instead of its content if any of its children throws.
+ *
+ * To customize what properties are passed to the ErrorFeedback component, setup an error descriptor for the ErrorManager class. If you're
+ * using the component `Layout` or `RawLayout`, you can use the property `errorDescriptor`.
+ *
+ * To run an error handler every time an error is catch by this boundary, setup an error handler for the ErrorManager class. If you're
+ * using the component `Layout` or `RawLayout`, you can use the property `onError`.
+ */
+export class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(error) {
+        const message = error instanceof StackspotAPIError ? error.translate() : (error.message ?? `${error}`);
+        const code = error instanceof StackspotAPIError ? error.status : undefined;
+        return { hasError: true, message, code };
+    }
+    componentDidCatch(error, errorInfo) {
+        // eslint-disable-next-line no-console
+        console.error(error, errorInfo);
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.children !== prevProps.children)
+            this.setState({ hasError: false });
+    }
+    renderError() {
+        return this.props.mini
+            ? (_jsxs(ErrorBox, { className: "error", children: [_jsx(IconBox, { size: "lg", colorIcon: "danger.500", children: _jsx(TimesCircle, {}) }), _jsx(Text, { colorScheme: "light.700", children: this.props.message || this.state.message })] }))
+            : _jsx(ErrorFeedback, { className: "error", code: this.state.code, message: this.props.message || this.state.message });
+    }
+    render() {
+        return this.state.hasError ? this.renderError() : this.props.children;
+    }
+}
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/components/FallbackBoundary/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../../src/components/FallbackBoundary/ErrorBoundary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAoB,aAAa,EAAE,MAAM,qCAAqC,CAAA;AACrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAY1C,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO1B,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,OAAO,aAAc,SAAQ,SAAuB;IACxD,YAAY,KAAY;QACtB,KAAK,CAAC,KAAK,CAAC,CAAA;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAA;IAClC,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAU;QACxC,MAAM,OAAO,GAAG,KAAK,YAAY,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,GAAG,KAAK,EAAE,CAAC,CAAA;QACtG,MAAM,IAAI,GAAG,KAAK,YAAY,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAA;QAC1E,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAA;IAC1C,CAAC;IAED,iBAAiB,CAAC,KAAU,EAAE,SAAc;QAC1C,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;IACjC,CAAC;IAED,kBAAkB,CAAC,SAA0B;QAC3C,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,SAAS,CAAC,QAAQ;YAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAA;IACpF,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI;YACpB,CAAC,CAAC,CACA,MAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,aACzB,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,YAAY,YAAC,KAAC,WAAW,KAAG,GAAU,EACnE,KAAC,IAAI,IAAC,WAAW,EAAC,WAAW,YAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,GAAQ,IACtE,CACZ;YACD,CAAC,CAAC,KAAC,aAAa,IAAC,SAAS,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,GAAI,CAAA;IACnH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;IACvE,CAAC;CACF"}

package/dist/components/FallbackBoundary/Loading.d.ts

@@ -0,0 +1,2 @@
+export declare const Loading: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Loading.d.ts.map

package/dist/components/FallbackBoundary/Loading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../src/components/FallbackBoundary/Loading.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,OAAO,+CAEnB,CAAA"}

package/dist/components/FallbackBoundary/Loading.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LoadingCircular } from '@citric/ui';
+import styled from 'styled-components';
+const LoadingBox = styled.div `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const Loading = () => (_jsx(LoadingBox, { className: "loading", children: _jsx(LoadingCircular, {}) }));
+//# sourceMappingURL=Loading.js.map

package/dist/components/FallbackBoundary/Loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.js","sourceRoot":"","sources":["../../../src/components/FallbackBoundary/Loading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM5B,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,CAC3B,KAAC,UAAU,IAAC,SAAS,EAAC,SAAS,YAAC,KAAC,eAAe,KAAG,GAAa,CACjE,CAAA"}