@homebound/beam 2.128.3 → 2.130.0

package/dist/Css.d.ts

@@ -545,6 +545,27 @@ declare class CssBuilder<T extends Properties1> {
     jc(value: Properties["justifyContent"]): CssBuilder<T & {
         justifyContent: import("csstype").Property.JustifyContent | undefined;
     }>;
+    get jifs(): CssBuilder<T & {
+        justifyItems: import("csstype").Property.JustifyItems | undefined;
+    }>;
+    get jife(): CssBuilder<T & {
+        justifyItems: import("csstype").Property.JustifyItems | undefined;
+    }>;
+    get jic(): CssBuilder<T & {
+        justifyItems: import("csstype").Property.JustifyItems | undefined;
+    }>;
+    get jisb(): CssBuilder<T & {
+        justifyItems: import("csstype").Property.JustifyItems | undefined;
+    }>;
+    get jisa(): CssBuilder<T & {
+        justifyItems: import("csstype").Property.JustifyItems | undefined;
+    }>;
+    get jise(): CssBuilder<T & {
+        justifyItems: import("csstype").Property.JustifyItems | undefined;
+    }>;
+    ji(value: Properties["justifyItems"]): CssBuilder<T & {
+        justifyItems: import("csstype").Property.JustifyItems | undefined;
+    }>;
     get asfs(): CssBuilder<T & {
         alignSelf: import("csstype").Property.AlignSelf | undefined;
     }>;

package/dist/Css.js

@@ -196,6 +196,13 @@ class CssBuilder {
     get jcsa() { return this.add("justifyContent", "space-around"); }
     get jcse() { return this.add("justifyContent", "space-evenly"); }
     jc(value) { return this.add("justifyContent", value); }
+    get jifs() { return this.add("justifyItems", "flex-start"); }
+    get jife() { return this.add("justifyItems", "flex-end"); }
+    get jic() { return this.add("justifyItems", "center"); }
+    get jisb() { return this.add("justifyItems", "space-between"); }
+    get jisa() { return this.add("justifyItems", "space-around"); }
+    get jise() { return this.add("justifyItems", "space-evenly"); }
+    ji(value) { return this.add("justifyItems", value); }
     get asfs() { return this.add("alignSelf", "flex-start"); }
     get asfe() { return this.add("alignSelf", "flex-end"); }
     get asc() { return this.add("alignSelf", "center"); }

package/dist/components/BeamContext.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const Modal_1 = require("./Modal/Modal");
 const PresentationContext_1 = require("./PresentationContext");
+const SnackbarContext_1 = require("./Snackbar/SnackbarContext");
 const SuperDrawer_1 = require("./SuperDrawer/SuperDrawer");
 const index_1 = require("../utils/index");
 /** This is only exported internally, for useModal and useSuperDrawer, it's not a public API. */
@@ -55,7 +56,7 @@ function BeamProvider({ children, ...presentationProps }) {
             tabActionsDiv,
         };
     }, [modalBodyDiv, modalFooterDiv]);
