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

package/dist/components/AnimatedHeight.d.ts

@@ -0,0 +1,58 @@
+interface Props {
+    /**
+     * A header with fixed height.
+     */
+    header?: React.ReactElement;
+    /**
+     * The content. This may change its height whenever. When the height changes, the animation will play making a fluid transition from the
+     * previous height to the next.
+     */
+    children: React.ReactElement;
+    /**
+     * A footer with fixed height.
+     */
+    footer?: React.ReactElement;
+    /**
+     * Whether or not this panel is visible. Changing this value, animates the panel's height.
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * The duration of the animations in milliseconds.
+     * @default 300
+     */
+    duration?: number;
+    /**
+     * This component wraps its content in a div that changes its height from zero to the size of its content. It is not recommended to add
+     * styles to it, but if you need to, use this property.
+     */
+    outerStyle?: React.CSSProperties;
+    /**
+     * This component wraps its content in a div that changes its height from zero to the size of its content. It is not recommended to add
+     * classes to it, but if you need to, use this property.
+     */
+    outerClassName?: string;
+    /**
+     * The style to apply to the whole panel.
+     *
+     * Attention: this is not the outer-most div, use `outerStyle` if you need to style it.
+     */
+    style?: React.CSSProperties;
+    /**
+     * The class to apply to the whole panel.
+     *
+     * Attention: this is not the outer-most div, use `outerClassName` if you need to add a class to it.
+     */
+    className?: string;
+}
+/**
+ * This is a generic component for animating the height of a panel whenever its content changes.
+ *
+ * You can provide a header and a footer with fixed height, these won't change during the animations and will always be visible.
+ *
+ * This panel can also be hidden or visible and transitions between these two state will be animated.
+ * @param props the React props for this component. {@link Props}.
+ */
+export declare const AnimatedHeight: ({ children, footer, header, visible, duration, className, style, outerClassName, outerStyle }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AnimatedHeight.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedHeight.d.ts","sourceRoot":"","sources":["../../src/components/AnimatedHeight.tsx"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsDD;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GACzB,+FAA6G,KAAK,4CA2DnH,CAAA"}

package/dist/components/AnimatedHeight.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { useManualRender } from '../hooks/manual-render.js';
+const Box = styled.div `
+  overflow-y: clip; // <-- do not use hidden, it's buggy in Chrome.
+  transition: height ease-in-out ${({ $animationMs }) => $animationMs / 1000}s;
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &.initial {
+    opacity: 0;
+    pointer-events: none;
+    overflow: inherit;
+    transition: none;
+
+    &.content {
+      overflow: inherit;
+      transition: none;
+    }
+  }
+
+  .content {
+    overflow: hidden;
+    transition: height ease-in-out ${({ $animationMs }) => $animationMs / 1000}s;
+  }
+`;
+function getActualContent(wrapper) {
+    const firstChild = wrapper.firstChild;
+    if (!firstChild || !('tagName' in firstChild))
+        throw new Error('AnimatedHeight could not find any content to animate');
+    return firstChild;
+}
+function onChangeHeight(element, callback) {
+    const resizeObserver = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        const newHeight = entry.borderBoxSize[0].blockSize;
+        callback(newHeight);
+    });
+    resizeObserver.observe(element);
+    return () => resizeObserver.disconnect();
+}
+/**
+ * This is a generic component for animating the height of a panel whenever its content changes.
+ *
+ * You can provide a header and a footer with fixed height, these won't change during the animations and will always be visible.
+ *
+ * This panel can also be hidden or visible and transitions between these two state will be animated.
+ * @param props the React props for this component. {@link Props}.
+ */
+export const AnimatedHeight = ({ children, footer, header, visible = true, duration = 300, className, style, outerClassName, outerStyle }) => {
+    const { repaint } = useManualRender();
+    const boxRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const headerRef = useRef(null);
+    const contentRef = useRef(null);
+    const footerRef = useRef(null);
+    const heights = useRef({ content: 0, footer: 0, header: 0, extra: 0 });
+    const status = useRef('initial');
+    const updateHeight = useCallback(() => {
+        if (boxRef.current) {
+            boxRef.current.style.height = `${heights.current.content + heights.current.header + heights.current.footer + heights.current.extra}px`;
+        }
+        if (contentRef.current)
+            contentRef.current.style.height = `${heights.current.content}px`;
+    }, []);
+    useLayoutEffect(() => {
+        let unsubscribe;
+        if (headerRef.current)
+            heights.current.header = headerRef.current.getBoundingClientRect().height;
+        if (contentRef.current) {
+            heights.current.content = contentRef.current.getBoundingClientRect().height;
+            unsubscribe = onChangeHeight(getActualContent(contentRef.current), (height) => {
+                heights.current.content = height;
+                if (status.current === 'visible' && boxRef.current)
+                    updateHeight();
+            });
+        }
+        if (footerRef.current)
+            heights.current.footer = footerRef.current.getBoundingClientRect().height;
+        if (wrapperRef.current)
+            heights.current.extra = wrapperRef.current.getBoundingClientRect().height
+                - heights.current.header
+                - heights.current.footer
+                - heights.current.content;
+        status.current = visible ? 'visible' : 'hidden';
+        repaint();
+        return unsubscribe;
+    }, []);
+    useEffect(() => {
+        if (status.current === 'initial')
+            return;
+        status.current = visible ? 'visible' : 'hidden';
+        if (visible)
+            updateHeight();
+        else if (boxRef.current)
+            boxRef.current.style.height = '0';
+    }, [visible]);
+    return (_jsx(Box, { ref: boxRef, "$animationMs": duration, className: listToClass([outerClassName, status.current === 'initial' && 'initial']), style: outerStyle, children: _jsxs("div", { ref: wrapperRef, className: listToClass(['wrapper', className]), style: style, children: [header && _jsx("div", { ref: headerRef, children: header }), _jsx("div", { ref: contentRef, className: "content", children: children }), footer && _jsx("div", { ref: footerRef, children: footer })] }) }));
+};
+//# sourceMappingURL=AnimatedHeight.js.map

