import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { SidePanel, useSidePanel } from '@workday/canvas-kit-preview-react/side-panel';
import { Flex, Box } from '@workday/canvas-kit-react/layout';
import { Heading } from '@workday/canvas-kit-react/text';
import { createStyles, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
const stylesOverride = {
    panelContainer: createStyles({
        height: px2rem(320),
        backgroundColor: system.color.bg.alt.soft,
        position: 'relative',
    }),
    panelContent: createStyles({
        alignItems: 'center',
        paddingY: system.space.x4,
        paddingX: system.space.x4,
    }),
    panel: createStyles({
        zIndex: 1,
    }),
    overlay: createStyles({
        position: 'absolute',
        background: system.color.bg.overlay,
        height: '100%',
        width: '100%',
    }),
};
export const WithOverlay = () => {
    const { expanded, panelProps, labelProps, controlProps } = useSidePanel();
    return (_jsxs(Flex, { cs: stylesOverride.panelContainer, children: [_jsx(SidePanel, { className: stylesOverride.panel, ...panelProps, variant: "alternate", children: _jsxs(Flex, { cs: stylesOverride.panelContainer, children: [_jsx(Heading, { size: "small", ...labelProps, hidden: !expanded ? true : undefined, children: "Alternate Panel" }), _jsx(SidePanel.ToggleButton, { ...controlProps })] }) }), expanded && _jsx(Box, { cs: stylesOverride.overlay })] }));
};