-    return ((0, jsx_runtime_1.jsx)(exports.BeamContext.Provider, Object.assign({ value: { ...context } }, { children: (0, jsx_runtime_1.jsxs)(PresentationContext_1.PresentationProvider, Object.assign({}, presentationProps, { children: [(0, jsx_runtime_1.jsxs)(react_aria_1.OverlayProvider, { children: [children, modalRef.current && drawerContentStackRef.current.length === 0 && (0, jsx_runtime_1.jsx)(Modal_1.Modal, Object.assign({}, modalRef.current), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(SuperDrawer_1.SuperDrawer, {}, void 0)] }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(exports.BeamContext.Provider, Object.assign({ value: { ...context } }, { children: (0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({}, presentationProps, { children: (0, jsx_runtime_1.jsxs)(SnackbarContext_1.SnackbarProvider, { children: [(0, jsx_runtime_1.jsxs)(react_aria_1.OverlayProvider, { children: [children, modalRef.current && drawerContentStackRef.current.length === 0 && (0, jsx_runtime_1.jsx)(Modal_1.Modal, Object.assign({}, modalRef.current), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(SuperDrawer_1.SuperDrawer, {}, void 0)] }, void 0) }), void 0) }), void 0));
 }
 exports.BeamProvider = BeamProvider;
 /** Looks like a ref, but invokes a re-render on set (w/o changing the setter identity). */

package/dist/components/Button.d.ts

@@ -16,8 +16,8 @@ export interface ButtonProps extends BeamButtonProps, BeamFocusableProps {
     type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
     /** Denotes if this button is used to download a resource. Uses the anchor tag with the `download` attribute */
     download?: boolean;
+    contrast?: boolean;
 }
 export declare function Button(props: ButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare type ButtonSize = "sm" | "md" | "lg";
-declare type ButtonVariant = "primary" | "secondary" | "tertiary" | "danger" | "text";
-export {};
+export declare type ButtonSize = "sm" | "md" | "lg";
+export declare type ButtonVariant = "primary" | "secondary" | "tertiary" | "danger" | "text";

package/dist/components/Button.js

@@ -10,7 +10,7 @@ const Css_1 = require("../Css");
 const utils_1 = require("../utils");
 const useTestIds_1 = require("../utils/useTestIds");
 function Button(props) {
-    const { onClick: onPress, disabled, endAdornment, menuTriggerProps, tooltip, openInNew, download, ...otherProps } = props;
+    const { onClick: onPress, disabled, endAdornment, menuTriggerProps, tooltip, openInNew, download, contrast = false, ...otherProps } = props;
     const showExternalLinkIcon = (typeof onPress === "string" && (0, utils_1.isAbsoluteUrl)(onPress)) || openInNew;
     const isDisabled = !!disabled;
     const ariaProps = { onPress, isDisabled, ...otherProps, ...menuTriggerProps };
@@ -26,8 +26,12 @@ function Button(props) {
     }, ref);
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)(ariaProps);
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)(ariaProps);
-    const { baseStyles, hoverStyles, disabledStyles, pressedStyles } = (0, react_1.useMemo)(() => getButtonStyles(variant, size), [variant, size]);
-    const focusRingStyles = (0, react_1.useMemo)(() => (variant === "danger" ? Css_1.Css.bshDanger.$ : Css_1.Css.bshFocus.$), [variant]);
+    const { baseStyles, hoverStyles, disabledStyles, pressedStyles } = (0, react_1.useMemo)(() => getButtonStyles(variant, size, contrast), [variant, size, contrast]);
+    const focusStyles = (0, react_1.useMemo)(() => !contrast
+        ? variant === "danger"
+            ? Css_1.Css.bshDanger.$
+            : Css_1.Css.bshFocus.$
+        : Css_1.Css.boxShadow(`0 0 0 2px ${variant === "tertiary" ? Css_1.Palette.LightBlue700 : Css_1.Palette.White}`).if(variant === "tertiary").bgGray700.white.$, [variant, contrast]);
     const buttonContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && (0, jsx_runtime_1.jsx)(components_1.Icon, { xss: iconStyles[size], icon: icon }, void 0), label, endAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ml1.$ }, { children: endAdornment }), void 0)] }, void 0));
     const buttonAttrs = {
         ref: ref,
@@ -35,12 +39,12 @@ function Button(props) {
         ...focusProps,
         ...hoverProps,
         css: {
-            ...Css_1.Css.buttonBase.$,
+            ...Css_1.Css.buttonBase.tt("inherit").$,
             ...baseStyles,
             ...(isHovered && !isPressed ? hoverStyles : {}),
             ...(isPressed ? pressedStyles : {}),
             ...(isDisabled ? { ...disabledStyles, ...Css_1.Css.cursorNotAllowed.$ } : {}),
-            ...(isFocusVisible ? focusRingStyles : {}),
+            ...(isFocusVisible ? focusStyles : {}),
         },
         ...tid,
     };
@@ -53,48 +57,49 @@ function Button(props) {
     });
 }
 exports.Button = Button;
-function getButtonStyles(variant, size) {
+function getButtonStyles(variant, size, contrast) {
+    const styles = variantStyles(contrast)[variant];
     if (variant === "text") {
         // The text variant does not support the 'size'. The 'size' prop only effects the button's height and padding which is not relevant for this variant.
-        return variantStyles[variant];
+        return styles;
     }
     return {
-        ...variantStyles[variant],
-        baseStyles: { ...variantStyles[variant].baseStyles, ...sizeStyles[size] },
+        ...styles,
+        baseStyles: { ...styles.baseStyles, ...sizeStyles[size] },
     };
 }
-const variantStyles = {
+const variantStyles = (contrast) => ({
     primary: {
-        baseStyles: Css_1.Css.bgLightBlue700.white.$,
-        hoverStyles: Css_1.Css.bgLightBlue900.$,
-        pressedStyles: Css_1.Css.bgLightBlue500.$,
-        disabledStyles: Css_1.Css.bgLightBlue200.$,
+        baseStyles: Css_1.Css.bgLightBlue700.white.if(contrast).bgLightBlue400.$,
+        hoverStyles: Css_1.Css.bgLightBlue900.if(contrast).bgLightBlue500.$,
+        pressedStyles: Css_1.Css.bgLightBlue500.if(contrast).bgLightBlue900.$,
+        disabledStyles: Css_1.Css.bgLightBlue200.if(contrast).gray600.bgLightBlue900.$,
     },
     secondary: {
         baseStyles: Css_1.Css.bgWhite.bGray300.bw1.ba.gray800.$,
-        hoverStyles: Css_1.Css.bgGray100.$,
-        pressedStyles: Css_1.Css.bgGray200.$,
+        hoverStyles: Css_1.Css.bgGray100.if(contrast).bgGray300.$,
+        pressedStyles: Css_1.Css.bgGray200.if(contrast).bgGray100.$,
         disabledStyles: Css_1.Css.bgWhite.gray400.$,
     },
     tertiary: {
-        baseStyles: Css_1.Css.bgTransparent.lightBlue700.$,
-        hoverStyles: Css_1.Css.bgGray100.$,
-        pressedStyles: Css_1.Css.lightBlue900.$,
-        disabledStyles: Css_1.Css.gray400.$,
+        baseStyles: Css_1.Css.bgTransparent.lightBlue700.if(contrast).lightBlue400.$,
+        hoverStyles: Css_1.Css.bgGray100.if(contrast).bgGray700.white.$,
+        pressedStyles: Css_1.Css.lightBlue900.if(contrast).bgWhite.gray900.$,
+        disabledStyles: Css_1.Css.gray400.if(contrast).gray700.$,
     },
     danger: {
-        baseStyles: Css_1.Css.bgRed900.white.$,
-        hoverStyles: Css_1.Css.bgRed500.$,
-        pressedStyles: Css_1.Css.bgRed900.$,
-        disabledStyles: Css_1.Css.bgRed200.$,
+        baseStyles: Css_1.Css.bgRed900.white.if(contrast).bgRed800.$,
+        hoverStyles: Css_1.Css.bgRed500.if(contrast).bgRed600.$,
+        pressedStyles: Css_1.Css.bgRed900.if(contrast).bgRed800.$,
+        disabledStyles: Css_1.Css.bgRed200.if(contrast).bgRed900.gray600.$,
     },
     text: {
-        baseStyles: Css_1.Css.lightBlue700.add("fontSize", "inherit").$,
-        hoverStyles: {},
-        pressedStyles: {},
-        disabledStyles: Css_1.Css.lightBlue300.$,
+        baseStyles: Css_1.Css.lightBlue700.add("fontSize", "inherit").if(contrast).lightBlue400.$,
+        hoverStyles: Css_1.Css.lightBlue600.if(contrast).lightBlue300.$,
+        pressedStyles: Css_1.Css.lightBlue700.if(contrast).lightBlue200.$,
+        disabledStyles: Css_1.Css.lightBlue300.if(contrast).lightBlue700.$,
     },
-};
+});
 const sizeStyles = {
     sm: Css_1.Css.hPx(32).pxPx(12).$,
     md: Css_1.Css.hPx(40).px2.$,

package/dist/components/Snackbar/Snackbar.d.ts

@@ -0,0 +1,6 @@
+import { SnackbarNoticeProps } from "./SnackbarNotice";
+interface SnackbarProps {
+    notices: SnackbarNoticeProps[];
+}
+export declare function Snackbar({ notices }: SnackbarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Snackbar/Snackbar.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Snackbar = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const SnackbarNotice_1 = require("./SnackbarNotice");
+const Css_1 = require("../../Css");
+function Snackbar({ notices }) {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.fixed.bottom3.right3.df.fdc.aife.gapPx(12).$ }, { children: notices.map((data) => ((0, jsx_runtime_1.jsx)(SnackbarNotice_1.SnackbarNotice, Object.assign({}, data), data.id))) }), void 0));
+}
+exports.Snackbar = Snackbar;

package/dist/components/Snackbar/SnackbarContext.d.ts

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from "react";
+import { SnackbarNoticeProps } from "./SnackbarNotice";
+export declare type SnackbarContextProps = {
+    setNotices: React.Dispatch<React.SetStateAction<SnackbarNoticeProps[]>>;
+};
+export declare const SnackbarContext: React.Context<SnackbarContextProps>;
+export declare function SnackbarProvider(props: PropsWithChildren<{}>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function useSnackbarContext(): SnackbarContextProps;

package/dist/components/Snackbar/SnackbarContext.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSnackbarContext = exports.SnackbarProvider = exports.SnackbarContext = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const Snackbar_1 = require("./Snackbar");
+exports.SnackbarContext = (0, react_1.createContext)({ setNotices: () => { } });
+function SnackbarProvider(props) {
+    const [notices, setNotices] = (0, react_1.useState)([]);
+    const contextValue = (0, react_1.useMemo)(() => ({ setNotices }), []);
+    return ((0, jsx_runtime_1.jsxs)(exports.SnackbarContext.Provider, Object.assign({ value: contextValue }, { children: [props.children, (0, jsx_runtime_1.jsx)(Snackbar_1.Snackbar, { notices: notices }, void 0)] }), void 0));
+}
+exports.SnackbarProvider = SnackbarProvider;
+function useSnackbarContext() {
+    return (0, react_1.useContext)(exports.SnackbarContext);
+}
+exports.useSnackbarContext = useSnackbarContext;

package/dist/components/Snackbar/SnackbarNotice.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import { ButtonProps } from "../Button";
+export declare type SnackbarNoticeTypes = "error" | "warning" | "success" | "info";
+export interface SnackbarNoticeProps {
+    /** Adds action button to the right of the notice */
+    action?: Pick<ButtonProps, "label" | "onClick" | "variant">;
+    /** Does not allow the user to close the notice manually. Notice will fade away in 10s. Value will be ignored if 'persistent' is set to 'true'. */
+    hideCloseButton?: boolean;
+    message: ReactNode;
+    /** This notice will persist on the screen until systematically closed by the app or by the user clicking the close button. */
+    persistent?: boolean;
+    /** Defines the icon that will show on the left side of the notification. */
+    icon?: SnackbarNoticeTypes;
+    /** Unique identifier to allow notice to close itself */
+    id: string;
+    /** Removes the snackbar notice from the stack */
+    onClose: () => void;
+}
+export declare function SnackbarNotice(props: SnackbarNoticeProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Snackbar/SnackbarNotice.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnackbarNotice = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Button_1 = require("../Button");
+const Icon_1 = require("../Icon");
+const IconButton_1 = require("../IconButton");
+const Css_1 = require("../../Css");
+const utils_1 = require("../../utils");
+function SnackbarNotice(props) {
+    const { icon, message, action, hideCloseButton, persistent, onClose } = props;
+    const tid = (0, utils_1.useTestIds)(props, "snackbar");
+    // Only allow the "close" button to be hidden if not a `persistent` notice. Otherwise we could get in a state where the user cannot remove the notice from the screen.
+    const reallyHideClose = hideCloseButton && !persistent;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.white.bgGray800.br4.base.df.aic.maxwPx(420).$ }, tid, { children: [icon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.plPx(12).$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ icon: typeToIcon[icon] }, tid.icon), void 0) }), void 0)), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp3.pr2.myPx(12).plPx(icon ? 8 : 16).$ }, (typeof message === "string" ? { title: message } : undefined), tid.message, { children: message }), void 0), (action || !reallyHideClose) && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ css: Css_1.Css.fs0.df.aic.$ }, { children: [action && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ttu.sm.prPx(!reallyHideClose && action.variant !== "text" ? 4 : 8).$ }, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ contrast: true }, action, tid.action), void 0) }), void 0)), !reallyHideClose && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.pr1.add("lineHeight", 0).$ }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ icon: "x", contrast: true, onClick: onClose }, tid.close), void 0) }), void 0))] }), void 0))] }), void 0));
+}
+exports.SnackbarNotice = SnackbarNotice;
+const typeToIcon = {
+    error: "xCircle",
+    warning: "error",
+    success: "checkCircle",
+    info: "infoCircle",
+};

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

