@zendeskgarden/react-chrome 8.39.0 → 8.41.0

package/dist/index.cjs.js

@@ -44,6 +44,44 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+
+    if (enumerableOnly) {
+      symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
 function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -77,40 +115,6 @@ function _extends$2() {
   return _extends$2.apply(this, arguments);
 }
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -147,18 +151,6 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
-function _taggedTemplateLiteral(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-
-  return Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
-    }
-  }));
-}
-
 function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -168,14 +160,17 @@ function _arrayWithHoles(arr) {
 }
 
 function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+  if (_i == null) return;
   var _arr = [];
   var _n = true;
   var _d = false;
-  var _e = undefined;
+
+  var _s, _e;
 
   try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
       _arr.push(_s.value);
 
       if (i && _arr.length === i) break;
@@ -222,12 +217,14 @@ var useChromeContext = function useChromeContext() {
   return React.useContext(ChromeContext);
 };
 
-var _templateObject$s;
 var COMPONENT_ID$r = 'chrome.chrome';
 var StyledChrome = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '8.39.0'
-})(_templateObject$s || (_templateObject$s = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  margin: 0;\n  height: 100vh;\n  overflow-y: hidden; /* [1] */\n  font-family: ", ";\n  direction: ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledChrome",
+  componentId: "sc-1uqm6u6-0"
+})(["display:flex;position:relative;margin:0;height:100vh;overflow-y:hidden;font-family:", ";direction:", ";", ";"], function (props) {
   return props.theme.fonts.system;
 }, function (props) {
   return props.theme.rtl && 'rtl';
@@ -238,12 +235,14 @@ StyledChrome.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$r;
 var COMPONENT_ID$q = 'chrome.header_item_icon';
 var StyledHeaderItemIcon = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '8.39.0'
-})(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n  transition: transform 0.25s ease-in-out;\n  margin: 0 3px;\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledHeaderItemIcon",
+  componentId: "sc-1jhhp6z-0"
+})(["transition:transform 0.25s ease-in-out;margin:0 3px;width:", ";min-width:", ";height:", ";", ";"], function (props) {
   return props.theme.iconSizes.md;
 }, function (props) {
   return props.theme.iconSizes.md;
@@ -256,7 +255,6 @@ StyledHeaderItemIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$q;
 var COMPONENT_ID$p = 'chrome.base_header_item';
 var getHeaderItemSize = function getHeaderItemSize(props) {
   return "".concat(props.theme.space.base * 7.5, "px");
@@ -267,8 +265,11 @@ var sizeStyles$4 = function sizeStyles(props) {
 };
 var StyledBaseHeaderItem = styled__default['default'].button.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '8.39.0'
-})(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral(["\n  display: inline-flex;\n  position: relative;\n  flex: ", ";\n  align-items: center;\n  justify-content: ", ";\n  order: 1;\n  transition: box-shadow 0.1s ease-in-out, color 0.1s ease-in-out;\n  z-index: 0; /* [1] */\n  margin: ", ";\n  border: none; /* [2] */\n  border-radius: ", ";\n  background: transparent; /* [2] */\n  text-decoration: none;\n  white-space: nowrap;\n  color: inherit;\n  font-size: inherit; /* [2] */\n\n  ", "\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.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;", " ", ";"], function (props) {
   return props.maxX && '1';
 }, function (props) {
   return props.maxX ? 'start' : 'center';
@@ -289,13 +290,15 @@ StyledBaseHeaderItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$p;
 var COMPONENT_ID$o = 'chrome.header_item_text';
 var clippedStyling = styled.css(["position:absolute;margin:0;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
 var StyledHeaderItemText = styled__default['default'].span.attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '8.39.0'
-})(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n  margin: 0 3px;\n\n  ", "\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledHeaderItemText",
+  componentId: "sc-goz7la-0"
+})(["margin:0 3px;", " ", ";"], function (props) {
   return props.isClipped && clippedStyling;
 }, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props);
@@ -304,7 +307,6 @@ StyledHeaderItemText.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$o;
 var COMPONENT_ID$n = 'chrome.nav';
 var colorStyles$5 = function colorStyles(props) {
   var shade = props.isDark || props.isLight ? 600 : 700;
@@ -320,8 +322,11 @@ var getExpandedNavWidth = function getExpandedNavWidth() {
 };
 var StyledNav = styled__default['default'].nav.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '8.39.0'
-})(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  flex-shrink: 0;\n  order: -1;\n  width: ", ";\n  font-size: ", ";\n\n  ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledNav",
+  componentId: "sc-6j462r-0"
+})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;width:", ";font-size:", ";", ";", ";"], function (props) {
   return props.isExpanded ? getExpandedNavWidth : getNavWidth;
 }, function (props) {
   return props.theme.fontSizes.md;
@@ -334,7 +339,6 @@ StyledNav.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$n;
 var COMPONENT_ID$m = 'chrome.header_item';
 var retrieveProductColor$1 = function retrieveProductColor(props) {
   switch (props.product) {
@@ -358,9 +362,12 @@ var retrieveProductColor$1 = function retrieveProductColor(props) {
 };
 var StyledLogoHeaderItem = styled__default['default'](StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.39.0',
+  'data-garden-version': '8.41.0',
   as: 'div'
-})(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n  display: none;\n  order: 0;\n  margin-right: ", ";\n  margin-left: ", ";\n  /* stylelint-disable-next-line property-no-unknown */\n  border-", ": ", ";\n  border-radius: 0;\n  padding: 0;\n  width: ", ";\n  height: 100%;\n  overflow: hidden;\n  fill: ", ";\n  text-decoration: none; /* [1] */\n  color: ", "; /* [1] */\n\n  ", " {\n    ", "\n  }\n\n  ", " {\n    margin: 0;\n    width: ", ";\n    height: ", ";\n  }\n\n  ", ";\n"])), function (props) {
+}).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:", ";}", ";"], function (props) {
   return props.theme.rtl ? "-".concat(props.theme.space.base, "px") : 'auto';
 }, function (props) {
   return props.theme.rtl ? 'auto' : "-".concat(props.theme.space.base, "px");
@@ -385,7 +392,6 @@ StyledLogoHeaderItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$m;
 var COMPONENT_ID$l = 'chrome.base_nav_item';
 var getNavItemHeight = function getNavItemHeight(props) {
   return "".concat(props.theme.space.base * 13, "px");
@@ -397,23 +403,28 @@ var sizeStyles$3 = function sizeStyles(props) {
 };
 var StyledBaseNavItem = styled__default['default'].button.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.39.0'
-})(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  /* stylelint-disable-next-line value-list-comma-newline-after */\n  transition: box-shadow 0.1s ease-in-out, background-color 0.1s ease-in-out,\n    opacity 0.1s ease-in-out;\n  border: none; /* [1] */\n  box-sizing: border-box;\n  background: transparent; /* [1] */\n  text-decoration: none; /* [2] */\n  color: inherit; /* [2] */\n  font-size: inherit; /* [1] */\n\n  ", "\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledBaseNavItem",
+  componentId: "sc-zvo43f-0"
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition: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;", ""], function (props) {
   return sizeStyles$3(props);
 });
 StyledBaseNavItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$l;
 var COMPONENT_ID$k = 'chrome.header';
 var getHeaderHeight = function getHeaderHeight(props) {
   return getNavItemHeight(props);
 };
 var StyledHeader = styled__default['default'].header.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.39.0'