package/dist/components/AnimatedHeight.js.map

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

package/dist/components/AsyncContent.d.ts

@@ -0,0 +1,46 @@
+import { MutableRefObject } from 'react';
+export interface ErrorProps {
+    /**
+     * The error component to be rendered in case of error. It should receive error props
+     */
+    errorComponent: React.FC<{
+        error: any;
+    }>;
+    /**
+     * The function to report the error.
+     */
+    reportError: (error: any) => void;
+}
+interface Props {
+    /**
+     * Whether or not to show the loading feedback.
+     */
+    loading: boolean;
+    /**
+     * A javascript error. Used to show error feedbacks.
+     */
+    error?: any;
+    /**
+     * If provided, this element will receive focus as soon as the content is loaded and has no errors.
+     * Can be either a React Ref Object or a query selector.
+     */
+    autofocus?: string | MutableRefObject<HTMLElement>;
+    /**
+     * The content to show if it's not loading or has errors.
+     */
+    children: React.ReactNode;
+    /**
+     * The error details component.
+    */
+    errorDetails: ErrorProps;
+}
+/**
+ * Renders a component that provides user feedback on async requests.
+ * It renders either a loading component, an error component (which is received as prop)
+ * or the received children props.
+ *
+ * @param options the props for rendering the component: {@link Props}.
+ */
+export declare const AsyncContent: ({ loading, error, autofocus, children, errorDetails }: Props) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};
+//# sourceMappingURL=AsyncContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncContent.d.ts","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAA8B,MAAM,OAAO,CAAA;AAEpE,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,cAAc,EAAG,KAAK,CAAC,EAAE,CAAC;QAAE,KAAK,EAAE,GAAG,CAAA;KAAE,CAAC,CAAC;IAC1C;;OAEG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACnC;AAED,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;MAEE;IACF,YAAY,EAAE,UAAU,CAAC;CAC1B;AAED;;;;;;GAMG;AAEH,eAAO,MAAM,YAAY,GAAI,uDAAuD,KAAK,iIA8BxF,CAAA"}

package/dist/components/AsyncContent.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from '@citric/core';
+import { LoadingCircular } from '@citric/ui';
+import { useEffect, useLayoutEffect } from 'react';
+/**
+ * Renders a component that provides user feedback on async requests.
+ * It renders either a loading component, an error component (which is received as prop)
+ * or the received children props.
+ *
+ * @param options the props for rendering the component: {@link Props}.
+ */
+export const AsyncContent = ({ loading, error, autofocus, children, errorDetails }) => {
+    const ErrorComponent = errorDetails.errorComponent;
+    useEffect(() => {
+        if (error) {
+            errorDetails.reportError(error);
+            // eslint-disable-next-line no-console
+            console.error(error);
+        }
+    }, [error]);
+    useLayoutEffect(() => {
+        if (!loading && !error) {
+            typeof autofocus === 'string' ? document.querySelector(autofocus)?.focus?.() : autofocus?.current?.focus();
+        }
+    }, [loading, error]);
+    if (loading) {
+        return (_jsx(Flex, { alignItems: "center", justifyContent: "center", flex: 1, style: { padding: '80px' }, "data-test-hint": "loading", children: _jsx(LoadingCircular, {}) }));
+    }
+    if (error) {
+        return _jsx(ErrorComponent, { error: error });
+    }
+    return children;
+};
+//# sourceMappingURL=AsyncContent.js.map

