@zendeskgarden/react-theming 8.75.0 → 8.76.0

package/dist/esm/elements/ThemeProvider.js

@@ -0,0 +1,38 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { useRef } from 'react';
+import { ThemeProvider as ThemeProvider$1 } from 'styled-components';
+import { useFocusVisible } from '@zendeskgarden/container-focusvisible';
+import { getControlledValue } from '@zendeskgarden/container-utilities';
+import DEFAULT_THEME from './theme/index.js';
+import { useDocument } from '../utils/useDocument.js';
+
+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
+  });
+  return React.createElement(ThemeProvider$1, Object.assign({
+    theme: theme
+  }, other), focusVisibleRef === undefined ? React.createElement("div", {
+    ref: scopeRef
+  }, children) : children);
+};
+ThemeProvider.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { ThemeProvider };

package/dist/esm/elements/palette/index.js

@@ -0,0 +1,149 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const PALETTE = {
+  black: '#000',
+  white: '#fff',
+  product: {
+    support: '#00a656',
+    message: '#37b8af',
+    explore: '#30aabc',
+    gather: '#f6c8be',
+    guide: '#eb4962',
+    connect: '#ff6224',
+    chat: '#f79a3e',
+    talk: '#efc93d',
+    sell: '#c38f00'
+  },
+  grey: {
+    100: '#f8f9f9',
+    200: '#e9ebed',
+    300: '#d8dcde',
+    400: '#c2c8cc',
+    500: '#87929d',
+    600: '#68737d',
+    700: '#49545c',
+    800: '#2f3941'
+  },
+  blue: {
+    100: '#edf7ff',
+    200: '#cee2f2',
+    300: '#adcce4',
+    400: '#5293c7',
+    500: '#337fbd',
+    600: '#1f73b7',
+    700: '#144a75',
+    800: '#0f3554'
+  },
+  red: {
+    100: '#fff0f1',
+    200: '#f5d5d8',
+    300: '#f5b5ba',
+    400: '#e35b66',
+    500: '#d93f4c',
+    600: '#cc3340',
+    700: '#8c232c',
+    800: '#681219'
+  },
+  yellow: {
+    100: '#fff7ed',
+    200: '#ffeedb',
+    300: '#fed6a8',
+    400: '#ffb057',
+    500: '#f79a3e',
+    600: '#ed8f1c',
+    700: '#ad5918',
+    800: '#703815'
+  },
+  green: {
+    100: '#edf8f4',
+    200: '#d1e8df',
+    300: '#aecfc2',
+    400: '#5eae91',
+    500: '#228f67',
+    600: '#038153',
+    700: '#186146',
+    800: '#0b3b29'
+  },
+  kale: {
+    100: '#f5fcfc',
+    200: '#daeded',
+    300: '#bdd9d7',
+    400: '#90bbbb',
+    500: '#498283',
+    600: '#17494d',
+    700: '#03363d',
+    800: '#012b30'
+  },
+  fuschia: {
+    400: '#d653c2',
+    600: '#a81897',
+    M400: '#cf62a8',
+    M600: '#a8458c'
+  },
+  pink: {
+    400: '#ec4d63',
+    600: '#d42054',
+    M400: '#d57287',
+    M600: '#b23a5d'
+  },
+  crimson: {
+    400: '#e34f32',
+    600: '#c72a1c',
+    M400: '#cc6c5b',
+    M600: '#b24a3c'
+  },
+  orange: {
+    400: '#de701d',
+    600: '#bf5000',
+    M400: '#d4772c',
+    M600: '#b35827'
+  },
+  lemon: {
+    400: '#ffd424',
+    600: '#ffbb10',
+    M400: '#e7a500',
+    M600: '#c38f00'
+  },
+  lime: {
+    400: '#43b324',
+    600: '#2e8200',
+    M400: '#519e2d',
+    M600: '#47782c'
+  },
+  mint: {
+    400: '#00a656',
+    600: '#058541',
+    M400: '#299c66',
+    M600: '#2e8057'
+  },
+  teal: {
+    400: '#02a191',
+    600: '#028079',
+    M400: '#2d9e8f',
+    M600: '#3c7873'
+  },
+  azure: {
+    400: '#3091ec',
+    600: '#1371d6',
+    M400: '#5f8dcf',
+    M600: '#3a70b2'
+  },
+  royal: {
+    400: '#5d7df5',
+    600: '#3353e2',
+    M400: '#7986d8',
+    M600: '#4b61c3'
+  },
+  purple: {
+    400: '#b552e2',
+    600: '#6a27b8',
+    M400: '#b072cc',
+    M600: '#9358b0'
+  }
+};
+
+export { PALETTE as default };

