@zendeskgarden/react-chrome 9.0.0-next.2 → 9.0.0-next.20

package/dist/esm/elements/header/HeaderItemIcon.js

@@ -0,0 +1,50 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import '../../styled/StyledChrome.js';
+import '../../styled/StyledSkipNav.js';
+import '../../styled/StyledSkipNavIcon.js';
+import '../../styled/body/StyledBody.js';
+import '../../styled/body/StyledContent.js';
+import '../../styled/body/StyledMain.js';
+import '../../styled/footer/StyledFooter.js';
+import '../../styled/footer/StyledFooterItem.js';
+import '../../styled/header/StyledHeader.js';
+import '../../styled/header/StyledBaseHeaderItem.js';
+import '../../styled/header/StyledHeaderItem.js';
+import { StyledHeaderItemIcon } from '../../styled/header/StyledHeaderItemIcon.js';
+import '../../styled/header/StyledLogoHeaderItem.js';
+import '../../styled/header/StyledHeaderItemText.js';
+import '../../styled/header/StyledHeaderItemWrapper.js';
+import '../../styled/nav/StyledNav.js';
+import '../../styled/nav/StyledNavList.js';
+import '../../styled/nav/StyledNavListItem.js';
+import '../../styled/nav/StyledBaseNavItem.js';
+import '../../styled/nav/StyledLogoNavItem.js';
+import '../../styled/nav/StyledBrandmarkNavItem.js';
+import '../../styled/nav/StyledNavButton.js';
+import '../../styled/nav/StyledNavItemIcon.js';
+import '../../styled/nav/StyledNavItemText.js';
+import '../../styled/sheet/StyledSheet.js';
+import '../../styled/sheet/StyledSheetWrapper.js';
+import '../../styled/sheet/StyledSheetTitle.js';
+import '../../styled/sheet/StyledSheetDescription.js';
+import '../../styled/sheet/StyledSheetBody.js';
+import '../../styled/sheet/StyledSheetClose.js';
+import '../../styled/sheet/StyledSheetFooter.js';
+import '../../styled/sheet/StyledSheetFooterItem.js';
+import '../../styled/sheet/StyledSheetHeader.js';
+
+const HeaderItemIcon = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return React__default.createElement(StyledHeaderItemIcon, props, children);
+};
+
+export { HeaderItemIcon };

package/dist/esm/elements/header/HeaderItemText.js

@@ -0,0 +1,51 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import '../../styled/StyledChrome.js';
+import '../../styled/StyledSkipNav.js';
+import '../../styled/StyledSkipNavIcon.js';
+import '../../styled/body/StyledBody.js';
+import '../../styled/body/StyledContent.js';
+import '../../styled/body/StyledMain.js';
+import '../../styled/footer/StyledFooter.js';
+import '../../styled/footer/StyledFooterItem.js';
+import '../../styled/header/StyledHeader.js';
+import '../../styled/header/StyledBaseHeaderItem.js';
+import '../../styled/header/StyledHeaderItem.js';
+import '../../styled/header/StyledHeaderItemIcon.js';
+import '../../styled/header/StyledLogoHeaderItem.js';
+import { StyledHeaderItemText } from '../../styled/header/StyledHeaderItemText.js';
+import '../../styled/header/StyledHeaderItemWrapper.js';
+import '../../styled/nav/StyledNav.js';
+import '../../styled/nav/StyledNavList.js';
+import '../../styled/nav/StyledNavListItem.js';
+import '../../styled/nav/StyledBaseNavItem.js';
+import '../../styled/nav/StyledLogoNavItem.js';
+import '../../styled/nav/StyledBrandmarkNavItem.js';
+import '../../styled/nav/StyledNavButton.js';
+import '../../styled/nav/StyledNavItemIcon.js';
+import '../../styled/nav/StyledNavItemText.js';
+import '../../styled/sheet/StyledSheet.js';
+import '../../styled/sheet/StyledSheetWrapper.js';
+import '../../styled/sheet/StyledSheetTitle.js';
+import '../../styled/sheet/StyledSheetDescription.js';
+import '../../styled/sheet/StyledSheetBody.js';
+import '../../styled/sheet/StyledSheetClose.js';
+import '../../styled/sheet/StyledSheetFooter.js';
+import '../../styled/sheet/StyledSheetFooterItem.js';
+import '../../styled/sheet/StyledSheetHeader.js';
+
+const HeaderItemText = React__default.forwardRef((props, ref) => React__default.createElement(StyledHeaderItemText, Object.assign({
+  ref: ref
+}, props)));
+HeaderItemText.displayName = 'HeaderItemText';
+HeaderItemText.propTypes = {
+  isClipped: PropTypes.bool
+};
+
+export { HeaderItemText };

