import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
import Flex from '../Flex';
const StyledDockedModals = styled.div(({ theme }) => {
    return css `
    position: fixed;
    z-index: ${theme.base['z-index'].modal};
    /* stylelint-disable-next-line length-zero-no-unit */
    inset-block-end: var(--appshell-bottom-offset, 0rem);
    right: 0;
    pointer-events: none;
    width: 100%;
  `;
});
StyledDockedModals.defaultProps = defaultThemeProp;
const DockedModals = forwardRef(function DockedModals(props, ref) {
    return (_jsx(Flex, { container: { justify: 'end', alignItems: 'end', gap: 2, pad: [0, 2] }, as: StyledDockedModals, ...props, ref: ref }));
});
export default DockedModals;
//# sourceMappingURL=DockedModals.js.map