@zendeskgarden/react-theming 9.0.0-next.6 → 9.0.0-next.8

package/dist/index.esm.js

@@ -1,1158 +0,0 @@
-/**
- * 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, { useState, useEffect, useRef, useMemo } from 'react';
-import { ThemeProvider as ThemeProvider$1, css, keyframes } from 'styled-components';
-import { useFocusVisible } from '@zendeskgarden/container-focusvisible';
-import { getControlledValue } from '@zendeskgarden/container-utilities';
-import { valid, scale } from 'chroma-js';
-import { rgba, darken, lighten, getValueAndUnit, math } from 'polished';
-import get from 'lodash.get';
-import memoize from 'lodash.memoize';
-
-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);
-}
-
-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: '#f4f6f6',
-    200: '#e4e7e9',
-    300: '#c7cdd0',
-    400: '#afb7bd',
-    500: '#88929d',
-    600: '#7f8a95',
-    700: '#65707a',
-    800: '#4b565f',
-    900: '#2e373f',
-    1000: '#1e252a',
-    1100: '#171b1f',
-    1200: '#101316'
-  },
-  blue: {
-    100: '#edf7ff',
-    200: '#d9eaf7',
-    300: '#b3d0e7',
-    400: '#92bbdb',
-    500: '#5896c9',
-    600: '#4b8ec5',
-    700: '#1f73b7',
-    800: '#18578b',
-    900: '#103859',
-    1000: '#0b253b',
-    1100: '#081c2d',
-    1200: '#061420'
-  },
-  red: {
-    100: '#fff2f3',
-    200: '#fde1e3',
-    300: '#f5bfc4',
-    400: '#f2a0a6',
-    500: '#e76973',
-    600: '#e35c67',
-    700: '#cd3642',
-    800: '#9d2933',
-    900: '#6c1219',
-    1000: '#431418',
-    1100: '#2d1315',
-    1200: '#1b1011'
-  },
-  yellow: {
-    100: '#fff3e4',
-    200: '#ffe2c2',
-    300: '#ffc079',
-    400: '#fba246',
-    500: '#d87916',
-    600: '#ce7117',
-    700: '#ac5918',
-    800: '#874114',
-    900: '#512d17',
-    1000: '#312016',
-    1100: '#221913',
-    1200: '#17120f'
-  },
-  green: {
-    100: '#eef8f4',
-    200: '#d7ede4',
-    300: '#b4d3c6',
-    400: '#91bfae',
-    500: '#3fa17e',
-    600: '#329974',
-    700: '#037f52',
-    800: '#186045',
-    900: '#0b3e2b',
-    1000: '#0c291e',
-    1100: '#0b1e17',
-    1200: '#0a1511'
-  },
-  kale: {
-    100: '#ecf9f9',
-    200: '#d8ebeb',
-    300: '#b3d2d0',
-    400: '#94bebd',
-    500: '#5e9b9c',
-    600: '#579394',
-    700: '#40787a',
-    800: '#275c5f',
-    900: '#0a3c42',
-    1000: '#02282d',
-    1100: '#041e22',
-    1200: '#061517'
-  },
-  fuschia: {
-    100: '#fbf3f8',
-    200: '#f6e2ef',
-    300: '#ecc0dc',
-    400: '#e3a2cc',
-    500: '#d36faf',
-    600: '#cf63a8',
-    700: '#b34496',
-    800: '#971688',
-    900: '#640e59',
-    1000: '#430a3d',
-    1100: '#34072f',
-    1200: '#260523',
-    M400: '#cf62a8',
-    M600: '#a8458c'
-  },
-  pink: {
-    100: '#fcf4f5',
-    200: '#f7e3e8',
-    300: '#edc1ca',
-    400: '#e4a5b3',
-    500: '#d57388',
-    600: '#e35b72',
-    700: '#d62054',
-    800: '#94304e',
-    900: '#611f32',
-    1000: '#401522',
-    1100: '#31101a',
-    1200: '#230b12',
-    M400: '#d57287',
-    M600: '#b23a5d'
-  },
-  crimson: {
-    100: '#fbf4f3',
-    200: '#f6e4e1',
-    300: '#eac3bc',
-    400: '#e1a89e',
-    500: '#d1796a',
-    600: '#cd6e5d',
-    700: '#be4938',
-    800: '#a32217',
-    900: '#6b160f',
-    1000: '#480f0a',
-    1100: '#370c08',
-    1200: '#280806',
-    M400: '#cc6c5b',
-    M600: '#b24a3c'
-  },
-  orange: {
-    100: '#fdf3ed',
-    200: '#f9e3d3',
-    300: '#f2c39f',
-    400: '#eda671',
-    500: '#e2721e',
-    600: '#d26e20',
-    700: '#af5626',
-    800: '#85421d',
-    900: '#562b13',
-    1000: '#3a1c0d',
-    1100: '#2c150a',
-    1200: '#1f0f07',
-    M400: '#d4772c',
-    M600: '#b35827'
-  },
-  lemon: {
-    100: '#fff6cf',
-    200: '#ffe682',
-    300: '#ffc417',
-    400: '#eda900',
-    500: '#ba8900',
-    600: '#b08100',
-    700: '#8f6900',
-    800: '#6d5000',
-    900: '#463300',
-    1000: '#2f2200',
-    1100: '#231a00',
-    1200: '#191200',
-    M400: '#e7a500',
-    M600: '#c38f00'
-  },
-  lime: {
-    100: '#ebfae6',
-    200: '#c9f2bd',
-    300: '#88e270',
-    400: '#4ecf2a',
-    500: '#4da42a',
-    600: '#489b20',
-    700: '#3d7e19',
-    800: '#385f23',
-    900: '#243c16',
-    1000: '#18280f',
-    1100: '#121e0b',
-    1200: '#0d1508',
-    M400: '#519e2d',
-    M600: '#47782c'
-  },
-  mint: {
-    100: '#d6ffeb',
-    200: '#83ffc3',
-    300: '#00ea79',
-    400: '#00d16d',
-    500: '#00a756',
-    600: '#279b65',
-    700: '#2d7d55',
-    800: '#225f41',
-    900: '#163d2a',
-    1000: '#0f291c',
-    1100: '#0b1e15',
-    1200: '#08150f',
-    M400: '#299c66',
-    M600: '#2e8057'
-  },
-  teal: {
-    100: '#d6fefa',
-    200: '#70fdef',
-    300: '#03e5ce',
-    400: '#03ccb8',
-    500: '#02a392',
-    600: '#1f998b',
-    700: '#367a74',
-    800: '#2e5c59',
-    900: '#1e3b39',
-    1000: '#142726',
-    1100: '#0f1d1c',
-    1200: '#0a1514',
-    M400: '#2d9e8f',
-    M600: '#3c7873'
-  },
-  azure: {
-    100: '#f0f7fe',
-    200: '#d7eafb',
-    300: '#a8d1f7',
-    400: '#7fbbf3',
-    500: '#3795ed',
-    600: '#598ad0',
-    700: '#2770c4',
-    800: '#2c5689',
-    900: '#1d3758',
-    1000: '#13253a',
-    1100: '#0e1b2c',
-    1200: '#0a131f',
-    M400: '#5f8dcf',
-    M600: '#3a70b2'
-  },
-  royal: {
-    100: '#f5f6fc',
-    200: '#e3e6f7',
-    300: '#c5cbee',
-    400: '#abb3e7',
-    500: '#7f8cda',
-    600: '#7182e1',
-    700: '#4d67d3',
-    800: '#1f40d8',
-    900: '#142a8d',
-    1000: '#0e1c5f',
-    1100: '#0a1548',
-    1200: '#070f34',
-    M400: '#7986d8',
-    M600: '#4b61c3'
-  },
-  purple: {
-    100: '#f9f4fb',
-    200: '#efe3f5',
-    300: '#ddc3e9',
-    400: '#cea8e0',
-    500: '#b57acf',
-    600: '#b16ecf',
-    700: '#9256b1',
-    800: '#722eb8',
-    900: '#491b7f',
-    1000: '#311256',
-    1100: '#250e41',
-    1200: '#1b0a2e',
-    M400: '#b072cc',
-    M600: '#9358b0'
-  }
-};
-
-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 = {
-  primaryHue: 'blue',
-  dangerHue: 'red',
-  warningHue: 'yellow',
-  successHue: 'green',
-  neutralHue: 'grey',
-  chromeHue: 'kale',
-  variables: {
-    dark: {
-      background: {
-        default: 'neutralHue.1100'
-      },
-      border: {
-        default: 'neutralHue.700'
-      },
-      foreground: {
-        default: 'neutralHue.300'
-      }
-    },
-    light: {
-      background: {
-        default: 'palette.white'
-      },
-      border: {
-        default: 'neutralHue.400'
-      },
-      foreground: {
-        default: 'neutralHue.900'
-      }
-    }
-  }
-};
-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
-};
-
-const useDocument = theme => {
-  const [controlledDocument, setControlledDocument] = useState();
-  useEffect(() => {
-    if (theme && theme.document) {
-      setControlledDocument(theme.document);
-    } else {
-      setControlledDocument(document);
-    }
-  }, [theme]);
-  return controlledDocument;
-};
-
-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, _extends({
-    theme: theme
-  }, other), focusVisibleRef === undefined ? React.createElement("div", {
-    ref: scopeRef
-  }, children) : children);
-};
-ThemeProvider.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const PALETTE_V8 = {
-  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'
-  }
-};
-
-function retrieveComponentStyles(componentId, props) {
-  const components = props.theme && props.theme.components;
-  if (!components) {
-    return undefined;
-  }
-  const componentStyles = components[componentId];
-  if (typeof componentStyles === 'function') {
-    return componentStyles(props);
-  }
-  return componentStyles;
-}
-
-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;
-};
-
-const PALETTE_SIZE = Object.keys(PALETTE.blue).length;
-const adjust$1 = (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$1(hue[closestShade], _shade, closestShade);
-  }
-  return retVal;
-};
-const toColor = (colors, palette, 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 (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) {
-    retVal = rgba(retVal, transparency);
-  }
-  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) {
-    retVal = toColor(colors, palette, 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
-  });
-});
-
-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
-}));
-
-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];
-};
-
-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;
-};
-
-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;
-}
-
-const getMenuPosition = placement => {
-  return placement.split('-')[0];
-};
-
-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;
-}
-
-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$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);
-};
-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$1(position, options.animationModifier));
-}
-
-const useWindow = theme => {
-  const [controlledWindow, setControlledWindow] = useState();
-  useEffect(() => {
-    if (theme && theme.window) {
-      setControlledWindow(theme.window);
-    } else {
-      setControlledWindow(window);
-    }
-  }, [theme]);
-  return controlledWindow;
-};
-
-const useText = function (component, props, name, text) {
-  let condition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
-  const value = condition ? props[name] : undefined;
-  return useMemo(() => {
-    if (condition) {
-      if (name === 'children') {
-        throw new Error('Error: `children` is not a valid `useText` prop.');
-      } else if (value === null || 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 \`${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;
-      }
-    }
-    return value;
-  }, [component.displayName, value, name, text, condition]);
-};
-
-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 = `-${translateValue}`;
-  } else if (position === 'bottom') {
-    transformFunction = 'translateY';
-    translateValue = `-${translateValue}`;
-  } else {
-    transformFunction = 'translateX';
-  }
-  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);
-};
-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) {
-  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') {
-    marginProperty = 'margin-left';
-  } else if (position === 'bottom') {
-    marginProperty = 'margin-top';
-  } 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, getColorV8('neutralHue', 300, theme), theme.borderRadii.md, theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7.5}px`, getColorV8('chromeHue', 600, theme, 0.15)), getColorV8('background', 600 , theme), theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
-}
-
-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);
-};
-
-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'];
-const PLACEMENT = ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
-
-export { ARROW_POSITION, DEFAULT_THEME, MENU_POSITION, PALETTE, PALETTE_V8, PLACEMENT, SELECTOR_FOCUS_VISIBLE, ThemeProvider, arrowStyles, focusStyles, getArrowPosition, getColor, getColorV8, getFloatingPlacements, getFocusBoxShadow, getLineHeight, getMenuPosition, mediaQuery, menuStyles, retrieveComponentStyles, useDocument, useText, useWindow };