-})(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n  display: flex;\n  position: ", ";\n  align-items: center;\n  justify-content: flex-end;\n  box-sizing: border-box;\n  border-bottom: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n  padding: 0 ", "px;\n  height: ", ";\n  color: ", ";\n  font-size: ", ";\n\n  ", "\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.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:", ";", " ", ";"], function (props) {
   return props.isStandalone && 'relative';
 }, function (props) {
   return "".concat(props.theme.borders.sm, " ").concat(reactTheming.getColor('neutralHue', 300, props.theme));
@@ -436,7 +447,6 @@ StyledHeader.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$k;
 var COMPONENT_ID$j = 'chrome.skipnav';
 var animationStyles = function animationStyles() {
   var animationName = styled.keyframes(["0%{transform:translate(-50%,-50%);}"]);
@@ -458,8 +468,11 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledSkipNav = styled__default['default'].a.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.39.0'
-})(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  ", ";\n\n  display: inline-flex;\n  position: absolute;\n  left: 50%;\n  align-items: center;\n  justify-content: center;\n  transform: translateX(-50%);\n  direction: ", ";\n  z-index: ", ";\n  border: ", ";\n  border-radius: ", ";\n  text-decoration: underline;\n  white-space: nowrap;\n\n  ", ";\n\n  &:focus {\n    outline: none;\n  }\n\n  ", ";\n\n  ", ";\n"])), animationStyles(), function (props) {
+  'data-garden-version': '8.41.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;", ";&:focus{outline:none;}", ";", ";"], animationStyles(), function (props) {
   return props.theme.rtl && 'rtl';
 }, function (props) {
   return props.zIndex;
@@ -496,7 +509,6 @@ function SvgLinkStroke(props) {
   }, props), _ref$1);
 }
 
