@zendeskgarden/react-theming 9.0.0-next.1 → 9.0.0-next.10

package/dist/index.cjs.js

@@ -1,178 +1,274 @@
 /**
- * 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.
- */
-
+* 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.
+*/
 'use strict';
 
 var React = require('react');
-var styledComponents = require('styled-components');
-var containerFocusvisible = require('@zendeskgarden/container-focusvisible');
-var containerUtilities = require('@zendeskgarden/container-utilities');
+var styled = require('styled-components');
+var chromaJs = require('chroma-js');
 var polished = require('polished');
+var get = require('lodash.get');
 var memoize = require('lodash.memoize');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+var get__default = /*#__PURE__*/_interopDefault(get);
 var memoize__default = /*#__PURE__*/_interopDefault(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: '#f8f9f9',
-    200: '#e9ebed',
+    200: '#e8eaec',
     300: '#d8dcde',
-    400: '#c2c8cc',
-    500: '#87929d',
-    600: '#68737d',
-    700: '#49545c',
-    800: '#2f3941'
+    400: '#b0b8be',
+    500: '#919ca5',
+    600: '#848f99',
+    700: '#5c6970',
+    800: '#39434b',
+    900: '#293239',
+    1000: '#1c2227',
+    1100: '#151a1e',
+    1200: '#0a0d0e'
   },
   blue: {
     100: '#edf7ff',
-    200: '#cee2f2',
-    300: '#adcce4',
-    400: '#5293c7',
-    500: '#337fbd',
-    600: '#1f73b7',
-    700: '#144a75',
-    800: '#0f3554'
+    200: '#ddecf8',
+    300: '#cce0f1',
+    400: '#93bcdc',
+    500: '#66a0cd',
+    600: '#2694d6',
+    700: '#1f73b7',
+    800: '#13456d',
+    900: '#0f3655',
+    1000: '#0a2338',
+    1100: '#061420',
+    1200: '#040d15'
   },
   red: {
-    100: '#fff0f1',
-    200: '#f5d5d8',
-    300: '#f5b5ba',
-    400: '#e35b66',
-    500: '#d93f4c',
-    600: '#cc3340',
-    700: '#8c232c',
-    800: '#681219'
+    100: '#fff2f3',
+    200: '#fee3e5',
+    300: '#f5d5d8',
+    400: '#f2a1a8',
+    500: '#ea7881',
+    600: '#eb5c69',
+    700: '#cd3642',
+    800: '#7e1d25',
+    900: '#671219',
+    1000: '#3d1418',
+    1100: '#1d1011',
+    1200: '#100b0c'
   },
   yellow: {
-    100: '#fff7ed',
-    200: '#ffeedb',
-    300: '#fed6a8',
-    400: '#ffb057',
-    500: '#f79a3e',
-    600: '#ed8f1c',
-    700: '#ad5918',
-    800: '#703815'
+    100: '#fff3e4',
+    200: '#ffe6cb',
+    300: '#fed6a9',
+    400: '#fca347',
+    500: '#e38215',
+    600: '#d67305',
+    700: '#ac5918',
+    800: '#673515',
+    900: '#4c2c17',
+    1000: '#2d1e15',
+    1100: '#18120f',
+    1200: '#0e0c0b'
   },
   green: {
-    100: '#edf8f4',
-    200: '#d1e8df',
-    300: '#aecfc2',
-    400: '#5eae91',
-    500: '#228f67',
-    600: '#038153',
-    700: '#186146',
-    800: '#0b3b29'
+    100: '#eef8f4',
+    200: '#daeee6',
+    300: '#cae3d9',
+    400: '#94c1b0',
+    500: '#4eab89',
+    600: '#26a178',
+    700: '#037f52',
+    800: '#104b35',
+    900: '#0b3b29',
+    1000: '#0c261c',
+    1100: '#0a1511',
+    1200: '#080d0c'
   },
   kale: {
-    100: '#f5fcfc',
+    100: '#ecf9f9',
     200: '#daeded',
-    300: '#bdd9d7',
-    400: '#90bbbb',
-    500: '#498283',
-    600: '#17494d',
-    700: '#03363d',
-    800: '#012b30'
+    300: '#cbe2e1',
+    400: '#97bfbf',
+    500: '#6ba4a5',
+    600: '#4a9999',
+    700: '#40787a',
+    800: '#16494f',
+    900: '#063940',
+    1000: '#03252a',
+    1100: '#061517',
+    1200: '#060e0e'
   },
   fuschia: {
-    400: '#d653c2',
-    600: '#a81897',
-    M400: '#cf62a8',
-    M600: '#a8458c'
+    100: '#fbf3f8',
+    200: '#f7e6f1',
+    300: '#f2d5e7',
+    400: '#e3a4cc',
+    500: '#d77db7',
+    600: '#d16aac',
+    700: '#b34496',
+    800: '#78116c',
+    900: '#5a0d51',
+    1000: '#3f0939',
+    1100: '#31072c',
+    1200: '#1b0418'
   },
   pink: {
-    400: '#ec4d63',
-    600: '#d42054',
-    M400: '#d57287',
-    M600: '#b23a5d'
+    100: '#fcf3f4',
+    200: '#f7e5e8',
+    300: '#f3d6dc',
+    400: '#e5a6b4',
+    500: '#d98193',
+    600: '#d96b81',
+    700: '#d62054',
+    800: '#75263d',
+    900: '#561d2e',
+    1000: '#3c141f',
+    1100: '#2e0f18',
+    1200: '#17080c'
   },
   crimson: {
-    400: '#e34f32',
-    600: '#c72a1c',
-    M400: '#cc6c5b',
-    M600: '#b24a3c'
+    100: '#fbf3f2',
+    200: '#f7e7e4',
+    300: '#f1d7d2',
+    400: '#e2aaa0',
+    500: '#d58678',
+    600: '#cf7464',
+    700: '#be4938',
+    800: '#811b12',
+    900: '#61140d',
+    1000: '#440e09',
+    1100: '#340b07',
+    1200: '#1c0604'
   },
   orange: {
-    400: '#de701d',
-    600: '#bf5000',
-    M400: '#d4772c',
-    M600: '#b35827'
+    100: '#fdf3ed',
+    200: '#fae7d8',
+    300: '#f7d7be',
+    400: '#eda875',
+    500: '#e58035',
+    600: '#d57428',
+    700: '#af5626',
+    800: '#693317',
+    900: '#4d2711',
+    1000: '#361a0c',
+    1100: '#291409',
+    1200: '#150a04'
   },
   lemon: {
-    400: '#ffd424',
-    600: '#ffbb10',
-    M400: '#e7a500',
-    M600: '#c38f00'
+    100: '#fff7d4',
+    200: '#ffea97',
+    300: '#ffdc4f',
+    400: '#efab00',
+    500: '#c79100',
+    600: '#b68500',
+    700: '#8f6900',
+    800: '#563e00',
+    900: '#3f2e00',
+    1000: '#2b2000',
+    1100: '#221800',
+    1200: '#110c00'
   },
   lime: {
-    400: '#43b324',
-    600: '#2e8200',
-    M400: '#519e2d',
-    M600: '#47782c'
+    100: '#ecfae7',
+    200: '#d1f3c7',
+    300: '#b3eda3',
+    400: '#4fd12b',
+    500: '#45b025',
+    600: '#509f2d',
+    700: '#3d7e19',
+    800: '#2c491b',
+    900: '#203614',
+    1000: '#16250e',
+    1100: '#111d0a',
+    1200: '#090e05'
   },
   mint: {
-    400: '#00a656',
-    600: '#058541',
-    M400: '#299c66',
-    M600: '#2e8057'
+    100: '#d6ffeb',
+    200: '#9affce',
+    300: '#0afe89',
+    400: '#00d26d',
+    500: '#01b15c',
+    600: '#16a260',
+    700: '#2d7e55',
+    800: '#1b4b33',
+    900: '#143726',
+    1000: '#0e261a',
+    1100: '#0b1d14',
+    1200: '#050e0a'
   },
   teal: {
-    400: '#02a191',
-    600: '#028079',
-    M400: '#2d9e8f',
-    M600: '#3c7873'
+    100: '#d4fefa',
+    200: '#88fdf1',
+    300: '#0bf8e1',
+    400: '#03cdb8',
+    500: '#02ad9c',
+    600: '#2a9d8f',
+    700: '#367a74',
+    800: '#254846',
+    900: '#1b3534',
+    1000: '#122423',
+    1100: '#0e1c1a',
+    1200: '#070d0d'
   },
   azure: {
-    400: '#3091ec',
-    600: '#1371d6',
-    M400: '#5f8dcf',
-    M600: '#3a70b2'
+    100: '#eff7fe',
+    200: '#d9ecfc',
+    300: '#c4e0fa',
+    400: '#82bcf4',
+    500: '#4b9fee',
+    600: '#3191ea',
+    700: '#2770c3',
+    800: '#23446b',
+    900: '#1a3250',
+    1000: '#122238',
+    1100: '#0e1a2a',
+    1200: '#070d14'
   },
   royal: {
-    400: '#5d7df5',
-    600: '#3353e2',
-    M400: '#7986d8',
-    M600: '#4b61c3'
+    100: '#f4f5fc',
+    200: '#e7e9f8',
+    300: '#d8dcf4',
+    400: '#acb4e7',
+    500: '#8a96dd',
+    600: '#7a88d9',
+    700: '#4c67d3',
+    800: '#1833ab',
+    900: '#122680',
+    1000: '#0d1a5a',
+    1100: '#0a1445',
+    1200: '#050a25'
   },
   purple: {
-    400: '#b552e2',
-    600: '#6a27b8',
-    M400: '#b072cc',
-    M600: '#9358b0'
+    100: '#f9f3fb',
+    200: '#f2e7f6',
+    300: '#e9d8f1',
+    400: '#d0a9e0',
+    500: '#bb86d3',
+    600: '#b276cd',
+    700: '#9256b1',
+    800: '#58209a',
+    900: '#411973',
+    1000: '#2e1150',
+    1100: '#230d3f',
+    1200: '#120720'
   }
 };
 
