@octopusdeploy/design-system-components/dist/src/components/Dialog/dialogBreakpoints.styles.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.dialogSidePanelBreakpoint = exports.dialogBreakpoints = void 0;
exports.toSidePanelWidth = toSidePanelWidth;
//TODO:FTT - Proper approach to breakpoints needed
exports.dialogBreakpoints = {
    laptop: "1024px",
    tablet: "769px",
    mobile: "375px",
};
// At extraLarge there is no horizontal side-panel layout (Dialog hides the aside; UpsellDialog stacks it),
// so callers narrow to DialogWidthWithSidePanel before indexing into side-panel responsive Records.
function toSidePanelWidth(width) {
    return width === "extraLarge" ? undefined : width;
}
// Each breakpoint = dialog.mainPanel.width[token] + sidePanel width (400px) + 2 × 24px breathing room.
// small: 480 + 400 + 48 = 928px → clamped to laptop (1024px) since it's below.
// medium: 600 + 400 + 48 = 1048px
// large: 800 + 400 + 48 = 1248px
exports.dialogSidePanelBreakpoint = {
    small: exports.dialogBreakpoints.laptop,
    medium: "1048px",
    large: "1248px",
};