-var _templateObject$j;
 var COMPONENT_ID$i = 'chrome.skipnav_icon';
 var sizeStyles$1 = function sizeStyles(theme) {
   var margin = "".concat(theme.space.base * 2, "px");
@@ -505,8 +517,11 @@ var sizeStyles$1 = function sizeStyles(theme) {
 };
 var StyledSkipNavIcon = styled__default['default'](SvgLinkStroke).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.39.0'
-})(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  transform: ", ";\n  color: ", ";\n\n  ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledSkipNavIcon",
+  componentId: "sc-1ika5z4-0"
+})(["transform:", ";color:", ";", ";", ";"], function (props) {
   return props.theme.rtl && 'scaleX(-1)';
 }, function (props) {
   return reactTheming.getColor('neutralHue', 600, props.theme);
@@ -519,12 +534,14 @@ StyledSkipNavIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$i;
 var COMPONENT_ID$h = 'chrome.body';
 var StyledBody = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.39.0'
-})(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  flex: 1;\n  order: 1;\n  background-color: ", ";\n  min-width: 0;\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledBody",
+  componentId: "sc-c7h9kv-0"
+})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], function (props) {
   return reactTheming.getColor('neutralHue', 100, props.theme);
 }, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props);
@@ -533,15 +550,17 @@ StyledBody.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$h;
 var COMPONENT_ID$g = 'chrome.footer';
 var getFooterHeight = function getFooterHeight(props) {
   return "".concat(props.theme.space.base * 20, "px");
 };
 var StyledFooter = styled__default['default'].footer.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.39.0'
-})(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  box-sizing: border-box;\n  border-top: ", ";\n  background-color: ", ";\n  padding: 0 ", "px;\n  height: ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.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:", ";", ";"], function (props) {
   return "".concat(props.theme.borders.sm, " ").concat(reactTheming.getColor('neutralHue', 300, props.theme));
 }, function (props) {
   return props.theme.colors.background;
@@ -554,12 +573,14 @@ StyledFooter.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$g;
 var COMPONENT_ID$f = 'chrome.content';
 var StyledContent = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.39.0'
-})(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n  display: flex;\n  height: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-size: ", ";\n\n  &:focus {\n    outline: none;\n  }\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledContent",
+  componentId: "sc-qcuzxn-0"
+})(["display:flex;height:", ";line-height:", ";color:", ";font-size:", ";&:focus{outline:none;}", ";"], function (props) {
   return props.hasFooter ? "calc(100% - ".concat(polished.math("".concat(getHeaderHeight(props), " + ").concat(getFooterHeight(props))), ")") : "calc(100% - ".concat(getHeaderHeight(props), ")");
 }, function (props) {
   return reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md);
@@ -574,12 +595,14 @@ StyledContent.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$f;
 var COMPONENT_ID$e = 'chrome.main';
 var StyledMain = styled__default['default'].main.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.39.0'
-})(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n  flex: 1;\n  order: 1;\n  background-color: ", ";\n  overflow: auto;\n\n  :focus {\n    outline: none;\n  }\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledMain",
+  componentId: "sc-t61cre-0"
+})(["flex:1;order:1;background-color:", ";overflow:auto;:focus{outline:none;}", ";"], function (props) {
   return props.theme.colors.background;
 }, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props);