package/dist/esm/elements/header/HeaderItemWrapper.js

@@ -0,0 +1,47 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import '../../styled/StyledChrome.js';
+import '../../styled/StyledSkipNav.js';
+import '../../styled/StyledSkipNavIcon.js';
+import '../../styled/body/StyledBody.js';
+import '../../styled/body/StyledContent.js';
+import '../../styled/body/StyledMain.js';
+import '../../styled/footer/StyledFooter.js';
+import '../../styled/footer/StyledFooterItem.js';
+import '../../styled/header/StyledHeader.js';
+import '../../styled/header/StyledBaseHeaderItem.js';
+import '../../styled/header/StyledHeaderItem.js';
+import '../../styled/header/StyledHeaderItemIcon.js';
+import '../../styled/header/StyledLogoHeaderItem.js';
+import '../../styled/header/StyledHeaderItemText.js';
+import { StyledHeaderItemWrapper } from '../../styled/header/StyledHeaderItemWrapper.js';
+import '../../styled/nav/StyledNav.js';
+import '../../styled/nav/StyledNavList.js';
+import '../../styled/nav/StyledNavListItem.js';
+import '../../styled/nav/StyledBaseNavItem.js';
+import '../../styled/nav/StyledLogoNavItem.js';
+import '../../styled/nav/StyledBrandmarkNavItem.js';
+import '../../styled/nav/StyledNavButton.js';
+import '../../styled/nav/StyledNavItemIcon.js';
+import '../../styled/nav/StyledNavItemText.js';
+import '../../styled/sheet/StyledSheet.js';
+import '../../styled/sheet/StyledSheetWrapper.js';
+import '../../styled/sheet/StyledSheetTitle.js';
+import '../../styled/sheet/StyledSheetDescription.js';
+import '../../styled/sheet/StyledSheetBody.js';
+import '../../styled/sheet/StyledSheetClose.js';
+import '../../styled/sheet/StyledSheetFooter.js';
+import '../../styled/sheet/StyledSheetFooterItem.js';
+import '../../styled/sheet/StyledSheetHeader.js';
+
+const HeaderItemWrapper = React__default.forwardRef((props, ref) => React__default.createElement(StyledHeaderItemWrapper, Object.assign({
+  ref: ref
+}, props)));
+HeaderItemWrapper.displayName = 'HeaderItemWrapper';
+
+export { HeaderItemWrapper };

package/dist/esm/elements/nav/Nav.js

