@nulogy/components 16.0.4 → 16.2.0

package/dist/src/BottomSheet/BottomSheet.styled.d.ts

@@ -3,13 +3,13 @@ import type { AnimationProps } from "framer-motion";
 import type { HeightProps, LayoutProps, MaxHeightProps, MaxWidthProps, SpaceProps, WidthProps } from "styled-system";
 declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").Ref<HTMLDivElement>;
-}, "as" | keyof import("@reach/dialog").DialogOverlayProps> & import("@reach/dialog").DialogOverlayProps & {
+}, "as" | keyof import("@reach/dialog").DialogInnerProps> & import("@reach/dialog").DialogInnerProps & {
     as?: "div";
 } & import("framer-motion").MotionProps, "ref"> & import("react").RefAttributes<HTMLElement | SVGElement>, "ref"> & {
     ref?: import("react").Ref<HTMLElement | SVGElement>;
 }, never>> & string & Omit<import("framer-motion").CustomDomComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").Ref<HTMLDivElement>;
-}, "as" | keyof import("@reach/dialog").DialogOverlayProps> & import("@reach/dialog").DialogOverlayProps & {
+}, "as" | keyof import("@reach/dialog").DialogInnerProps> & import("@reach/dialog").DialogInnerProps & {
     as?: "div";
 }>, keyof import("react").Component<any, {}, any>>;
 interface SheetProps extends DialogContentProps, AnimationProps, WidthProps, MaxWidthProps, HeightProps, MaxHeightProps, SpaceProps, LayoutProps {

package/dist/src/Button/IconicButton.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { styled } from "styled-components";
 import { space, variant } from "styled-system";
-import { Manager, Reference, Popper } from "react-popper-2";
 import { transparentize } from "polished";
 import icons from "@nulogy/icons";
 import { Icon } from "../Icon";
@@ -20,7 +19,7 @@ const IconWrapper = styled.span(({ theme, size }) => ({
 }));
 const HoverText = styled.div(({ theme }) => ({
     whiteSpace: "nowrap",
-    ontSize: theme.fontSizes.small,
+    fontSize: theme.fontSizes.small,
     lineHeight: theme.lineHeights.smallTextCompressed,
     color: theme.colors.whiteGrey,
     backgroundColor: transparentize(0.15, theme.colors.blackBlue),
@@ -28,6 +27,11 @@ const HoverText = styled.div(({ theme }) => ({
     marginTop: theme.space.half,
     padding: `${theme.space.half} ${theme.space.x1}`,
     pointerEvents: "none",
+    position: "absolute",
+    top: "100%",
+    left: "50%",
+    transform: "translateX(-50%)",
+    zIndex: 1,
 }));
 const WrapperButton = styled.button(({ disabled, hoverBackgroundColor, theme }) => ({
     background: "transparent",
@@ -90,16 +94,7 @@ const WrapperButton = styled.button(({ disabled, hoverBackgroundColor, theme })
 }), space);
 const IconicButton = React.forwardRef(({ children, color = "darkBlue", hoverBackgroundColor = "lightBlue", icon, labelHidden, className, iconSize = "x3", fontSize, tooltip, variant, ...props }, forwardedRef) => {
     const componentVariant = useComponentVariant(variant);
-    return (_jsxs(WrapperButton, { ref: forwardedRef, "aria-label": props["aria-label"] ? props["aria-label"] : typeof children === "string" ? children : undefined, className: className, hoverBackgroundColor: hoverBackgroundColor, variant: componentVariant, ...props, children: [_jsxs(Manager, { children: [_jsx(Reference, { children: ({ ref }) => (_jsx(IconWrapper, { ref: ref, size: iconSize, children: _jsx(Icon, { size: iconSize, icon: icon, color: color }) })) }), _jsx(Popper, { placement: "bottom", modifiers: [
-                            {
-                                name: "preventOverflow",
-                                enabled: true,
-                                options: {
-                                    padding: 8,
-                                    rootBoundary: "viewport",
-                                },
-                            },
-                        ], children: ({ ref, style }) => labelHidden || tooltip ? (_jsx(HoverText, { ref: ref, style: style, children: tooltip ? tooltip : children })) : null })] }), children &&
+    return (_jsxs(WrapperButton, { ref: forwardedRef, "aria-label": props["aria-label"] ? props["aria-label"] : typeof children === "string" ? children : undefined, className: className, hoverBackgroundColor: hoverBackgroundColor, variant: componentVariant, ...props, children: [_jsx(IconWrapper, { size: iconSize, children: _jsx(Icon, { size: iconSize, icon: icon, color: color }) }), (labelHidden || tooltip) && _jsx(HoverText, { children: tooltip ?? children }), children &&
                 !labelHidden &&
                 (typeof children === "string" || typeof children === "number" ? (_jsx(Text, { fontSize: fontSize, mr: "half", ml: "half", color: color, children: children })) : (children))] }));
 });

package/dist/src/Layout/Sidebar.story.d.ts

@@ -13,7 +13,7 @@ export default _default;
 type Story = StoryObj<typeof Sidebar>;
 export declare const _Sidebar: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithoutOverlay: () => import("react/jsx-runtime").JSX.Element;
-export declare const OpenByDefault: () => import("react/jsx-runtime").JSX.Element;
+export declare const OpenByDefault: Story;
 export declare const WithCustomOffset: Story;
 export declare const DontCloseOnOutsideClick: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithoutCloseButton: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Layout/Sidebar.story.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef } from "react";
+import { expect, userEvent, waitFor, within } from "storybook/test";
 import { ApplicationFrame, Breadcrumbs, Link, Page, Sidebar, Select, PrimaryButton, Box, Textarea, Heading3, Navigation, } from "..";
 import { useUrlProps } from "../utils/testing/useUrlProps";
 export default {
@@ -33,16 +34,28 @@ export const WithoutOverlay = () => {
     };
     return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, {}), overflowX: "hidden", children: _jsxs(Page, { breadcrumbs: _jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] }), title: "Materials Overview", children: [_jsxs(Box, { minWidth: "300px", children: [_jsx(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger", children: "Open Sidebar" }), _jsxs(Box, { height: "3000px", width: "100%", bg: "lightBlue", mt: "x3", p: "x2", children: ["Space for more content", _jsx("input", {})] })] }), _jsx(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger", overlay: false })] }) }));
 };
-export const OpenByDefault = () => {
-    const [isOpen, setIsOpen] = useState(true);
-    const triggerRef = useRef(null);
-    const toggleSidebar = () => {
-        setIsOpen(!isOpen);
-    };
-    const closeSidebar = () => {
-        setIsOpen(false);
-    };
-    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, {}), overflowX: "hidden", children: _jsxs(Page, { breadcrumbs: _jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] }), title: "Materials Overview", children: [_jsxs(Box, { minWidth: "300px", children: [_jsx(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger", children: "Open Sidebar" }), _jsx(Box, { height: "3000px", width: "100%", bg: "lightBlue", mt: "x3", p: "x2", children: "Space for more content" })] }), _jsx(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger" })] }) }));
+export const OpenByDefault = {
+    play: async ({ canvasElement, step }) => {
+        await step("overlay is visible when sidebar is open", async () => {
+            await expect(canvasElement.querySelector("[data-testid='sidebar-overlay']")).toBeTruthy();
+        });
+        await step("close button dismisses the sidebar", async () => {
+            const canvas = within(canvasElement);
+            await userEvent.click(canvas.getByLabelText("Close"));
+            await waitFor(() => expect(canvasElement.querySelector("[data-testid='sidebar-overlay']")).toBeNull());
+        });
+    },
+    render: () => {
+        const [isOpen, setIsOpen] = useState(true);
+        const triggerRef = useRef(null);
+        const toggleSidebar = () => {
+            setIsOpen(!isOpen);
+        };
+        const closeSidebar = () => {
+            setIsOpen(false);
+        };
+        return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, {}), overflowX: "hidden", children: _jsxs(Page, { breadcrumbs: _jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] }), title: "Materials Overview", children: [_jsxs(Box, { minWidth: "300px", children: [_jsx(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger", children: "Open Sidebar" }), _jsx(Box, { height: "3000px", width: "100%", bg: "lightBlue", mt: "x3", p: "x2", children: "Space for more content" })] }), _jsx(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger" })] }) }));
+    },
 };
 const WithCustomOffsetComponent = (args) => {
     const [isOpen, setIsOpen] = useState(true);

package/dist/src/Modal/Modal.d.ts

@@ -1,27 +1,31 @@
 import React from "react";
-type ModalProps = {
+interface ModalProps {
     children?: React.ReactNode;
     isOpen?: boolean;
     title?: string;
     ariaLabel?: string;
-    onRequestClose?: (...args: any[]) => any;
+    onRequestClose?: () => void;
     closeAriaLabel?: string;
-    onAfterOpen?: (...args: any[]) => any;
+    onAfterOpen?: () => void;
     shouldFocusAfterRender?: boolean;
     shouldReturnFocusAfterClose?: boolean;
     ariaDescribedBy?: string;
     maxWidth?: string;
+    /** @deprecated No-op. Radix handles portal class automatically. */
     portalClassName?: string;
+    /** @deprecated No-op. Use className for the modal content element. */
     overlayClassName?: string;
     className?: string;
     id?: string;
+    /** @deprecated No-op. Radix handles aria-modal automatically. */
     appElement?: JSX.Element;
+    /** @deprecated No-op. Radix handles aria hiding automatically. */
     ariaHideApp?: boolean;
     footerContent?: React.ReactNode;
-    parentSelector?: (...args: any) => HTMLElement;
-};
-declare function Modal({ isOpen, shouldFocusAfterRender, shouldReturnFocusAfterClose, maxWidth, ariaHideApp, children, title, onRequestClose, onAfterOpen, ariaLabel, ariaDescribedBy, portalClassName, overlayClassName, className, id, appElement, footerContent, closeAriaLabel, parentSelector, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    parentSelector?: () => HTMLElement;
+}
+declare function Modal({ isOpen, shouldFocusAfterRender, shouldReturnFocusAfterClose, maxWidth, children, title, onRequestClose, onAfterOpen, ariaLabel, ariaDescribedBy, className, id, footerContent, closeAriaLabel, parentSelector, portalClassName: _portalClassName, overlayClassName: _overlayClassName, appElement: _appElement, ariaHideApp: _ariaHideApp, }: ModalProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Modal {
-    var setAppElement: any;
+    var setAppElement: (_appElement?: string | HTMLElement) => void;
 }
 export default Modal;

package/dist/src/Modal/Modal.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext } from "react";
-import { styled, ThemeContext, useTheme } from "styled-components";
-import ReactModal from "react-modal";
+import { styled, useTheme } from "styled-components";
+import * as Dialog from "@radix-ui/react-dialog";
 import { transparentize } from "polished";
 import { Heading2 } from "../Type";
 import { useScrollLock } from "../utils/useScrollLock";
@@ -9,67 +8,70 @@ import ModalContent from "./ModalContent";
 import ModalFooter from "./ModalFooter";
 import ModalHeader from "./ModalHeader";
 import ModalCloseButton from "./ModalCloseButton";
-const overlayStyle = (theme) => ({
+const StyledDialogOverlay = styled(Dialog.Overlay)(({ theme }) => ({
     position: "fixed",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
+    inset: 0,
     backgroundColor: transparentize(0.5, theme.colors.blackBlue),
     zIndex: theme.zIndices.overlay,
-});
-const StyledReactModal = styled(ReactModal)(({ maxWidth }) => ({
-    maxWidth,
-}), ({ theme }) => ({
+}));
+const StyledDialogContent = styled(Dialog.Content)(({ theme, $maxWidth }) => ({
     "&:focus": {
         outline: "none",
     },
     display: "flex",
     flexDirection: "column",
-    position: "relative",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
     backgroundColor: theme.colors.white,
     borderRadius: theme.radii.medium,
     boxShadow: theme.shadows.large,
-    border: undefined,
-    width: "100%",
-    height: "auto",
+    width: `calc(100% - ${theme.space.x4})`,
+    maxWidth: $maxWidth,
     maxHeight: `calc(100vh - ${theme.space.x8})`,
-    margin: `0px ${theme.space.x2}`,
+    height: "auto",
+    overflow: "hidden",
     padding: 0,
+    zIndex: theme.zIndices.overlay,
     [`@media only screen and (max-width: ${theme.breakpoints.small})`]: {
-        width: "100%",
         maxWidth: "100%",
+        width: "100%",
     },
     "*": {
         boxSizing: "border-box",
     },
     color: theme.colors.black,
+    fontFamily: theme.fonts.base,
     fontSize: theme.fontSizes.base,
     lineHeight: theme.lineHeights.base,
     WebkitFontSmoothing: "antialiased",
     MozOsxFontSmoothing: "grayscale",
 }));
-function Modal({ isOpen = true, shouldFocusAfterRender = true, shouldReturnFocusAfterClose = true, maxWidth = "624px", ariaHideApp = true, children, title, onRequestClose, onAfterOpen, ariaLabel, ariaDescribedBy, portalClassName, overlayClassName, className, id, appElement, footerContent, closeAriaLabel, parentSelector, }) {
+function Modal({ isOpen = true, shouldFocusAfterRender = true, shouldReturnFocusAfterClose = true, maxWidth = "624px", children, title, onRequestClose, onAfterOpen, ariaLabel, ariaDescribedBy, className, id, footerContent, closeAriaLabel, parentSelector, 
+// accepted but unused (no-ops):
+portalClassName: _portalClassName, overlayClassName: _overlayClassName, appElement: _appElement, ariaHideApp: _ariaHideApp, }) {
     const modalHasHeader = Boolean(onRequestClose || title);
-    const themeContext = useContext(ThemeContext);
-    return (_jsx(StyledReactModal, { maxWidth: maxWidth, contentLabel: ariaLabel, onRequestClose: onRequestClose, onAfterOpen: onAfterOpen, shouldFocusAfterRender: shouldFocusAfterRender, shouldReturnFocusAfterClose: shouldReturnFocusAfterClose, isOpen: isOpen, portalClassName: portalClassName, overlayClassName: overlayClassName, className: className, id: id, aria: {
-            labelledby: title ? "modal-title" : undefined,
-            describedby: ariaDescribedBy,
-        }, shouldCloseOnOverlayClick: true, shouldCloseOnEsc: true, style: {
-            overlay: overlayStyle(themeContext),
-        }, appElement: appElement, ariaHideApp: ariaHideApp, parentSelector: parentSelector, children: _jsx(ModalWrapper, { closeAriaLabel: closeAriaLabel, modalHasHeader: modalHasHeader, title: title, onRequestClose: onRequestClose, footerContent: footerContent, children: children }) }));
+    return (_jsx(Dialog.Root, { open: isOpen, onOpenChange: (open) => {
+            if (open)
+                onAfterOpen?.();
+            else
+                onRequestClose?.();
+        }, children: _jsxs(Dialog.Portal, { container: parentSelector?.(), children: [_jsx(StyledDialogOverlay, {}), _jsx(StyledDialogContent, { "$maxWidth": maxWidth, "aria-label": !title ? ariaLabel : undefined, "aria-labelledby": title ? "modal-title" : undefined, "aria-describedby": ariaDescribedBy, className: className, id: id, onOpenAutoFocus: (e) => {
+                        if (!shouldFocusAfterRender)
+                            e.preventDefault();
+                    }, onCloseAutoFocus: (e) => {
+                        if (!shouldReturnFocusAfterClose)
+                            e.preventDefault();
+                    }, children: _jsx(ModalWrapper, { closeAriaLabel: closeAriaLabel, modalHasHeader: modalHasHeader, title: title, onRequestClose: onRequestClose, footerContent: footerContent, children: children }) })] }) }));
 }
 function ModalWrapper({ modalHasHeader, title, onRequestClose, closeAriaLabel, children, footerContent, }) {
     const theme = useTheme();
     useScrollLock();
     return (_jsxs(_Fragment, { children: [modalHasHeader && (_jsxs(ModalHeader, { hasCloseButton: Boolean(onRequestClose), children: [title ? (_jsx(Heading2, { id: "modal-title", mb: "none", children: title })) : (_jsx("div", { style: { height: theme.space.x4 } })), onRequestClose && _jsx(ModalCloseButton, { onClick: onRequestClose, "aria-label": closeAriaLabel })] })), _jsx(ModalContent, { hasFooter: !!footerContent, children: children }), footerContent && _jsx(ModalFooter, { children: footerContent })] }));
 }
-Modal.setAppElement = ReactModal.setAppElement;
+Modal.setAppElement = (_appElement) => {
+    console.warn("[NDS] Modal.setAppElement() is deprecated and has no effect. " +
+        "The Modal component now uses @radix-ui/react-dialog, which handles aria-modal automatically.");
+};
 export default Modal;

package/dist/src/Modal/Modal.story.d.ts

@@ -10,7 +10,6 @@ declare const _default: {
 export default _default;
 type Story = StoryObj<typeof NDSModal>;
 export declare const Default: Story;
-export declare const WithCloseButton: Story;
 export declare const WithScrollingContent: Story;
 export declare const WithScrollingContentWithoutFooterContent: Story;
 export declare const WithNoTitle: Story;

package/dist/src/Modal/Modal.story.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { expect, userEvent, within } from "storybook/test";
 import { useState } from "react";
 import { Modal as NDSModal, Button, QuietButton, PrimaryButton, ButtonGroup, Form, Input, Select, Text, DatePicker, } from "../index";
 if (process.env.NODE_ENV !== "test")
@@ -28,15 +29,6 @@ export const Default = {
         onRequestClose: () => { },
     },
 };
-export const WithCloseButton = {
-    args: {
-        children: "Content Content Content",
-        title: "Modal Title",
-        footerContent: ModalButtons,
-        onRequestClose: () => { },
-    },
-    name: "with close button",
-};
 export const WithScrollingContent = {
     args: {
         title: "Modal Title",
@@ -108,6 +100,15 @@ export const WithParentSelector = {
 export const ExampleControlledModal = {
     render: () => _jsx(ModalExample, {}),
     name: "example controlled modal",
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const body = within(document.body);
+        await userEvent.click(canvas.getByRole("button", { name: "Open Modal" }));
+        const dialog = await body.findByRole("dialog");
+        expect(dialog).toBeVisible();
+        await userEvent.keyboard("{Escape}");
+        expect(body.queryByRole("dialog")).not.toBeInTheDocument();
+    },
 };
 const ModalExample = () => {
     const [isOpen, setIsOpen] = useState(false);

package/dist/src/Table/stories/BaseTable.story.d.ts

@@ -10,6 +10,7 @@ export declare const WithData: Story;
 export declare const WithNoData: Story;
 export declare const WithStickyHeader: Story;
 export declare const WithLotsOfRowsAndColumns: Story;
+export declare const WithLoading: Story;
 export declare const WithCustomColumnWidths: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithACustomCellComponent: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithCellAlignment: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Table/stories/BaseTable.story.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { action } from "storybook/actions";
+import { expect, within } from "storybook/test";
 import { Box, DropdownButton, DropdownMenu, Button, Text, Flex } from "../..";
 import { getMockRows, mockColumns } from "../Table.mock-utils";
 import { Table } from "..";
@@ -300,6 +301,20 @@ export const WithLotsOfRowsAndColumns = {
         },
     },
 };
+export const WithLoading = {
+    args: {
+        columns,
+        rows: rowData,
+        loading: true,
+    },
+    name: "with loading state",
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByText("Loading...")).toBeInTheDocument();
+        const rows = canvasElement.querySelectorAll("tbody tr");
+        await expect(rows).toHaveLength(1);
+    },
+};
 export const WithCustomColumnWidths = () => _jsx(Table, { columns: columnsWithWidths, rows: rowDataWithWidths });
 export const WithACustomCellComponent = () => (_jsx(Table, { columns: getColumnsWithCellRenderer(dropdownCellRenderer), rows: rowData }));
 export const WithCellAlignment = () => _jsx(Table, { columns: columnsWithAlignment, rows: rowData });

package/dist/src/Table/stories/Table.story.js

@@ -242,6 +242,19 @@ export const WithEverything = {
     },
 };
 export const WithOnHoverActions = {
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("reveals row actions when mouse enters a row", async () => {
+            const rows = canvas.getAllByTestId("table-row");
+            await userEvent.hover(rows[0]);
+            await waitFor(() => expect(within(rows[0]).getByRole("button")).toBeInTheDocument());
+        });
+        await step("hides row actions when mouse leaves the row", async () => {
+            const rows = canvas.getAllByTestId("table-row");
+            await userEvent.unhover(rows[0]);
+            await waitFor(() => expect(within(rows[0]).queryByRole("button")).not.toBeInTheDocument());
+        });
+    },
     render: (args) => {
         const rowDataWithHovers = [
             {

package/dist/src/TopBar/TopBar.styled.d.ts

@@ -11,13 +11,13 @@ declare const StyledBackLink: import("styled-components/dist/types").IStyledComp
 declare const StyledPageTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
 declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").Ref<HTMLDivElement>;
-}, "as" | keyof import("@reach/dialog").DialogOverlayProps> & import("@reach/dialog").DialogOverlayProps & {
+}, "as" | keyof import("@reach/dialog").DialogInnerProps> & import("@reach/dialog").DialogInnerProps & {
     as?: "div";
 } & import("framer-motion").MotionProps, "ref"> & import("react").RefAttributes<HTMLElement | SVGElement>, "ref"> & {
     ref?: import("react").Ref<HTMLElement | SVGElement>;
 }, never>> & string & Omit<import("framer-motion").CustomDomComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").Ref<HTMLDivElement>;
-}, "as" | keyof import("@reach/dialog").DialogOverlayProps> & import("@reach/dialog").DialogOverlayProps & {
+}, "as" | keyof import("@reach/dialog").DialogInnerProps> & import("@reach/dialog").DialogInnerProps & {
     as?: "div";
 }>, keyof import("react").Component<any, {}, any>>;
 declare const TileLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "16.0.4",
+  "version": "16.2.0",
   "type": "module",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
@@ -16,7 +16,7 @@
     "build:verify": "node scripts/verify-build.js",
     "build:watch": "vite build --watch",
     "build:storybook": "storybook build --stats-json",
-    "warn:prepush": "echo \"Make sure you also run all the other CI steps before pushing by running 'pnpm ci'\"",
+    "warn:prepush": "echo \"Make sure you also run all the other CI steps before pushing by running 'pnpm check'\"",
     "check": "pnpm warn:prepush && pnpm check:types && pnpm check:lint && pnpm check:format",
     "check:types": "tsc",
     "check:lint": "eslint '**/*.{js,ts,jsx,tsx}'",
@@ -70,7 +70,7 @@
   "devDependencies": {
     "@apollo/client": "^4.1.6",
     "@eslint/js": "^9.0.0",
-    "@nulogy/icons": "^4.37.2",
+    "@nulogy/icons": "^4.39.0",
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
@@ -84,7 +84,7 @@
     "@testing-library/react": "^16.0.0",
     "@types/css-mediaquery": "^0.1.4",
     "@types/deep-equal": "^1.0.4",
-    "@types/node": "^24.10.4",
+    "@types/node": "^25.3.5",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^8.49.0",
@@ -125,9 +125,10 @@
   "dependencies": {
     "@emotion/is-prop-valid": "^1.3.1",
     "@nulogy/tokens": "^6.1.1",
+    "@radix-ui/react-dialog": "^1.1.0",
     "@radix-ui/react-navigation-menu": "^1.1.4",
-    "@radix-ui/react-tooltip": "1.0.7",
-    "@reach/dialog": "0.17.0",
+    "@radix-ui/react-tooltip": "1.2.8",
+    "@reach/dialog": "0.18.0",
     "@styled-system/prop-types": "^5.1.4",
     "@styled-system/theme-get": "^5.1.2",
     "@types/react-window": "^1.8.8",
@@ -144,7 +145,6 @@
     "react-i18next": "^12.3.1",
     "react-modal": "^3.14.4",
     "react-popper": "1.3.11",
-    "react-popper-2": "npm:react-popper@2.2.4",
     "react-resize-detector": "^9.1.0",
     "react-select": "^5.9.0",
     "react-window": "^1.8.11",