@zendeskgarden/react-chrome 8.75.0 → 8.76.0

package/dist/esm/elements/subnav/SubNavItem.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 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/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 { StyledSubNavItem } from '../../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 SubNavItem = React__default.forwardRef((props, ref) => {
+  const {
+    isDark,
+    isLight
+  } = useChromeContext();
+  return React__default.createElement(StyledSubNavItem, Object.assign({
+    ref: ref,
+    isDark: isDark,
+    isLight: isLight
+  }, props));
+});
+SubNavItem.displayName = 'SubNavItem';
+SubNavItem.propTypes = {
+  isCurrent: PropTypes.bool
+};
+
+export { SubNavItem };

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

@@ -0,0 +1,56 @@
+/**
+* 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/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 { StyledSubNavItemText } from '../../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';
+
+const SubNavItemText = React__default.forwardRef((props, ref) => React__default.createElement(StyledSubNavItemText, Object.assign({
+  ref: ref
+}, props)));
+SubNavItemText.displayName = 'SubNavItemText';
+SubNavItemText.propTypes = {
+  isWrapped: PropTypes.bool
+};
+
+export { SubNavItemText };

package/dist/esm/index.js

@@ -0,0 +1,29 @@
+/**
+* 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 { 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 { Sidebar } from './elements/body/Sidebar.js';
+export { Header } from './elements/header/Header.js';
+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 { Footer } from './elements/footer/Footer.js';
+export { FooterItem } from './elements/footer/FooterItem.js';
+export { Nav } from './elements/nav/Nav.js';
+export { NavItem } from './elements/nav/NavItem.js';
+export { NavItemIcon } from './elements/nav/NavItemIcon.js';
+export { NavItemText } from './elements/nav/NavItemText.js';
+export { SubNav } from './elements/subnav/SubNav.js';
+export { SubNavItem } from './elements/subnav/SubNavItem.js';
+export { SubNavItemText } from './elements/subnav/SubNavItemText.js';
+export { CollapsibleSubNavItem } from './elements/subnav/CollapsibleSubNavItem.js';
+export { Sheet } from './elements/sheet/Sheet.js';
+export { PRODUCT as PRODUCTS } from './types/index.js';

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/chevron-down-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 SvgChevronDownStroke = function SvgChevronDownStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    focusable: "false",
+    viewBox: "0 0 12 12",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M1.646 3.646a.5.5 0 01.638-.057l.07.057L6 7.293l3.646-3.647a.5.5 0 01.638-.057l.07.057a.5.5 0 01.057.638l-.057.07-4 4a.5.5 0 01-.638.057l-.07-.057-4-4a.5.5 0 010-.708z"
+  })));
+};
+
+export { SvgChevronDownStroke as default };

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': '8.76.0'
+}).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': '8.76.0'
+}).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': '8.76.0'
+}).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': '8.76.0'
+}).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': '8.76.0'
+}).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': '8.76.0'
+}).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 };

package/dist/esm/styled/body/StyledSidebar.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.sidebar';
+const StyledSidebar = styled.aside.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledSidebar",
+  componentId: "sc-1q77fuw-0"
+})(["flex-shrink:0;order:0;box-sizing:border-box;border-", ":", ";width:330px;overflow:auto;&:focus{outline:none;}", ";"], props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}`, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSidebar.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSidebar };

package/dist/esm/styled/footer/StyledFooter.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 { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.footer';
+const getFooterHeight = props => {
+  return `${props.theme.space.base * 20}px`;
+};
+const StyledFooter = styled.footer.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledFooter",
+  componentId: "sc-v7lib2-0"
+})(["display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;border-top:", ";background-color:", ";padding:0 ", "px;height:", ";", ";"], props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}`, props => getColorV8('background', 600 , props.theme), props => props.theme.space.base * 9, getFooterHeight, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledFooter.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFooter, getFooterHeight };

package/dist/esm/styled/footer/StyledFooterItem.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.footer_item';
+const StyledFooterItem = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledFooterItem",
+  componentId: "sc-1cktm85-0"
+})(["margin:", ";", ";"], props => `0 ${props.theme.space.base}px`, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledFooterItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFooterItem };

package/dist/esm/styled/header/StyledBaseHeaderItem.js

@@ -0,0 +1,35 @@
+/**
+* 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 { retrieveComponentStyles, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.base_header_item';
+const getHeaderItemSize = props => `${props.theme.space.base * 7.5}px`;
+const sizeStyles = props => {
+  const size = props.theme.space.base * 7.5;
+  return css(["padding:0 3px;min-width:", "px;height:", ";line-height:", ";"], size, props.maxY ? '100%' : `${size}px`, getLineHeight(size, props.theme.fontSizes.md));
+};
+const StyledBaseHeaderItem = styled.button.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledBaseHeaderItem",
+  componentId: "sc-1qua7h6-0"
+})(["display:inline-flex;position:relative;flex:", ";align-items:center;justify-content:", ";order:1;transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;z-index:0;margin:", ";border:none;border-radius:", ";background:transparent;text-decoration:none;white-space:nowrap;color:inherit;font-size:inherit;", " ", ";"], props => props.maxX && '1', props => props.maxX ? 'start' : 'center', props => `0 ${props.theme.space.base * 3}px`, props => {
+  if (props.isRound) {
+    return '100%';
+  }
+  if (props.maxY) {
+    return '0';
+  }
+  return props.theme.borderRadii.md;
+}, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledBaseHeaderItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledBaseHeaderItem, getHeaderItemSize };

package/dist/esm/styled/header/StyledHeader.js

@@ -0,0 +1,31 @@
+/**
+* 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';
+import { StyledLogoHeaderItem } from './StyledLogoHeaderItem.js';
+import { getNavItemHeight } from '../nav/StyledBaseNavItem.js';
+
+const COMPONENT_ID = 'chrome.header';
+const getHeaderHeight = props => {
+  return getNavItemHeight(props);
+};
+const StyledHeader = styled.header.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledHeader",
+  componentId: "sc-1cexpz-0"
+})(["display:flex;position:", ";align-items:center;justify-content:flex-end;box-sizing:border-box;border-bottom:", ";box-shadow:", ";background-color:", ";padding:0 ", "px;height:", ";color:", ";font-size:", ";", " ", ";"], props => props.isStandalone && 'relative', props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}`, props => props.isStandalone && props.theme.shadows.lg('0', '10px', getColorV8('chromeHue', 600, props.theme, 0.15)), props => getColorV8('background', 600 , props.theme), props => props.theme.space.base, getHeaderHeight, props => getColorV8('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => props.isStandalone && `
+    ${StyledLogoHeaderItem} {
+      display: inline-flex;
+    }
+  `, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHeader.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHeader, getHeaderHeight };

package/dist/esm/styled/header/StyledHeaderItem.js

@@ -0,0 +1,37 @@
+/**
+* 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 { math } from 'polished';
+import { focusStyles, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledHeaderItemIcon } from './StyledHeaderItemIcon.js';
+import { StyledBaseHeaderItem, getHeaderItemSize } from './StyledBaseHeaderItem.js';
+import { StyledHeaderItemText } from './StyledHeaderItemText.js';
+
+const COMPONENT_ID = 'chrome.header_item';
+const imgStyles = props => {
+  const size = math(`${getHeaderItemSize(props)} - ${props.theme.space.base * 2}`);
+  return css(["img{margin:0;border-radius:", ";width:", ";height:", ";}"], math(`${props.theme.borderRadii.md} - 1`), size, size);
+};
+const StyledHeaderItem = styled(StyledBaseHeaderItem).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledHeaderItem",
+  componentId: "sc-14sft6n-0"
+})(["&:hover,&:focus{text-decoration:none;color:inherit;}", " &:focus-visible:active,&[data-garden-focus-visible]:active{box-shadow:none;}&:hover ", ",&:hover ", ",&:active ", ",&:active ", "{color:", ";}", " ", " ", ";"], props => focusStyles({
+  theme: props.theme,
+  inset: props.maxY
+}), StyledHeaderItemIcon, StyledHeaderItemText, StyledHeaderItemIcon, StyledHeaderItemText, props => getColorV8('chromeHue', 700, props.theme), imgStyles, props => props.isRound && `
+    ${StyledHeaderItemIcon} {
+      border-radius: 100px;
+    }
+  `, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHeaderItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHeaderItem };

package/dist/esm/styled/header/StyledHeaderItemIcon.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.header_item_icon';
+const StyledHeaderItemIcon = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledHeaderItemIcon",
+  componentId: "sc-1jhhp6z-0"
+})(["transition:transform 0.25s ease-in-out;margin:0 3px;width:", ";min-width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHeaderItemIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHeaderItemIcon };

package/dist/esm/styled/header/StyledHeaderItemText.js

@@ -0,0 +1,23 @@
+/**
+* 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 { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.header_item_text';
+const clippedStyling = css(["position:absolute;margin:0;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
+const StyledHeaderItemText = styled.span.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledHeaderItemText",
+  componentId: "sc-goz7la-0"
+})(["margin:0 3px;", " ", ";"], props => props.isClipped && clippedStyling, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHeaderItemText.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHeaderItemText, clippedStyling };