@@ -0,0 +1,84 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { useMemo } from 'react';
+import { ThemeProvider } from 'styled-components';
+import PropTypes from 'prop-types';
+import { useChromeContext } from '../../utils/useChromeContext.js';
+import { NavContext } from '../../utils/useNavContext.js';
+import '../../styled/StyledChrome.js';
+import '../../styled/StyledSkipNav.js';
+import '../../styled/StyledSkipNavIcon.js';
+import '../../styled/body/StyledBody.js';
+import '../../styled/body/StyledContent.js';
+import '../../styled/body/StyledMain.js';
+import '../../styled/footer/StyledFooter.js';
+import '../../styled/footer/StyledFooterItem.js';
+import '../../styled/header/StyledHeader.js';
+import '../../styled/header/StyledBaseHeaderItem.js';
+import '../../styled/header/StyledHeaderItem.js';
+import '../../styled/header/StyledHeaderItemIcon.js';
+import '../../styled/header/StyledLogoHeaderItem.js';
+import '../../styled/header/StyledHeaderItemText.js';
+import '../../styled/header/StyledHeaderItemWrapper.js';
+import { StyledNav } from '../../styled/nav/StyledNav.js';
+import '../../styled/nav/StyledNavList.js';
+import '../../styled/nav/StyledNavListItem.js';
+import '../../styled/nav/StyledBaseNavItem.js';
+import '../../styled/nav/StyledLogoNavItem.js';
+import '../../styled/nav/StyledBrandmarkNavItem.js';
+import '../../styled/nav/StyledNavButton.js';
+import '../../styled/nav/StyledNavItemIcon.js';
+import '../../styled/nav/StyledNavItemText.js';
+import '../../styled/sheet/StyledSheet.js';
+import '../../styled/sheet/StyledSheetWrapper.js';
+import '../../styled/sheet/StyledSheetTitle.js';
+import '../../styled/sheet/StyledSheetDescription.js';
+import '../../styled/sheet/StyledSheetBody.js';
+import '../../styled/sheet/StyledSheetClose.js';
+import '../../styled/sheet/StyledSheetFooter.js';
+import '../../styled/sheet/StyledSheetFooterItem.js';
+import '../../styled/sheet/StyledSheetHeader.js';
+import { NavItem } from './NavItem.js';
+import { NavItemIcon } from './NavItemIcon.js';
+import { NavItemText } from './NavItemText.js';
+import { NavList } from './NavList.js';
+
+const NavComponent = React__default.forwardRef((props, ref) => {
+  const {
+    hue,
+    isLight
+  } = useChromeContext();
+  const navContextValue = useMemo(() => ({
+    isExpanded: !!props.isExpanded
+  }), [props.isExpanded]);
+  return React__default.createElement(ThemeProvider, {
+    theme: parentTheme => ({
+      ...parentTheme,
+      colors: {
+        ...parentTheme.colors,
+        base: isLight ? 'light' : 'dark'
+      }
+    })
+  }, React__default.createElement(NavContext.Provider, {
+    value: navContextValue
+  }, React__default.createElement(StyledNav, Object.assign({
+    ref: ref
+  }, props, {
+    hue: hue
+  }))));
+});
+NavComponent.displayName = 'Nav';
+NavComponent.propTypes = {
+  isExpanded: PropTypes.bool
+};
+const Nav = NavComponent;
+Nav.List = NavList;
+Nav.Item = NavItem;
+Nav.ItemIcon = NavItemIcon;
+Nav.ItemText = NavItemText;
+
+export { Nav, NavComponent };

package/dist/esm/elements/nav/NavItem.js

