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

package/dist/index.esm.js

@@ -5,11 +5,11 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useState, useEffect, 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() {
@@ -42,128 +42,262 @@ const PALETTE = {
     sell: '#c38f00'
   },
   grey: {
-    100: '#f8f9f9',
-    200: '#e9ebed',
-    300: '#d8dcde',
-    400: '#c2c8cc',
-    500: '#87929d',
-    600: '#68737d',
-    700: '#49545c',
-    800: '#2f3941'
+    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: '#cee2f2',
-    300: '#adcce4',
-    400: '#5293c7',
-    500: '#337fbd',
-    600: '#1f73b7',
-    700: '#144a75',
-    800: '#0f3554'
+    200: '#d9eaf7',
+    300: '#b3d0e7',
+    400: '#92bbdb',
+    500: '#5896c9',
+    600: '#4b8ec5',
+    700: '#1f73b7',
+    800: '#18578b',
+    900: '#103859',
+    1000: '#0b253b',
+    1100: '#081c2d',
+    1200: '#061420'
   },
   red: {
-    100: '#fff0f1',
-    200: '#f5d5d8',
-    300: '#f5b5ba',
-    400: '#e35b66',
-    500: '#d93f4c',
-    600: '#cc3340',
-    700: '#8c232c',
-    800: '#681219'
+    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: '#fff7ed',
-    200: '#ffeedb',
-    300: '#fed6a8',
-    400: '#ffb057',
-    500: '#f79a3e',
-    600: '#ed8f1c',
-    700: '#ad5918',
-    800: '#703815'
+    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: '#edf8f4',
-    200: '#d1e8df',
-    300: '#aecfc2',
-    400: '#5eae91',
-    500: '#228f67',
-    600: '#038153',
-    700: '#186146',
-    800: '#0b3b29'
+    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: '#f5fcfc',
-    200: '#daeded',
-    300: '#bdd9d7',
-    400: '#90bbbb',
-    500: '#498283',
-    600: '#17494d',
-    700: '#03363d',
-    800: '#012b30'
+    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: {
-    400: '#d653c2',
-    600: '#a81897',
+    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: {
-    400: '#ec4d63',
-    600: '#d42054',
+    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: {
-    400: '#e34f32',
-    600: '#c72a1c',
+    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: {
-    400: '#de701d',
-    600: '#bf5000',
+    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: {
-    400: '#ffd424',
-    600: '#ffbb10',
+    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: {
-    400: '#43b324',
-    600: '#2e8200',
+    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: {
-    400: '#00a656',
-    600: '#058541',
+    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: {
-    400: '#02a191',
-    600: '#028079',
+    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: {
-    400: '#3091ec',
-    600: '#1371d6',
+    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: {
-    400: '#5d7df5',
-    600: '#3353e2',
+    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: {
-    400: '#b552e2',
-    600: '#6a27b8',
+    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'
   }
@@ -193,14 +327,36 @@ 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'
+      },
+      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(','),
@@ -287,42 +443,161 @@ const DEFAULT_THEME = {
   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);
+  }, 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) {
@@ -363,6 +638,140 @@ const getArrowPosition = (theme, placement) => {
   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) {
@@ -371,7 +780,7 @@ const adjust = (color, expected, actual) => {
   }
   return color;
 };
-const getColor = memoize(function (hue) {
+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;
@@ -379,7 +788,17 @@ const getColor = memoize(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') {
@@ -476,12 +895,12 @@ const getFocusBoxShadow = _ref => {
     spacerWidth = 'xs',
     theme = DEFAULT_THEME
   } = _ref;
-  const color = getColor(hue, shade, theme);
+  const color = getColorV8(hue, shade, theme);
   const shadow = theme.shadows[shadowWidth](color);
   if (spacerWidth === null) {
     return `${inset ? 'inset' : ''} ${shadow}`;
   }
-  const spacerColor = getColor(spacerHue, spacerShade, theme);
+  const spacerColor = getColorV8(spacerHue, spacerShade, theme);
   const retVal = `
     ${inset ? 'inset' : ''} ${theme.shadows[spacerWidth](spacerColor)},
     ${inset ? 'inset' : ''} ${shadow}`;
@@ -605,6 +1024,18 @@ function arrowStyles(position) {
   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 useDocument = theme => {
+  const [controlledDocument, setControlledDocument] = useState();
+  useEffect(() => {
+    if (theme && theme.document) {
+      setControlledDocument(theme.document);
+    } else {
+      setControlledDocument(document);
+    }
+  }, [theme]);
+  return controlledDocument;
+};
+
 const useWindow = theme => {
   const [controlledWindow, setControlledWindow] = useState();
   useEffect(() => {
@@ -672,10 +1103,10 @@ function menuStyles(position) {
   } 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, 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 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 SELECTOR_FOCUS_VISIBLE = '&:focus-visible';
 const focusStyles = _ref => {
   let {
     condition = true,
@@ -711,4 +1142,4 @@ const ARROW_POSITION = ['top', 'top-left', 'top-right', 'right', 'right-top', 'r
 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, PLACEMENT, SELECTOR_FOCUS_VISIBLE, ThemeProvider, arrowStyles, focusStyles, getArrowPosition, getColor as getColorV8, getFloatingPlacements, getFocusBoxShadow, getLineHeight, getMenuPosition, mediaQuery, menuStyles, retrieveComponentStyles, useDocument, useText, useWindow };
+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 };