package/dist/esm/elements/theme/index.js

@@ -0,0 +1,127 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import PALETTE from '../palette/index.js';
+
+const BASE = 4;
+const borderRadii = {
+  sm: `${BASE / 2}px`,
+  md: `${BASE}px`
+};
+const borderStyles = {
+  solid: 'solid'
+};
+const borderWidths = {
+  sm: '1px',
+  md: '3px'
+};
+const borders = {
+  sm: `${borderWidths.sm} ${borderStyles.solid}`,
+  md: `${borderWidths.md} ${borderStyles.solid}`
+};
+const breakpoints = {
+  xs: '0px',
+  sm: `${BASE * 144}px`,
+  md: `${BASE * 192}px`,
+  lg: `${BASE * 248}px`,
+  xl: `${BASE * 300}px`
+};
+const colors = {
+  background: PALETTE.white,
+  foreground: PALETTE.grey[800],
+  primaryHue: 'blue',
+  dangerHue: 'red',
+  warningHue: 'yellow',
+  successHue: 'green',
+  neutralHue: 'grey',
+  chromeHue: 'kale'
+};
+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(',')
+};
+const fontSizes = {
+  xs: '10px',
+  sm: '12px',
+  md: '14px',
+  lg: '18px',
+  xl: '22px',
+  xxl: '26px',
+  xxxl: '36px'
+};
+const fontWeights = {
+  thin: 100,
+  extralight: 200,
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+  black: 900
+};
+const iconSizes = {
+  sm: '12px',
+  md: '16px',
+  lg: '26px'
+};
+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
+};
+delete palette.product;
+const shadowWidths = {
+  xs: '1px',
+  sm: '2px',
+  md: '3px'
+};
+const shadows = {
+  xs: color => `0 0 0 ${shadowWidths.xs} ${color}`,
+  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}`
+};
+const space = {
+  base: BASE,
+  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`
+};
+const DEFAULT_THEME = {
+  borders,
+  borderRadii,
+  borderStyles,
+  borderWidths,
+  breakpoints,
+  colors: {
+    base: 'light',
+    ...colors
+  },
+  components: {},
+  fonts,
+  fontSizes,
+  fontWeights,
+  iconSizes,
+  lineHeights,
+  palette,
+  rtl: false,
+  shadowWidths,
+  shadows,
+  space
+};
+
+export { DEFAULT_THEME as default };

package/dist/esm/index.js

@@ -0,0 +1,24 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+export { ThemeProvider } from './elements/ThemeProvider.js';
+export { default as DEFAULT_THEME } from './elements/theme/index.js';
+export { default as PALETTE } from './elements/palette/index.js';
+export { default as isRtl } from './utils/isRtl.js';
+export { default as retrieveComponentStyles, default as retrieveTheme } from './utils/retrieveComponentStyles.js';
+export { default as withTheme } from './utils/withTheme.js';
+export { default as getDocument } from './utils/getDocument.js';
+export { getColorV8 as getColor, getColorV8 } from './utils/getColorV8.js';
+export { getFocusBoxShadow } from './utils/getFocusBoxShadow.js';
+export { default as getLineHeight } from './utils/getLineHeight.js';
+export { default as mediaQuery } from './utils/mediaQuery.js';
+export { default as arrowStyles } from './utils/arrowStyles.js';
+export { useDocument } from './utils/useDocument.js';
+export { useWindow } from './utils/useWindow.js';
+export { useText } from './utils/useText.js';
+export { default as menuStyles } from './utils/menuStyles.js';
+export { SELECTOR_FOCUS_VISIBLE, focusStyles } from './utils/focusStyles.js';
+export { ARROW_POSITION as ARRAY_ARROW_POSITION, MENU_POSITION as ARRAY_MENU_POSITION } from './types/index.js';

package/dist/esm/types/index.js

@@ -0,0 +1,10 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+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, MENU_POSITION };

package/dist/esm/utils/arrowStyles.js