@@ -0,0 +1,95 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { PRODUCTS } from '../../types/index.js';
+import '../../styled/StyledChrome.js';
+import '../../styled/StyledSkipNav.js';
+import '../../styled/StyledSkipNavIcon.js';
+import '../../styled/body/StyledBody.js';
+import '../../styled/body/StyledContent.js';
+import '../../styled/body/StyledMain.js';
+import '../../styled/footer/StyledFooter.js';
+import '../../styled/footer/StyledFooterItem.js';
+import '../../styled/header/StyledHeader.js';
+import '../../styled/header/StyledBaseHeaderItem.js';
+import '../../styled/header/StyledHeaderItem.js';
+import '../../styled/header/StyledHeaderItemIcon.js';
+import '../../styled/header/StyledLogoHeaderItem.js';
+import '../../styled/header/StyledHeaderItemText.js';
+import '../../styled/header/StyledHeaderItemWrapper.js';
+import '../../styled/nav/StyledNav.js';
+import '../../styled/nav/StyledNavList.js';
+import { StyledNavListItem } from '../../styled/nav/StyledNavListItem.js';
+import '../../styled/nav/StyledBaseNavItem.js';
+import { StyledLogoNavItem } from '../../styled/nav/StyledLogoNavItem.js';
+import { StyledBrandmarkNavItem } from '../../styled/nav/StyledBrandmarkNavItem.js';
+import { StyledNavButton } from '../../styled/nav/StyledNavButton.js';
+import '../../styled/nav/StyledNavItemIcon.js';
+import '../../styled/nav/StyledNavItemText.js';
+import '../../styled/sheet/StyledSheet.js';
+import '../../styled/sheet/StyledSheetWrapper.js';
+import '../../styled/sheet/StyledSheetTitle.js';
+import '../../styled/sheet/StyledSheetDescription.js';
+import '../../styled/sheet/StyledSheetBody.js';
+import '../../styled/sheet/StyledSheetClose.js';
+import '../../styled/sheet/StyledSheetFooter.js';
+import '../../styled/sheet/StyledSheetFooterItem.js';
+import '../../styled/sheet/StyledSheetHeader.js';
+import { useNavContext } from '../../utils/useNavContext.js';
+import { useChromeContext } from '../../utils/useChromeContext.js';
+import { useNavListContext } from '../../utils/useNavListContext.js';
+
+const NavItem = React__default.forwardRef((_ref, ref) => {
+  let {
+    hasLogo,
+    hasBrandmark,
+    product,
+    isCurrent,
+    ...other
+  } = _ref;
+  const {
+    hue
+  } = useChromeContext();
+  const {
+    isExpanded
+  } = useNavContext();
+  const navListContext = useNavListContext();
+  const hasList = navListContext?.hasList;
+  let retVal;
+  if (hasLogo) {
+    retVal = React__default.createElement(StyledLogoNavItem, Object.assign({
+      ref: ref,
+      hue: hue,
+      product: product
+    }, other));
+  } else if (hasBrandmark) {
+    retVal = React__default.createElement(StyledBrandmarkNavItem, Object.assign({
+      ref: ref
+    }, other));
+  } else {
+    retVal = React__default.createElement(StyledNavButton, Object.assign({
+      tabIndex: 0,
+      ref: ref,
+      isExpanded: isExpanded,
+      hue: hue,
+      "aria-current": isCurrent || undefined
+    }, other));
+  }
+  if (hasList) {
+    retVal = React__default.createElement(StyledNavListItem, null, retVal);
+  }
+  return retVal;
+});
+NavItem.displayName = 'NavItem';
+NavItem.propTypes = {
+  product: PropTypes.oneOf(PRODUCTS),
+  hasLogo: PropTypes.bool,
+  hasBrandmark: PropTypes.bool
+};
+
+export { NavItem };

package/dist/esm/elements/nav/NavItemIcon.js

