@zendeskgarden/react-theming 9.0.0-next.7 → 9.0.0-next.9

package/dist/esm/utils/StyledBaseIcon.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 styled from 'styled-components';
+import React, { Children } from 'react';
+
+const StyledBaseIcon = styled(_ref => {
+  let {
+    children,
+    theme,
+    ...props
+  } = _ref;
+  return React.cloneElement(Children.only(children), props);
+}).withConfig({
+  displayName: "StyledBaseIcon",
+  componentId: "sc-1moykgb-0"
+})([""]);
+
+export { StyledBaseIcon };

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';
+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/getArrowPosition.js

@@ -0,0 +1,35 @@
+/**
+* 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 POSITION_MAP = {
+  top: 'bottom',
+  'top-start': 'bottom-left',
+  'top-end': 'bottom-right',
+  right: 'left',
+  'right-start': 'left-top',
+  'right-end': 'left-bottom',
+  bottom: 'top',
+  'bottom-start': 'top-left',
+  'bottom-end': 'top-right',
+  left: 'right',
+  'left-start': 'right-top',
+  'left-end': 'right-bottom'
+};
+const RTL_POSITION_MAP = {
+  'bottom-left': 'bottom-right',
+  'bottom-right': 'bottom-left',
+  'top-left': 'top-right',
+  'top-right': 'top-left'
+};
+const getArrowPosition = (theme, placement) => {
+  let retVal = POSITION_MAP[placement];
+  if (theme.rtl) {
+    retVal = RTL_POSITION_MAP[retVal] || retVal;
+  }
+  return retVal;
+};
+
+export { POSITION_MAP, RTL_POSITION_MAP, getArrowPosition };

package/dist/esm/utils/getCheckeredBackground.js

@@ -0,0 +1,40 @@
+/**
+* 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 { getColor } from './getColor.js';
+
+const getCheckeredBackground = _ref => {
+  let {
+    theme,
+    size,
+    overlay,
+    positionY = 0,
+    repeat = 'repeat'
+  } = _ref;
+  const color = getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const dimensions = `${size}px ${size}px`;
+  const positionX1 = theme.rtl ? '100%' : '0';
+  const positionX2 = theme.rtl ? `calc(100% - ${size / 2}px)` : `${size / 2}px`;
+  const position1 = `${positionX1} ${positionY}px`;
+  const position2 = `${positionX2} ${size / 2 + positionY}px`;
+  const position3 = `${positionX2} ${positionY}px`;
+  const position4 = `${positionX1} ${size / -2 + positionY}px`;
+  let retVal = `
+    linear-gradient(45deg, ${color} 25%, transparent 25%) ${position1} / ${dimensions} ${repeat},
+    linear-gradient(45deg, transparent 75%, ${color} 75%) ${position2} / ${dimensions} ${repeat},
+    linear-gradient(135deg, ${color} 25%, transparent 25%) ${position3} / ${dimensions} ${repeat},
+    linear-gradient(135deg, transparent 75%, ${color} 75%) ${position4} / ${dimensions} ${repeat}
+  `;
+  if (overlay) {
+    retVal = overlay.startsWith('linear-gradient') ? `${overlay}, ${retVal}` : `linear-gradient(${overlay}, ${overlay}), ${retVal}`;
+  }
+  return retVal;
+};
+
+export { getCheckeredBackground };

package/dist/esm/utils/getColor.js

@@ -0,0 +1,153 @@
+/**
+* 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 { valid, scale } from 'chroma-js';
+import { rgba, darken, lighten } from 'polished';
+import get from 'lodash.get';
+import memoize from 'lodash.memoize';
+import DEFAULT_THEME from '../elements/theme/index.js';
+import PALETTE from '../elements/palette/index.js';
+
+const PALETTE_SIZE = Object.keys(PALETTE.blue).length;
+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 toShade = (shade, offset, scheme) => {
+  let _shade;
+  if (shade === undefined) {
+    _shade = scheme === 'dark' ? 500 : 700;
+  } else {
+    _shade = parseInt(shade.toString(), 10);
+    if (isNaN(_shade)) {
+      throw new TypeError(`Error: unexpected '${typeof shade}' type for color shade "${shade}"`);
+    }
+  }
+  return _shade + (offset || 0);
+};
+const toHex = (hue, shade, offset, scheme) => {
+  const _shade = toShade(shade, offset, scheme);
+  let retVal = hue[_shade];
+  if (!retVal) {
+    const closestShade = Object.keys(hue).map(hueShade => parseInt(hueShade, 10)).reduce((previous, current) => {
+      return Math.abs(current - _shade) < Math.abs(previous - _shade) ? current : previous;
+    });
+    retVal = adjust(hue[closestShade], _shade, closestShade);
+  }
+  return retVal;
+};
+const toColor = (colors, palette, opacity, scheme, hue, shade, offset, transparency) => {
+  let retVal;
+  let _hue = colors[hue]  || hue;
+  if (Object.hasOwn(palette, _hue)) {
+    _hue = palette[_hue];
+  }
+  if (typeof _hue === 'object') {
+    retVal = toHex(_hue, shade, offset, scheme);
+  } else if (_hue === 'transparent' || valid(_hue)) {
+    if (shade === undefined) {
+      retVal = _hue;
+    } else {
+      const _colors = scale([PALETTE.white, _hue, PALETTE.black]).correctLightness().colors(PALETTE_SIZE + 2);
+      _hue = _colors.reduce((_retVal, color, index) => {
+        if (index > 0 && index <= PALETTE_SIZE) {
+          _retVal[index * 100] = color;
+        }
+        return _retVal;
+      }, {});
+      retVal = toHex(_hue, shade, offset, scheme);
+    }
+  }
+  if (retVal && transparency) {
+    const alpha = transparency > 1 ? opacity[transparency] : transparency;
+    if (alpha === undefined) {
+      throw new Error('Error: invalid `transparency` parameter');
+    }
+    retVal = rgba(retVal, alpha);
+  }
+  return retVal;
+};
+const toProperty = (object, path) => {
+  const retVal = get(object, path);
+  if (typeof retVal === 'string') {
+    return retVal;
+  } else if (retVal === undefined) {
+    throw new ReferenceError(`Error: color variable '${path}' is not defined`);
+  } else {
+    throw new TypeError(`Error: unexpected '${typeof retVal}' type for color variable "${path}"`);
+  }
+};
+const getColor = memoize(_ref => {
+  let {
+    dark,
+    hue,
+    light,
+    offset,
+    shade,
+    theme,
+    transparency,
+    variable
+  } = _ref;
+  let retVal;
+  const palette = theme.palette && Object.keys(theme.palette).length > 0 ? theme.palette : DEFAULT_THEME.palette;
+  const {
+    base,
+    variables,
+    ...colors
+  } = theme.colors && Object.keys(theme.colors).length > 0 ? theme.colors : DEFAULT_THEME.colors;
+  const scheme = base === 'dark' ? 'dark' : 'light';
+  const mode = scheme === 'dark' ? dark : light;
+  let _hue = mode?.hue || hue;
+  let _shade = mode?.shade === undefined ? shade : mode.shade;
+  const _offset = mode?.offset === undefined ? offset : mode.offset;
+  const _transparency = mode?.transparency === undefined ? transparency : mode.transparency;
+  if (variable) {
+    const _variables = variables?.[scheme] ? variables[scheme] : DEFAULT_THEME.colors.variables[scheme];
+    const property = toProperty(_variables, variable);
+    const [key, value] = property.split(/\.(?<value>.*)/u);
+    if (key === 'palette') {
+      _hue = toProperty(palette, value);
+    } else {
+      _hue = key;
+      _shade = parseInt(value, 10);
+    }
+  }
+  if (_hue) {
+    const opacity = theme.opacity && Object.keys(theme.opacity).length > 0 ? theme.opacity : DEFAULT_THEME.opacity;
+    retVal = toColor(colors, palette, opacity, scheme, _hue, _shade, _offset, _transparency);
+  }
+  if (retVal === undefined) {
+    throw new Error('Error: invalid `getColor` parameters');
+  }
+  return retVal;
+}, _ref2 => {
+  let {
+    dark,
+    hue,
+    light,
+    offset,
+    shade,
+    theme,
+    transparency,
+    variable
+  } = _ref2;
+  return JSON.stringify({
+    dark,
+    hue,
+    light,
+    offset,
+    shade,
+    colors: theme.colors,
+    palette: theme.palette,
+    transparency,
+    variable
+  });
+});
+
+export { getColor };

package/dist/esm/utils/getColorV8.js

@@ -0,0 +1,72 @@
+/**
+* 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 PALETTE_V8 from '../elements/palette/v8.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 = {
+    background: PALETTE_V8.white,
+    foreground: PALETTE_V8.grey[800],
+    ...(theme && theme.palette ? {
+      ...theme.palette,
+      ...PALETTE_V8
+    } : {
+      ...DEFAULT_THEME.palette,
+      ...PALETTE_V8
+    })
+  };
+  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/getFloatingPlacements.js

@@ -0,0 +1,58 @@
+/**
+* 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 PLACEMENT_MAP = {
+  end: 'right',
+  'end-top': 'right-start',
+  'end-bottom': 'right-end',
+  start: 'left',
+  'start-top': 'left-start',
+  'start-bottom': 'left-end'
+};
+const RTL_PLACEMENT_MAP = {
+  left: 'right',
+  'left-start': 'right-start',
+  'left-end': 'right-end',
+  right: 'left',
+  'right-start': 'left-start',
+  'right-end': 'left-end'
+};
+const toFloatingPlacement = (placement, theme) => {
+  let retVal = PLACEMENT_MAP[placement] || placement;
+  if (theme.rtl) {
+    retVal = RTL_PLACEMENT_MAP[retVal] || retVal;
+  }
+  return retVal;
+};
+const SIDE_FALLBACKS_MAP = {
+  top: ['top-start', 'top', 'top-end'],
+  right: ['right-start', 'right', 'right-end'],
+  bottom: ['bottom-start', 'bottom', 'bottom-end'],
+  left: ['left-start', 'left', 'left-end']
+};
+const SIDE_OPPOSITE_MAP = {
+  top: 'bottom',
+  right: 'left',
+  bottom: 'top',
+  left: 'right'
+};
+const toFallbackPlacements = (primaryPlacement, theme, fallbackPlacements) => {
+  if (Array.isArray(fallbackPlacements) && fallbackPlacements.length > 0) {
+    return fallbackPlacements.map(fallbackPlacement => toFloatingPlacement(fallbackPlacement, theme));
+  }
+  const side = primaryPlacement.split('-')[0];
+  const sameSideFallbackPlacements = [...SIDE_FALLBACKS_MAP[side]];
+  const oppositeSideFallbackPlacements = SIDE_FALLBACKS_MAP[SIDE_OPPOSITE_MAP[side]];
+  sameSideFallbackPlacements.splice(sameSideFallbackPlacements.indexOf(primaryPlacement), 1);
+  return [...sameSideFallbackPlacements, ...oppositeSideFallbackPlacements];
+};
+const getFloatingPlacements = (theme, placement, fallbackPlacements) => {
+  const floatingPlacement = toFloatingPlacement(placement, theme);
+  const floatingFallbackPlacements = toFallbackPlacements(floatingPlacement, theme, fallbackPlacements);
+  return [floatingPlacement, floatingFallbackPlacements];
+};
+
+export { PLACEMENT_MAP, RTL_PLACEMENT_MAP, getFloatingPlacements };

package/dist/esm/utils/getFocusBoxShadow.js

@@ -0,0 +1,45 @@
+/**
+* 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 } from './getColorV8.js';
+import { getColor } from './getColor.js';
+
+const getFocusBoxShadow = _ref => {
+  let {
+    boxShadow,
+    inset = false,
+    color = {
+      variable: 'border.primaryEmphasis'
+    },
+    shadowWidth = 'md',
+    spacerColor = {
+      variable: 'background.default'
+    },
+    spacerWidth = 'xs',
+    theme = DEFAULT_THEME,
+    ...args
+  } = _ref;
+  const _args = args;
+  const _color = _args.hue ? getColorV8(_args.hue, _args.shade, theme) : getColor({
+    ...color,
+    theme
+  });
+  const shadow = theme.shadows[shadowWidth](_color);
+  if (spacerWidth === null) {
+    return `${inset ? 'inset' : ''} ${shadow}`;
+  }
+  const _spacerColor = _args.spacerHue ? getColorV8(_args.spacerHue, _args.spacerShade, theme) : getColor({
+    ...spacerColor,
+    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/getMenuPosition.js

@@ -0,0 +1,11 @@
+/**
+* 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 getMenuPosition = placement => {
+  return placement.split('-')[0];
+};
+
+export { getMenuPosition };

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 };