@@ -0,0 +1,64 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { css, keyframes } from 'styled-components';
+import { math } from 'polished';
+
+const exponentialSymbols = {
+  symbols: {
+    sqrt: {
+      func: {
+        symbol: 'sqrt',
+        f: a => Math.sqrt(a),
+        notation: 'func',
+        precedence: 0,
+        rightToLeft: 0,
+        argCount: 1
+      },
+      symbol: 'sqrt',
+      regSymbol: 'sqrt\\b'
+    }
+  }
+};
+const animationStyles = (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);
+};
+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)';
+    positionCss = css(["top:", ";right:", ";left:", ";margin-left:", ";"], placement, position === 'top-right' && size, position === 'top' ? '50%' : position === 'top-left' && size, position === 'top' && margin);
+  } else if (position.startsWith('right')) {
+    propertyRadius = 'border-bottom-left-radius';
+    clipPath = 'polygon(100% 0, 100% 100%, calc(100% - 1px) 100%, 0 1px, 0 0)';
+    positionCss = css(["top:", ";right:", ";bottom:", ";margin-top:", ";"], position === 'right' ? '50%' : position === 'right-top' && size, placement, position === 'right-bottom' && size, position === 'right' && margin);
+  } else if (position.startsWith('bottom')) {
+    propertyRadius = 'border-top-left-radius';
+    clipPath = 'polygon(100% 0, calc(100% - 1px) 0, 0 calc(100% - 1px), 0 100%, 100% 100%)';
+    positionCss = css(["right:", ";bottom:", ";left:", ";margin-left:", ";"], position === 'bottom-right' && size, placement, position === 'bottom' ? '50%' : position === 'bottom-left' && size, position === 'bottom' && margin);
+  } else if (position.startsWith('left')) {
+    propertyRadius = 'border-top-right-radius';
+    clipPath = 'polygon(0 100%, 100% 100%, 100% calc(100% - 1px), 1px 0, 0 0)';
+    positionCss = css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? '50%' : position === 'left-top' && size, size, placement, position === 'left' && margin);
+  }
+  return css(["&::before{", ":100%;clip-path:", ";}&::before,&::after{", "}"], propertyRadius, clipPath, positionCss);
+};
+function arrowStyles(position) {
+  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(position, options.animationModifier));
+}
+
+export { arrowStyles as default, exponentialSymbols };

package/dist/esm/utils/focusStyles.js

@@ -0,0 +1,43 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { css } from 'styled-components';
+import { math } from 'polished';
+import { getFocusBoxShadow } from './getFocusBoxShadow.js';
+
+const SELECTOR_FOCUS_VISIBLE = '&:focus-visible, &[data-garden-focus-visible="true"]';
+const focusStyles = _ref => {
+  let {
+    condition = true,
+    selector = SELECTOR_FOCUS_VISIBLE,
+    shadowWidth = 'md',
+    spacerWidth = 'xs',
+    styles: {
+      boxShadow,
+      ...styles
+    } = {},
+    theme,
+    ...options
+  } = _ref;
+  const _boxShadow = condition ? getFocusBoxShadow({
+    boxShadow,
+    shadowWidth,
+    spacerWidth,
+    theme,
+    ...options
+  }) : boxShadow;
+  let outline;
+  let outlineOffset;
+  if (spacerWidth === null) {
+    outline = theme.shadowWidths[shadowWidth];
+  } else {
+    outline = `${math(`${theme.shadowWidths[shadowWidth]} - ${theme.shadowWidths[spacerWidth]}`)} solid transparent`;
+    outlineOffset = theme.shadowWidths[spacerWidth];
+  }
+  return css(["&:focus{outline:none;}", "{outline:", ";outline-offset:", ";box-shadow:", ";", "}"], selector, outline, outlineOffset, _boxShadow, styles);
+};
+
+export { SELECTOR_FOCUS_VISIBLE, focusStyles };

package/dist/esm/utils/getColorV8.js