@@ -0,0 +1,50 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import '../../styled/StyledChrome.js';
+import '../../styled/StyledSkipNav.js';
+import '../../styled/StyledSkipNavIcon.js';
+import '../../styled/body/StyledBody.js';
+import '../../styled/body/StyledContent.js';
+import '../../styled/body/StyledMain.js';
+import '../../styled/footer/StyledFooter.js';
+import '../../styled/footer/StyledFooterItem.js';
+import '../../styled/header/StyledHeader.js';
+import '../../styled/header/StyledBaseHeaderItem.js';
+import '../../styled/header/StyledHeaderItem.js';
+import '../../styled/header/StyledHeaderItemIcon.js';
+import '../../styled/header/StyledLogoHeaderItem.js';
+import '../../styled/header/StyledHeaderItemText.js';
+import '../../styled/header/StyledHeaderItemWrapper.js';
+import '../../styled/nav/StyledNav.js';
+import '../../styled/nav/StyledNavList.js';
+import '../../styled/nav/StyledNavListItem.js';
+import '../../styled/nav/StyledBaseNavItem.js';
+import '../../styled/nav/StyledLogoNavItem.js';
+import '../../styled/nav/StyledBrandmarkNavItem.js';
+import '../../styled/nav/StyledNavButton.js';
+import { StyledNavItemIcon } from '../../styled/nav/StyledNavItemIcon.js';
+import '../../styled/nav/StyledNavItemText.js';
+import '../../styled/sheet/StyledSheet.js';
+import '../../styled/sheet/StyledSheetWrapper.js';
+import '../../styled/sheet/StyledSheetTitle.js';
+import '../../styled/sheet/StyledSheetDescription.js';
+import '../../styled/sheet/StyledSheetBody.js';
+import '../../styled/sheet/StyledSheetClose.js';
+import '../../styled/sheet/StyledSheetFooter.js';
+import '../../styled/sheet/StyledSheetFooterItem.js';
+import '../../styled/sheet/StyledSheetHeader.js';
+
+const NavItemIcon = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return React__default.createElement(StyledNavItemIcon, props, children);
+};
+
+export { NavItemIcon };

package/dist/esm/elements/nav/NavItemText.js

@@ -0,0 +1,58 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import '../../styled/StyledChrome.js';
+import '../../styled/StyledSkipNav.js';
+import '../../styled/StyledSkipNavIcon.js';
+import '../../styled/body/StyledBody.js';
+import '../../styled/body/StyledContent.js';
+import '../../styled/body/StyledMain.js';
+import '../../styled/footer/StyledFooter.js';
+import '../../styled/footer/StyledFooterItem.js';
+import '../../styled/header/StyledHeader.js';
+import '../../styled/header/StyledBaseHeaderItem.js';
+import '../../styled/header/StyledHeaderItem.js';
+import '../../styled/header/StyledHeaderItemIcon.js';
+import '../../styled/header/StyledLogoHeaderItem.js';
+import '../../styled/header/StyledHeaderItemText.js';
+import '../../styled/header/StyledHeaderItemWrapper.js';
+import '../../styled/nav/StyledNav.js';
+import '../../styled/nav/StyledNavList.js';
+import '../../styled/nav/StyledNavListItem.js';
+import '../../styled/nav/StyledBaseNavItem.js';
+import '../../styled/nav/StyledLogoNavItem.js';
+import '../../styled/nav/StyledBrandmarkNavItem.js';
+import '../../styled/nav/StyledNavButton.js';
+import '../../styled/nav/StyledNavItemIcon.js';
+import { StyledNavItemText } from '../../styled/nav/StyledNavItemText.js';
+import '../../styled/sheet/StyledSheet.js';
+import '../../styled/sheet/StyledSheetWrapper.js';
+import '../../styled/sheet/StyledSheetTitle.js';
+import '../../styled/sheet/StyledSheetDescription.js';
+import '../../styled/sheet/StyledSheetBody.js';
+import '../../styled/sheet/StyledSheetClose.js';
+import '../../styled/sheet/StyledSheetFooter.js';
+import '../../styled/sheet/StyledSheetFooterItem.js';
+import '../../styled/sheet/StyledSheetHeader.js';
+import { useNavContext } from '../../utils/useNavContext.js';
+
+const NavItemText = React__default.forwardRef((props, ref) => {
+  const {
+    isExpanded
+  } = useNavContext();
+  return React__default.createElement(StyledNavItemText, Object.assign({
+    ref: ref,
+    isExpanded: isExpanded
+  }, props));
+});
+NavItemText.displayName = 'NavItemText';
+NavItemText.propTypes = {
+  isWrapped: PropTypes.bool
+};
+
+export { NavItemText };

package/dist/esm/elements/nav/NavList.js

