@zendeskgarden/react-chrome 9.0.0-next.7 → 9.0.0-next.8

package/dist/esm/elements/sheet/components/Body.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, { 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/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 '../../../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,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, 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/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 '../../../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,59 @@
+/**
+* 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/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 '../../../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,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, { 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/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 '../../../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,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, { 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/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 '../../../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,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/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 '../../../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,59 @@
+/**
+* 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/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 '../../../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/index.js

@@ -0,0 +1,24 @@
+/**
+* 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.
+*/
+export { HeaderItem } from './elements/header/HeaderItem.js';
+export { HeaderItemIcon } from './elements/header/HeaderItemIcon.js';
+export { HeaderItemText } from './elements/header/HeaderItemText.js';
+export { HeaderItemWrapper } from './elements/header/HeaderItemWrapper.js';
+export { FooterItem } from './elements/footer/FooterItem.js';
+export { NavItem } from './elements/nav/NavItem.js';
+export { NavItemIcon } from './elements/nav/NavItemIcon.js';
+export { NavItemText } from './elements/nav/NavItemText.js';
+export { Chrome } from './elements/Chrome.js';
+export { SkipNav } from './elements/SkipNav.js';
+export { Body } from './elements/body/Body.js';
+export { Content } from './elements/body/Content.js';
+export { Main } from './elements/body/Main.js';
+export { Header } from './elements/header/Header.js';
+export { Footer } from './elements/footer/Footer.js';
+export { Nav } from './elements/nav/Nav.js';
+export { Sheet } from './elements/sheet/Sheet.js';
+export { PRODUCTS } from './types/index.js';

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/link-stroke.svg.js

@@ -0,0 +1,25 @@
+/**
+* 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 * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgLinkStroke = function SvgLinkStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"
+  })));
+};
+
+export { SvgLinkStroke as default };

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js

@@ -0,0 +1,26 @@
+/**
+* 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 * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgXStroke = function SvgXStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M3 13L13 3m0 10L3 3"
+  })));
+};
+
+export { SvgXStroke as default };

package/dist/esm/styled/StyledChrome.js

@@ -0,0 +1,22 @@
+/**
+* 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 styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.chrome';
+const StyledChrome = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledChrome",
+  componentId: "sc-1uqm6u6-0"
+})(["display:flex;position:relative;margin:0;height:100vh;overflow-y:hidden;font-family:", ";direction:", ";", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledChrome.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledChrome };

package/dist/esm/styled/StyledSkipNav.js

@@ -0,0 +1,46 @@
+/**
+* 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 styled, { keyframes, css } from 'styled-components';
+import { math } from 'polished';
+import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { getHeaderHeight } from './header/StyledHeader.js';
+
+const COMPONENT_ID = 'chrome.skipnav';
+const animationStyles = () => {
+  const animationName = keyframes(["0%{transform:translate(-50%,-50%);}"]);
+  return css(["transition:opacity 0.2s ease-out,clip 0s linear 0.2s;opacity:0;clip:rect(0,0,0,0);&:focus{transition:opacity 0.2s ease-in-out;animation:0.2s cubic-bezier(0.15,0.85,0.35,1.2) ", ";opacity:1;clip:rect(0,150vw,100vh,-50vw);}"], animationName);
+};
+const colorStyles = theme => {
+  const color = getColorV8('primaryHue', 600, theme);
+  const borderColor = getColorV8('neutralHue', 300, theme);
+  const boxShadow = theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7}px`, getColorV8('chromeHue', 600, theme, 0.15));
+  return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&:hover,&:focus{color:", ";}", ""], borderColor, boxShadow, getColorV8('background', 600 , theme), color, color, focusStyles({
+    theme,
+    inset: true,
+    boxShadow
+  }));
+};
+const sizeStyles = props => {
+  const top = math(`${getHeaderHeight(props)} / 2`);
+  const padding = `${props.theme.space.base * 5}px`;
+  const paddingStart = `${props.theme.space.base * 4}px`;
+  const fontSize = props.theme.fontSizes.md;
+  const lineHeight = getLineHeight(padding, fontSize);
+  return css(["top:", ";padding:", ";padding-", ":", ";line-height:", ";font-size:", ";"], top, padding, props.theme.rtl ? 'right' : 'left', paddingStart, lineHeight, fontSize);
+};
+const StyledSkipNav = styled.a.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledSkipNav",
+  componentId: "sc-1tsro34-0"
+})(["", ";display:inline-flex;position:absolute;left:50%;align-items:center;justify-content:center;transform:translateX(-50%);direction:", ";z-index:", ";border:", ";border-radius:", ";text-decoration:underline;white-space:nowrap;", ";", "{text-decoration:none;}&:hover{text-decoration:underline;}", ";", ";"], animationStyles(), props => props.theme.rtl && 'rtl', props => props.zIndex, props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => sizeStyles(props), SELECTOR_FOCUS_VISIBLE, props => colorStyles(props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSkipNav.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSkipNav };

package/dist/esm/styled/StyledSkipNavIcon.js

@@ -0,0 +1,28 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import SvgLinkStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/link-stroke.svg.js';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.skipnav_icon';
+const sizeStyles = theme => {
+  const margin = `${theme.space.base * 2}px`;
+  const size = theme.iconSizes.md;
+  return css(["margin-", ":", ";width:", ";height:", ";"], theme.rtl ? 'left' : 'right', margin, size, size);
+};
+const StyledSkipNavIcon = styled(SvgLinkStroke).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledSkipNavIcon",
+  componentId: "sc-1ika5z4-0"
+})(["transform:", ";color:", ";", ";", ";"], props => props.theme.rtl && 'scaleX(-1)', props => getColorV8('neutralHue', 600, props.theme), props => sizeStyles(props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSkipNavIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSkipNavIcon };

package/dist/esm/styled/body/StyledBody.js

@@ -0,0 +1,22 @@
+/**
+* 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 styled from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.body';
+const StyledBody = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledBody",
+  componentId: "sc-c7h9kv-0"
+})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => getColorV8('neutralHue', 100, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledBody.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledBody };

package/dist/esm/styled/body/StyledContent.js

@@ -0,0 +1,25 @@
+/**
+* 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 styled from 'styled-components';
+import { math } from 'polished';
+import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getHeaderHeight } from '../header/StyledHeader.js';
+import { getFooterHeight } from '../footer/StyledFooter.js';
+
+const COMPONENT_ID = 'chrome.content';
+const StyledContent = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledContent",
+  componentId: "sc-qcuzxn-0"
+})(["display:flex;height:", ";line-height:", ";color:", ";font-size:", ";&:focus{outline:none;}", ";"], props => props.hasFooter ? `calc(100% - ${math(`${getHeaderHeight(props)} + ${getFooterHeight(props)}`)})` : `calc(100% - ${getHeaderHeight(props)})`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledContent.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledContent };

package/dist/esm/styled/body/StyledMain.js

@@ -0,0 +1,22 @@
+/**
+* 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 styled from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.main';
+const StyledMain = styled.main.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledMain",
+  componentId: "sc-t61cre-0"
+})(["flex:1;order:1;background-color:", ";overflow:auto;:focus{outline:none;}", ";"], props => getColorV8('background', 600 , props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledMain.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledMain };