@zendeskgarden/react-chrome 8.57.0 → 8.58.0

package/dist/index.esm.js

@@ -16,225 +16,65 @@ import { getControlledValue } from '@zendeskgarden/container-utilities';
 import { useUIDSeed } from 'react-uid';
 import mergeRefs from 'react-merge-refs';
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    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 = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
 function _extends$3() {
   _extends$3 = 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$3.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  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 _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-var ChromeContext = React__default.createContext({
+const ChromeContext = React__default.createContext({
   hue: 'chromeHue'
 });
-var useChromeContext = function useChromeContext() {
+const useChromeContext = () => {
   return useContext(ChromeContext);
 };
 
-var COMPONENT_ID$A = 'chrome.chrome';
-var StyledChrome = styled.div.attrs({
+const COMPONENT_ID$A = 'chrome.chrome';
+const StyledChrome = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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';
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$A, props);
-});
+})(["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$A, props));
 StyledChrome.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$z = 'chrome.header_item_icon';
-var StyledHeaderItemIcon = styled.div.attrs({
+const COMPONENT_ID$z = 'chrome.header_item_icon';
+const StyledHeaderItemIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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;
-}, function (props) {
-  return props.theme.iconSizes.md;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$z, props);
-});
+})(["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$z, props));
 StyledHeaderItemIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$y = 'chrome.base_header_item';
-var getHeaderItemSize = function getHeaderItemSize(props) {
-  return "".concat(props.theme.space.base * 7.5, "px");
-};
-var sizeStyles$4 = function sizeStyles(props) {
-  var size = props.theme.space.base * 7.5;
-  return css(["padding:0 3px;min-width:", "px;height:", ";line-height:", ";"], size, props.maxY ? '100%' : "".concat(size, "px"), getLineHeight(size, props.theme.fontSizes.md));
+const COMPONENT_ID$y = 'chrome.base_header_item';
+const getHeaderItemSize = props => `${props.theme.space.base * 7.5}px`;
+const sizeStyles$4 = 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));
 };
-var StyledBaseHeaderItem = styled.button.attrs({
+const StyledBaseHeaderItem = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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';
-}, function (props) {
-  return "0 ".concat(props.theme.space.base * 3, "px");
-}, function (props) {
+})(["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%';
   }
@@ -242,64 +82,50 @@ var StyledBaseHeaderItem = styled.button.attrs({
     return '0';
   }
   return props.theme.borderRadii.md;
-}, sizeStyles$4, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$y, props);
-});
+}, sizeStyles$4, props => retrieveComponentStyles(COMPONENT_ID$y, props));
 StyledBaseHeaderItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$x = 'chrome.header_item_text';
-var clippedStyling = css(["position:absolute;margin:0;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
-var StyledHeaderItemText = styled.span.attrs({
+const COMPONENT_ID$x = '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$x,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledHeaderItemText",
   componentId: "sc-goz7la-0"
-})(["margin:0 3px;", " ", ";"], function (props) {
-  return props.isClipped && clippedStyling;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$x, props);
-});
+})(["margin:0 3px;", " ", ";"], props => props.isClipped && clippedStyling, props => retrieveComponentStyles(COMPONENT_ID$x, props));
 StyledHeaderItemText.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$w = 'chrome.nav';
-var colorStyles$6 = function colorStyles(props) {
-  var shade = props.isDark || props.isLight ? 600 : 700;
-  var backgroundColor = getColor(props.hue, shade, props.theme);
-  var foregroundColor = props.isLight ? props.theme.palette.grey[800] : props.theme.palette.white;
+const COMPONENT_ID$w = 'chrome.nav';
+const colorStyles$6 = props => {
+  const shade = props.isDark || props.isLight ? 600 : 700;
+  const backgroundColor = getColor(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);
 };
-var getNavWidth = function getNavWidth(props) {
-  return "".concat(props.theme.space.base * 15, "px");
+const getNavWidth = props => {
+  return `${props.theme.space.base * 15}px`;
 };
-var getExpandedNavWidth = function getExpandedNavWidth() {
-  return "200px";
+const getExpandedNavWidth = () => {
+  return `200px`;
 };
-var StyledNav = styled.nav.attrs({
+const StyledNav = styled.nav.attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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;
-}, function (props) {
-  return colorStyles$6(props);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$w, props);
-});
+})(["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$6(props), props => retrieveComponentStyles(COMPONENT_ID$w, props));
 StyledNav.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$v = 'chrome.header_item';
-var retrieveProductColor$1 = function retrieveProductColor(props) {
+const COMPONENT_ID$v = 'chrome.header_item';
+const retrieveProductColor$1 = props => {
   switch (props.product) {
     case 'chat':
       return PALETTE.product.chat;
@@ -319,133 +145,83 @@ var retrieveProductColor$1 = function retrieveProductColor(props) {
       return 'inherit';
   }
 };
-var StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({
+const StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.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:", ";}", ";"], 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");
-}, function (props) {
-  return props.theme.rtl ? 'left' : 'right';
-}, function (props) {
-  return "".concat(props.theme.borders.sm, " ").concat(getColor('neutralHue', 300, props.theme));
-}, function (props) {
-  return getNavWidth(props);
-}, function (props) {
-  return getColor('chromeHue', 700, props.theme);
-}, function (props) {
-  return retrieveProductColor$1(props);
-}, StyledHeaderItemText, clippedStyling, StyledHeaderItemIcon, function (props) {
-  return props.theme.iconSizes.lg;
-}, function (props) {
-  return props.theme.iconSizes.lg;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$v, props);
-});
+})(["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} ${getColor('neutralHue', 300, props.theme)}`, props => getNavWidth(props), props => getColor('chromeHue', 700, props.theme), props => retrieveProductColor$1(props), StyledHeaderItemText, clippedStyling, StyledHeaderItemIcon, props => props.theme.iconSizes.lg, props => props.theme.iconSizes.lg, props => retrieveComponentStyles(COMPONENT_ID$v, props));
 StyledLogoHeaderItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$u = 'chrome.base_nav_item';
-var getNavItemHeight = function getNavItemHeight(props) {
-  return "".concat(props.theme.space.base * 13, "px");
+const COMPONENT_ID$u = 'chrome.base_nav_item';
+const getNavItemHeight = props => {
+  return `${props.theme.space.base * 13}px`;
 };
-var sizeStyles$3 = function sizeStyles(props) {
-  var verticalPadding = math("(".concat(getNavItemHeight(props), " - ").concat(props.theme.iconSizes.lg, ") / 2"));
-  var horizontalPadding = math("(".concat(getNavWidth(props), " - ").concat(props.theme.iconSizes.lg, ") / 4"));
+const sizeStyles$3 = 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);
 };
-var StyledBaseNavItem = styled.button.attrs({
+const StyledBaseNavItem = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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);
-});
+})(["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;", ""], props => sizeStyles$3(props));
 StyledBaseNavItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$t = 'chrome.header';
-var getHeaderHeight = function getHeaderHeight(props) {
+const COMPONENT_ID$t = 'chrome.header';
+const getHeaderHeight = props => {
   return getNavItemHeight(props);
 };
-var StyledHeader = styled.header.attrs({
+const StyledHeader = styled.header.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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(getColor('neutralHue', 300, props.theme));
-}, function (props) {
-  return props.isStandalone && props.theme.shadows.lg('0', '10px', getColor('chromeHue', 600, props.theme, 0.15));
-}, function (props) {
-  return props.theme.colors.background;
-}, function (props) {
-  return props.theme.space.base;
-}, getHeaderHeight, function (props) {
-  return getColor('neutralHue', 600, props.theme);
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return props.isStandalone && "\n    ".concat(StyledLogoHeaderItem, " {\n      display: inline-flex;\n    }\n  ");
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$t, props);
-});
+})(["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} ${getColor('neutralHue', 300, props.theme)}`, props => props.isStandalone && props.theme.shadows.lg('0', '10px', getColor('chromeHue', 600, props.theme, 0.15)), props => props.theme.colors.background, props => props.theme.space.base, getHeaderHeight, props => getColor('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => props.isStandalone && `
+    ${StyledLogoHeaderItem} {
+      display: inline-flex;
+    }
+  `, props => retrieveComponentStyles(COMPONENT_ID$t, props));
 StyledHeader.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$s = 'chrome.skipnav';
-var animationStyles = function animationStyles() {
-  var animationName = keyframes(["0%{transform:translate(-50%,-50%);}"]);
+const COMPONENT_ID$s = '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);
 };
-var colorStyles$5 = function colorStyles(theme) {
-  var color = getColor('primaryHue', 600, theme);
-  var borderColor = getColor('neutralHue', 300, theme);
-  var boxShadow = theme.shadows.lg("".concat(theme.space.base * 5, "px"), "".concat(theme.space.base * 7, "px"), getColor('chromeHue', 600, theme, 0.15));
+const colorStyles$5 = theme => {
+  const color = getColor('primaryHue', 600, theme);
+  const borderColor = getColor('neutralHue', 300, theme);
+  const boxShadow = theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7}px`, getColor('chromeHue', 600, theme, 0.15));
   return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&:hover,&:focus{color:", ";}"], borderColor, boxShadow, theme.colors.background, color, color);
 };
