@zendeskgarden/react-chrome 8.75.1 → 8.76.0

package/dist/esm/styled/header/StyledHeaderItemWrapper.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.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
+
+const COMPONENT_ID = 'chrome.header_item_wrapper';
+const StyledHeaderItemWrapper = styled(StyledBaseHeaderItem).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0',
+  as: 'div'
+}).withConfig({
+  displayName: "StyledHeaderItemWrapper",
+  componentId: "sc-1uieu55-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHeaderItemWrapper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHeaderItemWrapper };

package/dist/esm/styled/header/StyledLogoHeaderItem.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 styled from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
+import { StyledHeaderItemIcon } from './StyledHeaderItemIcon.js';
+import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
+import { StyledHeaderItemText, clippedStyling } from './StyledHeaderItemText.js';
+import { getNavWidth } from '../nav/StyledNav.js';
+
+const COMPONENT_ID = 'chrome.header_item';
+const retrieveProductColor = props => {
+  switch (props.product) {
+    case 'chat':
+      return PALETTE.product.chat;
+    case 'connect':
+      return PALETTE.product.connect;
+    case 'explore':
+      return PALETTE.product.explore;
+    case 'guide':
+      return PALETTE.product.guide;
+    case 'message':
+      return PALETTE.product.message;
+    case 'support':
+      return PALETTE.product.support;
+    case 'talk':
+      return PALETTE.product.talk;
+    default:
+      return 'inherit';
+  }
+};
+const StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0',
+  as: 'div'
+}).withConfig({
+  displayName: "StyledLogoHeaderItem",
+  componentId: "sc-1n1d1yv-0"
+})(["display:none;order:0;margin-right:", ";margin-left:", ";border-", ":", ";border-radius:0;padding:0;width:", ";height:100%;overflow:hidden;fill:", ";text-decoration:none;color:", ";", "{", "}", "{margin:0;width:", ";height:", ";}", ";"], props => props.theme.rtl ? `-${props.theme.space.base}px` : 'auto', props => props.theme.rtl ? 'auto' : `-${props.theme.space.base}px`, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}`, props => getNavWidth(props), props => getColorV8('chromeHue', 700, props.theme), props => retrieveProductColor(props), StyledHeaderItemText, clippedStyling, StyledHeaderItemIcon, props => props.theme.iconSizes.lg, props => props.theme.iconSizes.lg, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledLogoHeaderItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledLogoHeaderItem };

package/dist/esm/styled/nav/StyledBaseNavItem.js

@@ -0,0 +1,32 @@
+/**
+* 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 { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getNavWidth } from './StyledNav.js';
+
+const COMPONENT_ID = 'chrome.base_nav_item';
+const getNavItemHeight = props => {
+  return `${props.theme.space.base * 13}px`;
+};
+const sizeStyles = props => {
+  const verticalPadding = math(`(${getNavItemHeight(props)} - ${props.theme.iconSizes.lg}) / 2`);
+  const horizontalPadding = math(`(${getNavWidth(props)} - ${props.theme.iconSizes.lg}) / 4`);
+  return css(["padding:", " ", ";min-height:", ";"], verticalPadding, horizontalPadding, getNavItemHeight);
+};
+const StyledBaseNavItem = styled.button.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledBaseNavItem",
+  componentId: "sc-zvo43f-0"
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:outline-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.1s ease-in-out,opacity 0.1s ease-in-out;border:none;box-sizing:border-box;background:transparent;text-decoration:none;color:inherit;font-size:inherit;", ""], props => sizeStyles(props));
+StyledBaseNavItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledBaseNavItem, getNavItemHeight };

package/dist/esm/styled/nav/StyledBrandmarkNavItem.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.
+*/
+import styled from 'styled-components';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBaseNavItem } from './StyledBaseNavItem.js';
+
+const COMPONENT_ID = 'chrome.brandmark_nav_item';
+const StyledBrandmarkNavItem = styled(StyledBaseNavItem).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0',
+  as: 'div'
+}).withConfig({
+  displayName: "StyledBrandmarkNavItem",
+  componentId: "sc-8kynd4-0"
+})(["order:1;opacity:0.3;margin-top:auto;"]);
+StyledBrandmarkNavItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledBrandmarkNavItem };

package/dist/esm/styled/nav/StyledLogoNavItem.js

@@ -0,0 +1,49 @@
+/**
+* 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 { DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
+import { StyledBaseNavItem } from './StyledBaseNavItem.js';
+
+const COMPONENT_ID = 'chrome.logo_nav_item';
+const retrieveProductColor = product => {
+  switch (product) {
+    case 'chat':
+      return PALETTE.product.chat;
+    case 'connect':
+      return PALETTE.product.connect;
+    case 'explore':
+      return PALETTE.product.explore;
+    case 'guide':
+      return PALETTE.product.guide;
+    case 'message':
+      return PALETTE.product.message;
+    case 'support':
+      return PALETTE.product.support;
+    case 'talk':
+      return PALETTE.product.talk;
+    default:
+      return 'inherit';
+  }
+};
+const colorStyles = props => {
+  const fillColor = props.isLight ? props.theme.palette.grey[800] : props.theme.palette.white;
+  const color = props.isLight || props.isDark ? fillColor : retrieveProductColor(props.product);
+  return css(["color:", ";fill:", ";"], color, fillColor);
+};
+const StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0',
+  as: 'div'
+}).withConfig({
+  displayName: "StyledLogoNavItem",
+  componentId: "sc-saaydx-0"
+})(["order:0;opacity:1;cursor:default;", ";"], props => colorStyles(props));
+StyledLogoNavItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledLogoNavItem };

package/dist/esm/styled/nav/StyledNav.js

@@ -0,0 +1,34 @@
+/**
+* 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, getColorV8 } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.nav';
+const colorStyles = props => {
+  const shade = props.isDark || props.isLight ? 600 : 700;
+  const backgroundColor = getColorV8(props.hue, shade, props.theme);
+  const foregroundColor = props.isLight ? props.theme.palette.black : props.theme.palette.white;
+  return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
+};
+const getNavWidth = props => {
+  return `${props.theme.space.base * 15}px`;
+};
+const getExpandedNavWidth = () => {
+  return `200px`;
+};
+const StyledNav = styled.nav.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledNav",
+  componentId: "sc-6j462r-0"
+})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;width:", ";font-size:", ";", ";", ";"], props => props.isExpanded ? getExpandedNavWidth : getNavWidth, props => props.theme.fontSizes.md, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledNav.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledNav, getExpandedNavWidth, getNavWidth };

package/dist/esm/styled/nav/StyledNavItem.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 styled, { css } from 'styled-components';
+import { math, rgba } from 'polished';
+import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { StyledBaseNavItem } from './StyledBaseNavItem.js';
+import { StyledNavItemIcon } from './StyledNavItemIcon.js';
+import { getNavWidth } from './StyledNav.js';
+
+const COMPONENT_ID = 'chrome.nav_item';
+const colorStyles = props => {
+  const {
+    theme,
+    hue,
+    isLight,
+    isDark,
+    isCurrent
+  } = props;
+  const DARK = theme.palette.black;
+  const LIGHT = theme.palette.white;
+  let currentColor;
+  let hoverColor;
+  if (isCurrent) {
+    if (isLight) {
+      currentColor = rgba(DARK, 0.4);
+    } else if (isDark) {
+      currentColor = rgba(LIGHT, 0.4);
+    } else {
+      currentColor = getColorV8(hue, 500, theme);
+    }
+  } else {
+    hoverColor = rgba(isLight ? LIGHT : DARK, 0.1);
+  }
+  const activeColor = rgba(isLight ? DARK : LIGHT, 0.1);
+  const focusColor = isLight ? DARK : LIGHT;
+  return css(["opacity:", ";outline-color:transparent;background-color:", ";&:hover{opacity:1;background-color:", ";}", " &:active{background-color:", ";}"], isCurrent ? 1 : 0.6, currentColor, hoverColor, focusStyles({
+    theme,
+    condition: false ,
+    styles: {
+      opacity: 1,
+      outlineColor: focusColor
+    }
+  }), activeColor);
+};
+const StyledNavItem = styled(StyledBaseNavItem).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0',
+  as: 'button'
+}).withConfig({
+  displayName: "StyledNavItem",
+  componentId: "sc-gs8mjz-0"
+})(["justify-content:", ";order:1;margin:0;cursor:", ";text-align:", ";&:hover,&:focus{text-decoration:none;color:inherit;}", ";&:focus-visible:hover,&:focus-visible:active,", "{outline:", " solid;outline-offset:-", ";}", " ", ";"], props => props.isExpanded && 'start', props => props.isCurrent ? 'default' : 'pointer', props => props.isExpanded && 'inherit', colorStyles, SELECTOR_FOCUS_VISIBLE, props => math(`${props.theme.borderWidths.md} - 1`), props => props.theme.borderWidths.md, props => props.isExpanded && `
+    ${StyledNavItemIcon} {
+      margin: 0 ${math(`(${getNavWidth(props)} - ${props.theme.iconSizes.lg}) / 4`)};
+    }
+  `, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledNavItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledNavItem };

package/dist/esm/styled/nav/StyledNavItemIcon.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.nav_item_icon';
+const StyledNavItemIcon = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledNavItemIcon",
+  componentId: "sc-7w9rpt-0"
+})(["align-self:flex-start;order:0;border-radius:", ";width:", ";height:", ";", ";"], props => props.theme.borderRadii.md, props => props.theme.iconSizes.lg, props => props.theme.iconSizes.lg, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledNavItemIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledNavItemIcon };

package/dist/esm/styled/nav/StyledNavItemText.js

@@ -0,0 +1,34 @@
+/**
+* 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, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledNavItem } from './StyledNavItem.js';
+import { getNavWidth } from './StyledNav.js';
+
+const COMPONENT_ID = 'chrome.nav_item_text';
+const StyledNavItemText = styled.span.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledNavItemText",
+  componentId: "sc-13m84xl-0"
+})(["position:absolute;order:1;clip:rect(1px,1px,1px,1px);margin:", ";width:1px;height:1px;overflow:hidden;line-height:", ";white-space:", ";", " ", ";"], props => props.isExpanded && `0 ${math(`(${getNavWidth(props)} - ${props.theme.iconSizes.lg}) / 4`)}`, props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isWrapped ? 'normal' : 'nowrap', props => props.isExpanded && `
+    ${StyledNavItem} > && {
+      position: static;
+      flex: 1;
+      clip: auto;
+      width: auto;
+      height: auto;
+      text-overflow: ellipsis;
+    }
+  `, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledNavItemText.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledNavItemText };

package/dist/esm/styled/sheet/StyledSheet.js

@@ -0,0 +1,41 @@
+/**
+* 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.sheet';
+const borderStyle = _ref => {
+  let {
+    theme,
+    placement,
+    isOpen
+  } = _ref;
+  const borderColor = isOpen ? getColorV8('neutralHue', 300, theme) : 'transparent';
+  const borderSides = ['-left', '-right'];
+  let borderSide = '';
+  if (theme.rtl) {
+    borderSides.reverse();
+  }
+  if (placement === 'end') {
+    borderSide = borderSides[0];
+  } else if (placement === 'start') {
+    borderSide = borderSides[1];
+  }
+  return `border${borderSide}: ${theme.borders.sm} ${borderColor};`;
+};
+const StyledSheet = styled.aside.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledSheet",
+  componentId: "sc-dx8ijk-0"
+})(["display:flex;order:1;transition:", ";background-color:", ";width:", ";height:100%;overflow:hidden;font-size:", ";&:focus{outline:none;}", ";", ";"], props => props.isAnimated && 'width 250ms ease-in-out', props => getColorV8('background', 600 , props.theme), props => props.isOpen ? props.size : '0px', props => props.theme.fontSizes.md, props => borderStyle(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSheet.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSheet };

package/dist/esm/styled/sheet/StyledSheetBody.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.sheet_body';
+const StyledSheetBody = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledSheetBody",
+  componentId: "sc-bt4eoj-0"
+})(["flex:1;overflow-y:auto;padding:", "px;", ";"], props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSheetBody.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSheetBody };

package/dist/esm/styled/sheet/StyledSheetClose.js

@@ -0,0 +1,34 @@
+/**
+* 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, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.sheet_close';
+const BASE_MULTIPLIERS = {
+  top: 2.5,
+  side: 2,
+  size: 10
+};
+const colorStyles = props => {
+  const backgroundColor = 'primaryHue';
+  const foregroundColor = 'neutralHue';
+  return css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], getColorV8(foregroundColor, 600, props.theme), getColorV8(backgroundColor, 600, props.theme, 0.08), getColorV8(foregroundColor, 700, props.theme), focusStyles({
+    theme: props.theme
+  }), getColorV8(backgroundColor, 600, props.theme, 0.2), getColorV8(foregroundColor, 800, props.theme));
+};
+const StyledSheetClose = styled.button.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledSheetClose",
+  componentId: "sc-1ab02oq-0"
+})(["display:flex;position:absolute;top:", "px;", ":", ";align-items:center;justify-content:center;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:none;border-radius:50%;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;text-decoration:none;font-size:0;user-select:none;&::-moz-focus-inner{border:0;}", ";& > svg{vertical-align:middle;}", ";"], props => props.theme.space.base * BASE_MULTIPLIERS.top, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSheetClose.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { BASE_MULTIPLIERS, StyledSheetClose };

package/dist/esm/styled/sheet/StyledSheetDescription.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 { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.sheet_description';
+const StyledSheetDescription = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledSheetDescription",
+  componentId: "sc-1puglb6-0"
+})(["line-height:", ";color:", ";", ";"], props => getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.md), props => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSheetDescription.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSheetDescription };

package/dist/esm/styled/sheet/StyledSheetFooter.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.sheet_footer';
+const StyledSheetFooter = styled.footer.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledSheetFooter",
+  componentId: "sc-2cktos-0"
+})(["display:flex;flex-flow:row wrap;align-items:center;justify-content:", ";border-top:", ";padding:", "px;", ";"], props => props.isCompact ? 'center' : 'flex-end', props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}}`, props => props.theme.space.base * (props.isCompact ? 2.5 : 5), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSheetFooter.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSheetFooter };

package/dist/esm/styled/sheet/StyledSheetFooterItem.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.sheet_footer_item';
+const StyledSheetFooterItem = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledSheetFooterItem",
+  componentId: "sc-r9ixh-0"
+})(["", " ", ";"], props => `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 5}px;`, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSheetFooterItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSheetFooterItem };

package/dist/esm/styled/sheet/StyledSheetHeader.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 from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { BASE_MULTIPLIERS } from './StyledSheetClose.js';
+
+const COMPONENT_ID = 'chrome.sheet_header';
+const StyledSheetHeader = styled.header.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledSheetHeader",
+  componentId: "sc-o2ry8i-0"
+})(["border-bottom:", ";padding:", "px;", "  ", ";"], props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}}`, props => props.theme.space.base * 5, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS.size + BASE_MULTIPLIERS.side + 2)}px;`, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSheetHeader.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSheetHeader };

package/dist/esm/styled/sheet/StyledSheetTitle.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 { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.sheet_title';
+const StyledSheetTitle = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledSheetTitle",
+  componentId: "sc-1gogk75-0"
+})(["line-height:", ";color:", ";font-weight:", ";", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSheetTitle.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSheetTitle };

package/dist/esm/styled/sheet/StyledSheetWrapper.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 from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.sheet_wrapper';
+const StyledSheetWrapper = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledSheetWrapper",
+  componentId: "sc-f6x9zb-0"
+})(["display:flex;position:relative;flex-direction:column;transform:", ";transition:", ";min-width:", ";", ";"], props => {
+  const translateValues = [-100, 100];
+  let translation = 'translateX(0%)';
+  if (props.isOpen) {
+    return translation;
+  }
+  if (props.theme.rtl) {
+    translateValues.reverse();
+  }
+  if (props.placement === 'end') {
+    translation = `translateX(${translateValues[1]}%)`;
+  } else if (props.placement === 'start') {
+    translation = `translateX(${translateValues[0]}%)`;
+  }
+  return translation;
+}, props => props.isAnimated && 'transform 250ms ease-in-out', props => props.size, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSheetWrapper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSheetWrapper };

package/dist/esm/styled/subnav/StyledSubNav.js

@@ -0,0 +1,34 @@
+/**
+* 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, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledSubNavItem } from './StyledSubNavItem.js';
+
+const COMPONENT_ID = 'chrome.subnav';
+const colorStyles = props => {
+  let shade;
+  if (props.isLight) {
+    shade = 500;
+  } else {
+    shade = props.isDark ? 700 : 800;
+  }
+  const backgroundColor = getColorV8(props.hue, shade, props.theme);
+  const foregroundColor = props.isLight ? props.theme.palette.grey[800] : props.theme.palette.white;
+  return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
+};
+const StyledSubNav = styled.nav.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledSubNav",
+  componentId: "sc-19hjou6-0"
+})(["flex-direction:column;order:0;padding:", ";min-width:220px;overflow:auto;font-size:", ";", ";& > ", ":first-child{margin-top:0;}", ";"], props => `${props.theme.space.base * 6}px ${props.theme.space.base * 5}px`, props => props.theme.fontSizes.md, props => colorStyles(props), StyledSubNavItem, props => retrieveComponentStyles('chrome.subnav', props));
+StyledSubNav.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSubNav };