@zendeskgarden/react-typography 8.57.0 → 8.58.0

package/dist/index.cjs.js

@@ -28,99 +28,27 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
 }
 
-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 _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-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];
+const HUE = ['grey', 'red', 'green', 'yellow'];
+const SIZE = ['small', 'medium', 'large'];
+const INHERIT_SIZE = ['inherit', ...SIZE];
+const TYPE_ORDERED_LIST = ['decimal', 'decimal-leading-zero', 'lower-alpha', 'lower-roman', 'upper-alpha', 'upper-roman'];
+const TYPE_UNORDERED_LIST = ['circle', 'disc', 'square'];
+const LANGUAGES = ['markup', 'bash', 'clike', 'c', 'cpp', 'css', 'javascript', 'jsx', 'coffeescript', 'actionscript', 'css-extr', 'diff', 'git', 'go', 'graphql', 'handlebars', 'json', 'less', 'makefile', 'markdown', 'objectivec', 'ocaml', 'python', 'reason', 'sass', 'scss', 'sql', 'stylus', 'tsx', 'typescript', 'wasm', 'yaml'];
 
-  return arr2;
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-var HUE = ['grey', 'red', 'green', 'yellow'];
-var SIZE = ['small', 'medium', 'large'];
-var INHERIT_SIZE = ['inherit'].concat(SIZE);
-var TYPE_ORDERED_LIST = ['decimal', 'decimal-leading-zero', 'lower-alpha', 'lower-roman', 'upper-alpha', 'upper-roman'];
-var TYPE_UNORDERED_LIST = ['circle', 'disc', 'square'];
-var LANGUAGES = ['markup', 'bash', 'clike', 'c', 'cpp', 'css', 'javascript', 'jsx', 'coffeescript', 'actionscript', 'css-extr', 'diff', 'git', 'go', 'graphql', 'handlebars', 'json', 'less', 'makefile', 'markdown', 'objectivec', 'ocaml', 'python', 'reason', 'sass', 'scss', 'sql', 'stylus', 'tsx', 'typescript', 'wasm', 'yaml'];
-
-var COMPONENT_ID$9 = 'typography.font';
-var TYPOGRAPHY_SIZE = [].concat(_toConsumableArray(SIZE), ['extralarge', '2xlarge', '3xlarge']);
-['inherit'].concat(_toConsumableArray(TYPOGRAPHY_SIZE));
-var THEME_SIZES = {
+const COMPONENT_ID$9 = 'typography.font';
+[...SIZE, 'extralarge', '2xlarge', '3xlarge'];
+const THEME_SIZES = {
   small: 'sm',
   medium: 'md',
   large: 'lg',
@@ -128,27 +56,27 @@ var THEME_SIZES = {
   '2xlarge': 'xxl',
   '3xlarge': 'xxxl'
 };
-var fontStyles = function fontStyles(props) {
-  var monospace = props.isMonospace && ['inherit', 'small', 'medium', 'large'].indexOf(props.size) !== -1;
-  var fontFamily = monospace && props.theme.fonts.mono;
-  var direction = props.theme.rtl ? 'rtl' : 'ltr';
-  var fontSize;
-  var fontWeight;
-  var lineHeight;
-  var color;
+const fontStyles = props => {
+  const monospace = props.isMonospace && ['inherit', 'small', 'medium', 'large'].indexOf(props.size) !== -1;
+  const fontFamily = monospace && props.theme.fonts.mono;
+  const direction = props.theme.rtl ? 'rtl' : 'ltr';
+  let fontSize;
+  let fontWeight;
+  let lineHeight;
+  let color;
   if (monospace) {
     if (props.size === 'inherit') {
       fontSize = 'calc(1em - 1px)';
       lineHeight = 'normal';
     } else {
-      var themeSize = THEME_SIZES[props.size];
-      fontSize = polished.math("".concat(props.theme.fontSizes[themeSize], " - 1px"));
-      lineHeight = polished.math("".concat(props.theme.lineHeights[themeSize], " - 1px"));
+      const themeSize = THEME_SIZES[props.size];
+      fontSize = polished.math(`${props.theme.fontSizes[themeSize]} - 1px`);
+      lineHeight = polished.math(`${props.theme.lineHeights[themeSize]} - 1px`);
     }
   } else if (props.size !== 'inherit') {
-    var _themeSize = THEME_SIZES[props.size];
-    fontSize = props.theme.fontSizes[_themeSize];
-    lineHeight = props.theme.lineHeights[_themeSize];
+    const themeSize = THEME_SIZES[props.size];
+    fontSize = props.theme.fontSizes[themeSize];
+    lineHeight = props.theme.lineHeights[themeSize];
   }
   if (props.isBold === true) {
     fontWeight = props.theme.fontWeights.semibold;
@@ -156,77 +84,51 @@ var fontStyles = function fontStyles(props) {
     fontWeight = props.theme.fontWeights.regular;
   }
   if (props.hue) {
-    var shade = props.hue === 'yellow' ? 700 : 600;
+    const shade = props.hue === 'yellow' ? 700 : 600;
     color = reactTheming.getColor(props.hue, shade, props.theme);
   }
   return styled.css(["line-height:", ";color:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, color, fontFamily, fontSize, fontWeight, direction);
 };
-var StyledFont = styled__default["default"].div.attrs({
+const StyledFont = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
-})(["", ";", ";"], function (props) {
-  return fontStyles(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props);
-});
+})(["", ";", ";"], props => fontStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledFont.defaultProps = {
   theme: reactTheming.DEFAULT_THEME,
   size: 'inherit'
 };
 
-var COMPONENT_ID$8 = 'typography.blockquote';
-var StyledBlockquote = styled__default["default"].blockquote.attrs({
+const COMPONENT_ID$8 = 'typography.blockquote';
+const StyledBlockquote = styled__default["default"].blockquote.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
-})(["margin:0;border-", ":", " solid;border-color:", ";padding:0;padding-", ":", "px;direction:", ";p + &,& + &{margin-top:", ";}", ";"], function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return props.theme.shadowWidths.sm;
-}, function (props) {
-  return reactTheming.getColor('neutralHue', 400, props.theme);
-}, function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return props.theme.space.base * 4;
-}, function (props) {
-  return props.theme.rtl ? 'rtl' : 'ltr';
-}, function (props) {
-  return props.theme.lineHeights[THEME_SIZES[props.size]];
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props);
-});
+})(["margin:0;border-", ":", " solid;border-color:", ";padding:0;padding-", ":", "px;direction:", ";p + &,& + &{margin-top:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.shadowWidths.sm, props => reactTheming.getColor('neutralHue', 400, props.theme), props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 4, props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.lineHeights[THEME_SIZES[props.size]], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledBlockquote.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$7 = 'typography.code';
-var colorStyles$3 = function colorStyles(props) {
-  var hue = props.hue || 'neutralHue';
-  var backgroundColor = reactTheming.getColor(hue, 200, props.theme);
-  var shade = hue === 'yellow' ? 800 : 700;
-  var foregroundColor = reactTheming.getColor(hue, shade, props.theme);
+const COMPONENT_ID$7 = 'typography.code';
+const colorStyles$3 = props => {
+  const hue = props.hue || 'neutralHue';
+  const backgroundColor = reactTheming.getColor(hue, 200, props.theme);
+  const shade = hue === 'yellow' ? 800 : 700;
+  const foregroundColor = reactTheming.getColor(hue, shade, props.theme);
   return styled.css(["background-color:", ";color:", ";a &{color:inherit;}"], backgroundColor, foregroundColor);
 };
-var StyledCode = styled__default["default"](StyledFont).attrs({
+const StyledCode = styled__default["default"](StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.0',
   as: 'code'
 }).withConfig({
   displayName: "StyledCode",
   componentId: "sc-l8yvmf-0"
-})(["border-radius:", ";padding:1.5px;", ";", ";"], function (props) {
-  return props.theme.borderRadii.sm;
-}, function (props) {
-  return colorStyles$3(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props);
-});
+})(["border-radius:", ";padding:1.5px;", ";", ";"], props => props.theme.borderRadii.sm, props => colorStyles$3(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledCode.defaultProps = {
   theme: reactTheming.DEFAULT_THEME,
   isMonospace: true,
@@ -234,50 +136,40 @@ StyledCode.defaultProps = {
   size: 'inherit'
 };
 
-var COMPONENT_ID$6 = 'typography.codeblock';
-var colorStyles$2 = function colorStyles(props) {
-  var backgroundColor = reactTheming.getColor('neutralHue', props.isLight ? 100 : 1000, props.theme);
-  var foregroundColor = props.isLight ? props.theme.colors.foreground : reactTheming.getColor('neutralHue', 300, props.theme);
+const COMPONENT_ID$6 = 'typography.codeblock';
+const colorStyles$2 = props => {
+  const backgroundColor = reactTheming.getColor('neutralHue', props.isLight ? 100 : 1000, props.theme);
+  const foregroundColor = props.isLight ? props.theme.colors.foreground : reactTheming.getColor('neutralHue', 300, props.theme);
   return styled.css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
-var StyledCodeBlock = styled__default["default"].pre.attrs({
+const StyledCodeBlock = styled__default["default"].pre.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"
-})(["display:table;margin:0;padding:", "px;box-sizing:border-box;width:100%;direction:ltr;white-space:pre;counter-reset:linenumber;", ";", ";"], function (props) {
-  return props.theme.space.base * 3;
-}, function (props) {
-  return colorStyles$2(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props);
-});
+})(["display:table;margin:0;padding:", "px;box-sizing:border-box;width:100%;direction:ltr;white-space:pre;counter-reset:linenumber;", ";", ";"], props => props.theme.space.base * 3, props => colorStyles$2(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledCodeBlock.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$5 = 'typography.codeblock_container';
-var StyledCodeBlockContainer = styled__default["default"].div.attrs({
+const COMPONENT_ID$5 = 'typography.codeblock_container';
+const StyledCodeBlockContainer = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
-})(["overflow:auto;&:focus{outline:none;}&[data-garden-focus-visible]{box-shadow:", ";}", ";"], function (props) {
-  return props.theme.shadows.md(reactTheming.getColor('primaryHue', 600, props.theme, 0.35));
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props);
-});
+})(["overflow:auto;&:focus{outline:none;}&[data-garden-focus-visible]{box-shadow:", ";}", ";"], props => props.theme.shadows.md(reactTheming.getColor('primaryHue', 600, props.theme, 0.35)), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledCodeBlockContainer.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$4 = 'typography.codeblock_code';
-var colorStyles$1 = function colorStyles(props) {
-  var backgroundColor;
+const COMPONENT_ID$4 = 'typography.codeblock_code';
+const colorStyles$1 = props => {
+  let backgroundColor;
   if (props.diff) {
-    var hue;
+    let hue;
     switch (props.diff) {
       case 'hunk':
         hue = 'royal';
@@ -294,14 +186,14 @@ var colorStyles$1 = function colorStyles(props) {
     }
     backgroundColor = reactTheming.getColor(hue, 400, props.theme, 0.2);
   } else if (props.isHighlighted) {
-    var _hue = props.isLight ? props.theme.palette.black : props.theme.palette.white;
-    backgroundColor = reactTheming.getColor(_hue, 600, props.theme, 0.1);
+    const hue = props.isLight ? props.theme.palette.black : props.theme.palette.white;
+    backgroundColor = reactTheming.getColor(hue, 600, props.theme, 0.1);
   }
   return styled.css(["background-color:", ";"], backgroundColor);
 };
-var lineNumberStyles = function lineNumberStyles(props) {
-  var color = reactTheming.getColor('neutralHue', props.isLight ? 600 : 500, props.theme);
-  var padding;
+const lineNumberStyles = props => {
+  const color = reactTheming.getColor('neutralHue', props.isLight ? 600 : 500, props.theme);
+  let padding;
   if (props.language && props.language === 'diff') {
     padding = 0;
   } else if (props.size === 'small') {
@@ -311,35 +203,35 @@ var lineNumberStyles = function lineNumberStyles(props) {
   } else {
     padding = props.theme.space.base * 6;
   }
-  return "\n    &::before {\n      display: table-cell;\n      padding-right: ".concat(padding, "px;\n      width: 1px;\n      text-align: right;\n      color: ").concat(color, ";\n      content: counter(linenumber);\n      counter-increment: linenumber;\n    }\n  ");
+  return `
+    &::before {
+      display: table-cell;
+      padding-right: ${padding}px;
+      width: 1px;
+      text-align: right;
+      color: ${color};
+      content: counter(linenumber);
+      counter-increment: linenumber;
+    }
+  `;
 };
-var StyledCodeBlockLine = styled__default["default"](StyledFont).attrs({
+const StyledCodeBlockLine = styled__default["default"](StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.0',
   as: 'code',
   isMonospace: true
 }).withConfig({
   displayName: "StyledCodeBlockLine",
   componentId: "sc-1goay17-0"
-})(["display:table-row;height:", ";direction:ltr;", ";", ";&::after{display:inline-block;width:", "px;content:'';}", ";"], function (props) {
-  return props.theme.lineHeights[THEME_SIZES[props.size]];
-}, function (props) {
-  return colorStyles$1(props);
-}, function (props) {
-  return props.isNumbered && lineNumberStyles(props);
-}, function (props) {
-  return props.theme.space.base * 3;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props);
-});
+})(["display:table-row;height:", ";direction:ltr;", ";", ";&::after{display:inline-block;width:", "px;content:'';}", ";"], props => props.theme.lineHeights[THEME_SIZES[props.size]], props => colorStyles$1(props), props => props.isNumbered && lineNumberStyles(props), props => props.theme.space.base * 3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledCodeBlockLine.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$3 = 'typography.codeblock_token';
-var colorStyles = function colorStyles(props) {
-  var palette = props.theme.palette;
-  var colors = {
+const COMPONENT_ID$3 = 'typography.codeblock_token';
+const colorStyles = props => {
+  const palette = props.theme.palette;
+  const colors = {
     boolean: props.isLight ? palette.royal[600] : palette.azure[400],
     builtin: palette.teal[400],
     comment: props.isLight ? palette.lime[600] : palette.mint[400],
@@ -358,174 +250,132 @@ var colorStyles = function colorStyles(props) {
   };
   return styled.css(["&.builtin,&.class-name,&.tag:not(.punctuation):not(.attr-name):not(.attr-value):not(.script){color:", ";}&.doctype,&.prolog,&.tag.punctuation:not(.attr-value):not(.script):not(.spread){color:", ";}&.attribute.value,&.attr-value,&.atrule,&.cdata,&.string,&.url.content{color:", ";}&.constant,&.interpolation-punctuation{color:", ";}&.attr-name,&.attr-value.spread,&.environment,&.interpolation,&.parameter,&.property,&.property-access,&.variable{color:", ";}&.parameter.punctuation,&.attr-name + .attr-value.punctuation{color:inherit;}&.regex{color:", ";}&.boolean,&.bold:not(.diff),&.entity,&.important,&.tag:not(.punctuation):not(.attr-name):not(.attr-value):not(.script):not(.class-name){color:", ";}&.number,&.unit{color:", ";}&.assign-left,&.function,&.selector:not(.attribute){color:", ";}&.atrule.rule,&.keyword{color:", ";}&.blockquote,&.comment,&.shebang{color:", ";}", ".language-css &&.plain{color:", ";}", ".language-diff &&.coord{color:", ";}", ".language-diff &&.deleted{color:", ";}", ".language-diff &&.diff{color:", ";}", ".language-diff &&.inserted{color:", ";}"], colors.builtin, colors.punctuation, colors.value, colors.constant, colors.name, colors.regex, colors.boolean, colors.number, colors.function, colors.keyword, colors.comment, StyledCodeBlock, colors.value, StyledCodeBlock, colors.coord, StyledCodeBlock, colors.deleted, StyledCodeBlock, colors.diff, StyledCodeBlock, colors.inserted);
 };
-var StyledCodeBlockToken = styled__default["default"].span.attrs({
+const StyledCodeBlockToken = styled__default["default"].span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
-})(["display:inline-block;&.bold:not(.diff){font-weight:", ";}&.coord{padding-left:0.75em;}&.italic{font-style:italic;}&.prefix{width:2em;text-align:center;}", ";", ";"], function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return colorStyles(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
-});
+})(["display:inline-block;&.bold:not(.diff){font-weight:", ";}&.coord{padding-left:0.75em;}&.italic{font-style:italic;}&.prefix{width:2em;text-align:center;}", ";", ";"], props => props.theme.fontWeights.semibold, props => colorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledCodeBlockToken.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$2 = 'typography.ellipsis';
-var StyledEllipsis = styled__default["default"].div.attrs({
+const COMPONENT_ID$2 = 'typography.ellipsis';
+const StyledEllipsis = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
-})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:", ";", ";"], function (props) {
-  return props.theme.rtl ? 'rtl' : 'ltr';
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props);
-});
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledEllipsis.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _excluded$c = ["children", "isStart"];
-var COMPONENT_ID$1 = 'typography.icon';
-var sizeStyles = function sizeStyles(props) {
-  var margin = props.isStart && "".concat(props.theme.space.base * 2, "px");
-  var size = props.theme.iconSizes.md;
+const COMPONENT_ID$1 = 'typography.icon';
+const sizeStyles = props => {
+  const margin = props.isStart && `${props.theme.space.base * 2}px`;
+  const size = props.theme.iconSizes.md;
   return styled.css(["margin-", ":", ";width:", ";height:", ";"], props.theme.rtl ? 'left' : 'right', margin, size, size);
 };
-var StyledIcon = styled__default["default"](function (_ref) {
-  var children = _ref.children;
-      _ref.isStart;
-      var props = _objectWithoutProperties(_ref, _excluded$c);
+const StyledIcon = styled__default["default"](_ref => {
+  let {
+    children,
+    isStart,
+    ...props
+  } = _ref;
   return React__default["default"].cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
-})(["position:relative;top:-1px;vertical-align:middle;", ";", ";"], function (props) {
-  return sizeStyles(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["position:relative;top:-1px;vertical-align:middle;", ";", ";"], props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var listStyles = function listStyles(props) {
-  var rtl = props.theme.rtl;
+const listStyles = props => {
+  const rtl = props.theme.rtl;
   return styled.css(["direction:", ";margin:0;margin-", ":24px;padding:0;list-style-position:outside;list-style-type:", ";"], rtl ? 'rtl' : 'ltr', rtl ? 'right' : 'left', props.listType);
 };
-var ORDERED_ID$1 = 'typography.ordered_list';
-var StyledOrderedList = styled__default["default"].ol.attrs({
+const ORDERED_ID$1 = 'typography.ordered_list';
+const StyledOrderedList = styled__default["default"].ol.attrs({
   'data-garden-id': ORDERED_ID$1,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
-})(["", ";", ";"], function (props) {
-  return listStyles(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(ORDERED_ID$1, props);
-});
+})(["", ";", ";"], props => listStyles(props), props => reactTheming.retrieveComponentStyles(ORDERED_ID$1, props));
 StyledOrderedList.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var UNORDERED_ID$1 = 'typography.unordered_list';
-var StyledUnorderedList = styled__default["default"].ul.attrs({
+const UNORDERED_ID$1 = 'typography.unordered_list';
+const StyledUnorderedList = styled__default["default"].ul.attrs({
   'data-garden-id': UNORDERED_ID$1,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
-})(["", ";", ";"], function (props) {
-  return listStyles(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(UNORDERED_ID$1, props);
-});
+})(["", ";", ";"], props => listStyles(props), props => reactTheming.retrieveComponentStyles(UNORDERED_ID$1, props));
 StyledUnorderedList.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var listItemPaddingStyles = function listItemPaddingStyles(props) {
-  var base = props.theme.space.base;
-  var paddingTop = props.space === 'large' ? "".concat(base * 2, "px") : "".concat(base, "px");
+const listItemPaddingStyles = props => {
+  const base = props.theme.space.base;
+  const paddingTop = props.space === 'large' ? `${base * 2}px` : `${base}px`;
   return styled.css(["padding-top:", ";", " > &:first-child,", " > &:first-child{padding-top:0;}", " ", " > &:first-child,", " ", " > &:first-child,", " ", " > &:first-child,", " ", " > &:first-child{padding-top:", ";}"], paddingTop, StyledOrderedList, StyledUnorderedList, StyledOrderedList, StyledOrderedList, StyledOrderedList, StyledUnorderedList, StyledUnorderedList, StyledUnorderedList, StyledUnorderedList, StyledUnorderedList, paddingTop);
 };
-var listItemStyles = function listItemStyles(props) {
+const listItemStyles = props => {
   return styled.css(["line-height:", ";", ";"], reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props.space !== 'small' && listItemPaddingStyles(props));
 };
-var ORDERED_ID = 'typography.ordered_list_item';
-var StyledOrderedListItem = styled__default["default"](StyledFont).attrs({
+const ORDERED_ID = 'typography.ordered_list_item';
+const StyledOrderedListItem = styled__default["default"](StyledFont).attrs({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
   componentId: "sc-9rsipg-0"
-})(["margin-", ":", ";padding-", ":", ";", ";", ";"], function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return polished.math("".concat(props.theme.space.base, " * -1px"));
-}, function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return polished.math("".concat(props.theme.space.base, " * 1px"));
-}, function (props) {
-  return listItemStyles(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(ORDERED_ID, props);
-});
+})(["margin-", ":", ";padding-", ":", ";", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * -1px`), props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 1px`), props => listItemStyles(props), props => reactTheming.retrieveComponentStyles(ORDERED_ID, props));
 StyledOrderedListItem.defaultProps = {
   space: 'medium',
   theme: reactTheming.DEFAULT_THEME
 };
-var UNORDERED_ID = 'typography.unordered_list_item';
-var StyledUnorderedListItem = styled__default["default"](StyledFont).attrs({
+const UNORDERED_ID = 'typography.unordered_list_item';
+const StyledUnorderedListItem = styled__default["default"](StyledFont).attrs({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
   componentId: "sc-9rsipg-1"
-})(["", ";", ";"], function (props) {
-  return listItemStyles(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(UNORDERED_ID, props);
-});
+})(["", ";", ";"], props => listItemStyles(props), props => reactTheming.retrieveComponentStyles(UNORDERED_ID, props));
 StyledUnorderedListItem.defaultProps = {
   space: 'medium',
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'typography.paragraph';
-var StyledParagraph = styled__default["default"].p.attrs({
+const COMPONENT_ID = 'typography.paragraph';
+const StyledParagraph = styled__default["default"].p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"
-})(["margin:0;padding:0;direction:", ";blockquote + &,& + &{margin-top:", ";}", ";"], function (props) {
-  return props.theme.rtl ? 'rtl' : 'ltr';
-}, function (props) {
-  return props.theme.lineHeights[THEME_SIZES[props.size]];
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["margin:0;padding:0;direction:", ";blockquote + &,& + &{margin-top:", ";}", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.lineHeights[THEME_SIZES[props.size]], props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledParagraph.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _excluded$b = ["tag"];
-var SM = React.forwardRef(function (_ref, ref) {
-  var tag = _ref.tag,
-      other = _objectWithoutProperties(_ref, _excluded$b);
+const SM = React.forwardRef((_ref, ref) => {
+  let {
+    tag,
+    ...other
+  } = _ref;
   return React__default["default"].createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
@@ -542,10 +392,11 @@ SM.defaultProps = {
   tag: 'div'
 };
 
-var _excluded$a = ["tag"];
-var MD = React.forwardRef(function (_ref, ref) {
-  var tag = _ref.tag,
-      other = _objectWithoutProperties(_ref, _excluded$a);
+const MD = React.forwardRef((_ref, ref) => {
+  let {
+    tag,
+    ...other
+  } = _ref;
   return React__default["default"].createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
@@ -562,10 +413,11 @@ MD.defaultProps = {
   tag: 'div'
 };
 
-var _excluded$9 = ["tag"];
-var LG = React.forwardRef(function (_ref, ref) {
-  var tag = _ref.tag,
-      other = _objectWithoutProperties(_ref, _excluded$9);
+const LG = React.forwardRef((_ref, ref) => {
+  let {
+    tag,
+    ...other
+  } = _ref;
   return React__default["default"].createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
@@ -582,10 +434,11 @@ LG.defaultProps = {
   tag: 'div'
 };
 
-var _excluded$8 = ["tag"];
-var XL = React.forwardRef(function (_ref, ref) {
-  var tag = _ref.tag,
-      other = _objectWithoutProperties(_ref, _excluded$8);
+const XL = React.forwardRef((_ref, ref) => {
+  let {
+    tag,
+    ...other
+  } = _ref;
   return React__default["default"].createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
@@ -601,10 +454,11 @@ XL.defaultProps = {
   tag: 'div'
 };
 
-var _excluded$7 = ["tag"];
-var XXL = React.forwardRef(function (_ref, ref) {
-  var tag = _ref.tag,
-      other = _objectWithoutProperties(_ref, _excluded$7);
+const XXL = React.forwardRef((_ref, ref) => {
+  let {
+    tag,
+    ...other
+  } = _ref;
   return React__default["default"].createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
@@ -620,10 +474,11 @@ XXL.defaultProps = {
   tag: 'div'
 };
 
-var _excluded$6 = ["tag"];
-var XXXL = React.forwardRef(function (_ref, ref) {
-  var tag = _ref.tag,
-      other = _objectWithoutProperties(_ref, _excluded$6);
+const XXXL = React.forwardRef((_ref, ref) => {
+  let {
+    tag,
+    ...other
+  } = _ref;
   return React__default["default"].createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
@@ -639,11 +494,9 @@ XXXL.defaultProps = {
   tag: 'div'
 };
 
-var Blockquote = React__default["default"].forwardRef(function (props, ref) {
-  return React__default["default"].createElement(StyledBlockquote, _extends({
-    ref: ref
-  }, props));
-});
+const Blockquote = React__default["default"].forwardRef((props, ref) => React__default["default"].createElement(StyledBlockquote, _extends({
+  ref: ref
+}, props)));
 Blockquote.displayName = 'Blockquote';
 Blockquote.propTypes = {
   size: PropTypes__default["default"].oneOf(SIZE)
@@ -652,10 +505,11 @@ Blockquote.defaultProps = {
   size: 'medium'
 };
 
-var _excluded$5 = ["hue"];
-var Code = React.forwardRef(function (_ref, ref) {
-  var hue = _ref.hue,
-      other = _objectWithoutProperties(_ref, _excluded$5);
+const Code = React.forwardRef((_ref, ref) => {
+  let {
+    hue,
+    ...other
+  } = _ref;
   return React__default["default"].createElement(StyledCode, _extends({
     ref: ref,
     hue: hue
@@ -671,31 +525,28 @@ Code.defaultProps = {
   size: 'inherit'
 };
 
-var _excluded$4 = ["children", "containerProps", "highlightLines", "isLight", "isNumbered", "language", "size"];
-var CodeBlock = React__default["default"].forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      containerProps = _ref.containerProps,
-      highlightLines = _ref.highlightLines,
-      isLight = _ref.isLight,
-      isNumbered = _ref.isNumbered,
-      language = _ref.language,
-      size = _ref.size,
-      other = _objectWithoutProperties(_ref, _excluded$4);
-  var containerRef = React.useRef(null);
-  var code = Array.isArray(children) ? children[0] : children;
-  var dependency = React.useMemo(function () {
-    return [size, children];
-  }, [size, children]);
-  var containerTabIndex = containerScrollregion.useScrollRegion({
-    containerRef: containerRef,
-    dependency: dependency
+const CodeBlock = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    children,
+    containerProps,
+    highlightLines,
+    isLight,
+    isNumbered,
+    language,
+    size,
+    ...other
+  } = _ref;
+  const containerRef = React.useRef(null);
+  const code = Array.isArray(children) ? children[0] : children;
+  const dependency = React.useMemo(() => [size, children], [size, children]);
+  const containerTabIndex = containerScrollregion.useScrollRegion({
+    containerRef,
+    dependency
   });
-  var getDiff = function getDiff(line) {
-    var retVal;
+  const getDiff = line => {
+    let retVal;
     if (language === 'diff') {
-      var token = line.find(function (value) {
-        return !(value.empty || value.content === '');
-      });
+      const token = line.find(value => !(value.empty || value.content === ''));
       if (token) {
         if (token.types.includes('deleted')) {
           retVal = 'delete';
@@ -717,35 +568,33 @@ var CodeBlock = React__default["default"].forwardRef(function (_ref, ref) {
     Prism: Highlight.Prism,
     code: code ? code.trim() : '',
     language: LANGUAGES.includes(language) ? language : 'tsx'
-  }, function (_ref2) {
-    var className = _ref2.className,
-        tokens = _ref2.tokens,
-        getLineProps = _ref2.getLineProps,
-        getTokenProps = _ref2.getTokenProps;
+  }, _ref2 => {
+    let {
+      className,
+      tokens,
+      getLineProps,
+      getTokenProps
+    } = _ref2;
     return React__default["default"].createElement(StyledCodeBlock, _extends({
       className: className,
       ref: ref,
       isLight: isLight
-    }, other), tokens.map(function (line, index) {
-      return React__default["default"].createElement(StyledCodeBlockLine, _extends({}, getLineProps({
-        line: line
-      }), {
-        key: index,
-        language: language,
-        isHighlighted: highlightLines && highlightLines.includes(index + 1),
-        isLight: isLight,
-        isNumbered: isNumbered,
-        diff: getDiff(line),
-        size: size
-      }), line.map(function (token, tokenKey) {
-        return React__default["default"].createElement(StyledCodeBlockToken, _extends({}, getTokenProps({
-          token: token
-        }), {
-          key: tokenKey,
-          isLight: isLight
-        }), token.empty ? '\n' : token.content);
-      }));
-    }));
+    }, other), tokens.map((line, index) => React__default["default"].createElement(StyledCodeBlockLine, _extends({}, getLineProps({
+      line
+    }), {
+      key: index,
+      language: language,
+      isHighlighted: highlightLines && highlightLines.includes(index + 1),
+      isLight: isLight,
+      isNumbered: isNumbered,
+      diff: getDiff(line),
+      size: size
+    }), line.map((token, tokenKey) => React__default["default"].createElement(StyledCodeBlockToken, _extends({}, getTokenProps({
+      token
+    }), {
+      key: tokenKey,
+      isLight: isLight
+    }), token.empty ? '\n' : token.content)))));
   }));
 });
 CodeBlock.displayName = 'CodeBlock';
@@ -754,13 +603,14 @@ CodeBlock.defaultProps = {
   size: 'medium'
 };
 
-var _excluded$3 = ["children", "title", "tag"];
-var Ellipsis = React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      title = _ref.title,
-      tag = _ref.tag,
-      other = _objectWithoutProperties(_ref, _excluded$3);
-  var textContent = undefined;
+const Ellipsis = React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    title,
+    tag,
+    ...other
+  } = _ref;
+  let textContent = undefined;
   if (title !== undefined) {
     textContent = title;
   } else if (typeof children === 'string') {
@@ -781,11 +631,9 @@ Ellipsis.defaultProps = {
   tag: 'div'
 };
 
-var Paragraph = React.forwardRef(function (props, ref) {
-  return React__default["default"].createElement(StyledParagraph, _extends({
-    ref: ref
-  }, props));
-});
+const Paragraph = React.forwardRef((props, ref) => React__default["default"].createElement(StyledParagraph, _extends({
+  ref: ref
+}, props)));
 Paragraph.displayName = 'Paragraph';
 Paragraph.propTypes = {
   size: PropTypes__default["default"].oneOf(SIZE)
@@ -794,36 +642,36 @@ Paragraph.defaultProps = {
   size: 'medium'
 };
 
-var OrderedListContext = React.createContext(undefined);
-var useOrderedListContext = function useOrderedListContext() {
-  var listContext = React.useContext(OrderedListContext);
+const OrderedListContext = React.createContext(undefined);
+const useOrderedListContext = () => {
+  const listContext = React.useContext(OrderedListContext);
   if (!listContext) {
     throw new Error('This component must be rendered within an `OrderedList` component.');
   }
   return listContext;
 };
 
-var OrderedListItem = React.forwardRef(function (props, ref) {
-  var _useOrderedListContex = useOrderedListContext(),
-      size = _useOrderedListContex.size;
+const OrderedListItem = React.forwardRef((props, ref) => {
+  const {
+    size
+  } = useOrderedListContext();
   return React__default["default"].createElement(StyledOrderedListItem, _extends({
     ref: ref,
     space: size
   }, props));
 });
 OrderedListItem.displayName = 'OrderedList.Item';
-var Item$1 = OrderedListItem;
-
-var _excluded$2 = ["size", "type"];
-var OrderedListComponent = React__default["default"].forwardRef(function (_ref, ref) {
-  var size = _ref.size,
-      type = _ref.type,
-      other = _objectWithoutProperties(_ref, _excluded$2);
-  var value = React.useMemo(function () {
-    return {
-      size: size
-    };
-  }, [size]);
+const Item$1 = OrderedListItem;
+
+const OrderedListComponent = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    size,
+    type,
+    ...other
+  } = _ref;
+  const value = React.useMemo(() => ({
+    size: size
+  }), [size]);
   return React__default["default"].createElement(OrderedListContext.Provider, {
     value: value
   }, React__default["default"].createElement(StyledOrderedList, _extends({
@@ -840,39 +688,39 @@ OrderedListComponent.defaultProps = {
   size: 'medium',
   type: 'decimal'
 };
-var OrderedList = OrderedListComponent;
+const OrderedList = OrderedListComponent;
 OrderedList.Item = Item$1;
 
-var UnorderedListContext = React.createContext(undefined);
-var useUnorderedListContext = function useUnorderedListContext() {
-  var listContext = React.useContext(UnorderedListContext);
+const UnorderedListContext = React.createContext(undefined);
+const useUnorderedListContext = () => {
+  const listContext = React.useContext(UnorderedListContext);
   if (!listContext) {
     throw new Error('This component must be rendered within an `UnorderedList` component.');
   }
   return listContext;
 };
 
-var UnorderedListItem = React.forwardRef(function (props, ref) {
-  var _useUnorderedListCont = useUnorderedListContext(),
-      size = _useUnorderedListCont.size;
+const UnorderedListItem = React.forwardRef((props, ref) => {
+  const {
+    size
+  } = useUnorderedListContext();
   return React__default["default"].createElement(StyledUnorderedListItem, _extends({
     ref: ref,
     space: size
   }, props));
 });
 UnorderedListItem.displayName = 'UnorderedList.Item';
-var Item = UnorderedListItem;
-
-var _excluded$1 = ["size", "type"];
-var UnorderedListComponent = React.forwardRef(function (_ref, ref) {
-  var size = _ref.size,
-      type = _ref.type,
-      other = _objectWithoutProperties(_ref, _excluded$1);
-  var value = React.useMemo(function () {
-    return {
-      size: size
-    };
-  }, [size]);
+const Item = UnorderedListItem;
+
+const UnorderedListComponent = React.forwardRef((_ref, ref) => {
+  let {
+    size,
+    type,
+    ...other
+  } = _ref;
+  const value = React.useMemo(() => ({
+    size: size
+  }), [size]);
   return React__default["default"].createElement(UnorderedListContext.Provider, {
     value: value
   }, React__default["default"].createElement(StyledUnorderedList, _extends({
@@ -889,27 +737,24 @@ UnorderedListComponent.defaultProps = {
   size: 'medium',
   type: 'disc'
 };
-var UnorderedList = UnorderedListComponent;
+const UnorderedList = UnorderedListComponent;
 UnorderedList.Item = Item;
 
-var StartIconComponent = function StartIconComponent(props) {
-  return React__default["default"].createElement(StyledIcon, _extends({
-    isStart: true
-  }, props));
-};
+const StartIconComponent = props => React__default["default"].createElement(StyledIcon, _extends({
+  isStart: true
+}, props));
 StartIconComponent.displayName = 'Span.StartIcon';
-var StartIcon = StartIconComponent;
+const StartIcon = StartIconComponent;
 
-var IconComponent = function IconComponent(props) {
-  return React__default["default"].createElement(StyledIcon, props);
-};
+const IconComponent = props => React__default["default"].createElement(StyledIcon, props);
 IconComponent.displayName = 'Span.Icon';
-var Icon = IconComponent;
+const Icon = IconComponent;
 
-var _excluded = ["tag"];
-var SpanComponent = React.forwardRef(function (_ref, ref) {
-  var tag = _ref.tag,
-      other = _objectWithoutProperties(_ref, _excluded);
+const SpanComponent = React.forwardRef((_ref, ref) => {
+  let {
+    tag,
+    ...other
+  } = _ref;
   return React__default["default"].createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
@@ -926,7 +771,7 @@ SpanComponent.propTypes = {
 SpanComponent.defaultProps = {
   tag: 'span'
 };
-var Span = SpanComponent;
+const Span = SpanComponent;
 Span.Icon = Icon;
 Span.StartIcon = StartIcon;