@zendeskgarden/react-theming 8.57.1 → 8.59.0

package/dist/index.esm.js

@@ -11,170 +11,22 @@ import { useFocusVisible } from '@zendeskgarden/container-focusvisible';
 import { getControlledValue } from '@zendeskgarden/container-utilities';
 import { rgba, darken, lighten, getValueAndUnit, math } from 'polished';
 
-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 _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
-}
-
-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() {
   _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 _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 PALETTE = {
+const PALETTE = {
   black: '#000',
   white: '#fff',
   product: {
@@ -316,30 +168,30 @@ var PALETTE = {
   }
 };
 
-var BASE = 4;
-var borderRadii = {
-  sm: "".concat(BASE / 2, "px"),
-  md: "".concat(BASE, "px")
+const BASE = 4;
+const borderRadii = {
+  sm: `${BASE / 2}px`,
+  md: `${BASE}px`
 };
-var borderStyles = {
+const borderStyles = {
   solid: 'solid'
 };
-var borderWidths = {
+const borderWidths = {
   sm: '1px',
   md: '3px'
 };
-var borders = {
-  sm: "".concat(borderWidths.sm, " ").concat(borderStyles.solid),
-  md: "".concat(borderWidths.md, " ").concat(borderStyles.solid)
+const borders = {
+  sm: `${borderWidths.sm} ${borderStyles.solid}`,
+  md: `${borderWidths.md} ${borderStyles.solid}`
 };
-var breakpoints = {
+const breakpoints = {
   xs: '0px',
-  sm: "".concat(BASE * 144, "px"),
-  md: "".concat(BASE * 192, "px"),
-  lg: "".concat(BASE * 248, "px"),
-  xl: "".concat(BASE * 300, "px")
+  sm: `${BASE * 144}px`,
+  md: `${BASE * 192}px`,
+  lg: `${BASE * 248}px`,
+  xl: `${BASE * 300}px`
 };
-var colors = {
+const colors = {
   background: PALETTE.white,
   foreground: PALETTE.grey[800],
   primaryHue: 'blue',
@@ -349,22 +201,11 @@ var colors = {
   neutralHue: 'grey',
   chromeHue: 'kale'
 };
-var fonts = {
-  mono: ['SFMono-Regular'
-  , 'Consolas'
-  , '"Liberation Mono"'
-  , 'Menlo', 'Courier', 'monospace'].join(','),
-  system: ['system-ui'
-  , '-apple-system'
-  , 'BlinkMacSystemFont'
-  , '"Segoe UI"'
-  , 'Roboto'
-  , 'Oxygen-Sans'
-  , 'Ubuntu'
-  , 'Cantarell'
-  , '"Helvetica Neue"', 'Arial', 'sans-serif'].join(',')
+const fonts = {
+  mono: ['SFMono-Regular' , 'Consolas' , '"Liberation Mono"' , 'Menlo', 'Courier', 'monospace'].join(','),
+  system: ['system-ui' , '-apple-system' , 'BlinkMacSystemFont' , '"Segoe UI"' , 'Roboto' , 'Oxygen-Sans' , 'Ubuntu' , 'Cantarell' , '"Helvetica Neue"', 'Arial', 'sans-serif'].join(',')
 };
-var fontSizes = {
+const fontSizes = {
   xs: '10px',
   sm: '12px',
   md: '14px',
@@ -373,7 +214,7 @@ var fontSizes = {
   xxl: '26px',
   xxxl: '36px'
 };
-var fontWeights = {
+const fontWeights = {
   thin: 100,
   extralight: 200,
   light: 300,
@@ -384,74 +225,68 @@ var fontWeights = {
   extrabold: 800,
   black: 900
 };
-var iconSizes = {
+const iconSizes = {
   sm: '12px',
   md: '16px',
   lg: '26px'
 };
-var lineHeights = {
-  sm: "".concat(BASE * 4, "px"),
-  md: "".concat(BASE * 5, "px"),
-  lg: "".concat(BASE * 6, "px"),
-  xl: "".concat(BASE * 7, "px"),
-  xxl: "".concat(BASE * 8, "px"),
-  xxxl: "".concat(BASE * 11, "px")
+const lineHeights = {
+  sm: `${BASE * 4}px`,
+  md: `${BASE * 5}px`,
+  lg: `${BASE * 6}px`,
+  xl: `${BASE * 7}px`,
+  xxl: `${BASE * 8}px`,
+  xxxl: `${BASE * 11}px`
+};
+const palette = {
+  ...PALETTE
 };
-var palette = _objectSpread2({}, PALETTE);
 delete palette.product;
-var shadowWidths = {
+const shadowWidths = {
   sm: '2px',
   md: '3px'
 };
-var shadows = {
-  sm: function sm(color) {
-    return "0 0 0 ".concat(shadowWidths.sm, " ").concat(color);
-  },
-  md: function md(color) {
-    return "0 0 0 ".concat(shadowWidths.md, " ").concat(color);
-  },
-  lg: function lg(offsetY, blurRadius, color) {
-    return "0 ".concat(offsetY, " ").concat(blurRadius, " 0 ").concat(color);
-  }
+const shadows = {
+  sm: color => `0 0 0 ${shadowWidths.sm} ${color}`,
+  md: color => `0 0 0 ${shadowWidths.md} ${color}`,
+  lg: (offsetY, blurRadius, color) => `0 ${offsetY} ${blurRadius} 0 ${color}`
 };
-var space = {
+const space = {
   base: BASE,
-  xxs: "".concat(BASE, "px"),
-  xs: "".concat(BASE * 2, "px"),
-  sm: "".concat(BASE * 3, "px"),
-  md: "".concat(BASE * 5, "px"),
-  lg: "".concat(BASE * 8, "px"),
-  xl: "".concat(BASE * 10, "px"),
-  xxl: "".concat(BASE * 12, "px")
+  xxs: `${BASE}px`,
+  xs: `${BASE * 2}px`,
+  sm: `${BASE * 3}px`,
+  md: `${BASE * 5}px`,
+  lg: `${BASE * 8}px`,
+  xl: `${BASE * 10}px`,
+  xxl: `${BASE * 12}px`
 };
-var DEFAULT_THEME = {
-  borders: borders,
-  borderRadii: borderRadii,
-  borderStyles: borderStyles,
-  borderWidths: borderWidths,
-  breakpoints: breakpoints,
-  colors: _objectSpread2({
-    base: 'light'
-  }, colors),
+const DEFAULT_THEME = {
+  borders,
+  borderRadii,
+  borderStyles,
+  borderWidths,
+  breakpoints,
+  colors: {
+    base: 'light',
+    ...colors
+  },
   components: {},
-  fonts: fonts,
-  fontSizes: fontSizes,
-  fontWeights: fontWeights,
-  iconSizes: iconSizes,
-  lineHeights: lineHeights,
-  palette: palette,
+  fonts,
+  fontSizes,
+  fontWeights,
+  iconSizes,
+  lineHeights,
+  palette,
   rtl: false,
-  shadowWidths: shadowWidths,
-  shadows: shadows,
-  space: space
+  shadowWidths,
+  shadows,
+  space
 };
 
-var useDocument = function useDocument(theme) {
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      controlledDocument = _useState2[0],
-      setControlledDocument = _useState2[1];
-  useEffect(function () {
+const useDocument = theme => {
+  const [controlledDocument, setControlledDocument] = useState();
+  useEffect(() => {
     if (theme && theme.document) {
       setControlledDocument(theme.document);
     } else {
@@ -461,18 +296,19 @@ var useDocument = function useDocument(theme) {
   return controlledDocument;
 };
 
-var _excluded = ["theme", "focusVisibleRef", "children"];
-var ThemeProvider = function ThemeProvider(_ref) {
-  var theme = _ref.theme,
-      focusVisibleRef = _ref.focusVisibleRef,
-      children = _ref.children,
-      other = _objectWithoutProperties(_ref, _excluded);
-  var scopeRef = useRef(null);
-  var relativeDocument = useDocument(theme);
-  var controlledScopeRef = focusVisibleRef === null ? React.createRef() : getControlledValue(focusVisibleRef, scopeRef);
+const ThemeProvider = _ref => {
+  let {
+    theme,
+    focusVisibleRef,
+    children,
+    ...other
+  } = _ref;
+  const scopeRef = useRef(null);
+  const relativeDocument = useDocument(theme);
+  const controlledScopeRef = focusVisibleRef === null ? React.createRef() : getControlledValue(focusVisibleRef, scopeRef);
   useFocusVisible({
     scope: controlledScopeRef,
-    relativeDocument: relativeDocument
+    relativeDocument
   });
   return React.createElement(ThemeProvider$1, _extends({
     theme: theme
@@ -485,17 +321,18 @@ ThemeProvider.defaultProps = {
 };
 
 function isRtl() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      theme = _ref.theme;
+  let {
+    theme
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return Boolean(theme && theme.rtl);
 }
 
 function retrieveComponentStyles(componentId, props) {
-  var components = props.theme && props.theme.components;
+  const components = props.theme && props.theme.components;
   if (!components) {
     return undefined;
   }
-  var componentStyles = components[componentId];
+  const componentStyles = components[componentId];
   if (typeof componentStyles === 'function') {
     return componentStyles(props);
   }
@@ -507,30 +344,31 @@ function withTheme(WrappedComponent) {
 }
 
 function getDocument() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      theme = _ref.theme;
+  let {
+    theme
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return theme && theme.document || document;
 }
 
-var DEFAULT_SHADE = 600;
-var adjust = function adjust(color, expected, actual) {
+const DEFAULT_SHADE = 600;
+const adjust = (color, expected, actual) => {
   if (expected !== actual) {
-    var amount = Math.abs(expected - actual) / 100 * 0.05;
+    const amount = Math.abs(expected - actual) / 100 * 0.05;
     return expected > actual ? darken(amount, color) : lighten(amount, color);
   }
   return color;
 };
 function getColor(hue) {
-  var shade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_SHADE;
-  var theme = arguments.length > 2 ? arguments[2] : undefined;
-  var transparency = arguments.length > 3 ? arguments[3] : undefined;
-  var retVal;
+  let shade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_SHADE;
+  let theme = arguments.length > 2 ? arguments[2] : undefined;
+  let transparency = arguments.length > 3 ? arguments[3] : undefined;
+  let retVal;
   if (isNaN(shade)) {
     return undefined;
   }
-  var palette = theme && theme.palette ? theme.palette : DEFAULT_THEME.palette;
-  var colors = theme && theme.colors ? theme.colors : DEFAULT_THEME.colors;
-  var _hue;
+  const palette = theme && theme.palette ? theme.palette : DEFAULT_THEME.palette;
+  const colors = theme && theme.colors ? theme.colors : DEFAULT_THEME.colors;
+  let _hue;
   if (typeof hue === 'string') {
     _hue = colors[hue] || hue;
   } else {
@@ -539,12 +377,10 @@ function getColor(hue) {
   if (Object.prototype.hasOwnProperty.call(palette, _hue)) {
     _hue = palette[_hue];
   }
-  if (_typeof(_hue) === 'object') {
+  if (typeof _hue === 'object') {
     retVal = _hue[shade];
     if (!retVal) {
-      var _shade = Object.keys(_hue).map(function (hueKey) {
-        return parseInt(hueKey, 10);
-      }).reduce(function (previous, current) {
+      const _shade = Object.keys(_hue).map(hueKey => parseInt(hueKey, 10)).reduce((previous, current) => {
         return Math.abs(current - shade) < Math.abs(previous - shade) ? current : previous;
       });
       retVal = adjust(_hue[_shade], shade, _shade);
@@ -559,40 +395,34 @@ function getColor(hue) {
 }
 
 function getLineHeight(height, fontSize) {
-  var _getValueAndUnit = getValueAndUnit(height.toString()),
-      _getValueAndUnit2 = _slicedToArray(_getValueAndUnit, 2),
-      heightValue = _getValueAndUnit2[0],
-      heightUnit = _getValueAndUnit2[1];
-  var _getValueAndUnit3 = getValueAndUnit(fontSize.toString()),
-      _getValueAndUnit4 = _slicedToArray(_getValueAndUnit3, 2),
-      fontSizeValue = _getValueAndUnit4[0],
-      fontSizeUnit = _getValueAndUnit4[1];
-  var PIXELS = 'px';
+  const [heightValue, heightUnit] = getValueAndUnit(height.toString());
+  const [fontSizeValue, fontSizeUnit] = getValueAndUnit(fontSize.toString());
+  const PIXELS = 'px';
   if (heightUnit && heightUnit !== PIXELS) {
-    throw new Error("Unexpected `height` with '".concat(heightUnit, "' units."));
+    throw new Error(`Unexpected \`height\` with '${heightUnit}' units.`);
   }
   if (fontSizeUnit && fontSizeUnit !== PIXELS) {
-    throw new Error("Unexpected `fontSize` with '".concat(fontSizeUnit, "' units."));
+    throw new Error(`Unexpected \`fontSize\` with '${fontSizeUnit}' units.`);
   }
   return heightValue / fontSizeValue;
 }
 
-var maxWidth = function maxWidth(breakpoints, breakpoint) {
-  var keys = Object.keys(breakpoints);
-  var index = keys.indexOf(breakpoint) + 1;
+const maxWidth = (breakpoints, breakpoint) => {
+  const keys = Object.keys(breakpoints);
+  const index = keys.indexOf(breakpoint) + 1;
   if (keys[index]) {
-    var dimension = getValueAndUnit(breakpoints[keys[index]]);
-    var value = dimension[0] - 0.02;
-    var unit = dimension[1];
-    return "".concat(value).concat(unit);
+    const dimension = getValueAndUnit(breakpoints[keys[index]]);
+    const value = dimension[0] - 0.02;
+    const unit = dimension[1];
+    return `${value}${unit}`;
   }
   return undefined;
 };
 function mediaQuery(query, breakpoint, theme) {
-  var retVal;
-  var min;
-  var max;
-  var breakpoints = theme && theme.breakpoints ? theme.breakpoints : DEFAULT_THEME.breakpoints;
+  let retVal;
+  let min;
+  let max;
+  const breakpoints = theme && theme.breakpoints ? theme.breakpoints : DEFAULT_THEME.breakpoints;
   if (typeof breakpoint === 'string') {
     if (query === 'up') {
       min = breakpoints[breakpoint];
@@ -611,26 +441,24 @@ function mediaQuery(query, breakpoint, theme) {
     max = maxWidth(breakpoints, breakpoint[1]);
   }
   if (min) {
-    retVal = "@media (min-width: ".concat(min, ")");
+    retVal = `@media (min-width: ${min})`;
     if (max) {
-      retVal = "".concat(retVal, " and (max-width: ").concat(max, ")");
+      retVal = `${retVal} and (max-width: ${max})`;
     }
   } else if (max) {
-    retVal = "@media (max-width: ".concat(max, ")");
+    retVal = `@media (max-width: ${max})`;
   } else {
-    throw new Error("Unexpected query and breakpoint combination: '".concat(query, "', '").concat(breakpoint, "'."));
+    throw new Error(`Unexpected query and breakpoint combination: '${query}', '${breakpoint}'.`);
   }
   return retVal;
 }
 
-var exponentialSymbols = {
+const exponentialSymbols = {
   symbols: {
     sqrt: {
       func: {
         symbol: 'sqrt',
-        f: function f(a) {
-          return Math.sqrt(a);
-        },
+        f: a => Math.sqrt(a),
         notation: 'func',
         precedence: 0,
         rightToLeft: 0,
@@ -641,17 +469,17 @@ var exponentialSymbols = {
     }
   }
 };
-var animationStyles$1 = function animationStyles(position, modifier) {
-  var property = position.split('-')[0];
-  var animationName = keyframes(["0%,66%{", ":2px;border:transparent;}"], property);
+const animationStyles$1 = (position, modifier) => {
+  const property = position.split('-')[0];
+  const animationName = keyframes(["0%,66%{", ":2px;border:transparent;}"], property);
   return css(["&", "::before,&", "::after{animation:0.3s ease-in-out ", ";}"], modifier, modifier, animationName);
 };
-var positionStyles = function positionStyles(position, size, inset) {
-  var margin = math("".concat(size, " / -2"));
-  var placement = math("".concat(margin, " + ").concat(inset));
-  var clipPath;
-  var positionCss;
-  var propertyRadius;
+const positionStyles = (position, size, inset) => {
+  const margin = math(`${size} / -2`);
+  const placement = math(`${margin} + ${inset}`);
+  let clipPath;
+  let positionCss;
+  let propertyRadius;
   if (position.startsWith('top')) {
     propertyRadius = 'border-bottom-right-radius';
     clipPath = 'polygon(100% 0, 100% 1px, 1px 100%, 0 100%, 0 0)';
@@ -672,23 +500,23 @@ var positionStyles = function positionStyles(position, size, inset) {
   return css(["&::before{", ":100%;clip-path:", ";}&::before,&::after{", "}"], propertyRadius, clipPath, positionCss);
 };
 function arrowStyles(position) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var size = options.size || '6px';
-  var inset = options.inset || '0';
-  var squareSize = math("".concat(size, " * 2 / sqrt(2)"), exponentialSymbols);
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const size = options.size || '6px';
+  const inset = options.inset || '0';
+  const squareSize = math(`${size} * 2 / sqrt(2)`, exponentialSymbols);
   return css(["position:relative;&::before{border-width:inherit;border-style:inherit;border-color:transparent;background-clip:content-box;}&::after{z-index:-1;border:inherit;box-shadow:inherit;}&::before,&::after{position:absolute;transform:rotate(45deg);background-color:inherit;box-sizing:inherit;width:", ";height:", ";content:'';}", ";", ";"], squareSize, squareSize, positionStyles(position, squareSize, inset), options.animationModifier && animationStyles$1(position, options.animationModifier));
 }
 
-var useText = function useText(component, props, name, text) {
-  var value = props[name];
-  return useMemo(function () {
+const useText = (component, props, name, text) => {
+  const value = props[name];
+  return useMemo(() => {
     if (name === 'children') {
       throw new Error('Error: `children` is not a valid `getText` prop.');
     } else if (value === null || value === '') {
-      throw new Error(component.displayName ? "Error: you must provide a valid `".concat(name, "` text value for <").concat(component.displayName, ">.") : "Error: you must provide a valid `".concat(name, "` text value."));
+      throw new Error(component.displayName ? `Error: you must provide a valid \`${name}\` text value for <${component.displayName}>.` : `Error: you must provide a valid \`${name}\` text value.`);
     } else if (value === undefined) {
       if (process.env.NODE_ENV === 'development') {
-        console.warn(component.displayName ? "Warning: you did not provide a customized/translated `".concat(name, "` text value for <").concat(component.displayName, ">. Zendesk Garden is rendering <").concat(component.displayName, " ").concat(name, "=\"").concat(text, "\"> by default.") : "Warning: you did not provide a customized/translated `".concat(name, "` text value. Zendesk Garden is rendering ").concat(name, "=\"").concat(text, "\" by default."));
+        console.warn(component.displayName ? `Warning: you did not provide a customized/translated \`${name}\` text value for <${component.displayName}>. Zendesk Garden is rendering <${component.displayName} ${name}="${text}"> by default.` : `Warning: you did not provide a customized/translated \`${name}\` text value. Zendesk Garden is rendering ${name}="${text}" by default.`);
       }
       return text;
     }
@@ -696,32 +524,32 @@ var useText = function useText(component, props, name, text) {
   }, [component.displayName, value, name, text]);
 };
 
-var animationStyles = function animationStyles(position, options) {
-  var theme = options.theme || DEFAULT_THEME;
-  var translateValue = "".concat(theme.space.base * 5, "px");
-  var transformFunction;
+const animationStyles = (position, options) => {
+  const theme = options.theme || DEFAULT_THEME;
+  let translateValue = `${theme.space.base * 5}px`;
+  let transformFunction;
   if (position === 'top') {
     transformFunction = 'translateY';
   } else if (position === 'right') {
     transformFunction = 'translateX';
-    translateValue = "-".concat(translateValue);
+    translateValue = `-${translateValue}`;
   } else if (position === 'bottom') {
     transformFunction = 'translateY';
-    translateValue = "-".concat(translateValue);
+    translateValue = `-${translateValue}`;
   } else {
     transformFunction = 'translateX';
   }
-  var animationName = keyframes(["0%{transform:", "(", ");}"], transformFunction, translateValue);
+  const animationName = keyframes(["0%{transform:", "(", ");}"], transformFunction, translateValue);
   return css(["&", " ", "{animation:0.2s cubic-bezier(0.15,0.85,0.35,1.2) ", ";}"], options.animationModifier, options.childSelector || '> *', animationName);
 };
-var hiddenStyles = function hiddenStyles(options) {
-  var transition = 'opacity 0.2s ease-in-out, 0.2s visibility 0s linear';
+const hiddenStyles = options => {
+  const transition = 'opacity 0.2s ease-in-out, 0.2s visibility 0s linear';
   return css(["transition:", ";visibility:hidden;opacity:0;"], options.animationModifier && transition);
 };
 function menuStyles(position) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var theme = options.theme || DEFAULT_THEME;
-  var marginProperty;
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const theme = options.theme || DEFAULT_THEME;
+  let marginProperty;
   if (position === 'top') {
     marginProperty = 'margin-bottom';
   } else if (position === 'right') {
@@ -731,10 +559,10 @@ function menuStyles(position) {
   } else {
     marginProperty = 'margin-right';
   }
-  return css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", " ", ";border-radius:", ";box-shadow:", ";background-color:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm, getColor('neutralHue', 300, theme), theme.borderRadii.md, theme.shadows.lg("".concat(theme.space.base * 5, "px"), "".concat(theme.space.base * 7.5, "px"), getColor('chromeHue', 600, theme, 0.15)), theme.colors.background, theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
+  return css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", " ", ";border-radius:", ";box-shadow:", ";background-color:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm, getColor('neutralHue', 300, theme), theme.borderRadii.md, theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7.5}px`, getColor('chromeHue', 600, theme, 0.15)), theme.colors.background, theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
 }
 
-var ARROW_POSITION = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom'];
-var MENU_POSITION = ['top', 'right', 'bottom', 'left'];
+const ARROW_POSITION = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom'];
+const MENU_POSITION = ['top', 'right', 'bottom', 'left'];
 
 export { ARROW_POSITION as ARRAY_ARROW_POSITION, MENU_POSITION as ARRAY_MENU_POSITION, DEFAULT_THEME, PALETTE, ThemeProvider, arrowStyles, getColor, getDocument, getLineHeight, isRtl, mediaQuery, menuStyles, retrieveComponentStyles, retrieveComponentStyles as retrieveTheme, useDocument, useText, withTheme };