@@ -588,12 +611,14 @@ StyledMain.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$e;
 var COMPONENT_ID$d = 'chrome.sidebar';
 var StyledSidebar = styled__default['default'].aside.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.39.0'
-})(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n  order: 0;\n  box-sizing: border-box;\n  /* stylelint-disable-next-line property-no-unknown */\n  border-", ": ", ";\n  width: 330px;\n  overflow: auto;\n\n  &:focus {\n    outline: none;\n  }\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.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;}", ";"], function (props) {
   return props.theme.rtl ? 'left' : 'right';
 }, function (props) {
   return "".concat(props.theme.borders.sm, " ").concat(reactTheming.getColor('neutralHue', 300, props.theme));
@@ -604,12 +629,14 @@ StyledSidebar.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$d;
 var COMPONENT_ID$c = 'chrome.footer_item';
 var StyledFooterItem = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.39.0'
-})(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n  margin: ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledFooterItem",
+  componentId: "sc-1cktm85-0"
+})(["margin:", ";", ";"], function (props) {
   return "0 ".concat(props.theme.space.base, "px");
 }, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props);
@@ -618,7 +645,6 @@ StyledFooterItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$c;
 var COMPONENT_ID$b = 'chrome.header_item';
 var imgStyles = function imgStyles(props) {
   var size = polished.math("".concat(getHeaderItemSize(props), " - ").concat(props.theme.space.base * 2));
@@ -626,8 +652,11 @@ var imgStyles = function imgStyles(props) {
 };
 var StyledHeaderItem = styled__default['default'](StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.39.0'
-})(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  &:hover,\n  &:focus {\n    text-decoration: none; /* [1] */\n    color: inherit; /* [1] */\n  }\n\n  &:focus {\n    outline: none; /* [1] */\n  }\n\n  &[data-garden-focus-visible] {\n    box-shadow: ", ";\n  }\n\n  &[data-garden-focus-visible]:active {\n    box-shadow: none;\n  }\n\n  /* prettier-ignore */\n  &:hover ", ",\n  &:hover ", ",\n  &:active ", ",\n  &:active ", " {\n    color: ", ";\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledHeaderItem",
+  componentId: "sc-14sft6n-0"
+})(["&:hover,&:focus{text-decoration:none;color:inherit;}&:focus{outline:none;}&[data-garden-focus-visible]{box-shadow:", ";}&[data-garden-focus-visible]:active{box-shadow:none;}&:hover ", ",&:hover ", ",&:active ", ",&:active ", "{color:", ";}", " ", " ", " ", ";"], function (props) {
   return props.theme.shadows.md(reactTheming.getColor('chromeHue', 400, props.theme, 0.35));
 },
 StyledHeaderItemIcon,
@@ -646,20 +675,21 @@ StyledHeaderItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$b;
 var COMPONENT_ID$a = 'chrome.header_item_wrapper';
 var StyledHeaderItemWrapper = styled__default['default'](StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.39.0',
+  'data-garden-version': '8.41.0',
   as: 'div'
-})(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
+}).withConfig({
+  displayName: "StyledHeaderItemWrapper",
+  componentId: "sc-1uieu55-0"
+})(["", ";"], function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props);
 });
 StyledHeaderItemWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$a;
 var COMPONENT_ID$9 = 'chrome.logo_nav_item';
 var retrieveProductColor = function retrieveProductColor(product) {
   switch (product) {
@@ -688,32 +718,39 @@ var colorStyles$3 = function colorStyles(props) {
 };
 var StyledLogoNavItem = styled__default['default'](StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.39.0',
+  'data-garden-version': '8.41.0',
   as: 'div'
-})(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n  order: 0;\n  opacity: 1;\n  cursor: default;\n\n  ", ";\n"])), function (props) {
+}).withConfig({
+  displayName: "StyledLogoNavItem",
+  componentId: "sc-saaydx-0"
+})(["order:0;opacity:1;cursor:default;", ";"], function (props) {
   return colorStyles$3(props);
 });
 StyledLogoNavItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$9;
 var COMPONENT_ID$8 = 'chrome.brandmark_nav_item';
 var StyledBrandmarkNavItem = styled__default['default'](StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.39.0',
+  'data-garden-version': '8.41.0',
   as: 'div'
-})(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n  order: 1;\n  opacity: 0.3;\n  margin-top: auto;\n"])));
+}).withConfig({
+  displayName: "StyledBrandmarkNavItem",
+  componentId: "sc-8kynd4-0"
+})(["order:1;opacity:0.3;margin-top:auto;"]);
 StyledBrandmarkNavItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$8;
 var COMPONENT_ID$7 = 'chrome.nav_item_icon';
 var StyledNavItemIcon = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.39.0'