@@ -200,14 +296,96 @@ const breakpoints = {
   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'
+  chromeHue: 'kale',
+  variables: {
+    dark: {
+      background: {
+        default: 'neutralHue.1100',
+        raised: 'neutralHue.1000',
+        recessed: 'neutralHue.1200',
+        subtle: 'neutralHue.1000',
+        emphasis: 'neutralHue.600',
+        primary: 'primaryHue.900',
+        success: 'successHue.1000',
+        warning: 'warningHue.1000',
+        danger: 'dangerHue.1000',
+        primaryEmphasis: 'primaryHue.600',
+        successEmphasis: 'successHue.600',
+        warningEmphasis: 'warningHue.600',
+        dangerEmphasis: 'dangerHue.600'
+      },
+      border: {
+        default: 'neutralHue.800',
+        emphasis: 'neutralHue.600',
+        subtle: 'neutralHue.900',
+        success: 'successHue.800',
+        warning: 'warningHue.800',
+        danger: 'dangerHue.800',
+        primaryEmphasis: 'primaryHue.600',
+        successEmphasis: 'successHue.600',
+        warningEmphasis: 'warningHue.600',
+        dangerEmphasis: 'dangerHue.600'
+      },
+      foreground: {
+        default: 'neutralHue.300',
+        subtle: 'neutralHue.500',
+        onEmphasis: 'neutralHue.1100',
+        primary: 'primaryHue.600',
+        success: 'successHue.400',
+        warning: 'warningHue.400',
+        danger: 'dangerHue.400',
+        successEmphasis: 'successHue.300',
+        warningEmphasis: 'warningHue.300',
+        dangerEmphasis: 'dangerHue.300'
+      }
+    },
+    light: {
+      background: {
+        default: 'palette.white',
+        raised: 'palette.white',
+        recessed: 'neutralHue.100',
+        subtle: 'neutralHue.100',
+        emphasis: 'neutralHue.700',
+        primary: 'primaryHue.100',
+        success: 'successHue.100',
+        warning: 'warningHue.100',
+        danger: 'dangerHue.100',
+        primaryEmphasis: 'primaryHue.700',
+        successEmphasis: 'successHue.700',
+        warningEmphasis: 'warningHue.700',
+        dangerEmphasis: 'dangerHue.700'
+      },
+      border: {
+        default: 'neutralHue.300',
+        emphasis: 'neutralHue.600',
+        subtle: 'neutralHue.200',
+        success: 'successHue.300',
+        warning: 'warningHue.300',
+        danger: 'dangerHue.300',
+        primaryEmphasis: 'primaryHue.700',
+        successEmphasis: 'successHue.700',
+        warningEmphasis: 'warningHue.700',
+        dangerEmphasis: 'dangerHue.700'
+      },
+      foreground: {
+        default: 'neutralHue.900',
+        subtle: 'neutralHue.700',
+        onEmphasis: 'palette.white',
+        primary: 'primaryHue.700',
+        success: 'successHue.700',
+        warning: 'warningHue.700',
+        danger: 'dangerHue.700',
+        successEmphasis: 'successHue.900',
+        warningEmphasis: 'warningHue.900',
+        dangerEmphasis: 'dangerHue.900'
+      }
+    }
+  }
 };
 const fonts = {
   mono: ['SFMono-Regular' , 'Consolas' , '"Liberation Mono"' , 'Menlo', 'Courier', 'monospace'].join(','),
@@ -246,6 +424,20 @@ const lineHeights = {
   xxl: `${BASE * 8}px`,
   xxxl: `${BASE * 11}px`
 };
+const opacity = {
+  100: 0.08,
+  200: 0.16,
+  300: 0.24,
+  400: 0.32,
+  500: 0.4,
+  600: 0.48,
+  700: 0.56,
+  800: 0.64,
+  900: 0.72,
+  1000: 0.8,
+  1100: 0.88,
+  1200: 0.96
+};
 const palette = {
   ...PALETTE
 };
@@ -287,6 +479,7 @@ const DEFAULT_THEME = {
   fontWeights,
   iconSizes,
   lineHeights,
+  opacity,
   palette,
   rtl: false,
   shadowWidths,
@@ -294,42 +487,161 @@ const DEFAULT_THEME = {
   space
 };
 
-const useDocument = theme => {
-  const [controlledDocument, setControlledDocument] = React.useState();
-  React.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 = React.useRef(null);
-  const relativeDocument = useDocument(theme);
-  const controlledScopeRef = focusVisibleRef === null ? React__default.default.createRef() : containerUtilities.getControlledValue(focusVisibleRef, scopeRef);
-  containerFocusvisible.useFocusVisible({
-    scope: controlledScopeRef,
-    relativeDocument
-  });
-  return React__default.default.createElement(styledComponents.ThemeProvider, _extends({
+  return React__default.default.createElement(styled.ThemeProvider, Object.assign({
     theme: theme
-  }, other), focusVisibleRef === undefined ? React__default.default.createElement("div", {
-    ref: scopeRef
-  }, children) : children);
+  }, other));
 };
 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) {
@@ -356,8 +668,188 @@ const POSITION_MAP = {
   'left-start': 'right-top',
   'left-end': 'right-bottom'
 };
-const getArrowPosition = placement => {
-  return POSITION_MAP[placement];
+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 ? polished.darken(amount, color) : polished.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, 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' || chromaJs.valid(_hue)) {
+    if (shade === undefined) {
+      retVal = _hue;
+    } else {
+      const _colors = chromaJs.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 = polished.rgba(retVal, alpha);
+  }
+  return retVal;
+};
+const toProperty = (object, path) => {
+  const retVal = get__default.default(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__default.default(_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
+  });
+});
+
+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;
 };
 
 const DEFAULT_SHADE = 600;