-var sizeStyles$2 = function sizeStyles(props) {
-  var top = math("".concat(getHeaderHeight(props), " / 2"));
-  var padding = "".concat(props.theme.space.base * 5, "px");
-  var paddingStart = "".concat(props.theme.space.base * 4, "px");
-  var fontSize = props.theme.fontSizes.md;
-  var lineHeight = getLineHeight(padding, fontSize);
+const sizeStyles$2 = 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);
 };
-var StyledSkipNav = styled.a.attrs({
+const StyledSkipNav = styled.a.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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;
-}, function (props) {
-  return props.theme.borders.sm;
-}, function (props) {
-  return props.theme.borderRadii.md;
-}, function (props) {
-  return sizeStyles$2(props);
-}, function (props) {
-  return colorStyles$5(props.theme);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$s, props);
-});
+})(["", ";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(), props => props.theme.rtl && 'rtl', props => props.zIndex, props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => sizeStyles$2(props), props => colorStyles$5(props.theme), props => retrieveComponentStyles(COMPONENT_ID$s, props));
 StyledSkipNav.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -461,196 +237,148 @@ var SvgLinkStroke = function SvgLinkStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$2 || (_path$2 = /*#__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"
   })));
 };
 
-var COMPONENT_ID$r = 'chrome.skipnav_icon';
-var sizeStyles$1 = function sizeStyles(theme) {
-  var margin = "".concat(theme.space.base * 2, "px");
-  var size = theme.iconSizes.md;
+const COMPONENT_ID$r = 'chrome.skipnav_icon';
+const sizeStyles$1 = 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);
 };
-var StyledSkipNavIcon = styled(SvgLinkStroke).attrs({
+const StyledSkipNavIcon = styled(SvgLinkStroke).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"
-})(["transform:", ";color:", ";", ";", ";"], function (props) {
-  return props.theme.rtl && 'scaleX(-1)';
-}, function (props) {
-  return getColor('neutralHue', 600, props.theme);
-}, function (props) {
-  return sizeStyles$1(props.theme);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$r, props);
-});
+})(["transform:", ";color:", ";", ";", ";"], props => props.theme.rtl && 'scaleX(-1)', props => getColor('neutralHue', 600, props.theme), props => sizeStyles$1(props.theme), props => retrieveComponentStyles(COMPONENT_ID$r, props));
 StyledSkipNavIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$q = 'chrome.body';
-var StyledBody = styled.div.attrs({
+const COMPONENT_ID$q = 'chrome.body';
+const StyledBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-c7h9kv-0"
-})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], function (props) {
-  return getColor('neutralHue', 100, props.theme);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$q, props);
-});
+})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => getColor('neutralHue', 100, props.theme), props => retrieveComponentStyles(COMPONENT_ID$q, props));
 StyledBody.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$p = 'chrome.footer';
-var getFooterHeight = function getFooterHeight(props) {
-  return "".concat(props.theme.space.base * 20, "px");
+const COMPONENT_ID$p = 'chrome.footer';
+const getFooterHeight = props => {
+  return `${props.theme.space.base * 20}px`;
 };
-var StyledFooter = styled.footer.attrs({
+const StyledFooter = styled.footer.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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(getColor('neutralHue', 300, props.theme));
-}, function (props) {
-  return props.theme.colors.background;
-}, function (props) {
-  return props.theme.space.base * 9;
-}, getFooterHeight, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$p, props);
-});
+})(["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} ${getColor('neutralHue', 300, props.theme)}`, props => props.theme.colors.background, props => props.theme.space.base * 9, getFooterHeight, props => retrieveComponentStyles(COMPONENT_ID$p, props));
 StyledFooter.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$o = 'chrome.content';
-var StyledContent = styled.div.attrs({
+const COMPONENT_ID$o = 'chrome.content';
+const StyledContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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(math("".concat(getHeaderHeight(props), " + ").concat(getFooterHeight(props))), ")") : "calc(100% - ".concat(getHeaderHeight(props), ")");
-}, function (props) {
-  return getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md);
-}, function (props) {
-  return props.theme.colors.foreground;
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$o, props);
-});
+})(["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 => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$o, props));
 StyledContent.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$n = 'chrome.main';
-var StyledMain = styled.main.attrs({
+const COMPONENT_ID$n = 'chrome.main';
+const StyledMain = styled.main.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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 retrieveComponentStyles(COMPONENT_ID$n, props);
-});
+})(["flex:1;order:1;background-color:", ";overflow:auto;:focus{outline:none;}", ";"], props => props.theme.colors.background, props => retrieveComponentStyles(COMPONENT_ID$n, props));
 StyledMain.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$m = 'chrome.sidebar';
-var StyledSidebar = styled.aside.attrs({
+const COMPONENT_ID$m = 'chrome.sidebar';
+const StyledSidebar = styled.aside.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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(getColor('neutralHue', 300, props.theme));
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$m, props);
-});
+})(["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} ${getColor('neutralHue', 300, props.theme)}`, props => retrieveComponentStyles(COMPONENT_ID$m, props));
 StyledSidebar.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$l = 'chrome.footer_item';
-var StyledFooterItem = styled.div.attrs({
+const COMPONENT_ID$l = 'chrome.footer_item';
+const StyledFooterItem = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1cktm85-0"
-})(["margin:", ";", ";"], function (props) {
-  return "0 ".concat(props.theme.space.base, "px");
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$l, props);
-});
+})(["margin:", ";", ";"], props => `0 ${props.theme.space.base}px`, props => retrieveComponentStyles(COMPONENT_ID$l, props));
 StyledFooterItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$k = 'chrome.header_item';
-var imgStyles = function imgStyles(props) {
-  var size = math("".concat(getHeaderItemSize(props), " - ").concat(props.theme.space.base * 2));
-  return css(["img{margin:0;border-radius:", ";width:", ";height:", ";}"], math("".concat(props.theme.borderRadii.md, " - 1")), size, size);
+const COMPONENT_ID$k = '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);
 };
-var StyledHeaderItem = styled(StyledBaseHeaderItem).attrs({
+const StyledHeaderItem = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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(getColor('chromeHue', 400, props.theme, 0.35));
-},
-StyledHeaderItemIcon,
-StyledHeaderItemText,
-StyledHeaderItemIcon,
-StyledHeaderItemText, function (props) {
-  return getColor('chromeHue', 700, props.theme);
-}, function (props) {
-  return props.maxY && "\n      &[data-garden-focus-visible] {\n        box-shadow: inset ".concat(props.theme.shadows.lg(props.theme.shadowWidths.md, '0', getColor('chromeHue', 400, props.theme, 0.35)), ",\n        ").concat(props.theme.shadowWidths.md, " 0 0 0 ").concat(getColor('chromeHue', 400, props.theme, 0.35), ",\n        inset ").concat(props.theme.shadows.lg("-".concat(props.theme.shadowWidths.md), '0', getColor('chromeHue', 400, props.theme, 0.35)), ",\n        -").concat(props.theme.shadowWidths.md, " 0 0 0 ").concat(getColor('chromeHue', 400, props.theme, 0.35), ";\n      }\n  ");
-}, imgStyles, function (props) {
-  return props.isRound && "\n    ".concat(StyledHeaderItemIcon, " {\n      border-radius: 100px;\n    }\n  ");
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$k, props);
-});
+})(["&: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:", ";}", " ", " ", " ", ";"], props => props.theme.shadows.md(getColor('chromeHue', 400, props.theme, 0.35)), StyledHeaderItemIcon, StyledHeaderItemText, StyledHeaderItemIcon, StyledHeaderItemText, props => getColor('chromeHue', 700, props.theme), props => props.maxY && `
+      &[data-garden-focus-visible] {
+        box-shadow: inset ${props.theme.shadows.lg(props.theme.shadowWidths.md, '0', getColor('chromeHue', 400, props.theme, 0.35))},
+        ${props.theme.shadowWidths.md} 0 0 0 ${getColor('chromeHue', 400, props.theme, 0.35)},
+        inset ${props.theme.shadows.lg(`-${props.theme.shadowWidths.md}`, '0', getColor('chromeHue', 400, props.theme, 0.35))},
+        -${props.theme.shadowWidths.md} 0 0 0 ${getColor('chromeHue', 400, props.theme, 0.35)};
+      }
+  `, imgStyles, props => props.isRound && `
+    ${StyledHeaderItemIcon} {
+      border-radius: 100px;
+    }
+  `, props => retrieveComponentStyles(COMPONENT_ID$k, props));
 StyledHeaderItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$j = 'chrome.header_item_wrapper';
-var StyledHeaderItemWrapper = styled(StyledBaseHeaderItem).attrs({
+const COMPONENT_ID$j = 'chrome.header_item_wrapper';
+const StyledHeaderItemWrapper = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",
   componentId: "sc-1uieu55-0"
-})(["", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$j, props);
-});
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$j, props));
 StyledHeaderItemWrapper.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$i = 'chrome.logo_nav_item';
-var retrieveProductColor = function retrieveProductColor(product) {
+const COMPONENT_ID$i = 'chrome.logo_nav_item';
+const retrieveProductColor = product => {
   switch (product) {
     case 'chat':
       return PALETTE.product.chat;
@@ -670,29 +398,27 @@ var retrieveProductColor = function retrieveProductColor(product) {
       return 'inherit';
   }
 };
-var colorStyles$4 = function colorStyles(props) {
-  var fillColor = props.isLight ? props.theme.palette.grey[800] : props.theme.palette.white;
-  var color = props.isLight || props.isDark ? fillColor : retrieveProductColor(props.product);
+const colorStyles$4 = 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);
 };
-var StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
+const StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoNavItem",
   componentId: "sc-saaydx-0"
-})(["order:0;opacity:1;cursor:default;", ";"], function (props) {
-  return colorStyles$4(props);
-});
+})(["order:0;opacity:1;cursor:default;", ";"], props => colorStyles$4(props));
 StyledLogoNavItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$h = 'chrome.brandmark_nav_item';
-var StyledBrandmarkNavItem = styled(StyledBaseNavItem).attrs({
+const COMPONENT_ID$h = 'chrome.brandmark_nav_item';
+const StyledBrandmarkNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
@@ -702,32 +428,24 @@ StyledBrandmarkNavItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$g = 'chrome.nav_item_icon';
-var StyledNavItemIcon = styled.div.attrs({
+const COMPONENT_ID$g = 'chrome.nav_item_icon';
+const StyledNavItemIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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;
-}, function (props) {
-  return props.theme.iconSizes.lg;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$g, props);
-});
+})(["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$g, props));
 StyledNavItemIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$f = 'chrome.nav_item';
-var colorStyles$3 = function colorStyles(props) {
-  var BLACK = props.theme.palette.black;
-  var WHITE = props.theme.palette.white;
-  var currentColor;
-  var hoverColor;
+const COMPONENT_ID$f = 'chrome.nav_item';
+const colorStyles$3 = props => {
+  const BLACK = props.theme.palette.black;
+  const WHITE = props.theme.palette.white;
+  let currentColor;
+  let hoverColor;
   if (props.isCurrent) {
     if (props.isLight) {
       currentColor = rgba(BLACK, 0.3);
@@ -739,62 +457,53 @@ var colorStyles$3 = function colorStyles(props) {
   } else {
     hoverColor = rgba(props.isLight ? WHITE : BLACK, 0.1);
   }
-  var activeColor = rgba(props.isLight ? BLACK : WHITE, 0.1);
-  var focusColor = rgba(props.isLight ? BLACK : WHITE, 0.2);
+  const activeColor = rgba(props.isLight ? BLACK : WHITE, 0.1);
+  const focusColor = rgba(props.isLight ? BLACK : WHITE, 0.2);
   return css(["opacity:", ";background-color:", ";&:hover{opacity:1;background-color:", ";}&[data-garden-focus-visible]{opacity:1;box-shadow:inset ", ";}&:active{background-color:", ";}"], props.isCurrent ? 1 : 0.6, currentColor, hoverColor, props.theme.shadows.md(focusColor), activeColor);
 };
-var StyledNavItem = styled(StyledBaseNavItem).attrs({
+const StyledNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.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{outline:none;}", ";", " ", ";"], function (props) {
-  return props.isExpanded && 'start';
-}, function (props) {
-  return props.isCurrent ? 'default' : 'pointer';
-}, function (props) {
-  return props.isExpanded && 'inherit';
-}, function (props) {
-  return colorStyles$3(props);
-}, function (props) {
-  return props.isExpanded && "\n    ".concat(StyledNavItemIcon, " {\n      margin: 0 ").concat(math("(".concat(getNavWidth(props), " - ").concat(props.theme.iconSizes.lg, ") / 4")), ";\n    }\n  ");
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$f, props);
-});
+})(["justify-content:", ";order:1;margin:0;cursor:", ";text-align:", ";&:hover,&:focus{text-decoration:none;color:inherit;}&:focus{outline:none;}", ";", " ", ";"], props => props.isExpanded && 'start', props => props.isCurrent ? 'default' : 'pointer', props => props.isExpanded && 'inherit', props => colorStyles$3(props), props => props.isExpanded && `
+    ${StyledNavItemIcon} {
+      margin: 0 ${math(`(${getNavWidth(props)} - ${props.theme.iconSizes.lg}) / 4`)};
+    }
+  `, props => retrieveComponentStyles(COMPONENT_ID$f, props));
 StyledNavItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$e = 'chrome.nav_item_text';
-var StyledNavItemText = styled.span.attrs({
+const COMPONENT_ID$e = 'chrome.nav_item_text';
+const StyledNavItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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(math("(".concat(getNavWidth(props), " - ").concat(props.theme.iconSizes.lg, ") / 4")));
-}, function (props) {
-  return getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
-}, function (props) {
-  return props.isWrapped ? 'normal' : 'nowrap';
-}, function (props) {
-  return props.isExpanded && "\n    ".concat(StyledNavItem, " > && {\n      position: static;\n      flex: 1;\n      clip: auto;\n      width: auto;\n      height: auto;\n      text-overflow: ellipsis;\n    }\n  ");
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$e, props);
-});
+})(["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$e, props));
 StyledNavItemText.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$d = 'chrome.subnav_item';
-var colorStyles$2 = function colorStyles(props) {
-  var BLACK = props.theme.palette.black;
-  var WHITE = props.theme.palette.white;
-  var currentColor;
-  var hoverColor;
+const COMPONENT_ID$d = 'chrome.subnav_item';
+const colorStyles$2 = props => {
+  const BLACK = props.theme.palette.black;
+  const WHITE = props.theme.palette.white;
+  let currentColor;
+  let hoverColor;
   if (props.isCurrent) {
     if (props.isLight) {
       currentColor = rgba(BLACK, 0.1);
@@ -804,106 +513,74 @@ var colorStyles$2 = function colorStyles(props) {
   } else {
     hoverColor = rgba(props.isLight ? WHITE : BLACK, 0.1);
   }
-  var activeColor = rgba(props.isLight ? BLACK : WHITE, 0.03);
-  var focusColor = rgba(props.isLight ? BLACK : WHITE, 0.2);
+  const activeColor = rgba(props.isLight ? BLACK : WHITE, 0.03);
+  const focusColor = rgba(props.isLight ? BLACK : WHITE, 0.2);
   return css(["opacity:", ";background-color:", ";&:hover{opacity:1;background-color:", ";}&[data-garden-focus-visible]{opacity:1;box-shadow:", ";}&:not([data-garden-header='true']):active{background-color:", ";}"], props.isCurrent ? '1' : '0.6', currentColor, hoverColor, props.theme.shadows.md(focusColor), activeColor);
 };
-var getSubNavItemHeight = function getSubNavItemHeight(props) {
-  return "".concat(props.theme.space.base * 7.5, "px");
+const getSubNavItemHeight = props => {
+  return `${props.theme.space.base * 7.5}px`;
 };
-var StyledSubNavItem = styled.button.attrs({
+const StyledSubNavItem = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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;
-}, function (props) {
-  return props.isCurrent ? 'default' : 'pointer';
-}, function (props) {
-  return "0 ".concat(props.theme.space.base * 2, "px");
-}, getSubNavItemHeight, function (props) {
-  return colorStyles$2(props);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$d, props);
-});
+})(["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;}", ";", ";"], props => props.theme.space.base * 2, props => props.theme.borderRadii.md, props => props.isCurrent ? 'default' : 'pointer', props => `0 ${props.theme.space.base * 2}px`, getSubNavItemHeight, props => colorStyles$2(props), props => retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledSubNavItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$c = 'chrome.subnav';
-var colorStyles$1 = function colorStyles(props) {
-  var shade;
+const COMPONENT_ID$c = 'chrome.subnav';
+const colorStyles$1 = props => {
+  let shade;
   if (props.isLight) {
     shade = 500;
   } else {
     shade = props.isDark ? 700 : 800;
   }
-  var backgroundColor = getColor(props.hue, shade, props.theme);
-  var foregroundColor = props.isLight ? props.theme.palette.grey[800] : props.theme.palette.white;
+  const backgroundColor = getColor(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);
 };
-var StyledSubNav = styled.nav.attrs({
+const StyledSubNav = styled.nav.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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;
-}, function (props) {
-  return colorStyles$1(props);
-}, StyledSubNavItem, function (props) {
-  return retrieveComponentStyles('chrome.subnav', props);
-});
+})(["flex-direction:column;order:0;padding:", ";min-width:220px;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$1(props), StyledSubNavItem, props => retrieveComponentStyles('chrome.subnav', props));
 StyledSubNav.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$b = 'chrome.subnav_item_text';
-var sizeStyles = function sizeStyles(props) {
-  var baseLineHeight = props.theme.space.base * 5;
-  var verticalMargin = math("(".concat(getSubNavItemHeight(props), " - ").concat(baseLineHeight, ") / 2"));
-  var lineHeight = getLineHeight(baseLineHeight, props.theme.fontSizes.md);
+const COMPONENT_ID$b = 'chrome.subnav_item_text';
+const sizeStyles = props => {
+  const baseLineHeight = props.theme.space.base * 5;
+  const verticalMargin = math(`(${getSubNavItemHeight(props)} - ${baseLineHeight}) / 2`);
+  const lineHeight = getLineHeight(baseLineHeight, props.theme.fontSizes.md);
   return css(["margin:", " 0;line-height:", ";"], verticalMargin, lineHeight);
 };
-var StyledSubNavItemText = styled.span.attrs({
+const StyledSubNavItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$b, props);
-});
+})(["overflow:hidden;text-overflow:ellipsis;white-space:", ";", " ", ";"], props => props.isWrapped ? 'normal' : 'nowrap', props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledSubNavItemText.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$a = 'chrome.collapsible_sub_nav_item';
-var StyledSubNavItemHeader = styled(StyledSubNavItem).attrs({
+const COMPONENT_ID$a = 'chrome.collapsible_sub_nav_item';
+const StyledSubNavItemHeader = styled(StyledSubNavItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.0',
   'data-garden-header': 'true'
 }).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;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$a, props);
-});
+})(["position:relative;padding-", ":", "px;", ";"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 7, props => retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledSubNavItemHeader.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -919,88 +596,72 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$1 || (_path$1 = /*#__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"
   })));
 };
 
-var _excluded$b = ["theme", "isExpanded"];
-var COMPONENT_ID$9 = 'chrome.collapsible_sub_nav_item_icon';
-var FilteredChevronDownStrokeIcon = React__default.forwardRef(function (_ref, ref) {
-  _ref.theme;
-      _ref.isExpanded;
-      var validProps = _objectWithoutProperties(_ref, _excluded$b);
+const COMPONENT_ID$9 = 'chrome.collapsible_sub_nav_item_icon';
+const FilteredChevronDownStrokeIcon = React__default.forwardRef((_ref, ref) => {
+  let {
+    theme,
+    isExpanded,
+    ...validProps
+  } = _ref;
   return React__default.createElement(SvgChevronDownStroke, _extends$3({
     ref: ref
   }, validProps));
 });
 FilteredChevronDownStrokeIcon.displayName = 'FilteredChevronDownStrokeIcon';
-var StyledSubNavItemIcon = styled(FilteredChevronDownStrokeIcon).withConfig({
+const StyledSubNavItemIcon = styled(FilteredChevronDownStrokeIcon).withConfig({
   displayName: "StyledSubNavItemIcon",
   componentId: "sc-1d02hho-0"
-})(["width:", ";height:", ";"], function (props) {
-  return props.theme.iconSizes.sm;
-}, function (props) {
-  return props.theme.iconSizes.sm;
-});
+})(["width:", ";height:", ";"], props => props.theme.iconSizes.sm, props => props.theme.iconSizes.sm);
 StyledSubNavItemIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
-var StyledSubNavItemIconWrapper = styled.div.attrs({
+const StyledSubNavItemIconWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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;
-}, function (props) {
-  return props.theme.space.base * 7;
-}, getSubNavItemHeight, StyledSubNavItemIcon, function (props) {
+})(["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;}", ";"], props => props.theme.rtl ? 'auto' : 0, props => props.theme.rtl && 0, props => props.theme.space.base * 7, getSubNavItemHeight, StyledSubNavItemIcon, props => {
   if (props.isExpanded) {
     return css(["rotate(", "180deg)"], props.theme.rtl && '-');
   }
   return undefined;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$9, props);
-});
+}, props => retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledSubNavItemIconWrapper.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var PANEL_COMPONENT_ID = 'chrome.collapsible_sub_nav_item_panel';
-var hiddenStyling = css(["visibility:hidden;max-height:0 !important;overflow:hidden;"]);
-var StyledSubNavPanel = styled.div.attrs({
+const PANEL_COMPONENT_ID = 'chrome.collapsible_sub_nav_item_panel';
+const hiddenStyling = css(["visibility:hidden;max-height:0 !important;overflow:hidden;"]);
+const StyledSubNavPanel = styled.div.attrs({
   'data-garden-id': PANEL_COMPONENT_ID,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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';
-}, function (props) {
-  return "".concat(props.theme.space.base * 5, "px");
-}, function (props) {
-  return retrieveComponentStyles(PANEL_COMPONENT_ID, props);
-});
+})(["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-", ":", ";}", ";"], props => props.isHidden && hiddenStyling, StyledSubNavItem, props => props.theme.rtl ? 'right' : 'left', props => `${props.theme.space.base * 5}px`, props => retrieveComponentStyles(PANEL_COMPONENT_ID, props));
 StyledSubNavPanel.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$8 = 'chrome.sheet';
-var borderStyle = function borderStyle(_ref) {
-  var theme = _ref.theme,
-      placement = _ref.placement,
-      isOpen = _ref.isOpen;
-  var borderColor = isOpen ? getColor('neutralHue', 300, theme) : 'transparent';
-  var borderSides = ['-left', '-right'];
-  var borderSide = '';
+const COMPONENT_ID$8 = 'chrome.sheet';
+const borderStyle = _ref => {
+  let {
+    theme,
+    placement,
+    isOpen
+  } = _ref;
+  const borderColor = isOpen ? getColor('neutralHue', 300, theme) : 'transparent';
+  const borderSides = ['-left', '-right'];
+  let borderSide = '';
   if (theme.rtl) {
     borderSides.reverse();
   }
@@ -1009,41 +670,29 @@ var borderStyle = function borderStyle(_ref) {
   } else if (placement === 'start') {
     borderSide = borderSides[1];
   }
-  return "border".concat(borderSide, ": ").concat(theme.borders.sm, " ").concat(borderColor, ";");
+  return `border${borderSide}: ${theme.borders.sm} ${borderColor};`;
 };
-var StyledSheet = styled.aside.attrs({
+const StyledSheet = styled.aside.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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;}", ";", ";"], function (props) {
-  return props.isAnimated && 'width 250ms ease-in-out';
-}, function (props) {
-  return props.theme.colors.background;
-}, function (props) {
-  return props.isOpen ? props.size : '0px';
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return borderStyle(props);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$8, props);
-});
+})(["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 => props.theme.colors.background, props => props.isOpen ? props.size : '0px', props => props.theme.fontSizes.md, props => borderStyle(props), props => retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledSheet.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$7 = 'chrome.sheet_wrapper';
-var StyledSheetWrapper = styled.div.attrs({
+const COMPONENT_ID$7 = 'chrome.sheet_wrapper';
+const StyledSheetWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledSheetWrapper",
   componentId: "sc-f6x9zb-0"
-})(["display:flex;position:relative;flex-direction:column;transform:", ";transition:", ";min-width:", ";", ";"], function (props) {
-  var translateValues = [-100, 100];
-  var translation = 'translateX(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;
   }
@@ -1051,200 +700,140 @@ var StyledSheetWrapper = styled.div.attrs({
     translateValues.reverse();
   }
   if (props.placement === 'end') {
-    translation = "translateX(".concat(translateValues[1], "%)");
+    translation = `translateX(${translateValues[1]}%)`;
   } else if (props.placement === 'start') {
-    translation = "translateX(".concat(translateValues[0], "%)");
+    translation = `translateX(${translateValues[0]}%)`;
   }
   return translation;
-}, function (props) {
-  return props.isAnimated && 'transform 250ms ease-in-out';
-}, function (props) {
-  return props.size;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$7, props);
-});
+}, props => props.isAnimated && 'transform 250ms ease-in-out', props => props.size, props => retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledSheetWrapper.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$6 = 'chrome.sheet_title';
-var StyledSheetTitle = styled.div.attrs({
+const COMPONENT_ID$6 = 'chrome.sheet_title';
+const StyledSheetTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledSheetTitle",
   componentId: "sc-1gogk75-0"
-})(["line-height:", ";color:", ";font-weight:", ";", ";"], function (props) {
-  return getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
-}, function (props) {
-  return props.theme.colors.foreground;
-}, function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$6, props);
-});
+})(["line-height:", ";color:", ";font-weight:", ";", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledSheetTitle.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$5 = 'chrome.sheet_description';
-var StyledSheetDescription = styled.div.attrs({
+const COMPONENT_ID$5 = 'chrome.sheet_description';
+const StyledSheetDescription = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"
-})(["line-height:", ";color:", ";", ";"], function (props) {
-  return getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.md);
-}, function (props) {
-  return getColor('neutralHue', 600, props.theme);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$5, props);
-});
+})(["line-height:", ";color:", ";", ";"], props => getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.md), props => getColor('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledSheetDescription.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$4 = 'chrome.sheet_body';
-var StyledSheetBody = styled.div.attrs({
+const COMPONENT_ID$4 = 'chrome.sheet_body';
+const StyledSheetBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"
-})(["flex:1;overflow-y:auto;padding:", "px;", ";"], function (props) {
-  return props.theme.space.base * 5;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$4, props);
-});
+})(["flex:1;overflow-y:auto;padding:", "px;", ";"], props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledSheetBody.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$3 = 'chrome.sheet_close';
-var BASE_MULTIPLIERS = {
+const COMPONENT_ID$3 = 'chrome.sheet_close';
+const BASE_MULTIPLIERS = {
   top: 2.5,
   side: 2,
   size: 10
 };
-var colorStyles = function colorStyles(props) {
-  var backgroundColor = 'primaryHue';
-  var foregroundColor = 'neutralHue';
+const colorStyles = props => {
+  const backgroundColor = 'primaryHue';
+  const foregroundColor = 'neutralHue';
   return css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], getColor(foregroundColor, 600, props.theme), getColor(backgroundColor, 600, props.theme, 0.08), getColor(foregroundColor, 700, props.theme), props.theme.shadows.md(getColor(backgroundColor, 600, props.theme, 0.35)), getColor(backgroundColor, 600, props.theme, 0.2), getColor(foregroundColor, 800, props.theme));
 };
-var StyledSheetClose = styled.button.attrs({
+const StyledSheetClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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;}&:focus{outline:none;}", ";& > svg{vertical-align:middle;}", ";"], function (props) {
-  return props.theme.space.base * BASE_MULTIPLIERS.top;
-}, function (props) {
-  return props.theme.rtl ? 'left' : 'right';
-}, function (props) {
-  return "".concat(props.theme.space.base * BASE_MULTIPLIERS.side, "px");
-}, function (props) {
-  return props.theme.space.base * BASE_MULTIPLIERS.size;
-}, function (props) {
-  return props.theme.space.base * BASE_MULTIPLIERS.size;
-}, function (props) {
-  return colorStyles(props);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$3, props);
-});
+})(["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;}&:focus{outline:none;}", ";& > 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$3, props));
 StyledSheetClose.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$2 = 'chrome.sheet_footer';
-var StyledSheetFooter = styled.footer.attrs({
+const COMPONENT_ID$2 = 'chrome.sheet_footer';
+const StyledSheetFooter = styled.footer.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledSheetFooter",
   componentId: "sc-2cktos-0"
-})(["display:flex;flex-flow:row wrap;align-items:center;justify-content:", ";border-top:", ";padding:", "px;", ";"], function (props) {
-  return props.isCompact ? 'center' : 'flex-end';
-}, function (props) {
-  return "".concat(props.theme.borders.sm, " ").concat(getColor('neutralHue', 300, props.theme), "}");
-}, function (props) {
-  return props.theme.space.base * (props.isCompact ? 2.5 : 5);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$2, props);
-});
+})(["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} ${getColor('neutralHue', 300, props.theme)}}`, props => props.theme.space.base * (props.isCompact ? 2.5 : 5), props => retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledSheetFooter.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$1 = 'chrome.sheet_footer_item';
-var StyledSheetFooterItem = styled.div.attrs({
+const COMPONENT_ID$1 = 'chrome.sheet_footer_item';
+const StyledSheetFooterItem = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"
-})(["", " ", ";"], function (props) {
-  return "margin-".concat(props.theme.rtl ? 'right' : 'left', ": ").concat(props.theme.space.base * 5, "px;");
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["", " ", ";"], props => `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 5}px;`, props => retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledSheetFooterItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'chrome.sheet_header';
-var StyledSheetHeader = styled.header.attrs({
+const COMPONENT_ID = 'chrome.sheet_header';
+const StyledSheetHeader = styled.header.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"
-})(["border-bottom:", ";padding:", "px;", "  ", ";"], function (props) {
-  return "".concat(props.theme.borders.sm, " ").concat(getColor('neutralHue', 300, props.theme), "}");
-}, function (props) {
-  return props.theme.space.base * 5;
-}, function (props) {
-  return props.isCloseButtonPresent && "padding-".concat(props.theme.rtl ? 'left' : 'right', ": ").concat(props.theme.space.base * (BASE_MULTIPLIERS.size + BASE_MULTIPLIERS.side + 2), "px;");
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["border-bottom:", ";padding:", "px;", "  ", ";"], props => `${props.theme.borders.sm} ${getColor('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
 };
 
-var _excluded$a = ["hue", "isFluid"];
-var Chrome = React__default.forwardRef(function (_ref, ref) {
-  var hue = _ref.hue,
-      isFluid = _ref.isFluid,
-      props = _objectWithoutProperties(_ref, _excluded$a);
-  var theme = useContext(ThemeContext);
-  var isLightMemoized = useMemo(function () {
+const Chrome = React__default.forwardRef((_ref, ref) => {
+  let {
+    hue,
+    isFluid,
+    ...props
+  } = _ref;
+  const theme = useContext(ThemeContext);
+  const isLightMemoized = useMemo(() => {
     if (hue) {
-      var backgroundColor = getColor(hue, 600, theme);
-      var LIGHT_COLOR = 'white';
-      return readableColor(backgroundColor, LIGHT_COLOR, undefined, false
-      ) === LIGHT_COLOR;
+      const backgroundColor = getColor(hue, 600, theme);
+      const LIGHT_COLOR = 'white';
+      return readableColor(backgroundColor, LIGHT_COLOR, undefined, false ) === LIGHT_COLOR;
     }
     return false;
   }, [hue, theme]);
-  var isLight = hue ? isLightMemoized : false;
-  var isDark = hue ? !isLightMemoized : false;
-  var chromeContextValue = useMemo(function () {
-    return {
-      hue: hue || 'chromeHue',
-      isLight: isLight,
-      isDark: isDark
-    };
-  }, [hue, isLight, isDark]);
-  var environment = useDocument(theme);
-  useEffect(function () {
+  const isLight = hue ? isLightMemoized : false;
+  const isDark = hue ? !isLightMemoized : false;
+  const chromeContextValue = useMemo(() => ({
+    hue: hue || 'chromeHue',
+    isLight,
+    isDark
+  }), [hue, isLight, isDark]);
+  const environment = useDocument(theme);
+  useEffect(() => {
     if (environment && !isFluid) {
-      var htmlElement = environment.querySelector('html');
+      const htmlElement = environment.querySelector('html');
       if (htmlElement) {
-        var defaultHtmlPosition = htmlElement.style.position;
+        const defaultHtmlPosition = htmlElement.style.position;
         htmlElement.style.position = 'fixed';
-        return function () {
+        return () => {
           htmlElement.style.position = defaultHtmlPosition;
         };
       }
@@ -1262,14 +851,15 @@ Chrome.propTypes = {
   hue: PropTypes.string
 };
 
-var _excluded$9 = ["targetId", "zIndex", "children"];
-var SkipNav = React__default.forwardRef(function (_ref, ref) {
-  var targetId = _ref.targetId,
-      zIndex = _ref.zIndex,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$9);
+const SkipNav = React__default.forwardRef((_ref, ref) => {
+  let {
+    targetId,
+    zIndex,
+    children,
+    ...props
+  } = _ref;
   return React__default.createElement(StyledSkipNav, _extends$3({
-    href: "#".concat(targetId),
+    href: `#${targetId}`,
     zIndex: zIndex,
     ref: ref
   }, props), React__default.createElement(StyledSkipNavIcon, null), children);
@@ -1283,22 +873,21 @@ SkipNav.defaultProps = {
   zIndex: 1
 };
 
-var BodyContext = React__default.createContext({
+const BodyContext = React__default.createContext({
   hasFooter: true
 });
-var useBodyContext = function useBodyContext() {
+const useBodyContext = () => {
   return useContext(BodyContext);
 };
 
-var _excluded$8 = ["hasFooter"];
-var Body$1 = React__default.forwardRef(function (_ref, ref) {
-  var hasFooter = _ref.hasFooter,
-      props = _objectWithoutProperties(_ref, _excluded$8);
-  var bodyContextValue = useMemo(function () {
-    return {
-      hasFooter: !!hasFooter
-    };
-  }, [hasFooter]);
+const Body$1 = React__default.forwardRef((_ref, ref) => {
+  let {
+    hasFooter,
+    ...props
+  } = _ref;
+  const bodyContextValue = useMemo(() => ({
+    hasFooter: !!hasFooter
+  }), [hasFooter]);
   return React__default.createElement(BodyContext.Provider, {
     value: bodyContextValue
   }, React__default.createElement(StyledBody, _extends$3({
@@ -1310,9 +899,10 @@ Body$1.propTypes = {
   hasFooter: PropTypes.bool
 };
 
-var Content = React__default.forwardRef(function (props, ref) {
-  var _useBodyContext = useBodyContext(),
-      hasFooter = _useBodyContext.hasFooter;
+const Content = React__default.forwardRef((props, ref) => {
+  const {
+    hasFooter
+  } = useBodyContext();
   return React__default.createElement(StyledContent, _extends$3({
     ref: ref,
     hasFooter: hasFooter
@@ -1320,38 +910,33 @@ var Content = React__default.forwardRef(function (props, ref) {
 });
 Content.displayName = 'Content';
 
-var Main = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledMain, _extends$3({
-    ref: ref
-  }, props));
-});
+const Main = React__default.forwardRef((props, ref) => React__default.createElement(StyledMain, _extends$3({
+  ref: ref
+}, props)));
 Main.displayName = 'Main';
 
-var Sidebar = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledSidebar, _extends$3({
-    ref: ref
-  }, props));
-});
+const Sidebar = React__default.forwardRef((props, ref) => React__default.createElement(StyledSidebar, _extends$3({
+  ref: ref
+}, props)));
 Sidebar.displayName = 'Sidebar';
 
-var Header$1 = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledHeader, _extends$3({
-    ref: ref
-  }, props));
-});
+const Header$1 = React__default.forwardRef((props, ref) => React__default.createElement(StyledHeader, _extends$3({
+  ref: ref
+}, props)));
 Header$1.displayName = 'Header';
 Header$1.propTypes = {
   isStandalone: PropTypes.bool
 };
 
-var PLACEMENT = ['end', 'start'];
-var PRODUCT = ['chat', 'connect', 'explore', 'guide', 'message', 'support', 'talk'];
+const PLACEMENT = ['end', 'start'];
+const PRODUCT = ['chat', 'connect', 'explore', 'guide', 'message', 'support', 'talk'];
 
-var _excluded$7 = ["hasLogo", "product"];
-var HeaderItem = React__default.forwardRef(function (_ref, ref) {
-  var hasLogo = _ref.hasLogo,
-      product = _ref.product,
-      other = _objectWithoutProperties(_ref, _excluded$7);
+const HeaderItem = React__default.forwardRef((_ref, ref) => {
+  let {
+    hasLogo,
+    product,
+    ...other
+  } = _ref;
   if (hasLogo) {
     return React__default.createElement(StyledLogoHeaderItem, _extends$3({
       ref: ref,
@@ -1371,17 +956,22 @@ HeaderItem.propTypes = {
   hasLogo: PropTypes.bool
 };
 
-var _excluded$6 = ["children"],
-    _excluded2$1 = ["theme"];
-var HeaderItemIcon = function HeaderItemIcon(_ref) {
-  var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$6);
-  var element = Children.only(children);
+const HeaderItemIcon = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const element = Children.only(children);
   if ( isValidElement(element)) {
-    var Icon = function Icon(_ref2) {
-      _ref2.theme;
-          var iconProps = _objectWithoutProperties(_ref2, _excluded2$1);
-      return cloneElement(element, _objectSpread2(_objectSpread2({}, props), iconProps));
+    const Icon = _ref2 => {
+      let {
+        theme,
+        ...iconProps
+      } = _ref2;
+      return cloneElement(element, {
+        ...props,
+        ...iconProps
+      });
     };
     return React__default.createElement(StyledHeaderItemIcon, _extends$3({
       as: Icon
@@ -1390,54 +980,45 @@ var HeaderItemIcon = function HeaderItemIcon(_ref) {
   return null;
 };
 
-var HeaderItemText = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledHeaderItemText, _extends$3({
-    ref: ref
-  }, props));
-});
+const HeaderItemText = React__default.forwardRef((props, ref) => React__default.createElement(StyledHeaderItemText, _extends$3({
+  ref: ref
+}, props)));
 HeaderItemText.displayName = 'HeaderItemText';
 HeaderItemText.propTypes = {
   isClipped: PropTypes.bool
 };
 
-var HeaderItemWrapper = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledHeaderItemWrapper, _extends$3({
-    ref: ref
-  }, props));
-});
+const HeaderItemWrapper = React__default.forwardRef((props, ref) => React__default.createElement(StyledHeaderItemWrapper, _extends$3({
+  ref: ref
+}, props)));
 HeaderItemWrapper.displayName = 'HeaderItemWrapper';
 
-var Footer$1 = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledFooter, _extends$3({
-    ref: ref
-  }, props));
-});
+const Footer$1 = React__default.forwardRef((props, ref) => React__default.createElement(StyledFooter, _extends$3({
+  ref: ref
+}, props)));
 Footer$1.displayName = 'Footer';
 
-var FooterItem$1 = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledFooterItem, _extends$3({
-    ref: ref
-  }, props));
-});
+const FooterItem$1 = React__default.forwardRef((props, ref) => React__default.createElement(StyledFooterItem, _extends$3({
+  ref: ref
+}, props)));
 FooterItem$1.displayName = 'FooterItem';
 
-var NavContext = React__default.createContext({
+const NavContext = React__default.createContext({
   isExpanded: false
 });
-var useNavContext = function useNavContext() {
+const useNavContext = () => {
   return useContext(NavContext);
 };
 
-var Nav = React__default.forwardRef(function (props, ref) {
-  var _useChromeContext = useChromeContext(),
-      hue = _useChromeContext.hue,
-      isLight = _useChromeContext.isLight,
-      isDark = _useChromeContext.isDark;
-  var navContextValue = useMemo(function () {
-    return {
-      isExpanded: !!props.isExpanded
-    };
-  }, [props.isExpanded]);
+const Nav = React__default.forwardRef((props, ref) => {
+  const {
+    hue,
+    isLight,
+    isDark
+  } = useChromeContext();
+  const navContextValue = useMemo(() => ({
+    isExpanded: !!props.isExpanded
+  }), [props.isExpanded]);
   return React__default.createElement(NavContext.Provider, {
     value: navContextValue
   }, React__default.createElement(StyledNav, _extends$3({
@@ -1453,18 +1034,21 @@ Nav.propTypes = {
   isExpanded: PropTypes.bool
 };
 
-var _excluded$5 = ["hasLogo", "hasBrandmark", "product"];
-var NavItem = React__default.forwardRef(function (_ref, ref) {
-  var hasLogo = _ref.hasLogo,
-      hasBrandmark = _ref.hasBrandmark,
-      product = _ref.product,
-      other = _objectWithoutProperties(_ref, _excluded$5);
-  var _useChromeContext = useChromeContext(),
-      hue = _useChromeContext.hue,
-      isLight = _useChromeContext.isLight,
-      isDark = _useChromeContext.isDark;
-  var _useNavContext = useNavContext(),
-      isExpanded = _useNavContext.isExpanded;
+const NavItem = React__default.forwardRef((_ref, ref) => {
+  let {
+    hasLogo,
+    hasBrandmark,
+    product,
+    ...other
+  } = _ref;
+  const {
+    hue,
+    isLight,
+    isDark
+  } = useChromeContext();
+  const {
+    isExpanded
+  } = useNavContext();
   if (hasLogo) {
     return React__default.createElement(StyledLogoNavItem, _extends$3({
       ref: ref,
@@ -1495,17 +1079,22 @@ NavItem.propTypes = {
   isCurrent: PropTypes.bool
 };
 
-var _excluded$4 = ["children"],
-    _excluded2 = ["theme"];
-var NavItemIcon = function NavItemIcon(_ref) {
-  var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$4);
-  var element = Children.only(children);
+const NavItemIcon = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const element = Children.only(children);
   if ( isValidElement(element)) {
-    var Icon = function Icon(_ref2) {
-      _ref2.theme;
-          var iconProps = _objectWithoutProperties(_ref2, _excluded2);
-      return cloneElement(element, _objectSpread2(_objectSpread2({}, props), iconProps));
+    const Icon = _ref2 => {
+      let {
+        theme,
+        ...iconProps
+      } = _ref2;
+      return cloneElement(element, {
+        ...props,
+        ...iconProps
+      });
     };
     return React__default.createElement(StyledNavItemIcon, _extends$3({
       as: Icon
@@ -1514,9 +1103,10 @@ var NavItemIcon = function NavItemIcon(_ref) {
   return null;
 };
 
-var NavItemText = React__default.forwardRef(function (props, ref) {
-  var _useNavContext = useNavContext(),
-      isExpanded = _useNavContext.isExpanded;
+const NavItemText = React__default.forwardRef((props, ref) => {
+  const {
+    isExpanded
+  } = useNavContext();
   return React__default.createElement(StyledNavItemText, _extends$3({
     ref: ref,
     isExpanded: isExpanded
@@ -1527,11 +1117,12 @@ NavItemText.propTypes = {
   isWrapped: PropTypes.bool
 };
 
-var SubNav = React__default.forwardRef(function (props, ref) {
-  var _useChromeContext = useChromeContext(),
-      hue = _useChromeContext.hue,
-      isLight = _useChromeContext.isLight,
-      isDark = _useChromeContext.isDark;
+const SubNav = React__default.forwardRef((props, ref) => {
+  const {
+    hue,
+    isLight,
+    isDark
+  } = useChromeContext();
   return React__default.createElement(StyledSubNav, _extends$3({
     ref: ref,
     hue: hue,
@@ -1541,10 +1132,11 @@ var SubNav = React__default.forwardRef(function (props, ref) {
 });
 SubNav.displayName = 'SubNav';
 
-var SubNavItem = React__default.forwardRef(function (props, ref) {
-  var _useChromeContext = useChromeContext(),
-      isDark = _useChromeContext.isDark,
-      isLight = _useChromeContext.isLight;
+const SubNavItem = React__default.forwardRef((props, ref) => {
+  const {
+    isDark,
+    isLight
+  } = useChromeContext();
   return React__default.createElement(StyledSubNavItem, _extends$3({
     ref: ref,
     isDark: isDark,
@@ -1556,59 +1148,57 @@ SubNavItem.propTypes = {
   isCurrent: PropTypes.bool
 };
 
-var SubNavItemText = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledSubNavItemText, _extends$3({
-    ref: ref
-  }, props));
-});
+const SubNavItemText = React__default.forwardRef((props, ref) => React__default.createElement(StyledSubNavItemText, _extends$3({
+  ref: ref
+}, props)));
 SubNavItemText.displayName = 'SubNavItemText';
 SubNavItemText.propTypes = {
   isWrapped: PropTypes.bool
 };
 
-var _excluded$3 = ["header", "children", "isExpanded", "onChange"];
-var CollapsibleSubNavItem = React__default.forwardRef(function (_ref, ref) {
-  var header = _ref.header,
-      children = _ref.children,
-      controlledExpanded = _ref.isExpanded,
-      _onChange = _ref.onChange,
-      other = _objectWithoutProperties(_ref, _excluded$3);
-  var panelRef = useRef();
-  var _useState = useState(controlledExpanded),
-      _useState2 = _slicedToArray(_useState, 2),
-      internalExpanded = _useState2[0],
-      setInternalExpanded = _useState2[1];
-  var expanded = getControlledValue(controlledExpanded, internalExpanded);
-  var expandedSections = expanded ? [0] : [];
-  var _useAccordion = useAccordion({
-    expandedSections: expandedSections,
-    onChange: function onChange() {
-      var isExpanded = expandedSections.length === 0;
-      if (_onChange) {
-        _onChange(isExpanded);
+const CollapsibleSubNavItem = React__default.forwardRef((_ref, ref) => {
+  let {
+    header,
+    children,
+    isExpanded: controlledExpanded,
+    onChange,
+    ...other
+  } = _ref;
+  const panelRef = useRef();
+  const [internalExpanded, setInternalExpanded] = useState(controlledExpanded);
+  const expanded = getControlledValue(controlledExpanded, internalExpanded);
+  const expandedSections = expanded ? [0] : [];
+  const {
+    getHeaderProps,
+    getTriggerProps,
+    getPanelProps
+  } = useAccordion({
+    expandedSections,
+    onChange: () => {
+      const isExpanded = expandedSections.length === 0;
+      if (onChange) {
+        onChange(isExpanded);
       } else {
         setInternalExpanded(isExpanded);
       }
     }
-  }),
-      getHeaderProps = _useAccordion.getHeaderProps,
-      getTriggerProps = _useAccordion.getTriggerProps,
-      getPanelProps = _useAccordion.getPanelProps;
-  useEffect(function () {
+  });
+  useEffect(() => {
     if (expanded && panelRef.current) {
-      panelRef.current.style.maxHeight = "".concat(panelRef.current.scrollHeight, "px");
+      panelRef.current.style.maxHeight = `${panelRef.current.scrollHeight}px`;
     }
   }, [expanded, children]);
   return React__default.createElement("div", {
     ref: ref
   }, React__default.createElement("div", getHeaderProps({
     ariaLevel: 2
-  }), React__default.createElement(StyledSubNavItemHeader, getTriggerProps(_objectSpread2({
+  }), React__default.createElement(StyledSubNavItemHeader, getTriggerProps({
     isExpanded: expanded,
     index: 0,
     role: null,
-    tabIndex: null
-  }, other)), React__default.createElement(React__default.Fragment, null, header, React__default.createElement(StyledSubNavItemIconWrapper, {
+    tabIndex: null,
+    ...other
+  }), React__default.createElement(React__default.Fragment, null, header, React__default.createElement(StyledSubNavItemIconWrapper, {
     isExpanded: expanded
   }, React__default.createElement(StyledSubNavItemIcon, null))))), React__default.createElement(StyledSubNavPanel, getPanelProps({
     index: 0,
@@ -1624,10 +1214,10 @@ CollapsibleSubNavItem.propTypes = {
 };
 CollapsibleSubNavItem.displayName = 'CollapsibleSubNavItem';
 
-var SheetContext = createContext({
-  setIsCloseButtonPresent: function setIsCloseButtonPresent() {}
+const SheetContext = createContext({
+  setIsCloseButtonPresent() {}
 });
-var useSheetContext = function useSheetContext() {
+const useSheetContext = () => {
   return useContext(SheetContext);
 };
 
@@ -1649,86 +1239,93 @@ function activeElement(doc) {
 }
 
 function useFocusableMount(_ref) {
-  var isMounted = _ref.isMounted,
-      focusOnMount = _ref.focusOnMount,
-      restoreFocus = _ref.restoreFocus,
-      targetRef = _ref.targetRef;
-  var triggerRef = useRef();
-  useEffect(function () {
+  let {
+    isMounted,
+    focusOnMount,
+    restoreFocus,
+    targetRef
+  } = _ref;
+  const triggerRef = useRef();
+  useEffect(() => {
     if (isMounted && focusOnMount && targetRef.current) {
       triggerRef.current = activeElement();
       targetRef.current.focus();
     }
   }, [isMounted, focusOnMount, targetRef]);
-  useEffect(function () {
+  useEffect(() => {
     if (!isMounted && restoreFocus && triggerRef.current) {
       triggerRef.current.focus();
     }
   }, [isMounted, restoreFocus, triggerRef]);
 }
 
-var _excluded$2 = ["id"];
-var SheetTitle = forwardRef(function (_ref, ref) {
-  var id = _ref.id,
-      props = _objectWithoutProperties(_ref, _excluded$2);
-  var _useSheetContext = useSheetContext(),
-      titleId = _useSheetContext.titleId;
+const SheetTitle = forwardRef((_ref, ref) => {
+  let {
+    id,
+    ...props
+  } = _ref;
+  const {
+    titleId
+  } = useSheetContext();
   return React__default.createElement(StyledSheetTitle, _extends$3({
     id: id || titleId,
     ref: ref
   }, props));
 });
 SheetTitle.displayName = 'Sheet.Title';
-var Title = SheetTitle;
-
-var _excluded$1 = ["id"];
-var SheetDescription = forwardRef(function (_ref, ref) {
-  var id = _ref.id,
-      props = _objectWithoutProperties(_ref, _excluded$1);
-  var _useSheetContext = useSheetContext(),
-      descriptionId = _useSheetContext.descriptionId;
+const Title = SheetTitle;
+
+const SheetDescription = forwardRef((_ref, ref) => {
+  let {
+    id,
+    ...props
+  } = _ref;
+  const {
+    descriptionId
+  } = useSheetContext();
   return React__default.createElement(StyledSheetDescription, _extends$3({
     id: id || descriptionId,
     ref: ref
   }, props));
 });
 SheetDescription.displayName = 'Sheet.Description';
-var Description = SheetDescription;
+const Description = SheetDescription;
 
-var SheetHeader = forwardRef(function (props, ref) {
-  var _useSheetContext = useSheetContext(),
-      isCloseButtonPresent = _useSheetContext.isCloseButtonPresent;
+const SheetHeader = forwardRef((props, ref) => {
+  const {
+    isCloseButtonPresent
+  } = useSheetContext();
   return React__default.createElement(StyledSheetHeader, _extends$3({
     ref: ref,
     isCloseButtonPresent: isCloseButtonPresent
   }, props));
 });
 SheetHeader.displayName = 'Sheet.Header';
-var Header = SheetHeader;
+const Header = SheetHeader;
 
-var SheetBody = forwardRef(function (props, ref) {
+const SheetBody = forwardRef((props, ref) => {
   return React__default.createElement(StyledSheetBody, _extends$3({
     ref: ref
   }, props));
 });
 SheetBody.displayName = 'Sheet.Body';
-var Body = SheetBody;
+const Body = SheetBody;
 
-var SheetFooter = forwardRef(function (props, ref) {
+const SheetFooter = forwardRef((props, ref) => {
   return React__default.createElement(StyledSheetFooter, _extends$3({
     ref: ref
   }, props));
 });
 SheetFooter.displayName = 'Sheet.Footer';
-var Footer = SheetFooter;
+const Footer = SheetFooter;
 
-var SheetFooterItem = forwardRef(function (props, ref) {
+const SheetFooterItem = forwardRef((props, ref) => {
   return React__default.createElement(StyledSheetFooterItem, _extends$3({
     ref: ref
   }, props));
 });
 SheetFooterItem.displayName = 'Sheet.FooterItem';
-var FooterItem = SheetFooterItem;
+const FooterItem = SheetFooterItem;
 
 var _path;
 
@@ -1741,7 +1338,8 @@ var SvgXStroke = function SvgXStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -1749,14 +1347,13 @@ var SvgXStroke = function SvgXStroke(props) {
   })));
 };
 
-var SheetClose = forwardRef(function (props, ref) {
-  var _useSheetContext = useSheetContext(),
-      setIsCloseButtonPresent = _useSheetContext.setIsCloseButtonPresent;
-  useEffect(function () {
+const SheetClose = forwardRef((props, ref) => {
+  const {
+    setIsCloseButtonPresent
+  } = useSheetContext();
+  useEffect(() => {
     setIsCloseButtonPresent(true);
-    return function () {
-      return setIsCloseButtonPresent(false);
-    };
+    return () => setIsCloseButtonPresent(false);
   }, [setIsCloseButtonPresent]);
   return React__default.createElement(StyledSheetClose, _extends$3({
     "aria-label": "Close Sheet",
@@ -1764,43 +1361,37 @@ var SheetClose = forwardRef(function (props, ref) {
   }, props), React__default.createElement(SvgXStroke, null));
 });
 SheetClose.displayName = 'Sheet.Close';
-var Close = SheetClose;
-
-var _excluded = ["id", "isOpen", "isAnimated", "focusOnMount", "restoreFocus", "placement", "size", "children"];
-var SheetComponent = React__default.forwardRef(function (_ref, ref) {
-  var id = _ref.id,
-      isOpen = _ref.isOpen,
-      isAnimated = _ref.isAnimated,
-      focusOnMount = _ref.focusOnMount,
-      restoreFocus = _ref.restoreFocus,
-      placement = _ref.placement,
-      size = _ref.size,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-  var sheetRef = useRef(null);
-  var seed = useUIDSeed();
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isCloseButtonPresent = _useState2[0],
-      setIsCloseButtonPresent = _useState2[1];
-  var idPrefix = useMemo(function () {
-    return id || seed("sheet_".concat('8.57.0'));
-  }, [id, seed]);
-  var titleId = "".concat(idPrefix, "--title");
-  var descriptionId = "".concat(idPrefix, "--description");
-  var sheetContext = useMemo(function () {
-    return {
-      titleId: titleId,
-      descriptionId: descriptionId,
-      isCloseButtonPresent: isCloseButtonPresent,
-      setIsCloseButtonPresent: setIsCloseButtonPresent
-    };
-  }, [titleId, descriptionId, isCloseButtonPresent]);
+const Close = SheetClose;
+
+const SheetComponent = React__default.forwardRef((_ref, ref) => {
+  let {
+    id,
+    isOpen,
+    isAnimated,
+    focusOnMount,
+    restoreFocus,
+    placement,
+    size,
+    children,
+    ...props
+  } = _ref;
+  const sheetRef = useRef(null);
+  const seed = useUIDSeed();
+  const [isCloseButtonPresent, setIsCloseButtonPresent] = useState(false);
+  const idPrefix = useMemo(() => id || seed(`sheet_${'8.58.0'}`), [id, seed]);
+  const titleId = `${idPrefix}--title`;
+  const descriptionId = `${idPrefix}--description`;
+  const sheetContext = useMemo(() => ({
+    titleId,
+    descriptionId,
+    isCloseButtonPresent,
+    setIsCloseButtonPresent
+  }), [titleId, descriptionId, isCloseButtonPresent]);
   useFocusableMount({
     targetRef: sheetRef,
     isMounted: isOpen,
-    focusOnMount: focusOnMount,
-    restoreFocus: restoreFocus
+    focusOnMount,
+    restoreFocus
   });
   return React__default.createElement(SheetContext.Provider, {
     value: sheetContext
@@ -1836,7 +1427,7 @@ SheetComponent.defaultProps = {
   placement: 'end',
   size: '380px'
 };
-var Sheet = SheetComponent;
+const Sheet = SheetComponent;
 Sheet.Body = Body;
 Sheet.Close = Close;
 Sheet.Description = Description;