@zendeskgarden/react-theming 9.0.0-next.2 → 9.0.0-next.20

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,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 { css, keyframes } from 'styled-components';
+import { stripUnit, math } from 'polished';
+
+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 transform;
+  let positionCss;
+  if (position.startsWith('top')) {
+    transform = 'rotate(-135deg)';
+    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')) {
+    transform = 'rotate(-45deg)';
+    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')) {
+    transform = 'rotate(45deg)';
+    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')) {
+    transform = 'rotate(135deg)';
+    positionCss = css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? '50%' : position === 'left-top' && size, size, placement, position === 'left' && margin);
+  }
+  return css(["&::before,&::after{transform:", ";", ";}"], transform, positionCss);
+};
+function arrowStyles(position) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const inset = options.inset || '0';
+  const size = options.size === undefined ? 6 : stripUnit(options.size);
+  const squareSize = `${Math.round(size * 2 / Math.sqrt(2))}px`;
+  const afterOffset = 0;
+  const beforeOffset = afterOffset + 2;
+  return css(["position:relative;&::before,&::after{position:absolute;border-width:inherit;border-style:inherit;width:", ";height:", ";content:'';box-sizing:inherit;}&::before{border-color:inherit;background-color:transparent;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}&::after{border-color:transparent;background-clip:content-box;background-color:inherit;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}", ";", ";"], squareSize, squareSize, beforeOffset, beforeOffset, afterOffset, afterOffset, positionStyles(position, squareSize, inset), options.animationModifier && animationStyles(position, options.animationModifier));
+}
+
+export { arrowStyles as default };

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,245 @@
+/**
+* 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 { getScale, parseToRgba } from 'color2k';
+import { getContrast, rgba, darken, lighten } from 'polished';
+import get from 'lodash.get';
+import memoize from 'lodash.memoize';
+import DEFAULT_THEME from '../elements/theme/index.js';
+
+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 isValidColor = maybeColor => {
+  try {
+    return !!parseToRgba(maybeColor);
+  } catch {
+    return false;
+  }
+};
+function findNearestIndex(target, arr) {
+  let startIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  if (typeof target !== 'number' || isNaN(target)) {
+    throw new Error('Target must be a number.');
+  }
+  if (!Array.isArray(arr)) {
+    throw new Error('Second argument must be an array.');
+  }
+  let left = startIndex;
+  let right = arr.length - 1;
+  if (target < arr[left]) return left;
+  if (target > arr[right]) return right;
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2);
+    if (arr[mid] === target) {
+      return mid;
+    } else if (arr[mid] < target) {
+      left = mid + 1;
+    } else {
+      right = mid - 1;
+    }
+  }
+  return arr[left] - target < target - arr[right] ? left : right;
+}
+const OFFSET_TO_TARGET_RATIO = {
+  100: 1.08,
+  200: 1.2,
+  300: 1.35,
+  400: 2,
+  500: 2.8,
+  600: 3.3,
+  700: 5,
+  800: 10,
+  900: 13,
+  1000: 16,
+  1100: 17.5,
+  1200: 19
+};
+const generateColorScale = memoize(color => {
+  const scaleSize = 200;
+  const _scale = getScale('#FFF', color, '#000');
+  const scale = x => _scale(x / scaleSize);
+  const colors = [];
+  const contrastRatios = [];
+  for (let i = 0; i <= scaleSize; i++) {
+    const _color = scale(i);
+    colors.push(_color);
+    contrastRatios.push(getContrast('#FFF', _color));
+  }
+  const palette = {};
+  let startIndex = 0;
+  for (const offset in OFFSET_TO_TARGET_RATIO) {
+    if (Object.prototype.hasOwnProperty.call(OFFSET_TO_TARGET_RATIO, offset)) {
+      const ratio = OFFSET_TO_TARGET_RATIO[offset];
+      const nearestIndex = findNearestIndex(ratio, contrastRatios, startIndex);
+      startIndex = nearestIndex + 1;
+      palette[offset] = colors[nearestIndex];
+    }
+  }
+  return palette;
+});
+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' || isValidColor(_hue)) {
+    if (shade === undefined) {
+      retVal = _hue;
+    } else {
+      _hue = generateColorScale(_hue);
+      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 fromRgba = value => {
+  let retVal;
+  const regex = /rgba\s*\(\s*(?<property>[#\w.]+)\s*,\s*(?<alpha>[\w.]+)\s*\)/gu;
+  const _rgba = regex.exec(value);
+  if (_rgba && _rgba.groups) {
+    const property = _rgba.groups.property;
+    const transparency = parseFloat(_rgba.groups.alpha);
+    retVal = {
+      property,
+      transparency
+    };
+  } else {
+    throw new Error(`Error: invalid \`rgba\` value "${value}"`);
+  }
+  return retVal;
+};
+const fromVariable = (variable, variables, palette) => {
+  const retVal = {};
+  let property = toProperty(variables, variable);
+  if (property.startsWith('rgba')) {
+    const value = fromRgba(property);
+    property = value.property;
+    retVal.transparency = value.transparency;
+  }
+  const [key, value] = property.split(/\.(?<value>.*)/u);
+  if (key === 'palette') {
+    retVal.hue = toProperty(palette, value);
+  } else {
+    retVal.hue = key;
+    if (value !== undefined) {
+      retVal.shade = parseInt(value, 10);
+    }
+  }
+  return retVal;
+};
+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;
+  let _transparency = mode?.transparency === undefined ? transparency : mode.transparency;
+  if (variable) {
+    const _variables = variables?.[scheme] ? variables[scheme] : DEFAULT_THEME.colors.variables[scheme];
+    const value = fromVariable(variable, _variables, palette);
+    _hue = value.hue;
+    _shade = value.shade;
+    _transparency = _transparency === undefined ? value.transparency : _transparency;
+  }
+  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,
+    opacity: theme.opacity,
+    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 };