package/dist/components/AsyncContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncContent.js","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAoB,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AAqCpE;;;;;;GAMG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAS,EAAE,EAAE;IAC3F,MAAM,cAAc,GAAG,YAAY,CAAC,cAAc,CAAA;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE,CAAC;YACV,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;YAC/B,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YACvB,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAiB,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;QAC7H,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpB,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,KAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,oBAAiB,SAAS,YAC7G,KAAC,eAAe,KAAG,GACd,CACR,CAAA;IACH,CAAC;IAED,IAAI,KAAK,EAAE,CAAC;QACV,OAAO,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,GAAI,CAAA;IACzC,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA"}

package/dist/components/BannerWarning.d.ts

@@ -1,4 +1,13 @@
-export declare const BannerWarning: ({ children }: {
+import { SxProp } from '@citric/core';
+/**
+ * A styled and dismissible alert box for showing important warnings for the user.
+ *
+ * This renders a yellow box with an exclamation icon. The content passed as parameter is placed on the right of the icon.
+ * @param props an object containing the content (children) to show inside the alert box.
+ */
+export declare const BannerWarning: ({ children, showCloseButton }: {
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+    sx?: SxProp;
+    showCloseButton?: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=BannerWarning.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BannerWarning.d.ts","sourceRoot":"","sources":["../../src/components/BannerWarning.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa;cAA8B,MAAM,SAAS;6CAgBtE,CAAA"}
+{"version":3,"file":"BannerWarning.d.ts","sourceRoot":"","sources":["../../src/components/BannerWarning.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyB,MAAM,EAAQ,MAAM,cAAc,CAAA;AAMlE;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,+BAC5B;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,eAAe,CAAC,EAAE,OAAO,CAAA;CAAE,mDA4EtE,CAAA"}

package/dist/components/BannerWarning.js

@@ -1,6 +1,48 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Flex, IconBox, Text } from '@citric/core';
-import { ExclamationTriangle } from '@citric/icons';
+import { Button, Flex, IconBox, Text } from '@citric/core';
+import { ExclamationTriangle, TimesCircleFill } from '@citric/icons';
 import { Alert } from '@citric/ui';
-export const BannerWarning = ({ children }) => (_jsx(Flex, { sx: { position: 'fixed', top: 0, zIndex: '999', w: 12, left: 0 }, children: _jsxs(Alert, { colorScheme: "warning", sx: { p: 2, w: 12, justifyContent: 'center', height: ['60px', '100px'] }, children: [_jsx(IconBox, { size: "md", colorIcon: "light.500", sx: { display: ['block', 'none'] }, children: _jsx(ExclamationTriangle, {}) }), _jsx(Flex, { sx: { py: [5, 3] }, children: _jsx(Text, { sx: { fontSize: ['16px', '14px'], whiteSpace: 'pre-line' }, colorScheme: "warning.contrastText", children: children }) }), _jsx(IconBox, { size: "md", colorIcon: "light.500", sx: { display: ['block', 'none'] }, children: _jsx(ExclamationTriangle, {}) })] }) }));
+import { useState } from 'react';
+import { getCookie, setCookie } from '../utils/cookie.js';
+/**
+ * A styled and dismissible alert box for showing important warnings for the user.
+ *
+ * This renders a yellow box with an exclamation icon. The content passed as parameter is placed on the right of the icon.
+ * @param props an object containing the content (children) to show inside the alert box.
+ */
+export const BannerWarning = ({ children, showCloseButton = true }) => {
+    const bannerKey = 'bannerClosed';
+    const [isVisible, setIsVisible] = useState(() => {
+        if (typeof window !== 'undefined') {
+            const isBannerClosed = getCookie(bannerKey) === 'true';
+            return !isBannerClosed;
+        }
+        return false;
+    });
+    const handleClose = () => {
+        setCookie(bannerKey, 'true');
+        setIsVisible(false);
+    };
+    if (!isVisible) {
+        return null;
+    }
+    return (_jsx(Flex, { sx: { zIndex: '1', w: '12', mb: 7 }, children: _jsxs(Alert, { colorScheme: "warning", sx: {
+                position: 'relative',
+                px: 3,
+                py: 1,
+                alignItems: 'center',
+                display: 'flex',
+                justifyContent: 'space-between',
+                height: 'auto',
+                padding: `${showCloseButton ? '0.5rem' : '1rem'}`,
+            }, children: [_jsxs(Flex, { sx: {
+                        alignItems: 'center',
+                        flexWrap: 'nowrap',
+                    }, children: [_jsx(IconBox, { size: "sm", colorIcon: "light.500", children: _jsx(ExclamationTriangle, {}) }), _jsx(Text, { sx: {
+                                ml: 5,
+                            }, appearance: "body2", colorScheme: "warning.contrastText", children: children })] }), showCloseButton && _jsx(Button, { appearance: 'text', onClick: handleClose, sx: {
+                        p: 0,
+                        ml: 2,
+                    }, children: _jsx(IconBox, { size: "lg", colorIcon: "light.500", children: _jsx(TimesCircleFill, {}) }) })] }) }));
+};
 //# sourceMappingURL=BannerWarning.js.map

package/dist/components/BannerWarning.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerWarning.js","sourceRoot":"","sources":["../../src/components/BannerWarning.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAElC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAiC,EAAE,EAAE,CAAC,CAC5E,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACpE,MAAC,KAAK,IAAC,WAAW,EAAC,SAAS,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,aACnG,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,WAAW,EAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,YACzE,KAAC,mBAAmB,KAAG,GACf,EACV,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,YACtB,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,WAAW,EAAC,sBAAsB,YACjG,QAAQ,GACJ,GACF,EACP,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,WAAW,EAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,YACzE,KAAC,mBAAmB,KAAG,GACf,IACJ,GACH,CACR,CAAA"}
+{"version":3,"file":"BannerWarning.js","sourceRoot":"","sources":["../../src/components/BannerWarning.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAU,IAAI,EAAE,MAAM,cAAc,CAAA;AAClE,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEtD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,eAAe,GAAG,IAAI,EACO,EAAE,EAAE;IACzE,MAAM,SAAS,GAAG,cAAc,CAAA;IAEhC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC9C,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YAClC,MAAM,cAAc,GAAG,SAAS,CAAC,SAAS,CAAC,KAAK,MAAM,CAAA;YACtD,OAAO,CAAC,cAAc,CAAA;QACxB,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CAAA;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;QAC5B,YAAY,CAAC,KAAK,CAAC,CAAA;IACrB,CAAC,CAAA;IAED,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,EAAE,YACvC,MAAC,KAAK,IACJ,WAAW,EAAC,SAAS,EACrB,EAAE,EAAE;gBACF,QAAQ,EAAE,UAAU;gBACpB,EAAE,EAAE,CAAC;gBACL,EAAE,EAAE,CAAC;gBACL,UAAU,EAAE,QAAQ;gBACpB,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,eAAe;gBAC/B,MAAM,EAAE,MAAM;gBACd,OAAO,EAAE,GAAG,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE;aAClD,aAED,MAAC,IAAI,IACH,EAAE,EAAE;wBACF,UAAU,EAAE,QAAQ;wBACpB,QAAQ,EAAE,QAAQ;qBACnB,aAED,KAAC,OAAO,IACN,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,WAAW,YAErB,KAAC,mBAAmB,KAAG,GACf,EACV,KAAC,IAAI,IACH,EAAE,EAAE;gCACF,EAAE,EAAE,CAAC;6BACN,EACD,UAAU,EAAC,OAAO,EAClB,WAAW,EAAC,sBAAsB,YAEjC,QAAQ,GACJ,IACF,EAEN,eAAe,IAAI,KAAC,MAAM,IACzB,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,WAAW,EACpB,EAAE,EAAE;wBACF,CAAC,EAAE,CAAC;wBACJ,EAAE,EAAE,CAAC;qBACN,YAED,KAAC,OAAO,IACN,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,WAAW,YAErB,KAAC,eAAe,KAAG,GACX,GACH,IACH,GACH,CACR,CAAA;AACH,CAAC,CAAA"}

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

@@ -1,3 +1,4 @@
+export type AnchorComponent = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => React.ReactElement;
 interface BreadcrumbItem {
     /**
      * A unique id for this link of the breadcrumb. If not provided, the label will be used.
@@ -30,13 +31,20 @@ interface Props {
      * @default false
      */
     shouldUpdatePageTitle?: boolean;
+    /**
+     * Key of the current page. If an item has this key, it won't be rendered as a link and will be marked as active.
+     */
+    currentPageKey?: string;
+}
+interface ItemProps extends Pick<Props, 'currentPageKey'> {
+    item: BreadcrumbItem;
 }
-declare const BreadcrumbItem: ({ label, href }: BreadcrumbItem) => import("react/jsx-runtime").JSX.Element;
+declare const BreadcrumbItem: ({ item: { label, href, key }, currentPageKey }: ItemProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Builds a breadcrumb navigator based on the items passed in the properties.
  *
  * If the breadcrumb is obtained asynchronously, pass `isLoading = true` in order to show a loading feedback.
  */
-export declare const BreadcrumbList: ({ items, isLoading, shouldUpdatePageTitle }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const BreadcrumbList: ({ items, isLoading, shouldUpdatePageTitle, currentPageKey }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.tsx"],"names":[],"mappings":"AAOA,UAAU,cAAc;IACtB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;OAOG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,QAAA,MAAM,cAAc,oBAAqB,cAAc,4CAItD,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,gDAAiD,KAAK,4CAOhF,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAA;AAE1G,UAAU,cAAc;IACtB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;OAOG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,UAAU,SAAU,SAAQ,IAAI,CAAC,KAAK,EAAE,gBAAgB,CAAC;IACvD,IAAI,EAAE,cAAc,CAAC;CACtB;AAED,QAAA,MAAM,cAAc,GAAI,gDAAgD,SAAS,4CAKhF,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,6DAA6D,KAAK,4CAUhG,CAAA"}

package/dist/components/Breadcrumb/index.js

@@ -3,20 +3,22 @@ import { Text } from '@citric/core';
 import { Skeleton } from '@citric/ui';
 import { last } from 'lodash';
 import { useEffect, useMemo } from 'react';
+import { useAnchorTag } from '../../context/anchor.js';
 import { titleEffect } from '../../hooks/title.js';
 import { Box } from './styled.js';
-const BreadcrumbItem = ({ label, href }) => {
+const BreadcrumbItem = ({ item: { label, href, key }, currentPageKey }) => {
     const text = _jsx(Text, { appearance: "breadcrumb", children: label });
-    const element = href ? _jsx("a", { href: href, children: text }) : text;
-    return _jsx("li", { children: element });
+    const Link = useAnchorTag();
+    const shouldBeLink = href && currentPageKey != key;
+    return _jsx("li", { children: shouldBeLink ? _jsx(Link, { href: href, children: text }) : text });
 };
 /**
  * Builds a breadcrumb navigator based on the items passed in the properties.
  *
  * If the breadcrumb is obtained asynchronously, pass `isLoading = true` in order to show a loading feedback.
  */
-export const BreadcrumbList = ({ items, isLoading, shouldUpdatePageTitle }) => {
-    const listItems = useMemo(() => items.map(item => _jsx(BreadcrumbItem, { ...item }, item.key || item.label)), [items]);
+export const BreadcrumbList = ({ items, isLoading, shouldUpdatePageTitle, currentPageKey }) => {
+    const listItems = useMemo(() => items.map(item => _jsx(BreadcrumbItem, { item: item, currentPageKey: currentPageKey }, item.key || item.label)), [items]);
     useEffect(() => {
         const title = last(items)?.label;
         if (shouldUpdatePageTitle && title && !isLoading)

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAqC9B,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAkB,EAAE,EAAE;IACzD,MAAM,IAAI,GAAG,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,YAAE,KAAK,GAAQ,CAAA;IACzD,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,YAAG,IAAI,EAAE,IAAI,YAAG,IAAI,GAAK,CAAC,CAAC,CAAC,IAAI,CAAA;IACvD,OAAO,uBAAK,OAAO,GAAM,CAAA;AAC3B,CAAC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,qBAAqB,EAAS,EAAE,EAAE;IACnF,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,KAAC,cAAc,OAAkC,IAAI,IAAhC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,CAAc,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IACtH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,CAAA;QAChC,IAAI,qBAAqB,IAAI,KAAK,IAAI,CAAC,SAAS;YAAE,OAAO,WAAW,CAAC,KAAK,CAAC,CAAA;IAC7E,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAA;IACtB,OAAO,KAAC,GAAG,cAAE,SAAS,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,MAAM,EAAC,MAAM,GAAG,CAAC,CAAC,CAAC,uBAAK,SAAS,GAAM,GAAO,CAAA;AACnF,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AA+C9B,MAAM,cAAc,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,cAAc,EAAa,EAAE,EAAE;IACnF,MAAM,IAAI,GAAG,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,YAAE,KAAK,GAAQ,CAAA;IACzD,MAAM,IAAI,GAAG,YAAY,EAAE,CAAA;IAC3B,MAAM,YAAY,GAAG,IAAI,IAAI,cAAc,IAAI,GAAG,CAAA;IAClD,OAAO,uBAAK,YAAY,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,YAAG,IAAI,GAAQ,CAAC,CAAC,CAAC,IAAI,GAAM,CAAA;AACzE,CAAC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,qBAAqB,EAAE,cAAc,EAAS,EAAE,EAAE;IACnG,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,KAAC,cAAc,IAA8B,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,IAAlE,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,CAAgD,CAAC,EACpH,CAAC,KAAK,CAAC,CACR,CAAA;IACD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,CAAA;QAChC,IAAI,qBAAqB,IAAI,KAAK,IAAI,CAAC,SAAS;YAAE,OAAO,WAAW,CAAC,KAAK,CAAC,CAAA;IAC7E,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAA;IACtB,OAAO,KAAC,GAAG,cAAE,SAAS,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,MAAM,EAAC,MAAM,GAAG,CAAC,CAAC,CAAC,uBAAK,SAAS,GAAM,GAAO,CAAA;AACnF,CAAC,CAAA"}

package/dist/components/Breadcrumb/styled.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-export declare const Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const Box: React.FC<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>>;
 //# sourceMappingURL=styled.d.ts.map

package/dist/components/Breadcrumb/styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/styled.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,GAAG,kOA+Bf,CAAA"}
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/styled.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,CA+BjG,CAAA"}

package/dist/components/Breadcrumb/styled.js

@@ -1,6 +1,7 @@
 import { getFontAppearance } from '@citric/core/dist/utils/theme.js';
 import { theme } from '@stack-spot/portal-theme';
 import { styled } from 'styled-components';
+// the type below should be inferred, but a bug in TS+PNPM prevents it: https://github.com/microsoft/TypeScript/issues/42873
 export const Box = styled.nav `
   margin-bottom: 24px;
   

package/dist/components/Breadcrumb/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/components/Breadcrumb/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAA;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,MAAM,CAAC,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;cAcf,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,iBAAiB,CAAC,KAAY,EAAE,YAAY,CAAQ;;eAElE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;;aAS1B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;eAGtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;;CAG5C,CAAA"}
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/components/Breadcrumb/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAA;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,4HAA4H;AAC5H,MAAM,CAAC,MAAM,GAAG,GAAsF,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;cAclG,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,iBAAiB,CAAC,KAAY,EAAE,YAAY,CAAQ;;eAElE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;;aAS1B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;eAGtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;;CAG5C,CAAA"}

package/dist/components/ButtonLoading.d.ts

@@ -0,0 +1,11 @@
+import { ButtonProps } from '@citric/core/dist/Button.js';
+import { ReactNode } from 'react';
+interface Props extends ButtonProps {
+    isLoading?: boolean;
+    loadingSize?: 'sm' | 'md' | 'lg';
+    children: ReactNode;
+    onClick?: () => void;
+}
+export declare const ButtonLoading: ({ isLoading, loadingSize, children, disabled, sx, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ButtonLoading.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLoading.d.ts","sourceRoot":"","sources":["../../src/components/ButtonLoading.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,UAAU,KAAM,SAAQ,WAAW;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,GAAI,8DAAqE,KAAK,4CAgBvG,CAAA"}

package/dist/components/ButtonLoading.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Text } from '@citric/core';
+import { LoadingCircular } from '@citric/ui';
+export const ButtonLoading = ({ isLoading, loadingSize = 'sm', children, disabled, sx, ...props }) => (_jsxs(Button, { type: "submit", ...props, disabled: isLoading || disabled, sx: { ...sx, position: 'relative' }, children: [_jsx(Text, { as: "span", sx: { visibility: isLoading ? 'hidden' : 'visible' }, children: children }), _jsx(LoadingCircular, { colorScheme: props.colorScheme, size: loadingSize, sx: { visibility: isLoading ? 'visible' : 'hidden', position: 'absolute' } })] }));
+//# sourceMappingURL=ButtonLoading.js.map

package/dist/components/ButtonLoading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLoading.js","sourceRoot":"","sources":["../../src/components/ButtonLoading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAE3C,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAU5C,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,WAAW,GAAG,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,KAAK,EAAS,EAAE,EAAE,CAAC,CAC3G,MAAC,MAAM,IACL,IAAI,EAAC,QAAQ,KACT,KAAK,EACT,QAAQ,EAAE,SAAS,IAAI,QAAQ,EAC/B,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAEnC,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,YACjE,QAAQ,GACJ,EACP,KAAC,eAAe,IACd,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,IAAI,EAAE,WAAW,EACjB,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAC1E,IACK,CACV,CAAA"}

package/dist/components/ChatBot.d.ts

@@ -1,2 +1,7 @@
+/**
+ * A button for opening or closing the service-now chat window.
+ *
+ * This is a circular orange button with a chat icon if the chat window is closed or a close icon if the chat window is open.
+ */
 export declare const ChatBot: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatBot.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatBot.d.ts","sourceRoot":"","sources":["../../src/components/ChatBot.tsx"],"names":[],"mappings":"AA8CA,eAAO,MAAM,OAAO,+CA8BnB,CAAA"}
+{"version":3,"file":"ChatBot.d.ts","sourceRoot":"","sources":["../../src/components/ChatBot.tsx"],"names":[],"mappings":"AA8CA;;;;GAIG;AACH,eAAO,MAAM,OAAO,+CA8BnB,CAAA"}

package/dist/components/ChatBot.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Flex, IconBox } from '@citric/core';
 import { QuestionAnswer, Times } from '@citric/icons';
-import { addOrRemoveServiceNowLauncher, getServiceNowLauncher } from '../hooks/service-now.js';
+import { CHAT_BUTTON_ID, CHAT_BUTTON_WRAPPER_ID, getServiceNowLauncher, hideChatWindow, showChatWindow } from '../hooks/service-now.js';
 const styles = {
     content: {
         position: 'fixed',
@@ -43,19 +43,24 @@ const styles = {
         transform: 'translate(-50%, -50%)',
     },
 };
+/**
+ * A button for opening or closing the service-now chat window.
+ *
+ * This is a circular orange button with a chat icon if the chat window is closed or a close icon if the chat window is open.
+ */
 export const ChatBot = () => {
     const handleOpenChatBot = () => {
         const chatIframe = getServiceNowLauncher();
         if (chatIframe) {
-            const isShow = chatIframe.classList.contains('show');
-            if (isShow) {
-                addOrRemoveServiceNowLauncher('remove');
+            const isVisible = chatIframe.classList.contains('show');
+            if (isVisible) {
+                hideChatWindow();
             }
             else {
-                addOrRemoveServiceNowLauncher('add');
+                showChatWindow();
             }
         }
     };
-    return (_jsx(Flex, { id: "service-now-content", sx: styles.content, children: _jsx(Button, { onClick: handleOpenChatBot, id: "service-now-button", sx: styles.button, children: _jsxs(IconBox, { colorIcon: "light.400", sx: styles.icon, size: "lg", children: [_jsx(Times, { className: "times" }), _jsx(QuestionAnswer, { className: "question" })] }) }) }));
+    return (_jsx(Flex, { id: CHAT_BUTTON_WRAPPER_ID, sx: styles.content, children: _jsx(Button, { onClick: handleOpenChatBot, id: CHAT_BUTTON_ID, sx: styles.button, children: _jsxs(IconBox, { colorIcon: "light.400", sx: styles.icon, size: "lg", children: [_jsx(Times, { className: "times" }), _jsx(QuestionAnswer, { className: "question" })] }) }) }));
 };
 //# sourceMappingURL=ChatBot.js.map

package/dist/components/ChatBot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatBot.js","sourceRoot":"","sources":["../../src/components/ChatBot.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAU,MAAM,cAAc,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,6BAA6B,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAA;AAE3F,MAAM,MAAM,GAAW;IACrB,OAAO,EAAE;QACP,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,GAAG;QACV,UAAU,EAAE,SAAS;QACrB,iBAAiB,EAAE;YACjB,OAAO,EAAE,OAAO;SACjB;QACD,oBAAoB,EAAE;YACpB,OAAO,EAAE,MAAM;SAChB;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;SAChB;QACD,WAAW,EAAE;YACX,OAAO,EAAE,OAAO;SACjB;KACF;IACD,MAAM,EAAE;QACN,QAAQ,EAAE,OAAO;QACjB,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;QACnB,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,GAAG;QACZ,QAAQ,EAAE;YACR,OAAO,EAAE,GAAG;SACb;QACD,kBAAkB,EAAE;YAClB,UAAU,EAAE,aAAa;SAC1B;KACF;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,uBAAuB;KACnC;CACF,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE;IAC1B,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,MAAM,UAAU,GAAG,qBAAqB,EAAE,CAAA;QAC1C,IAAI,UAAU,EAAE;YACd,MAAM,MAAM,GAAG,UAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;YACpD,IAAI,MAAM,EAAE;gBACV,6BAA6B,CAAC,QAAQ,CAAC,CAAA;aACxC;iBAAM;gBACL,6BAA6B,CAAC,KAAK,CAAC,CAAA;aACrC;SACF;IACH,CAAC,CAAA;IAED,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAC,qBAAqB,EAAC,EAAE,EAAE,MAAM,CAAC,OAAO,YAC/C,KAAC,MAAM,IACL,OAAO,EAAE,iBAAiB,EAC1B,EAAE,EAAC,oBAAoB,EACvB,EAAE,EAAE,MAAM,CAAC,MAAM,YAEjB,MAAC,OAAO,IACN,SAAS,EAAC,WAAW,EACrB,EAAE,EAAE,MAAM,CAAC,IAAI,EACf,IAAI,EAAC,IAAI,aACT,KAAC,KAAK,IAAC,SAAS,EAAC,OAAO,GAAG,EAC3B,KAAC,cAAc,IAAC,SAAS,EAAC,UAAU,GAAG,IAC/B,GACH,GACJ,CACR,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"ChatBot.js","sourceRoot":"","sources":["../../src/components/ChatBot.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAU,MAAM,cAAc,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAEpI,MAAM,MAAM,GAAW;IACrB,OAAO,EAAE;QACP,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,GAAG;QACV,UAAU,EAAE,SAAS;QACrB,iBAAiB,EAAE;YACjB,OAAO,EAAE,OAAO;SACjB;QACD,oBAAoB,EAAE;YACpB,OAAO,EAAE,MAAM;SAChB;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;SAChB;QACD,WAAW,EAAE;YACX,OAAO,EAAE,OAAO;SACjB;KACF;IACD,MAAM,EAAE;QACN,QAAQ,EAAE,OAAO;QACjB,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;QACnB,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,GAAG;QACZ,QAAQ,EAAE;YACR,OAAO,EAAE,GAAG;SACb;QACD,kBAAkB,EAAE;YAClB,UAAU,EAAE,aAAa;SAC1B;KACF;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,uBAAuB;KACnC;CACF,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE;IAC1B,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,MAAM,UAAU,GAAG,qBAAqB,EAAE,CAAA;QAC1C,IAAI,UAAU,EAAE,CAAC;YACf,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;YACvD,IAAI,SAAS,EAAE,CAAC;gBACd,cAAc,EAAE,CAAA;YAClB,CAAC;iBAAM,CAAC;gBACN,cAAc,EAAE,CAAA;YAClB,CAAC;QACH,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAE,sBAAsB,EAAE,EAAE,EAAE,MAAM,CAAC,OAAO,YAClD,KAAC,MAAM,IACL,OAAO,EAAE,iBAAiB,EAC1B,EAAE,EAAE,cAAc,EAClB,EAAE,EAAE,MAAM,CAAC,MAAM,YAEjB,MAAC,OAAO,IACN,SAAS,EAAC,WAAW,EACrB,EAAE,EAAE,MAAM,CAAC,IAAI,EACf,IAAI,EAAC,IAAI,aACT,KAAC,KAAK,IAAC,SAAS,EAAC,OAAO,GAAG,EAC3B,KAAC,cAAc,IAAC,SAAS,EAAC,UAAU,GAAG,IAC/B,GACH,GACJ,CACR,CAAA;AACH,CAAC,CAAA"}

package/dist/components/ContentValidateFilter.d.ts

@@ -0,0 +1,6 @@
+export declare const ContentValidateFilter: ({ searchText, listLength, children, }: {
+    searchText?: string;
+    listLength: number;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ContentValidateFilter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentValidateFilter.d.ts","sourceRoot":"","sources":["../../src/components/ContentValidateFilter.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,GAAI,uCAInC;IACD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,4CAGA,CAAA"}

package/dist/components/ContentValidateFilter.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { PlaceholderResourceEmptySearch } from './Placeholder.js';
+export const ContentValidateFilter = ({ searchText, listLength, children, }) => {
+    if (!listLength && searchText)
+        return _jsx(PlaceholderResourceEmptySearch, {});
+    return _jsx(_Fragment, { children: children });
+};
+//# sourceMappingURL=ContentValidateFilter.js.map

package/dist/components/ContentValidateFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentValidateFilter.js","sourceRoot":"","sources":["../../src/components/ContentValidateFilter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,8BAA8B,EAAE,MAAM,eAAe,CAAA;AAE9D,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EACpC,UAAU,EACV,UAAU,EACV,QAAQ,GAKT,EAAE,EAAE;IACH,IAAI,CAAC,UAAU,IAAI,UAAU;QAAE,OAAO,KAAC,8BAA8B,KAAG,CAAA;IACxE,OAAO,4BAAG,QAAQ,GAAI,CAAA;AACxB,CAAC,CAAA"}

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