@@ -368,7 +860,7 @@ const adjust = (color, expected, actual) => {
   }
   return color;
 };
-const getColor = memoize__default.default(function (hue) {
+const getColorV8 = memoize__default.default(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;
@@ -376,7 +868,17 @@ const getColor = memoize__default.default(function (hue) {
   if (isNaN(shade)) {
     return undefined;
   }
-  const palette = theme && theme.palette ? theme.palette : DEFAULT_THEME.palette;
+  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') {
@@ -422,13 +924,9 @@ const RTL_PLACEMENT_MAP = {
   left: 'right',
   'left-start': 'right-start',
   'left-end': 'right-end',
-  'top-start': 'top-end',
-  'top-end': 'top-start',
   right: 'left',
   'right-start': 'left-start',
-  'right-end': 'left-end',
-  'bottom-start': 'bottom-end',
-  'bottom-end': 'bottom-start'
+  'right-end': 'left-end'
 };
 const toFloatingPlacement = (placement, theme) => {
   let retVal = PLACEMENT_MAP[placement] || placement;
@@ -469,22 +967,32 @@ const getFocusBoxShadow = _ref => {
   let {
     boxShadow,
     inset = false,
-    hue = 'primaryHue',
-    shade = DEFAULT_SHADE,
+    color = {
+      variable: 'border.primaryEmphasis'
+    },
     shadowWidth = 'md',
-    spacerHue = 'background',
-    spacerShade = DEFAULT_SHADE,
+    spacerColor = {
+      variable: 'background.default'
+    },
     spacerWidth = 'xs',
-    theme = DEFAULT_THEME
+    theme = DEFAULT_THEME,
+    ...args
   } = _ref;
-  const color = getColor(hue, shade, theme);
-  const shadow = theme.shadows[shadowWidth](color);
+  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 = getColor(spacerHue, spacerShade, theme);
+  const _spacerColor = _args.spacerHue ? getColorV8(_args.spacerHue, _args.spacerShade, theme) : getColor({
+    ...spacerColor,
+    theme
+  });
   const retVal = `
-    ${inset ? 'inset' : ''} ${theme.shadows[spacerWidth](spacerColor)},
+    ${inset ? 'inset' : ''} ${theme.shadows[spacerWidth](_spacerColor)},
     ${inset ? 'inset' : ''} ${shadow}`;
   return boxShadow ? `${retVal}, ${boxShadow}` : retVal;
 };
@@ -570,8 +1078,8 @@ const exponentialSymbols = {
 };
 const animationStyles$1 = (position, modifier) => {
   const property = position.split('-')[0];
-  const animationName = styledComponents.keyframes(["0%,66%{", ":2px;border:transparent;}"], property);
-  return styledComponents.css(["&", "::before,&", "::after{animation:0.3s ease-in-out ", ";}"], modifier, modifier, animationName);
+  const animationName = styled.keyframes(["0%,66%{", ":2px;border:transparent;}"], property);
+  return styled.css(["&", "::before,&", "::after{animation:0.3s ease-in-out ", ";}"], modifier, modifier, animationName);
 };
 const positionStyles = (position, size, inset) => {
   const margin = polished.math(`${size} / -2`);
@@ -582,30 +1090,42 @@ const positionStyles = (position, size, inset) => {
   if (position.startsWith('top')) {
     propertyRadius = 'border-bottom-right-radius';
     clipPath = 'polygon(100% 0, 100% 1px, 1px 100%, 0 100%, 0 0)';
-    positionCss = styledComponents.css(["top:", ";right:", ";left:", ";margin-left:", ";"], placement, position === 'top-right' && size, position === 'top' ? '50%' : position === 'top-left' && size, position === 'top' && margin);
+    positionCss = styled.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 = styledComponents.css(["top:", ";right:", ";bottom:", ";margin-top:", ";"], position === 'right' ? '50%' : position === 'right-top' && size, placement, position === 'right-bottom' && size, position === 'right' && margin);
+    positionCss = styled.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 = styledComponents.css(["right:", ";bottom:", ";left:", ";margin-left:", ";"], position === 'bottom-right' && size, placement, position === 'bottom' ? '50%' : position === 'bottom-left' && size, position === 'bottom' && margin);
+    positionCss = styled.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 = styledComponents.css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? '50%' : position === 'left-top' && size, size, placement, position === 'left' && margin);
+    positionCss = styled.css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? '50%' : position === 'left-top' && size, size, placement, position === 'left' && margin);
   }
-  return styledComponents.css(["&::before{", ":100%;clip-path:", ";}&::before,&::after{", "}"], propertyRadius, clipPath, positionCss);
+  return styled.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 = polished.math(`${size} * 2 / sqrt(2)`, exponentialSymbols);
-  return styledComponents.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));
+  return styled.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 useDocument = theme => {
+  const [controlledDocument, setControlledDocument] = React.useState();
+  React.useEffect(() => {
+    if (theme && theme.document) {
+      setControlledDocument(theme.document);
+    } else {
+      setControlledDocument(document);
+    }
+  }, [theme]);
+  return controlledDocument;
+};
+
 const useWindow = theme => {
   const [controlledWindow, setControlledWindow] = React.useState();
   React.useEffect(() => {
@@ -653,12 +1173,12 @@ const animationStyles = (position, options) => {
   } else {
     transformFunction = 'translateX';
   }
-  const animationName = styledComponents.keyframes(["0%{transform:", "(", ");}"], transformFunction, translateValue);
-  return styledComponents.css(["&", " ", "{animation:0.2s cubic-bezier(0.15,0.85,0.35,1.2) ", ";}"], options.animationModifier, options.childSelector || '> *', animationName);
+  const animationName = styled.keyframes(["0%{transform:", "(", ");}"], transformFunction, translateValue);
+  return styled.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 styledComponents.css(["transition:", ";visibility:hidden;opacity:0;"], options.animationModifier && transition);
+  return styled.css(["transition:", ";visibility:hidden;opacity:0;"], options.animationModifier && transition);
 };
 function menuStyles(position) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -673,10 +1193,24 @@ function menuStyles(position) {
   } else {
     marginProperty = 'margin-right';
   }
-  return styledComponents.css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", " ", ";border-radius:", ";box-shadow:", ";background-color:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm, getColor('neutralHue', 300, theme), theme.borderRadii.md, theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7.5}px`, getColor('chromeHue', 600, theme, 0.15)), theme.colors.background, theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
+  return styled.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;color:", ";font-size:", ";font-weight:", ";direction:", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm, getColor({
+    theme,
+    variable: 'border.default'
+  }), theme.borderRadii.md, theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7.5}px`, getColor({
+    theme,
+    hue: 'chromeHue',
+    shade: 600,
+    transparency: 0.15
+  })), getColor({
+    theme,
+    variable: 'background.raised'
+  }), theme.rtl ? 'right' : 'left', getColor({
+    theme,
+    variable: 'foreground.default'
+  }), 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 SELECTOR_FOCUS_VISIBLE = '&:focus-visible';
 const focusStyles = _ref => {
   let {
     condition = true,
@@ -705,24 +1239,40 @@ const focusStyles = _ref => {
     outline = `${polished.math(`${theme.shadowWidths[shadowWidth]} - ${theme.shadowWidths[spacerWidth]}`)} solid transparent`;
     outlineOffset = theme.shadowWidths[spacerWidth];
   }
-  return styledComponents.css(["&:focus{outline:none;}", "{outline:", ";outline-offset:", ";box-shadow:", ";", "}"], selector, outline, outlineOffset, _boxShadow, styles);
+  return styled.css(["&:focus{outline:none;}", "{outline:", ";outline-offset:", ";box-shadow:", ";", "}"], selector, outline, outlineOffset, _boxShadow, styles);
 };
 
+const StyledBaseIcon = styled__default.default(_ref => {
+  let {
+    children,
+    theme,
+    ...props
+  } = _ref;
+  return React__default.default.cloneElement(React.Children.only(children), props);
+}).withConfig({
+  displayName: "StyledBaseIcon",
+  componentId: "sc-1moykgb-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'];
 const PLACEMENT = ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
 
-exports.ARRAY_ARROW_POSITION = ARROW_POSITION;
-exports.ARRAY_MENU_POSITION = MENU_POSITION;
+exports.ARROW_POSITION = ARROW_POSITION;
 exports.DEFAULT_THEME = DEFAULT_THEME;
+exports.MENU_POSITION = MENU_POSITION;
 exports.PALETTE = PALETTE;
+exports.PALETTE_V8 = PALETTE_V8;
 exports.PLACEMENT = PLACEMENT;
 exports.SELECTOR_FOCUS_VISIBLE = SELECTOR_FOCUS_VISIBLE;
+exports.StyledBaseIcon = StyledBaseIcon;
 exports.ThemeProvider = ThemeProvider;
 exports.arrowStyles = arrowStyles;
 exports.focusStyles = focusStyles;
 exports.getArrowPosition = getArrowPosition;
+exports.getCheckeredBackground = getCheckeredBackground;
 exports.getColor = getColor;
+exports.getColorV8 = getColorV8;
 exports.getFloatingPlacements = getFloatingPlacements;
 exports.getFocusBoxShadow = getFocusBoxShadow;
 exports.getLineHeight = getLineHeight;
@@ -730,7 +1280,6 @@ exports.getMenuPosition = getMenuPosition;
 exports.mediaQuery = mediaQuery;
 exports.menuStyles = menuStyles;
 exports.retrieveComponentStyles = retrieveComponentStyles;
-exports.retrieveTheme = retrieveComponentStyles;
 exports.useDocument = useDocument;
 exports.useText = useText;
 exports.useWindow = useWindow;