@@ -0,0 +1,55 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { useMemo } from 'react';
+import '../../styled/StyledChrome.js';
+import '../../styled/StyledSkipNav.js';
+import '../../styled/StyledSkipNavIcon.js';
+import '../../styled/body/StyledBody.js';
+import '../../styled/body/StyledContent.js';
+import '../../styled/body/StyledMain.js';
+import '../../styled/footer/StyledFooter.js';
+import '../../styled/footer/StyledFooterItem.js';
+import '../../styled/header/StyledHeader.js';
+import '../../styled/header/StyledBaseHeaderItem.js';
+import '../../styled/header/StyledHeaderItem.js';
+import '../../styled/header/StyledHeaderItemIcon.js';
+import '../../styled/header/StyledLogoHeaderItem.js';
+import '../../styled/header/StyledHeaderItemText.js';
+import '../../styled/header/StyledHeaderItemWrapper.js';
+import '../../styled/nav/StyledNav.js';
+import { StyledNavList } from '../../styled/nav/StyledNavList.js';
+import '../../styled/nav/StyledNavListItem.js';
+import '../../styled/nav/StyledBaseNavItem.js';
+import '../../styled/nav/StyledLogoNavItem.js';
+import '../../styled/nav/StyledBrandmarkNavItem.js';
+import '../../styled/nav/StyledNavButton.js';
+import '../../styled/nav/StyledNavItemIcon.js';
+import '../../styled/nav/StyledNavItemText.js';
+import '../../styled/sheet/StyledSheet.js';
+import '../../styled/sheet/StyledSheetWrapper.js';
+import '../../styled/sheet/StyledSheetTitle.js';
+import '../../styled/sheet/StyledSheetDescription.js';
+import '../../styled/sheet/StyledSheetBody.js';
+import '../../styled/sheet/StyledSheetClose.js';
+import '../../styled/sheet/StyledSheetFooter.js';
+import '../../styled/sheet/StyledSheetFooterItem.js';
+import '../../styled/sheet/StyledSheetHeader.js';
+import { NavListContext } from '../../utils/useNavListContext.js';
+
+const NavList = React__default.forwardRef((props, ref) => {
+  const contextValue = useMemo(() => ({
+    hasList: true
+  }), []);
+  return React__default.createElement(NavListContext.Provider, {
+    value: contextValue
+  }, React__default.createElement(StyledNavList, Object.assign({
+    ref: ref
+  }, props)));
+});
+NavList.displayName = 'Nav';
+
+export { NavList };

package/dist/esm/elements/sheet/Sheet.js