-})(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  align-self: flex-start;\n  order: 0;\n  border-radius: ", ";\n  width: ", ";\n  height: ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledNavItemIcon",
+  componentId: "sc-7w9rpt-0"
+})(["align-self:flex-start;order:0;border-radius:", ";width:", ";height:", ";", ";"], function (props) {
   return props.theme.borderRadii.md;
 }, function (props) {
   return props.theme.iconSizes.lg;
@@ -726,7 +763,6 @@ StyledNavItemIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$7;
 var COMPONENT_ID$6 = 'chrome.nav_item';
 var colorStyles$2 = function colorStyles(props) {
   var BLACK = props.theme.palette.black;
@@ -750,9 +786,12 @@ var colorStyles$2 = function colorStyles(props) {
 };
 var StyledNavItem = styled__default['default'](StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.39.0',
+  'data-garden-version': '8.41.0',
   as: 'button'
-})(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  justify-content: ", ";\n  order: 1;\n  margin: 0; /* [2] */\n  cursor: ", ";\n  text-align: ", ";\n\n  &:hover,\n  &:focus {\n    text-decoration: none; /* [1] */\n    color: inherit; /* [1] */\n  }\n\n  &:focus {\n    outline: none; /* [1] */\n  }\n\n  ", ";\n\n  ", "\n\n  ", ";\n"])), function (props) {
+}).withConfig({
+  displayName: "StyledNavItem",
+  componentId: "sc-gs8mjz-0"
+})(["justify-content:", ";order:1;margin:0;cursor:", ";text-align:", ";&:hover,&:focus{text-decoration:none;color:inherit;}&:focus{outline:none;}", ";", " ", ";"], function (props) {
   return props.isExpanded && 'start';
 }, function (props) {
   return props.isCurrent ? 'default' : 'pointer';
@@ -769,12 +808,14 @@ StyledNavItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$6;
 var COMPONENT_ID$5 = 'chrome.nav_item_text';
 var StyledNavItemText = styled__default['default'].span.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.39.0'
-})(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  position: absolute;\n  order: 1;\n  clip: rect(1px, 1px, 1px, 1px);\n  margin: ", ";\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  line-height: ", ";\n  white-space: ", ";\n\n  ", "\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.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:", ";", " ", ";"], function (props) {
   return props.isExpanded && "0 ".concat(polished.math("(".concat(getNavWidth(props), " - ").concat(props.theme.iconSizes.lg, ") / 4")));
 }, function (props) {
   return reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
@@ -789,7 +830,6 @@ StyledNavItemText.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$5;
 var COMPONENT_ID$4 = 'chrome.subnav_item';
 var colorStyles$1 = function colorStyles(props) {
   var BLACK = props.theme.palette.black;
@@ -814,8 +854,11 @@ var getSubNavItemHeight = function getSubNavItemHeight(props) {
 };
 var StyledSubNavItem = styled__default['default'].button.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.39.0'
-})(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  /* prettier-ignore */\n  transition: box-shadow 0.1s ease-in-out,\n    background-color 0.1s ease-in-out,\n    opacity 0.1s ease-in-out;\n  margin: ", "px 0 0; /* [2] */\n  border: none; /* [2] */\n  border-radius: ", ";\n  box-sizing: border-box;\n  background: transparent; /* [2] */\n  cursor: ", "; /* [2] */\n  padding: ", ";\n  width: 100%; /* [2] */\n  min-height: ", ";\n  text-align: inherit; /* [2] */\n  font-size: inherit; /* [2] */\n\n  &,\n  &:hover,\n  &:focus {\n    text-decoration: none; /* [1] */\n    color: inherit; /* [1] */\n  }\n\n  &:focus {\n    outline: none; /* [1] */\n  }\n\n  ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledSubNavItem",
+  componentId: "sc-1yg9dpx-0"
+})(["display:flex;align-items:center;transition:box-shadow 0.1s ease-in-out,background-color 0.1s ease-in-out,opacity 0.1s ease-in-out;margin:", "px 0 0;border:none;border-radius:", ";box-sizing:border-box;background:transparent;cursor:", ";padding:", ";width:100%;min-height:", ";text-align:inherit;font-size:inherit;&,&:hover,&:focus{text-decoration:none;color:inherit;}&:focus{outline:none;}", ";", ";"], function (props) {
   return props.theme.space.base * 2;
 }, function (props) {
   return props.theme.borderRadii.md;
@@ -832,7 +875,6 @@ StyledSubNavItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$4;
 var COMPONENT_ID$3 = 'chrome.subnav';
 var colorStyles = function colorStyles(props) {
   var shade;
@@ -847,8 +889,11 @@ var colorStyles = function colorStyles(props) {
 };
 var StyledSubNav = styled__default['default'].nav.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.39.0'
-})(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  flex-direction: column;\n  order: 0;\n  padding: ", ";\n  min-width: 220px;\n  font-size: ", ";\n\n  ", ";\n\n  & > ", ":first-child {\n    margin-top: 0;\n  }\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledSubNav",
+  componentId: "sc-19hjou6-0"
+})(["flex-direction:column;order:0;padding:", ";min-width:220px;font-size:", ";", ";& > ", ":first-child{margin-top:0;}", ";"], function (props) {
   return "".concat(props.theme.space.base * 6, "px ").concat(props.theme.space.base * 5, "px");
 }, function (props) {
   return props.theme.fontSizes.md;
@@ -861,7 +906,6 @@ StyledSubNav.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$3;
 var COMPONENT_ID$2 = 'chrome.subnav_item_text';
 var sizeStyles = function sizeStyles(props) {
   var baseLineHeight = props.theme.space.base * 5;
@@ -871,8 +915,11 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledSubNavItemText = styled__default['default'].span.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.39.0'
-})(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: ", ";\n\n  ", "\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledSubNavItemText",
+  componentId: "sc-1hy0pn7-0"
+})(["overflow:hidden;text-overflow:ellipsis;white-space:", ";", " ", ";"], function (props) {
   return props.isWrapped ? 'normal' : 'nowrap';
 }, function (props) {
   return sizeStyles(props);
@@ -883,13 +930,15 @@ StyledSubNavItemText.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$2;
 var COMPONENT_ID$1 = 'chrome.collapsible_sub_nav_item';
 var StyledSubNavItemHeader = styled__default['default'](StyledSubNavItem).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.39.0',
+  'data-garden-version': '8.41.0',
   'data-garden-header': 'true'
-})(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  position: relative;\n  /* stylelint-disable-next-line property-no-unknown */\n  padding-", ": ", "px;\n\n  ", ";\n"])), function (props) {
+}).withConfig({
+  displayName: "StyledSubNavItemHeader",
+  componentId: "sc-1vniter-0"
+})(["position:relative;padding-", ":", "px;", ";"], function (props) {
   return props.theme.rtl ? 'left' : 'right';
 }, function (props) {
   return props.theme.space.base * 7;
@@ -918,7 +967,6 @@ function SvgChevronDownStroke(props) {
   }, props), _ref);
 }
 
