@zendeskgarden/react-chrome 8.75.0 → 8.76.0

package/dist/esm/elements/sheet/components/Body.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, { forwardRef } 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/body/StyledSidebar.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/StyledBaseNavItem.js';
+import '../../../styled/nav/StyledLogoNavItem.js';
+import '../../../styled/nav/StyledBrandmarkNavItem.js';
+import '../../../styled/nav/StyledNavItem.js';
+import '../../../styled/nav/StyledNavItemIcon.js';
+import '../../../styled/nav/StyledNavItemText.js';
+import '../../../styled/subnav/StyledSubNav.js';
+import '../../../styled/subnav/StyledSubNavItem.js';
+import '../../../styled/subnav/StyledSubNavItemText.js';
+import '../../../styled/subnav/StyledSubNavItemHeader.js';
+import '../../../styled/subnav/StyledSubNavItemIcon.js';
+import '../../../styled/subnav/StyledSubNavPanel.js';
+import '../../../styled/sheet/StyledSheet.js';
+import '../../../styled/sheet/StyledSheetWrapper.js';
+import '../../../styled/sheet/StyledSheetTitle.js';
+import '../../../styled/sheet/StyledSheetDescription.js';
+import { StyledSheetBody } from '../../../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 SheetBody = forwardRef((props, ref) => {
+  return React__default.createElement(StyledSheetBody, Object.assign({
+    ref: ref
+  }, props));
+});
+SheetBody.displayName = 'Sheet.Body';
+const Body = SheetBody;
+
+export { Body };

package/dist/esm/elements/sheet/components/Close.js