@@ -0,0 +1,128 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { useRef, useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useUIDSeed } from 'react-uid';
+import { mergeRefs } from 'react-merge-refs';
+import { PLACEMENT } from '../../types/index.js';
+import '../../styled/StyledChrome.js';
+import '../../styled/StyledSkipNav.js';
+import '../../styled/StyledSkipNavIcon.js';
+import '../../styled/body/StyledBody.js';
+import '../../styled/body/StyledContent.js';
+import '../../styled/body/StyledMain.js';
+import '../../styled/footer/StyledFooter.js';
+import '../../styled/footer/StyledFooterItem.js';
+import '../../styled/header/StyledHeader.js';
+import '../../styled/header/StyledBaseHeaderItem.js';
+import '../../styled/header/StyledHeaderItem.js';
+import '../../styled/header/StyledHeaderItemIcon.js';
+import '../../styled/header/StyledLogoHeaderItem.js';
+import '../../styled/header/StyledHeaderItemText.js';
+import '../../styled/header/StyledHeaderItemWrapper.js';
+import '../../styled/nav/StyledNav.js';
+import '../../styled/nav/StyledNavList.js';
+import '../../styled/nav/StyledNavListItem.js';
+import '../../styled/nav/StyledBaseNavItem.js';
+import '../../styled/nav/StyledLogoNavItem.js';
+import '../../styled/nav/StyledBrandmarkNavItem.js';
+import '../../styled/nav/StyledNavButton.js';
+import '../../styled/nav/StyledNavItemIcon.js';
+import '../../styled/nav/StyledNavItemText.js';
+import { StyledSheet } from '../../styled/sheet/StyledSheet.js';
+import { StyledSheetWrapper } from '../../styled/sheet/StyledSheetWrapper.js';
+import '../../styled/sheet/StyledSheetTitle.js';
+import '../../styled/sheet/StyledSheetDescription.js';
+import '../../styled/sheet/StyledSheetBody.js';
+import '../../styled/sheet/StyledSheetClose.js';
+import '../../styled/sheet/StyledSheetFooter.js';
+import '../../styled/sheet/StyledSheetFooterItem.js';
+import '../../styled/sheet/StyledSheetHeader.js';
+import { SheetContext } from '../../utils/useSheetContext.js';
+import { useFocusableMount } from '../../utils/useFocusableMount.js';
+import { Title } from './components/Title.js';
+import { Description } from './components/Description.js';
+import { Header } from './components/Header.js';
+import { Body } from './components/Body.js';
+import { Footer } from './components/Footer.js';
+import { FooterItem } from './components/FooterItem.js';
+import { Close } from './components/Close.js';
+
+const SheetComponent = React__default.forwardRef((_ref, ref) => {
+  let {
+    id,
+    isOpen,
+    isAnimated,
+    focusOnMount,
+    restoreFocus,
+    placement,
+    size,
+    children,
+    ...props
+  } = _ref;
+  const sheetRef = useRef(null);
+  const seed = useUIDSeed();
+  const [isCloseButtonPresent, setIsCloseButtonPresent] = useState(false);
+  const idPrefix = useMemo(() => id || seed(`sheet_${'9.0.0-next.20'}`), [id, seed]);
+  const titleId = `${idPrefix}--title`;
+  const descriptionId = `${idPrefix}--description`;
+  const sheetContext = useMemo(() => ({
+    titleId,
+    descriptionId,
+    isCloseButtonPresent,
+    setIsCloseButtonPresent
+  }), [titleId, descriptionId, isCloseButtonPresent]);
+  useFocusableMount({
+    targetRef: sheetRef,
+    isMounted: isOpen,
+    focusOnMount,
+    restoreFocus
+  });
+  return React__default.createElement(SheetContext.Provider, {
+    value: sheetContext
+  }, React__default.createElement(StyledSheet, Object.assign({
+    isOpen: isOpen,
+    isAnimated: isAnimated,
+    placement: placement,
+    size: size,
+    tabIndex: -1,
+    id: idPrefix,
+    "aria-labelledby": titleId,
+    "aria-describedby": descriptionId,
+    ref: mergeRefs([sheetRef, ref])
+  }, props), React__default.createElement(StyledSheetWrapper, {
+    isOpen: isOpen,
+    isAnimated: isAnimated,
+    placement: placement,
+    size: size
+  }, children)));
+});
+SheetComponent.displayName = 'Sheet';
+SheetComponent.propTypes = {
+  id: PropTypes.string,
+  isOpen: PropTypes.bool,
+  isAnimated: PropTypes.bool,
+  focusOnMount: PropTypes.bool,
+  restoreFocus: PropTypes.bool,
+  placement: PropTypes.oneOf(PLACEMENT),
+  size: PropTypes.string
+};
+SheetComponent.defaultProps = {
+  isAnimated: true,
+  placement: 'end',
+  size: '380px'
+};
+const Sheet = SheetComponent;
+Sheet.Body = Body;
+Sheet.Close = Close;
+Sheet.Description = Description;
+Sheet.Footer = Footer;
+Sheet.FooterItem = FooterItem;
+Sheet.Header = Header;
+Sheet.Title = Title;
+
+export { Sheet };