-var _templateObject$1, _templateObject2;
 var _excluded$8 = ["theme", "isExpanded"];
 var COMPONENT_ID = 'chrome.collapsible_sub_nav_item_icon';
 var FilteredChevronDownStrokeIcon = React__default['default'].forwardRef(function (_ref, ref) {
@@ -930,7 +978,10 @@ var FilteredChevronDownStrokeIcon = React__default['default'].forwardRef(functio
   }, validProps));
 });
 FilteredChevronDownStrokeIcon.displayName = 'FilteredChevronDownStrokeIcon';
-var StyledSubNavItemIcon = styled__default['default'](FilteredChevronDownStrokeIcon)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n"])), function (props) {
+var StyledSubNavItemIcon = styled__default['default'](FilteredChevronDownStrokeIcon).withConfig({
+  displayName: "StyledSubNavItemIcon",
+  componentId: "sc-1d02hho-0"
+})(["width:", ";height:", ";"], function (props) {
   return props.theme.iconSizes.sm;
 }, function (props) {
   return props.theme.iconSizes.sm;
@@ -940,8 +991,11 @@ StyledSubNavItemIcon.defaultProps = {
 };
 var StyledSubNavItemIconWrapper = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.39.0'
-})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: ", ";\n  left: ", ";\n  align-items: center;\n  justify-content: center;\n  width: ", "px;\n  height: ", ";\n\n  ", " {\n    transform: ", ";\n    transition: transform 0.25s ease-in-out;\n  }\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledSubNavItemIcon__StyledSubNavItemIconWrapper",
+  componentId: "sc-1d02hho-1"
+})(["display:flex;position:absolute;top:0;right:", ";left:", ";align-items:center;justify-content:center;width:", "px;height:", ";", "{transform:", ";transition:transform 0.25s ease-in-out;}", ";"], function (props) {
   return props.theme.rtl ? 'auto' : 0;
 }, function (props) {
   return props.theme.rtl && 0;
@@ -959,13 +1013,15 @@ StyledSubNavItemIconWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject;
 var PANEL_COMPONENT_ID = 'chrome.collapsible_sub_nav_item_panel';
 var hiddenStyling = styled.css(["visibility:hidden;max-height:0 !important;overflow:hidden;"]);
 var StyledSubNavPanel = styled__default['default'].div.attrs({
   'data-garden-id': PANEL_COMPONENT_ID,
-  'data-garden-version': '8.39.0'
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* stylelint-disable-next-line max-line-length */\n  transition: max-height 0.25s cubic-bezier(0.15, 0.85, 0.35, 1.2), 0.25s visibility 0s linear;\n  height: auto;\n  max-height: 100%;\n\n  ", "\n\n  ", " {\n    /* stylelint-disable-next-line property-no-unknown */\n    padding-", ": ", ";\n  }\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledSubNavPanel",
+  componentId: "sc-1jv3rpv-0"
+})(["transition:max-height 0.25s cubic-bezier(0.15,0.85,0.35,1.2),0.25s visibility 0s linear;height:auto;max-height:100%;", " ", "{padding-", ":", ";}", ";"], function (props) {
   return props.isHidden && hiddenStyling;
 }, StyledSubNavItem, function (props) {
   return props.theme.rtl ? 'right' : 'left';