@@ -0,0 +1,2 @@
+export { useSnackbar } from "./useSnackbar";
+export type { TriggerNoticeProps } from "./useSnackbar";

package/dist/components/Snackbar/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSnackbar = void 0;
+var useSnackbar_1 = require("./useSnackbar");
+Object.defineProperty(exports, "useSnackbar", { enumerable: true, get: function () { return useSnackbar_1.useSnackbar; } });

package/dist/components/Snackbar/useSnackbar.d.ts

@@ -0,0 +1,12 @@
+import { SnackbarNoticeProps } from "./SnackbarNotice";
+export interface UseSnackbarHook {
+    triggerNotice: (props: TriggerNoticeProps) => {
+        close: () => void;
+    };
+    closeNotice: (id: string) => void;
+}
+export declare function useSnackbar(): UseSnackbarHook;
+export interface TriggerNoticeProps extends Omit<SnackbarNoticeProps, "id" | "onClose"> {
+    id?: string;
+    onClose?: () => void;
+}

package/dist/components/Snackbar/useSnackbar.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSnackbar = void 0;
+const react_1 = require("react");
+const SnackbarContext_1 = require("./SnackbarContext");
+const utils_1 = require("../../utils");
+function useSnackbar() {
+    const { setNotices } = (0, SnackbarContext_1.useSnackbarContext)();
+    const onClose = (0, react_1.useCallback)((noticeId) => {
+        setNotices((prev) => {
+            let returnValue = prev;
+            // check to see if the notice is still in our existing stack, if so then remove it. Otherwise it was manually closed, so return the existing value.
+            if (prev.some(({ id }) => id === noticeId)) {
+                returnValue = prev.filter(({ id }) => id !== noticeId);
+            }
+            // For good measure, reset the snackbarId when notices array is emptied.
+            if (returnValue.length === 0) {
+                snackbarId = 1;
+            }
+            return returnValue;
+        });
+    }, []);
+    const triggerNotice = (0, react_1.useCallback)((props) => {
+        var _a;
+        // Sets `noticeId` to the current value of `snackbarId` and then increments.
+        const noticeId = (_a = props.id) !== null && _a !== void 0 ? _a : `beamSnackbar:${snackbarId++}`;
+        let maybeTimeout;
+        if (!props.persistent) {
+            maybeTimeout = window.setTimeout(() => {
+                onClose(noticeId);
+                // Auto close in 10s
+            }, 10000);
+        }
+        setNotices((prev) => prev.concat({
+            ...props,
+            id: noticeId,
+            onClose: () => {
+                // Because we reset the `snackbarId` if the notices array is empty, then we need to call `clearTimeout` to ensure we don't accidentally close the wrong notice
+                clearTimeout(maybeTimeout);
+                onClose(noticeId);
+                (0, utils_1.maybeCall)(props.onClose);
+            },
+        }));
+        return {
+            close: () => {
+                // Because we reset the `snackbarId` if the notices array is empty, then we need to call `clearTimeout` to ensure we don't accidentally close the wrong notice
+                clearTimeout(maybeTimeout);
+                onClose(noticeId);
+            },
+        };
+    }, [onClose, setNotices]);
+    const closeNotice = (0, react_1.useCallback)((id) => onClose(id), [onClose]);
+    return { triggerNotice, closeNotice };
+}
+exports.useSnackbar = useSnackbar;
+let snackbarId = 1;

package/dist/components/index.d.ts

@@ -19,6 +19,7 @@ export * from "./Modal";
 export * from "./Modal/useModal";
 export { NavLink } from "./NavLink";
 export { PresentationProvider } from "./PresentationContext";
+export * from "./Snackbar";
 export * from "./Stepper";
 export * from "./SuperDrawer";
 export * from "./Table";

package/dist/components/index.js

@@ -35,6 +35,7 @@ var NavLink_1 = require("./NavLink");
 Object.defineProperty(exports, "NavLink", { enumerable: true, get: function () { return NavLink_1.NavLink; } });
 var PresentationContext_1 = require("./PresentationContext");
 Object.defineProperty(exports, "PresentationProvider", { enumerable: true, get: function () { return PresentationContext_1.PresentationProvider; } });
+__exportStar(require("./Snackbar"), exports);
 __exportStar(require("./Stepper"), exports);
 __exportStar(require("./SuperDrawer"), exports);
 __exportStar(require("./Table"), exports);

package/dist/components/internal/Menu.js

@@ -28,10 +28,10 @@ function Menu(props) {
     // Bulk updates of MenuItems below. If we find this to be of sluggish performance, then we can change to be more surgical in our updating.
     // If our list of items change, update the "items" menu section. (key is based on label in `getKey` above)
     (0, react_1.useEffect)(() => tree.update("items", { label: "items", items }), [items]);
-    return ((0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, Object.assign({ restoreFocus: true }, { children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ css: {
+    return ((0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ css: {
                 // Using `max-height: inherit` allows us to take advantage of the height set on the overlay container, which updates based on the available space for the overlay within the viewport
                 ...Css_1.Css.df.fdc.myPx(4).bgWhite.outline0.br4.bshBasic.listReset.maxh("inherit").overflowAuto.$,
                 "&:hover, &:focus": Css_1.Css.bshHover.$,
-            } }, menuProps, { ref: menuRef }, tid.menu, { children: [...state.collection].map((item) => ((0, jsx_runtime_1.jsx)(MenuSection_1.MenuSectionImpl, Object.assign({ section: item, state: state, onClose: onClose }, tid), item.key))) }), void 0) }), void 0));
+            } }, menuProps, { ref: menuRef }, tid.menu, { children: [...state.collection].map((item) => ((0, jsx_runtime_1.jsx)(MenuSection_1.MenuSectionImpl, Object.assign({ section: item, state: state, onClose: onClose }, tid), item.key))) }), void 0) }, void 0));
 }
 exports.Menu = Menu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.128.3",
+  "version": "2.130.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -78,7 +78,7 @@
     "@emotion/react": "^11.1.5",
     "@homebound/rtl-react-router-utils": "^1.0.3",
     "@homebound/rtl-utils": "^2.59.3",
-    "@homebound/truss": "^1.111.3",
+    "@homebound/truss": "^1.113.0",
     "@homebound/tsconfig": "^1.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^9.0.0",