@@ -0,0 +1,65 @@
+/**
+* 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, { forwardRef, useEffect } from 'react';
+import SvgXStroke from '../../../node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.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/body/StyledSidebar.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/StyledBaseNavItem.js';
+import '../../../styled/nav/StyledLogoNavItem.js';
+import '../../../styled/nav/StyledBrandmarkNavItem.js';
+import '../../../styled/nav/StyledNavItem.js';
+import '../../../styled/nav/StyledNavItemIcon.js';
+import '../../../styled/nav/StyledNavItemText.js';
+import '../../../styled/subnav/StyledSubNav.js';
+import '../../../styled/subnav/StyledSubNavItem.js';
+import '../../../styled/subnav/StyledSubNavItemText.js';
+import '../../../styled/subnav/StyledSubNavItemHeader.js';
+import '../../../styled/subnav/StyledSubNavItemIcon.js';
+import '../../../styled/subnav/StyledSubNavPanel.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 { StyledSheetClose } from '../../../styled/sheet/StyledSheetClose.js';
+import '../../../styled/sheet/StyledSheetFooter.js';
+import '../../../styled/sheet/StyledSheetFooterItem.js';
+import '../../../styled/sheet/StyledSheetHeader.js';
+import { useSheetContext } from '../../../utils/useSheetContext.js';
+
+const SheetClose = forwardRef((props, ref) => {
+  const {
+    setIsCloseButtonPresent
+  } = useSheetContext();
+  useEffect(() => {
+    setIsCloseButtonPresent(true);
+    return () => setIsCloseButtonPresent(false);
+  }, [setIsCloseButtonPresent]);
+  return React__default.createElement(StyledSheetClose, Object.assign({
+    "aria-label": "Close Sheet",
+    ref: ref
+  }, props), React__default.createElement(SvgXStroke, null));
+});
+SheetClose.displayName = 'Sheet.Close';
+const Close = SheetClose;
+
+export { Close };

package/dist/esm/elements/sheet/components/Description.js

@@ -0,0 +1,64 @@
+/**
+* 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, { forwardRef } 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/body/StyledSidebar.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/StyledBaseNavItem.js';
+import '../../../styled/nav/StyledLogoNavItem.js';
+import '../../../styled/nav/StyledBrandmarkNavItem.js';
+import '../../../styled/nav/StyledNavItem.js';
+import '../../../styled/nav/StyledNavItemIcon.js';
+import '../../../styled/nav/StyledNavItemText.js';
+import '../../../styled/subnav/StyledSubNav.js';
+import '../../../styled/subnav/StyledSubNavItem.js';
+import '../../../styled/subnav/StyledSubNavItemText.js';
+import '../../../styled/subnav/StyledSubNavItemHeader.js';
+import '../../../styled/subnav/StyledSubNavItemIcon.js';
+import '../../../styled/subnav/StyledSubNavPanel.js';
+import '../../../styled/sheet/StyledSheet.js';
+import '../../../styled/sheet/StyledSheetWrapper.js';
+import '../../../styled/sheet/StyledSheetTitle.js';
+import { StyledSheetDescription } from '../../../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 { useSheetContext } from '../../../utils/useSheetContext.js';
+
+const SheetDescription = forwardRef((_ref, ref) => {
+  let {
+    id,
+    ...props
+  } = _ref;
+  const {
+    descriptionId
+  } = useSheetContext();
+  return React__default.createElement(StyledSheetDescription, Object.assign({
+    id: id || descriptionId,
+    ref: ref
+  }, props));
+});
+SheetDescription.displayName = 'Sheet.Description';
+const Description = SheetDescription;
+
+export { Description };

package/dist/esm/elements/sheet/components/Footer.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, { forwardRef } 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/body/StyledSidebar.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/StyledBaseNavItem.js';
+import '../../../styled/nav/StyledLogoNavItem.js';
+import '../../../styled/nav/StyledBrandmarkNavItem.js';
+import '../../../styled/nav/StyledNavItem.js';
+import '../../../styled/nav/StyledNavItemIcon.js';
+import '../../../styled/nav/StyledNavItemText.js';
+import '../../../styled/subnav/StyledSubNav.js';
+import '../../../styled/subnav/StyledSubNavItem.js';
+import '../../../styled/subnav/StyledSubNavItemText.js';
+import '../../../styled/subnav/StyledSubNavItemHeader.js';
+import '../../../styled/subnav/StyledSubNavItemIcon.js';
+import '../../../styled/subnav/StyledSubNavPanel.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 { StyledSheetFooter } from '../../../styled/sheet/StyledSheetFooter.js';
+import '../../../styled/sheet/StyledSheetFooterItem.js';
+import '../../../styled/sheet/StyledSheetHeader.js';
+
+const SheetFooter = forwardRef((props, ref) => {
+  return React__default.createElement(StyledSheetFooter, Object.assign({
+    ref: ref
+  }, props));
+});
+SheetFooter.displayName = 'Sheet.Footer';
+const Footer = SheetFooter;
+
+export { Footer };

package/dist/esm/elements/sheet/components/FooterItem.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, { forwardRef } 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/body/StyledSidebar.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/StyledBaseNavItem.js';
+import '../../../styled/nav/StyledLogoNavItem.js';
+import '../../../styled/nav/StyledBrandmarkNavItem.js';
+import '../../../styled/nav/StyledNavItem.js';
+import '../../../styled/nav/StyledNavItemIcon.js';
+import '../../../styled/nav/StyledNavItemText.js';
+import '../../../styled/subnav/StyledSubNav.js';
+import '../../../styled/subnav/StyledSubNavItem.js';
+import '../../../styled/subnav/StyledSubNavItemText.js';
+import '../../../styled/subnav/StyledSubNavItemHeader.js';
+import '../../../styled/subnav/StyledSubNavItemIcon.js';
+import '../../../styled/subnav/StyledSubNavPanel.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 { StyledSheetFooterItem } from '../../../styled/sheet/StyledSheetFooterItem.js';
+import '../../../styled/sheet/StyledSheetHeader.js';
+
+const SheetFooterItem = forwardRef((props, ref) => {
+  return React__default.createElement(StyledSheetFooterItem, Object.assign({
+    ref: ref
+  }, props));
+});
+SheetFooterItem.displayName = 'Sheet.FooterItem';
+const FooterItem = SheetFooterItem;
+
+export { FooterItem };

package/dist/esm/elements/sheet/components/Header.js

@@ -0,0 +1,60 @@
+/**
+* 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, { forwardRef } 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/body/StyledSidebar.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/StyledBaseNavItem.js';
+import '../../../styled/nav/StyledLogoNavItem.js';
+import '../../../styled/nav/StyledBrandmarkNavItem.js';
+import '../../../styled/nav/StyledNavItem.js';
+import '../../../styled/nav/StyledNavItemIcon.js';
+import '../../../styled/nav/StyledNavItemText.js';
+import '../../../styled/subnav/StyledSubNav.js';
+import '../../../styled/subnav/StyledSubNavItem.js';
+import '../../../styled/subnav/StyledSubNavItemText.js';
+import '../../../styled/subnav/StyledSubNavItemHeader.js';
+import '../../../styled/subnav/StyledSubNavItemIcon.js';
+import '../../../styled/subnav/StyledSubNavPanel.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 { StyledSheetHeader } from '../../../styled/sheet/StyledSheetHeader.js';
+import { useSheetContext } from '../../../utils/useSheetContext.js';
+
+const SheetHeader = forwardRef((props, ref) => {
+  const {
+    isCloseButtonPresent
+  } = useSheetContext();
+  return React__default.createElement(StyledSheetHeader, Object.assign({
+    ref: ref,
+    isCloseButtonPresent: isCloseButtonPresent
+  }, props));
+});
+SheetHeader.displayName = 'Sheet.Header';
+const Header = SheetHeader;
+
+export { Header };

package/dist/esm/elements/sheet/components/Title.js

@@ -0,0 +1,64 @@
+/**
+* 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, { forwardRef } 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/body/StyledSidebar.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/StyledBaseNavItem.js';
+import '../../../styled/nav/StyledLogoNavItem.js';
+import '../../../styled/nav/StyledBrandmarkNavItem.js';
+import '../../../styled/nav/StyledNavItem.js';
+import '../../../styled/nav/StyledNavItemIcon.js';
+import '../../../styled/nav/StyledNavItemText.js';
+import '../../../styled/subnav/StyledSubNav.js';
+import '../../../styled/subnav/StyledSubNavItem.js';
+import '../../../styled/subnav/StyledSubNavItemText.js';
+import '../../../styled/subnav/StyledSubNavItemHeader.js';
+import '../../../styled/subnav/StyledSubNavItemIcon.js';
+import '../../../styled/subnav/StyledSubNavPanel.js';
+import '../../../styled/sheet/StyledSheet.js';
+import '../../../styled/sheet/StyledSheetWrapper.js';
+import { StyledSheetTitle } from '../../../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 { useSheetContext } from '../../../utils/useSheetContext.js';
+
+const SheetTitle = forwardRef((_ref, ref) => {
+  let {
+    id,
+    ...props
+  } = _ref;
+  const {
+    titleId
+  } = useSheetContext();
+  return React__default.createElement(StyledSheetTitle, Object.assign({
+    id: id || titleId,
+    ref: ref
+  }, props));
+});
+SheetTitle.displayName = 'Sheet.Title';
+const Title = SheetTitle;
+
+export { Title };

package/dist/esm/elements/subnav/CollapsibleSubNavItem.js

@@ -0,0 +1,120 @@
+/**
+* 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, { createRef, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useAccordion } from '@zendeskgarden/container-accordion';
+import { getControlledValue } from '@zendeskgarden/container-utilities';
+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/body/StyledSidebar.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/StyledBaseNavItem.js';
+import '../../styled/nav/StyledLogoNavItem.js';
+import '../../styled/nav/StyledBrandmarkNavItem.js';
+import '../../styled/nav/StyledNavItem.js';
+import '../../styled/nav/StyledNavItemIcon.js';
+import '../../styled/nav/StyledNavItemText.js';
+import '../../styled/subnav/StyledSubNav.js';
+import '../../styled/subnav/StyledSubNavItem.js';
+import '../../styled/subnav/StyledSubNavItemText.js';
+import { StyledSubNavItemHeader } from '../../styled/subnav/StyledSubNavItemHeader.js';
+import { StyledSubNavItemIconWrapper, StyledSubNavItemIcon } from '../../styled/subnav/StyledSubNavItemIcon.js';
+import { StyledSubNavPanel } from '../../styled/subnav/StyledSubNavPanel.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 { useChromeContext } from '../../utils/useChromeContext.js';
+
+const CollapsibleSubNavItem = React__default.forwardRef((_ref, ref) => {
+  let {
+    header,
+    children,
+    isExpanded: controlledExpanded,
+    onChange,
+    ...other
+  } = _ref;
+  const {
+    isDark,
+    isLight
+  } = useChromeContext();
+  const panelRef = createRef();
+  const [internalExpanded, setInternalExpanded] = useState(controlledExpanded);
+  const expanded = getControlledValue(controlledExpanded, internalExpanded);
+  const value = 0;
+  const expandedSections = expanded ? [value] : [];
+  const {
+    getHeaderProps,
+    getTriggerProps,
+    getPanelProps
+  } = useAccordion({
+    sections: [value],
+    expandedSections,
+    onChange: () => {
+      const isExpanded = expandedSections.length === 0;
+      if (onChange) {
+        onChange(isExpanded);
+      } else {
+        setInternalExpanded(isExpanded);
+      }
+    }
+  });
+  useEffect(() => {
+    if (expanded && panelRef.current) {
+      panelRef.current.style.maxHeight = `${panelRef.current.scrollHeight}px`;
+    }
+  }, [expanded, children, panelRef]);
+  return React__default.createElement("div", {
+    ref: ref
+  }, React__default.createElement("div", getHeaderProps({
+    'aria-level': 2
+  }), React__default.createElement(StyledSubNavItemHeader, Object.assign({
+    isDark: isDark,
+    isLight: isLight,
+    isExpanded: expanded
+  }, getTriggerProps({
+    ...other,
+    role: null,
+    tabIndex: null,
+    value
+  }), {
+    type: "button"
+  }), React__default.createElement(React__default.Fragment, null, header, React__default.createElement(StyledSubNavItemIconWrapper, {
+    isExpanded: expanded
+  }, React__default.createElement(StyledSubNavItemIcon, null))))), React__default.createElement(StyledSubNavPanel, Object.assign({
+    isHidden: !expanded
+  }, getPanelProps({
+    ref: panelRef,
+    value
+  })), children));
+});
+CollapsibleSubNavItem.propTypes = {
+  header: PropTypes.any,
+  isExpanded: PropTypes.bool,
+  onChange: PropTypes.func
+};
+CollapsibleSubNavItem.displayName = 'CollapsibleSubNavItem';
+
+export { CollapsibleSubNavItem };

package/dist/esm/elements/subnav/SubNav.js

@@ -0,0 +1,63 @@
+/**
+* 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/body/StyledSidebar.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/StyledBaseNavItem.js';
+import '../../styled/nav/StyledLogoNavItem.js';
+import '../../styled/nav/StyledBrandmarkNavItem.js';
+import '../../styled/nav/StyledNavItem.js';
+import '../../styled/nav/StyledNavItemIcon.js';
+import '../../styled/nav/StyledNavItemText.js';
+import { StyledSubNav } from '../../styled/subnav/StyledSubNav.js';
+import '../../styled/subnav/StyledSubNavItem.js';
+import '../../styled/subnav/StyledSubNavItemText.js';
+import '../../styled/subnav/StyledSubNavItemHeader.js';
+import '../../styled/subnav/StyledSubNavItemIcon.js';
+import '../../styled/subnav/StyledSubNavPanel.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 { useChromeContext } from '../../utils/useChromeContext.js';
+
+const SubNav = React__default.forwardRef((props, ref) => {
+  const {
+    hue,
+    isLight,
+    isDark
+  } = useChromeContext();
+  return React__default.createElement(StyledSubNav, Object.assign({
+    ref: ref,
+    hue: hue,
+    isLight: isLight,
+    isDark: isDark
+  }, props));
+});
+SubNav.displayName = 'SubNav';
+
+export { SubNav };