@stack-spot/portal-layout 0.0.1

package/dist/components/Menu/MenuSections.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { IconBox, Text } from '@citric/core';
+import { ChevronLeft, Menu as MenuIcon } from '@citric/icons';
+import { useCallback, useMemo, useState } from 'react';
+import { MenuContent } from './MenuContent';
+const ARROW_HEIGHT = 24;
+const HIDE_OVERLAY_DELAY_MS = 400;
+const MENU_OVERLAY_ID = 'menuContentOverlay';
+let hideOverlayTask;
+function hideOverlay() {
+    if (hideOverlayTask !== undefined)
+        return;
+    hideOverlayTask = window.setTimeout(hideOverlayImmediately, HIDE_OVERLAY_DELAY_MS);
+}
+function hideOverlayImmediately() {
+    document.getElementById(MENU_OVERLAY_ID)?.classList.remove('visible');
+}
+function cancelHideOverlayTask() {
+    if (hideOverlayTask === undefined)
+        return;
+    clearTimeout(hideOverlayTask);
+    hideOverlayTask = undefined;
+}
+function showOverlay() {
+    cancelHideOverlayTask();
+    document.getElementById(MENU_OVERLAY_ID)?.classList.add('visible');
+}
+function isMenuContentVisible() {
+    return !!document.getElementById('layout')?.classList?.contains('menu-content-visible');
+}
+function renderSection({ icon, label, href, onClick, active, content }, setOverlayContent) {
+    function shouldShowOverlay() {
+        return !!content && (!active || !isMenuContentVisible());
+    }
+    function showOverlayAndFixArrowPosition(event) {
+        if (!shouldShowOverlay())
+            return;
+        const rect = event.target?.getBoundingClientRect();
+        const arrow = document.querySelector(`#${MENU_OVERLAY_ID} .arrow`);
+        setOverlayContent(content);
+        showOverlay();
+        if (rect && arrow) {
+            arrow.style.top = `${rect.top + rect.height / 2 - ARROW_HEIGHT / 2}px`;
+        }
+    }
+    function click() {
+        if (onClick)
+            onClick();
+        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 toggleMenu = useCallback(() => {
+        const layout = document.getElementById('layout');
+        if (!layout)
+            return;
+        if (layout.classList.contains('menu-content-visible')) {
+            layout.classList.remove('menu-content-visible');
+        }
+        else {
+            layout.classList.add('menu-content-visible');
+        }
+    }, []);
+    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" })] })] }));
+};
+//# sourceMappingURL=MenuSections.js.map

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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +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"}

package/dist/components/Menu/PageSelector.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconBox, Text } from '@citric/core';
+import { ArrowRight, Select } from '@citric/icons';
+import { theme } from '@stack-spot/portal-theme';
+import { useMemo, useState } from 'react';
+import { styled } from 'styled-components';
+import { SelectionList } from '../SelectionList';
+import { MENU_CONTENT_PADDING as PADDING } from './constants';
+const SelectorBox = styled.div `
+  position: relative;
+  margin: ${PADDING}px;
+  margin-bottom: 28px;
+
+  > a {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    border-radius: 0.25rem;
+    border: 1px solid ${theme.color.light['500']};
+    padding: 8px;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: ${theme.color.light['500']};
+    }
+
+    .label {
+      flex: 1;
+    }
+  }
+
+  .selection-list {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    box-shadow: none;
+    border-radius: 0.25rem;
+
+    .selection-list-content {
+      padding: 8px;
+      border-radius: 0.25rem;
+      border: none;
+      ul {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+    }
+
+    li > a {
+      border: 1px solid ${theme.color.light['500']};
+      background-color: ${theme.color.light['400']};
+
+      &:hover {
+        background-color: ${theme.color.light['500']};
+      }
+    }
+
+    .view-all {
+      background: ${theme.color.light['500']};
+      border-radius: 0.25rem;
+      outline: none;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 8px;
+    }
+  }
+`;
+export const PageSelector = ({ options, value, button }) => {
+    const [visible, setVisible] = useState(false);
+    const { optionsWithIcon, selected } = useMemo(() => {
+        let selected = options[0];
+        const optionsWithIcon = options.map((option) => {
+            if (option.key === value) {
+                selected = option;
+                return { ...option, active: true };
+            }
+            return { ...option, iconRight: _jsx(ArrowRight, {}) };
+        });
+        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 })] }));
+};
+//# sourceMappingURL=PageSelector.js.map

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

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

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

