@stack-spot/portal-layout 0.0.2 → 0.0.4

package/dist/components/Menu/MenuSections.js

@@ -13,7 +13,8 @@ function hideOverlay() {
         return;
     hideOverlayTask = window.setTimeout(hideOverlayImmediately, HIDE_OVERLAY_DELAY_MS);
 }
-function hideOverlayImmediately() {
+// eslint-disable-next-line react-refresh/only-export-components
+export function hideOverlayImmediately() {
     document.getElementById(MENU_OVERLAY_ID)?.classList.remove('visible');
 }
 function cancelHideOverlayTask() {
@@ -29,16 +30,24 @@ function showOverlay() {
 function isMenuContentVisible() {
     return !!document.getElementById('layout')?.classList?.contains('menu-content-visible');
 }
-function renderSection({ icon, label, href, onClick, active, content }, setOverlayContent) {
+const Section = ({ icon, label, href, onClick, active, content, onOpen, setCurrentOverlay, id, hasContent, }) => {
+    const contentToRender = typeof content === 'function' ? content() : content;
     function shouldShowOverlay() {
-        return !!content && (!active || !isMenuContentVisible());
+        /* The overlay should appear if:
+         * 1. The section has some content to render OR:
+         *   1.1 The section is active and there is a contextual menu for the active page.
+         * 2. The section is inactive OR:
+         *   2.1. The contextual menu is hidden.
+         */
+        return (!!contentToRender || (hasContent && active)) && (!active || !isMenuContentVisible());
     }
     function showOverlayAndFixArrowPosition(event) {
         if (!shouldShowOverlay())
             return;
+        onOpen?.();
         const rect = event.target?.getBoundingClientRect();
         const arrow = document.querySelector(`#${MENU_OVERLAY_ID} .arrow`);
-        setOverlayContent(content);
+        setCurrentOverlay(id);
         showOverlay();
         if (rect && arrow) {
             arrow.style.top = `${rect.top + rect.height / 2 - ARROW_HEIGHT / 2}px`;
@@ -50,8 +59,14 @@ function renderSection({ icon, label, href, onClick, active, content }, setOverl
         hideOverlayImmediately();
     }
     return (_jsx("li", { title: label, className: active ? 'active' : undefined, children: _jsxs("a", { href: href, onClick: click, onMouseEnter: showOverlayAndFixArrowPosition, onMouseLeave: () => shouldShowOverlay() && hideOverlay(), children: [icon, _jsx(Text, { appearance: "microtext1", className: "section-label", children: label })] }) }, label));
-}
-export const MenuSections = ({ sections }) => {
+};
+const OverlayRenderer = ({ content }) => {
+    const data = typeof content === 'function' ? content() : content;
+    return _jsx("div", { children: _jsx(MenuContent, { ...data }) });
+};
+export const MenuSections = ({ sections, ...props }) => {
+    // this is a mock state only used to force an update on the component.
+    const [_, setUpdate] = useState(0);
     const toggleMenu = useCallback(() => {
         const layout = document.getElementById('layout');
         if (!layout)
@@ -62,9 +77,24 @@ export const MenuSections = ({ sections }) => {
         else {
             layout.classList.add('menu-content-visible');
         }
+        setUpdate(current => current + 1);
     }, []);
-    const [overlayContent, setOverlayContent] = useState();
-    const sectionItems = useMemo(() => sections.map(s => renderSection(s, setOverlayContent)), [sections]);
-    return (_jsxs(_Fragment, { children: [_jsx("ul", { children: sectionItems }), _jsx("button", { className: "toggle", onClick: toggleMenu, title: "Toggle menu panel visibility", children: _jsxs(IconBox, { children: [_jsx(MenuIcon, { className: "expand" }), _jsx(ChevronLeft, { className: "collapse" })] }) }), _jsxs("div", { id: "menuContentOverlay", onMouseEnter: showOverlay, onMouseLeave: hideOverlay, children: [overlayContent && _jsx("div", { children: _jsx(MenuContent, { ...overlayContent }) }), _jsx("div", { className: "arrow" })] })] }));
+    // the current overlay showing, when the user hovers the section icon. This is the index of the item in the sections array.
+    const [currentOverlay, setCurrentOverlay] = useState();
+    const sectionItems = useMemo(() => sections.map((s, i) => _jsx(Section, { id: i, ...s, setCurrentOverlay: setCurrentOverlay, hasContent: !!props.content }, i)), [sections]);
+    /* This function renders the section preview in the overlay in normal circumstances. If the menu is hidden and the section is active,
+    instead of rendering the section preview, it will render the actual menu content, which would be invisible otherwise.
+    Below, the key is of extreme importance. It ensures React will consider every section content to be an entirely different
+    component. Without this, React would see the content changing every time a new section is hovered. Since the content might be a
+    hook, this would cause some serious problems. */
+    function renderMenuOverlay() {
+        if (currentOverlay === undefined)
+            return null;
+        const shouldRenderMenuContentInstead = !isMenuContentVisible() && sections[currentOverlay].active && !!props.content;
+        return shouldRenderMenuContentInstead
+            ? _jsx(OverlayRenderer, { content: props.content }, 'contentKey' in props ? props.contentKey : undefined)
+            : _jsx(OverlayRenderer, { content: sections[currentOverlay].content }, currentOverlay);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("ul", { children: sectionItems }), !!props.content && _jsx("button", { className: "toggle", onClick: toggleMenu, title: "Toggle menu panel visibility", children: _jsxs(IconBox, { children: [_jsx(MenuIcon, { className: "expand" }), _jsx(ChevronLeft, { className: "collapse" })] }) }), _jsxs("div", { id: "menuContentOverlay", onMouseEnter: showOverlay, onMouseLeave: hideOverlay, children: [renderMenuOverlay(), _jsx("div", { className: "arrow" })] })] }));
 };
 //# sourceMappingURL=MenuSections.js.map

package/dist/components/Menu/MenuSections.js.map

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

package/dist/components/Menu/PageSelector.d.ts

@@ -1,3 +1,3 @@
 import { Selector } from './types';
-export declare const PageSelector: ({ options, value, button }: Selector) => import("react/jsx-runtime").JSX.Element;
+export declare const PageSelector: ({ options, value, button, loading, title }: Selector) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PageSelector.d.ts.map

package/dist/components/Menu/PageSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageSelector.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/PageSelector.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAkElC,eAAO,MAAM,YAAY,+BAAgC,QAAQ,4CAkChE,CAAA"}
+{"version":3,"file":"PageSelector.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/PageSelector.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAqElC,eAAO,MAAM,YAAY,+CAAgD,QAAQ,4CA2ChF,CAAA"}

package/dist/components/Menu/PageSelector.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { IconBox, Text } from '@citric/core';
 import { ArrowRight, Select } from '@citric/icons';
+import { LoadingCircular } from '@citric/ui';
 import { theme } from '@stack-spot/portal-theme';
 import { useMemo, useState } from 'react';
 import { styled } from 'styled-components';
@@ -26,6 +27,9 @@ const SelectorBox = styled.div `
 
     .label {
       flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 
@@ -69,7 +73,7 @@ const SelectorBox = styled.div `
     }
   }
 `;
-export const PageSelector = ({ options, value, button }) => {
+export const PageSelector = ({ options, value, button, loading, title }) => {
     const [visible, setVisible] = useState(false);
     const { optionsWithIcon, selected } = useMemo(() => {
         let selected = options[0];
@@ -82,6 +86,8 @@ export const PageSelector = ({ options, value, button }) => {
         });
         return { optionsWithIcon, selected };
     }, [options, value, button]);
-    return (_jsxs(SelectorBox, { children: [_jsxs("a", { onClick: () => setVisible(true), "aria-label": value, children: [selected?.icon && _jsx(IconBox, { children: selected?.icon }), _jsx(Text, { appearance: "body2", className: "label", children: selected?.label ?? button?.label ?? value }), _jsx(IconBox, { size: "xs", children: _jsx(Select, {}) })] }), _jsx(SelectionList, { visible: visible, items: optionsWithIcon, onHide: () => setVisible(false), after: button ? _jsx("a", { className: "view-all", href: button.href, onClick: button.onClick, children: button.label }) : undefined })] }));
+    return (_jsx(SelectorBox, { children: loading
+            ? _jsx(LoadingCircular, {})
+            : (_jsxs(_Fragment, { children: [title && _jsx(Text, { colorScheme: "light.700", sx: { mb: 3 }, children: title }), _jsxs("a", { onClick: () => setVisible(true), "aria-label": value, children: [selected?.icon && _jsx(IconBox, { children: selected?.icon }), _jsx(Text, { appearance: "body2", className: "label", children: selected?.label ?? button?.label ?? value }), _jsx(IconBox, { size: "xs", children: _jsx(Select, {}) })] }), _jsx(SelectionList, { visible: visible, items: optionsWithIcon, onHide: () => setVisible(false), after: button ? _jsx("a", { className: "view-all", href: button.href, onClick: button.onClick, children: button.label }) : undefined, scroll: true })] })) }));
 };
 //# sourceMappingURL=PageSelector.js.map

package/dist/components/Menu/PageSelector.js.map

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

package/dist/components/Menu/types.d.ts

@@ -1,14 +1,28 @@
 import { ReactElement } from 'react';
 import { Action } from '../types';
-export interface ItemGroup {
+interface BaseMenuItem {
+    hidden?: boolean;
+    /**
+     * React element on the left.
+     */
+    icon?: React.ReactElement;
+    /**
+     * React element on the right.
+     */
+    badge?: React.ReactElement;
+    /**
+     * Whether to wrap overflowing text, just hide or hide and add an ellipsis (...).
+     * @default 'wrap'
+     */
+    overflow?: 'hidden' | 'wrap' | 'ellipsis';
+}
+export interface ItemGroup extends BaseMenuItem {
     label: string;
     children: MenuItem[];
     open?: boolean;
-    hidden?: boolean;
 }
-export interface MenuAction extends Action {
+export interface MenuAction extends Action, BaseMenuItem {
     active?: boolean;
-    hidden?: boolean;
 }
 export type MenuItem = ItemGroup | MenuAction;
 export interface MenuButton extends Action {
@@ -24,6 +38,7 @@ export interface Selector {
     button?: Action;
     title?: string;
     subtitle?: string;
+    loading?: boolean;
 }
 export interface MenuSectionContent {
     goBack?: Action;
@@ -31,15 +46,40 @@ export interface MenuSectionContent {
     subtitle?: string;
     pageSelector?: Selector;
     options?: MenuItem[];
+    loading?: boolean;
+    error?: string;
 }
 export interface MenuSection extends Action {
     icon: ReactElement;
-    content?: MenuSectionContent;
+    /**
+     * The content or a function that creates the content.
+     * If this is a function, it will be called only when the section is hovered, i.e. only when the content really needs to be rendered.
+     * Tip: this function can be a React Hook.
+     */
+    content?: MenuSectionContent | (() => MenuSectionContent);
     active?: boolean;
+    onOpen?: () => void;
 }
-export interface MenuProps {
+interface BaseMenuProps {
     sections: MenuSection[];
-    content?: MenuSectionContent;
     compact?: boolean;
 }
+interface MenuPropsWithStaticContent extends BaseMenuProps {
+    content?: MenuSectionContent;
+}
+interface MenuPropsWithDynamicContent extends BaseMenuProps {
+    /**
+     * The function that creates the content. It will be called only when the content is rendered, i.e. only when the content really needs to
+     * be rendered.
+     *
+     * Tip: this function can be a React Hook.
+     */
+    content: MenuSectionContent | (() => MenuSectionContent);
+    /**
+     * Identifies each content that might be rendered by the menu. This prevents React Hook errors when the content is a React Hook function.
+     */
+    contentKey: React.Key;
+}
+export type MenuProps = MenuPropsWithStaticContent | MenuPropsWithDynamicContent;
+export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Menu/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAW,SAAQ,MAAM;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;AAE7C,MAAM,WAAW,UAAW,SAAQ,MAAM;IACxC,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,YAAa,SAAQ,MAAM;IAC1C,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,WAAY,SAAQ,MAAM;IACzC,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,UAAU,YAAY;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;CAC3C;AAED,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,UAAW,SAAQ,MAAM,EAAE,YAAY;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;AAE7C,MAAM,WAAW,UAAW,SAAQ,MAAM;IACxC,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,YAAa,SAAQ,MAAM;IAC1C,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,MAAM;IACzC,IAAI,EAAE,YAAY,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,kBAAkB,GAAG,CAAC,MAAM,kBAAkB,CAAC,CAAC;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,aAAa;IACrB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,0BAA2B,SAAQ,aAAa;IACxD,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED,UAAU,2BAA4B,SAAQ,aAAa;IACzD;;;;;OAKG;IACH,OAAO,EAAE,kBAAkB,GAAG,CAAC,MAAM,kBAAkB,CAAC,CAAC;IACzD;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC;CACvB;AAED,MAAM,MAAM,SAAS,GAAG,0BAA0B,GAAG,2BAA2B,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"OverlayContent.d.ts","sourceRoot":"","sources":["../../src/components/OverlayContent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,KAAM,SAAQ,mBAAmB;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC;CACzB;AAqBD,eAAO,MAAM,cAAc,mEAAoE,KAAK,4CAWnG,CAAA"}
+{"version":3,"file":"OverlayContent.d.ts","sourceRoot":"","sources":["../../src/components/OverlayContent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,KAAM,SAAQ,mBAAmB;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC;CACzB;AAuBD,eAAO,MAAM,cAAc,mEAAoE,KAAK,4CAcnG,CAAA"}

package/dist/components/OverlayContent.js

@@ -4,6 +4,7 @@ import { TimesMini } from '@citric/icons';
 import { IconButton } from '@citric/ui';
 import { listToClass, theme } from '@stack-spot/portal-theme';
 import { styled } from 'styled-components';
+import { useDictionary } from '../dictionary';
 const ContentBox = styled.section `
   display: flex;
   flex-direction: column;
@@ -14,13 +15,18 @@ const ContentBox = styled.section `
   }
   &.panel {
     padding: 20px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
   }
   header {
     display: flex;
     flex-direction: row;
-    flex: 1;
     margin-bottom: 1.25rem;
   }
 `;
-export const OverlayContent = ({ children, title, subtitle, className, style, onClose, type }) => (_jsxs(ContentBox, { style: style, className: listToClass([className, type]), children: [_jsxs("header", { children: [_jsxs(Flex, { flexDirection: "column", flex: 1, children: [_jsx(Text, { appearance: type === 'modal' ? 'h3' : 'h4', children: title }), subtitle && _jsx(Text, { appearance: "body2", colorScheme: "light.700", children: subtitle })] }), _jsx(IconButton, { onClick: onClose, title: "close", "aria-label": "close", children: _jsx(TimesMini, {}) })] }), children] }));
+export const OverlayContent = ({ children, title, subtitle, className, style, onClose, type }) => {
+    const t = useDictionary();
+    return (_jsxs(ContentBox, { style: style, className: listToClass([className, type]), children: [_jsxs("header", { children: [_jsxs(Flex, { flexDirection: "column", flex: 1, children: [_jsx(Text, { appearance: type === 'modal' ? 'h3' : 'h4', children: title }), subtitle && _jsx(Text, { appearance: "body2", colorScheme: "light.700", children: subtitle })] }), _jsx(IconButton, { onClick: onClose, title: t.close, "aria-label": t.close, children: _jsx(TimesMini, {}) })] }), children] }));
+};
 //# sourceMappingURL=OverlayContent.js.map

package/dist/components/OverlayContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayContent.js","sourceRoot":"","sources":["../../src/components/OverlayContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAa,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAExE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAc1C,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAA;;;;sBAIX,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;;;;;;CAa7C,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAS,EAAE,EAAE,CAAC,CACvG,MAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,aACjE,6BACE,MAAC,IAAI,IAAC,aAAa,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,aAClC,KAAC,IAAI,IAAC,UAAU,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,YAAG,KAAK,GAAQ,EAC/D,QAAQ,IAAI,KAAC,IAAI,IAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,WAAW,YAAE,QAAQ,GAAQ,IAC1E,EACP,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,OAAO,gBAAY,OAAO,YAAC,KAAC,SAAS,KAAG,GAAa,IAClF,EACR,QAAQ,IACE,CACd,CAAA"}
+{"version":3,"file":"OverlayContent.js","sourceRoot":"","sources":["../../src/components/OverlayContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAa,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAExE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAc7C,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAA;;;;sBAIX,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;CAe7C,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAS,EAAE,EAAE;IACtG,MAAM,CAAC,GAAG,aAAa,EAAE,CAAA;IACzB,OAAO,CACL,MAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,aACjE,6BACE,MAAC,IAAI,IAAC,aAAa,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,aAClC,KAAC,IAAI,IAAC,UAAU,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,YAAG,KAAK,GAAQ,EAC/D,QAAQ,IAAI,KAAC,IAAI,IAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,WAAW,YAAE,QAAQ,GAAQ,IAC1E,EACP,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,gBAAc,CAAC,CAAC,KAAK,YAAE,KAAC,SAAS,KAAG,GAAa,IACtF,EACR,QAAQ,IACE,CACd,CAAA;AACH,CAAC,CAAA"}

package/dist/components/SelectionList.d.ts

@@ -28,7 +28,8 @@ export interface SelectionListProps extends WithStyle {
     maxHeight?: string;
     before?: ReactElement;
     after?: ReactElement;
+    scroll?: boolean;
 }
-export declare const SelectionList: ({ items, className, style, visible, maxHeight, onHide, before, after, }: SelectionListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectionList: ({ items, className, style, visible, maxHeight, onHide, before, after, scroll, }: SelectionListProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SelectionList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionList.d.ts","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,YAAY,EAAqD,MAAM,OAAO,CAAA;AAEvF,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEhC,UAAU,YAAY;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY,EAAE,MAAM;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACjC,QAAQ,EAAE,QAAQ,EAAE,CAAC;CACtB;AAED,UAAU,WAAY,SAAQ,SAAS;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,SAAS,EAAE,YAAY;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,KAAK,QAAQ,GAAG,WAAW,GAAG,eAAe,GAAG,UAAU,CAAA;AAU1D,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB;AA6FD,eAAO,MAAM,aAAa,4EAEvB,kBAAkB,4CAuDpB,CAAA"}
+{"version":3,"file":"SelectionList.d.ts","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,YAAY,EAAqD,MAAM,OAAO,CAAA;AAEvF,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEhC,UAAU,YAAY;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY,EAAE,MAAM;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACjC,QAAQ,EAAE,QAAQ,EAAE,CAAC;CACtB;AAED,UAAU,WAAY,SAAQ,SAAS;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,SAAS,EAAE,YAAY;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,KAAK,QAAQ,GAAG,WAAW,GAAG,eAAe,GAAG,UAAU,CAAA;AAU1D,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAiGD,eAAO,MAAM,aAAa,oFAEvB,kBAAkB,4CAwDpB,CAAA"}

package/dist/components/SelectionList.js

@@ -8,7 +8,8 @@ import { styled } from 'styled-components';
 const ANIMATION_DURATION_MS = 300;
 const SelectionBox = styled.div `
   max-height: 0;
-  overflow: hidden;
+  overflow-y: ${({ $scroll }) => $scroll ? 'auto' : 'hidden'};
+  overflow-x: hidden;
   transition: max-height ease-in ${ANIMATION_DURATION_MS / 1000}s;
   z-index: 1;
   box-shadow: 4px 4px 48px #000;
@@ -40,6 +41,9 @@ const SelectionBox = styled.div `
     }
     .label {
       flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 
@@ -69,7 +73,7 @@ function renderItem(item, setCurrent) {
     }
     return renderAction(item);
 }
-export const SelectionList = ({ items, className, style, visible = true, maxHeight = '300px', onHide, before, after, }) => {
+export const SelectionList = ({ items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll, }) => {
     const wrapper = useRef(null);
     const itemsRef = useRef(items);
     const [current, setCurrent] = useState({ items });
@@ -97,7 +101,7 @@ export const SelectionList = ({ items, className, style, visible = true, maxHeig
         if (!wrapper.current?.classList.contains('visible'))
             setCurrent({ items });
     }, [items]);
-    return (_jsx(SelectionBox, { ref: wrapper, "$maxHeight": maxHeight, style: style, className: listToClass(['selection-list', visible ? 'visible' : undefined, className]), children: _jsxs("div", { className: "selection-list-content", children: [before, current.parent
+    return (_jsx(SelectionBox, { ref: wrapper, "$maxHeight": maxHeight, style: style, className: listToClass(['selection-list', visible ? 'visible' : undefined, className]), "$scroll": scroll, children: _jsxs("div", { className: "selection-list-content", children: [before, current.parent
                     ? (_jsxs(Flex, { mt: 5, mb: 1, alignItems: "center", children: [_jsx(IconButton, { onClick: () => setCurrent(current.parent ?? { items }), sx: { mr: 3 }, children: _jsx(ArrowLeft, {}) }), _jsx(Text, { appearance: "microtext1", children: current.label })] }))
                     : undefined, _jsx("ul", { children: listItems }), after] }) }));
 };

package/dist/components/SelectionList.js.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../src/components/Toaster.tsx"],"names":[],"mappings":"AAGA,OAAO,uCAAuC,CAAA;AAQ9C,eAAO,MAAM,OAAO,+CAAqD,CAAA"}
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../src/components/Toaster.tsx"],"names":[],"mappings":"AAGA,OAAO,uCAAuC,CAAA;AAY9C,eAAO,MAAM,OAAO,+CAAqD,CAAA"}

package/dist/components/Toaster.js

@@ -3,6 +3,10 @@ import { TimesMini } from '@citric/icons';
 import { IconButton } from '@citric/ui';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-const CloseButton = ({ closeToast }) => (_jsx(IconButton, { onClick: () => closeToast(null), title: "Dismiss", children: _jsx(TimesMini, {}) }));
+import { useDictionary } from '../dictionary';
+const CloseButton = ({ closeToast }) => {
+    const t = useDictionary();
+    return (_jsx(IconButton, { onClick: () => closeToast(null), title: t.dismiss, children: _jsx(TimesMini, {}) }));
+};
 export const Toaster = () => _jsx(ToastContainer, { closeButton: CloseButton });
 //# sourceMappingURL=Toaster.js.map

package/dist/components/Toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../src/components/Toaster.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAoB,cAAc,EAAE,MAAM,gBAAgB,CAAA;AACjE,OAAO,uCAAuC,CAAA;AAE9C,MAAM,WAAW,GAAG,CAAC,EAAE,UAAU,EAAoB,EAAE,EAAE,CAAC,CACxD,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAW,CAAC,EAAE,KAAK,EAAC,SAAS,YACjE,KAAC,SAAS,KAAG,GACF,CACd,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,KAAC,cAAc,IAAC,WAAW,EAAE,WAAW,GAAI,CAAA"}
+{"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../src/components/Toaster.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAoB,cAAc,EAAE,MAAM,gBAAgB,CAAA;AACjE,OAAO,uCAAuC,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAE7C,MAAM,WAAW,GAAG,CAAC,EAAE,UAAU,EAAoB,EAAE,EAAE;IACvD,MAAM,CAAC,GAAG,aAAa,EAAE,CAAA;IACzB,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAW,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,OAAO,YAClE,KAAC,SAAS,KAAG,GACF,CACd,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,KAAC,cAAc,IAAC,WAAW,EAAE,WAAW,GAAI,CAAA"}

package/dist/dictionary.d.ts

@@ -0,0 +1,15 @@
+export declare const useDictionary: () => Record<"cancel" | "close" | "validationLabel" | "dismiss" | "confirm", string>;
+export declare function getDictionary(): {
+    close: string;
+    validationLabel: string;
+    dismiss: string;
+    confirm: string;
+    cancel: string;
+} | {
+    close: string;
+    validationLabel: string;
+    dismiss: string;
+    confirm: string;
+    cancel: string;
+};
+//# sourceMappingURL=dictionary.d.ts.map

package/dist/dictionary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dictionary.d.ts","sourceRoot":"","sources":["../src/dictionary.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,aAAa,sFAAiC,CAAA;AAE3D,wBAAgB,aAAa;;;;;;;;;;;;EAG5B"}

package/dist/dictionary.js

@@ -0,0 +1,23 @@
+import { getLanguage, useTranslate } from '@stack-spot/portal-translate';
+const dictionary = {
+    en: {
+        close: 'Close',
+        validationLabel: 'Please, confirm the action by typing "$0" below:',
+        dismiss: 'Dismiss',
+        confirm: 'OK',
+        cancel: 'Cancel',
+    },
+    pt: {
+        close: 'Fechar',
+        validationLabel: 'Por favor, confirme a ação digitando "$0" no campo abaixo:',
+        dismiss: 'Dispensar',
+        confirm: 'OK',
+        cancel: 'Cancelar',
+    },
+};
+export const useDictionary = () => useTranslate(dictionary);
+export function getDictionary() {
+    const language = getLanguage();
+    return dictionary[language];
+}
+//# sourceMappingURL=dictionary.js.map

package/dist/dictionary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dictionary.js","sourceRoot":"","sources":["../src/dictionary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,WAAW,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAEpF,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,kDAAkD;QACnE,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,QAAQ;KACjB;IACD,EAAE,EAAE;QACF,KAAK,EAAE,QAAQ;QACf,eAAe,EAAE,4DAA4D;QAC7E,OAAO,EAAE,WAAW;QACpB,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,UAAU;KACnB;CACmB,CAAA;AAEtB,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAA;AAE3D,MAAM,UAAU,aAAa;IAC3B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAC9B,OAAO,UAAU,CAAC,QAAQ,CAAC,CAAA;AAC7B,CAAC"}

package/dist/index.d.ts

@@ -1,10 +1,12 @@
 export { Layout } from './Layout';
 export { overlay } from './LayoutOverlayManager';
+export { Dialog } from './components/Dialog';
 export { Header, HeaderProps } from './components/Header';
 export { StackspotLogo } from './components/Logo';
 export { MenuContent } from './components/Menu/MenuContent';
 export { MenuSections } from './components/Menu/MenuSections';
 export * from './components/Menu/types';
+export { OverlayContent } from './components/OverlayContent';
 export { ListAction, SelectionList, SelectionListProps } from './components/SelectionList';
 export * from './components/types';
 export * from './errors';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAC1F,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAC1F,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA"}

package/dist/index.js

@@ -1,10 +1,12 @@
 export { Layout } from './Layout';
 export { overlay } from './LayoutOverlayManager';
+export { Dialog } from './components/Dialog';
 export { Header } from './components/Header';
 export { StackspotLogo } from './components/Logo';
 export { MenuContent } from './components/Menu/MenuContent';
 export { MenuSections } from './components/Menu/MenuSections';
 export * from './components/Menu/types';
+export { OverlayContent } from './components/OverlayContent';
 export { SelectionList } from './components/SelectionList';
 export * from './components/types';
 export * from './errors';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAc,aAAa,EAAsB,MAAM,4BAA4B,CAAA;AAC1F,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAc,aAAa,EAAsB,MAAM,4BAA4B,CAAA;AAC1F,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA"}

package/dist/layout.css

@@ -68,20 +68,23 @@ body {
 }
 
 #page {
-  flex: 1;
+  position: absolute;
+  top: var(--header-height);
+  left: var(--menu-sections-width);
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   background-color: var(--light-300);
   border-top-left-radius: 0.5rem;
   align-items: center;
   padding: 24px;
-  margin-top: var(--header-height);
-  margin-left: var(--menu-sections-width);
-  transition: margin ease-in-out var(--menu-animation-duration);
+  transition: left ease-in-out var(--menu-animation-duration);
 }
 
 #layout.menu-content-visible #page {
-  margin-left: calc(var(--menu-sections-width) + var(--menu-content-width));
+  left: calc(var(--menu-sections-width) + var(--menu-content-width));
 }
 
 #content {
@@ -298,11 +301,25 @@ body {
   display: flex;
   flex-direction: column;
   top: var(--header-height);
-  right: -307px;
   bottom: 0;
-  width: 307px;
   transition: right var(--right-panel-animation-duration);
   background-color: var(--light-400);
+  right: -800px;
+}
+
+#rightPanel.small {
+  right: -400px;
+  width: 400px;
+}
+
+#rightPanel.medium {
+  right: -600px;
+  width: 600px;
+}
+
+#rightPanel.large {
+  right: -800px;
+  width: 800px;
 }
 
 #rightPanel.visible {
@@ -316,7 +333,7 @@ body {
   bottom: -420px;
   left: 20px;
   height: 400px;
-  transition: transform bottom 0.3s;
+  transition: bottom 0.3s;
 }
 
 #bottomPanel.visible {
@@ -326,12 +343,23 @@ body {
 #bottomDialog {
   position: fixed;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   bottom: -80px;
   left: 0;
   right: 0;
   height: 80px;
-  transition: transform bottom 0.3s;
+  transition: bottom 0.3s;
+  background-color: var(--inverse-500);
+  color: var(--inverse-contrastText);
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+}
+
+#bottomDialog .btn-group {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
 }
 
 #bottomDialog.visible {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-layout",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -8,10 +8,11 @@
     "@citric/core": "^5.3.1",
     "@citric/icons": "^5.3.1",
     "@citric/ui": "^5.3.1",
-    "@stack-spot/portal-theme": "0.0.2",
+    "@stack-spot/portal-theme": "^0.0.3",
+    "@stack-spot/portal-translate": "^0.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "styled-components": "6.1.1"
+    "styled-components": "^6.1.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",