@@ -0,0 +1,61 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import DEFAULT_THEME from '../elements/theme/index.js';
+import { rgba, darken, lighten } from 'polished';
+import memoize from 'lodash.memoize';
+
+const DEFAULT_SHADE = 600;
+const adjust = (color, expected, actual) => {
+  if (expected !== actual) {
+    const amount = Math.abs(expected - actual) / 100 * 0.05;
+    return expected > actual ? darken(amount, color) : lighten(amount, color);
+  }
+  return color;
+};
+const getColorV8 = memoize(function (hue) {
+  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;
+  }
+  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 {
+    _hue = hue;
+  }
+  if (Object.prototype.hasOwnProperty.call(palette, _hue)) {
+    _hue = palette[_hue];
+  }
+  if (typeof _hue === 'object') {
+    retVal = _hue[shade];
+    if (!retVal) {
+      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);
+    }
+  } else {
+    retVal = adjust(_hue, shade, DEFAULT_SHADE);
+  }
+  if (transparency) {
+    retVal = rgba(retVal, transparency);
+  }
+  return retVal;
+}, (hue, shade, theme, transparency) => JSON.stringify({
+  hue,
+  shade,
+  palette: theme?.palette,
+  colors: theme?.colors,
+  transparency
+}));
+
+export { DEFAULT_SHADE, getColorV8 };

package/dist/esm/utils/getDocument.js

@@ -0,0 +1,14 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+function getDocument() {
+  let {
+    theme
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return theme && theme.document || document;
+}
+
+export { getDocument as default };

package/dist/esm/utils/getFocusBoxShadow.js

@@ -0,0 +1,34 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import DEFAULT_THEME from '../elements/theme/index.js';
+import { getColorV8, DEFAULT_SHADE } from './getColorV8.js';
+
+const getFocusBoxShadow = _ref => {
+  let {
+    boxShadow,
+    inset = false,
+    hue = 'primaryHue',
+    shade = DEFAULT_SHADE,
+    shadowWidth = 'md',
+    spacerHue = 'background',
+    spacerShade = DEFAULT_SHADE,
+    spacerWidth = 'xs',
+    theme = DEFAULT_THEME
+  } = _ref;
+  const color = getColorV8(hue, shade, theme);
+  const shadow = theme.shadows[shadowWidth](color);
+  if (spacerWidth === null) {
+    return `${inset ? 'inset' : ''} ${shadow}`;
+  }
+  const spacerColor = getColorV8(spacerHue, spacerShade, theme);
+  const retVal = `
+    ${inset ? 'inset' : ''} ${theme.shadows[spacerWidth](spacerColor)},
+    ${inset ? 'inset' : ''} ${shadow}`;
+  return boxShadow ? `${retVal}, ${boxShadow}` : retVal;
+};
+
+export { getFocusBoxShadow };

package/dist/esm/utils/getLineHeight.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { getValueAndUnit } from 'polished';
+
+function getLineHeight(height, fontSize) {
+  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 '${heightUnit}' units.`);
+  }
+  if (fontSizeUnit && fontSizeUnit !== PIXELS) {
+    throw new Error(`Unexpected \`fontSize\` with '${fontSizeUnit}' units.`);
+  }
+  return heightValue / fontSizeValue;
+}
+
+export { getLineHeight as default };

package/dist/esm/utils/isRtl.js

@@ -0,0 +1,14 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+function isRtl() {
+  let {
+    theme
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return Boolean(theme && theme.rtl);
+}
+
+export { isRtl as default };

package/dist/esm/utils/mediaQuery.js

@@ -0,0 +1,56 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import DEFAULT_THEME from '../elements/theme/index.js';
+import { getValueAndUnit } from 'polished';
+
+const maxWidth = (breakpoints, breakpoint) => {
+  const keys = Object.keys(breakpoints);
+  const index = keys.indexOf(breakpoint) + 1;
+  if (keys[index]) {
+    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) {
+  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];
+    } else if (query === 'down') {
+      if (breakpoint === 'xl') {
+        min = DEFAULT_THEME.breakpoints.xs;
+      } else {
+        max = maxWidth(breakpoints, breakpoint);
+      }
+    } else if (query === 'only') {
+      min = breakpoints[breakpoint];
+      max = maxWidth(breakpoints, breakpoint);
+    }
+  } else if (query === 'between') {
+    min = breakpoints[breakpoint[0]];
+    max = maxWidth(breakpoints, breakpoint[1]);
+  }
+  if (min) {
+    retVal = `@media (min-width: ${min})`;
+    if (max) {
+      retVal = `${retVal} and (max-width: ${max})`;
+    }
+  } else if (max) {
+    retVal = `@media (max-width: ${max})`;
+  } else {
+    throw new Error(`Unexpected query and breakpoint combination: '${query}', '${breakpoint}'.`);
+  }
+  return retVal;
+}
+
+export { mediaQuery as default };