@@ -0,0 +1,3 @@
+export declare const MENU_CONTENT_PADDING = 20;
+export declare const MENU_CONTENT_ITEM_PADDING = 12;
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,KAAK,CAAA;AACtC,eAAO,MAAM,yBAAyB,KAAK,CAAA"}

package/dist/components/Menu/constants.js

@@ -0,0 +1,3 @@
+export const MENU_CONTENT_PADDING = 20;
+export const MENU_CONTENT_ITEM_PADDING = 12;
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/components/Menu/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,CAAA;AACtC,MAAM,CAAC,MAAM,yBAAyB,GAAG,EAAE,CAAA"}

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

@@ -0,0 +1,45 @@
+import { ReactElement } from 'react';
+import { Action } from '../types';
+export interface ItemGroup {
+    label: string;
+    children: MenuItem[];
+    open?: boolean;
+    hidden?: boolean;
+}
+export interface MenuAction extends Action {
+    active?: boolean;
+    hidden?: boolean;
+}
+export type MenuItem = ItemGroup | MenuAction;
+export interface MenuButton extends Action {
+    icon?: ReactElement;
+}
+export interface SelectorItem extends Action {
+    key: string;
+    icon?: ReactElement;
+}
+export interface Selector {
+    value?: string;
+    options: SelectorItem[];
+    button?: Action;
+    title?: string;
+    subtitle?: string;
+}
+export interface MenuSectionContent {
+    goBack?: Action;
+    title?: string;
+    subtitle?: string;
+    pageSelector?: Selector;
+    options?: MenuItem[];
+}
+export interface MenuSection extends Action {
+    icon: ReactElement;
+    content?: MenuSectionContent;
+    active?: boolean;
+}
+export interface MenuProps {
+    sections: MenuSection[];
+    content?: MenuSectionContent;
+    compact?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Menu/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Menu/types.ts"],"names":[],"mappings":""}

package/dist/components/OverlayContent.d.ts

@@ -0,0 +1,15 @@
+import { WithStyle } from '@stack-spot/portal-theme';
+import { ReactNode } from 'react';
+export interface OverlayContentProps extends WithStyle {
+    title: string;
+    subtitle?: string;
+    children: ReactNode;
+    onClose?: () => void;
+}
+interface Props extends OverlayContentProps {
+    onClose: () => void;
+    type: 'modal' | 'panel';
+}
+export declare const OverlayContent: ({ children, title, subtitle, className, style, onClose, type }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=OverlayContent.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/OverlayContent.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Text } from '@citric/core';
+import { TimesMini } from '@citric/icons';
+import { IconButton } from '@citric/ui';
+import { listToClass, theme } from '@stack-spot/portal-theme';
+import { styled } from 'styled-components';
+const ContentBox = styled.section `
+  display: flex;
+  flex-direction: column;
+  border-radius: 1rem;
+  background-color: ${theme.color.light['400']};
+  &.modal {
+    padding: 32px;
+  }
+  &.panel {
+    padding: 20px;
+  }
+  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] }));
+//# sourceMappingURL=OverlayContent.js.map

package/dist/components/OverlayContent.js.map

@@ -0,0 +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"}

package/dist/components/SelectionList.d.ts

@@ -0,0 +1,34 @@
+import { WithStyle } from '@stack-spot/portal-theme';
+import { ReactElement } from 'react';
+import { Action } from './types';
+interface ItemWithIcon {
+    icon?: React.ReactElement;
+    iconRight?: React.ReactElement;
+}
+export interface ListAction extends ItemWithIcon, Action {
+    active?: boolean;
+}
+interface ListGroup {
+    type?: 'section' | 'collapsible';
+    children: ListItem[];
+}
+interface ListSection extends ListGroup {
+    type: 'section';
+    label?: string;
+}
+interface ListCollapsible extends ListGroup, ItemWithIcon {
+    type?: 'collapsible';
+    label: string;
+}
+type ListItem = ListSection | ListCollapsible | ListAction;
+export interface SelectionListProps extends WithStyle {
+    visible?: boolean;
+    items: ListItem[];
+    onHide?: () => void;
+    maxHeight?: string;
+    before?: ReactElement;
+    after?: ReactElement;
+}
+export declare const SelectionList: ({ items, className, style, visible, maxHeight, onHide, before, after, }: SelectionListProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SelectionList.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/SelectionList.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, IconBox, Text } from '@citric/core';
+import { ArrowLeft, Check, ChevronRight } from '@citric/icons';
+import { IconButton } from '@citric/ui';
+import { listToClass, theme } from '@stack-spot/portal-theme';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { styled } from 'styled-components';
+const ANIMATION_DURATION_MS = 300;
+const SelectionBox = styled.div `
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height ease-in ${ANIMATION_DURATION_MS / 1000}s;
+  z-index: 1;
+  box-shadow: 4px 4px 48px #000;
+  border-radius: 0.5rem;
+
+  .selection-list-content {
+    display: flex;
+    flex-direction: column;
+    border-radius: 0.5rem;
+    background: ${theme.color.light['500']};
+    border-radius: 0.5rem;
+    border: 1px solid ${theme.color.light['600']};
+    background-color: ${theme.color.light['300']};
+  }
+
+  .section-title, li > a {
+    height: 40px;
+    padding: 0 8px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  li > a {
+    gap: 4px;
+    transition: background-color 0.2s;
+    &:hover {
+      background: ${theme.color.light['400']};
+    }
+    .label {
+      flex: 1;
+    }
+  }
+
+  li.section {
+    border-bottom: 2px solid ${theme.color.light['600']};
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &.visible {
+    max-height: ${({ $maxHeight }) => $maxHeight};
+  }
+`;
+function renderAction({ label, href, onClick, icon, iconRight, active }) {
+    return (_jsx("li", { className: "action", children: _jsxs("a", { href: href, onClick: onClick, children: [icon && _jsx(IconBox, { children: icon }), _jsx(Text, { appearance: "body2", className: "label", children: label }), iconRight && _jsx(IconBox, { children: iconRight }), active && _jsx(IconBox, { children: _jsx(Check, {}) })] }) }, label));
+}
+function renderCollapsible({ label, icon, iconRight, children }, setCurrent) {
+    return (_jsx("li", { className: "collapsible", children: _jsxs("a", { onClick: () => setCurrent({ items: children, label }), children: [icon && _jsx(IconBox, { children: icon }), _jsx(Text, { appearance: "body2", className: "label", children: label }), iconRight && _jsx(IconBox, { children: iconRight }), _jsx(IconBox, { children: _jsx(ChevronRight, {}) })] }) }, label));
+}
+function renderSection({ label, children }, setCurrent) {
+    return (_jsxs("li", { className: "section", children: [label && _jsx(Text, { appearance: "overheader2", colorScheme: "primary", className: "section-title", children: label }), _jsx("ul", { children: children.map(i => renderItem(i, setCurrent)) })] }, label ?? children.map(c => c.label).join('-')));
+}
+function renderItem(item, setCurrent) {
+    if ('children' in item) {
+        return item.type === 'section' ? renderSection(item, setCurrent) : renderCollapsible(item, setCurrent);
+    }
+    return renderAction(item);
+}
+export const SelectionList = ({ items, className, style, visible = true, maxHeight = '300px', onHide, before, after, }) => {
+    const wrapper = useRef(null);
+    const itemsRef = useRef(items);
+    const [current, setCurrent] = useState({ items });
+    const listItems = useMemo(() => current.items.map(i => renderItem(i, (next) => setCurrent({ ...next, parent: current }))), [current]);
+    const hide = useCallback((event) => {
+        const target = event.target;
+        // if the element is not in the DOM anymore, we'll consider the click was inside the selection list
+        const isClickInsideSelectionList = !target?.isConnected || wrapper.current?.contains(target);
+        const isAction = target?.classList?.contains('action') || !!target?.closest('.action');
+        if (!isClickInsideSelectionList || isAction) {
+            if (onHide)
+                onHide();
+            setTimeout(() => setCurrent({ items: itemsRef.current }), ANIMATION_DURATION_MS);
+            document.removeEventListener('click', hide);
+        }
+    }, []);
+    useEffect(() => {
+        if (!onHide)
+            return;
+        if (visible)
+            setTimeout(() => document.addEventListener('click', hide), 50);
+    }, [visible]);
+    useEffect(() => {
+        itemsRef.current = items;
+        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
+                    ? (_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] }) }));
+};
+//# sourceMappingURL=SelectionList.js.map

package/dist/components/SelectionList.js.map

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

package/dist/components/Toaster.d.ts

@@ -0,0 +1,3 @@
+import 'react-toastify/dist/ReactToastify.css';
+export declare const Toaster: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Toaster.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Toaster.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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, {}) }));
+export const Toaster = () => _jsx(ToastContainer, { closeButton: CloseButton });
+//# sourceMappingURL=Toaster.js.map

package/dist/components/Toaster.js.map

@@ -0,0 +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"}

package/dist/components/UserMenu.d.ts

@@ -0,0 +1,9 @@
+import { SelectionListProps } from './SelectionList';
+interface Props {
+    userName: string;
+    email?: string;
+    options?: SelectionListProps['items'];
+}
+export declare const UserMenu: ({ userName, email, options }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=UserMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UserMenu.d.ts","sourceRoot":"","sources":["../../src/components/UserMenu.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAiB,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAEnE,UAAU,KAAK;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;CACvC;AAoDD,eAAO,MAAM,QAAQ,iCAAkC,KAAK,4CA0B3D,CAAA"}

package/dist/components/UserMenu.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, IconBox, LinkBox, Text } from '@citric/core';
+import { ChevronDown } from '@citric/icons';
+import { Avatar } from '@citric/ui';
+import { theme } from '@stack-spot/portal-theme';
+import { useState } from 'react';
+import { styled } from 'styled-components';
+import { SelectionList } from './SelectionList';
+const UserMenuBox = styled.div `
+  .user-menu-header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 12px;
+    border-bottom: 2px solid ${theme.color.light['600']};
+  }
+
+  .selection-list {
+    position: absolute;
+    top: var(--header-height);
+    right: 20px;
+    width: 266px;
+
+    .selection-list-content {
+      border: none;
+      padding: 16px 16px 8px;
+      background-color: ${theme.color.light['400']};
+    }
+
+    li {
+      margin: 8px 0;
+      & > a {
+        border-radius: 6px;
+        &:hover {
+          background: ${theme.color.light['500']};
+        }
+      }
+    }
+  }
+
+  .username {
+    margin: 5px 0 2px 0;
+  }
+
+  .chevron {
+    transition: transform ease-out 0.3s;
+  }
+`;
+const UserMenuHeader = ({ userName, email }) => (_jsxs("div", { className: "user-menu-header", children: [_jsx(Avatar, { size: "xs", children: userName }), _jsx(Text, { appearance: "body1", className: "username", children: userName }), email && _jsx(Text, { appearance: "microtext1", className: "email", colorScheme: "light.700", children: email })] }));
+export const UserMenu = ({ userName, email, options }) => {
+    const [visible, setVisible] = useState(false);
+    return (_jsxs(UserMenuBox, { children: [_jsx(LinkBox, { as: "button", onClick: () => setVisible(true), children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Avatar, { size: "xs", children: userName }), _jsx(IconBox, { colorScheme: "inverse", className: "chevron", style: visible ? { transform: 'rotate(180deg)' } : undefined, children: _jsx(ChevronDown, {}) })] }) }), options?.length
+                ? _jsx(SelectionList, { visible: visible, before: _jsx(UserMenuHeader, { userName: userName, email: email }), items: options, onHide: () => setVisible(false), maxHeight: "600px" })
+                : null] }));
+};
+//# sourceMappingURL=UserMenu.js.map

package/dist/components/UserMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserMenu.js","sourceRoot":"","sources":["../../src/components/UserMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAsB,MAAM,iBAAiB,CAAA;AAQnE,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;+BAOC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;;;;;0BAY7B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;wBAQ1B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;;;;;;CAa/C,CAAA;AAED,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAA0B,EAAE,EAAE,CAAC,CACtE,eAAK,SAAS,EAAC,kBAAkB,aAC/B,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,YAAE,QAAQ,GAAU,EACrC,KAAC,IAAI,IAAC,UAAU,EAAC,OAAO,EAAC,SAAS,EAAC,UAAU,YAAE,QAAQ,GAAQ,EAC9D,KAAK,IAAI,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,SAAS,EAAC,OAAO,EAAC,WAAW,EAAC,WAAW,YAAE,KAAK,GAAQ,IAC5F,CACP,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAS,EAAE,EAAE;IAC9D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE7C,OAAO,CACL,MAAC,WAAW,eACV,KAAC,OAAO,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,YAClD,MAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,aACvB,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,YAAE,QAAQ,GAAU,EACrC,KAAC,OAAO,IAAC,WAAW,EAAC,SAAS,EAAC,SAAS,EAAC,SAAS,EAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC,SAAS,YAC7G,KAAC,WAAW,KAAG,GACP,IACL,GACC,EAET,OAAO,EAAE,MAAM;gBACd,CAAC,CAAC,KAAC,aAAa,IACd,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,KAAC,cAAc,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,EAC5D,KAAK,EAAE,OAAQ,EACf,MAAM,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAC/B,SAAS,EAAC,OAAO,GACjB;gBACF,CAAC,CAAC,IAAI,IAEI,CACf,CAAA;AACH,CAAC,CAAA"}

package/dist/components/types.d.ts

@@ -0,0 +1,6 @@
+export interface Action {
+    label: string;
+    onClick?: () => void;
+    href?: string;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}

package/dist/components/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":""}

package/dist/errors.d.ts

@@ -0,0 +1,7 @@
+export declare class LayoutError extends Error {
+    constructor(message: string);
+}
+export declare class ElementNotFound extends LayoutError {
+    constructor(elementName: string, elementId: string);
+}
+//# sourceMappingURL=errors.d.ts.map

package/dist/errors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../src/errors.ts"],"names":[],"mappings":"AAAA,qBAAa,WAAY,SAAQ,KAAK;gBACxB,OAAO,EAAE,MAAM;CAG5B;AAED,qBAAa,eAAgB,SAAQ,WAAW;gBAClC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM;CAGnD"}

package/dist/errors.js

@@ -0,0 +1,11 @@
+export class LayoutError extends Error {
+    constructor(message) {
+        super(`Layout error: ${message}`);
+    }
+}
+export class ElementNotFound extends LayoutError {
+    constructor(elementName, elementId) {
+        super(`unable to create ${elementName} because no element with id "${elementId}" was found in the view.`);
+    }
+}
+//# sourceMappingURL=errors.js.map

package/dist/errors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"errors.js","sourceRoot":"","sources":["../src/errors.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,WAAY,SAAQ,KAAK;IACpC,YAAY,OAAe;QACzB,KAAK,CAAC,iBAAiB,OAAO,EAAE,CAAC,CAAA;IACnC,CAAC;CACF;AAED,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAC9C,YAAY,WAAmB,EAAE,SAAiB;QAChD,KAAK,CAAC,oBAAoB,WAAW,gCAAgC,SAAS,0BAA0B,CAAC,CAAA;IAC3G,CAAC;CACF"}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { Layout } from './Layout';
+export { overlay } from './LayoutOverlayManager';
+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 { ListAction, SelectionList, SelectionListProps } from './components/SelectionList';
+export * from './components/types';
+export * from './errors';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +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"}