@zendeskgarden/react-theming 9.12.2 → 9.12.4

package/dist/esm/elements/ColorSchemeProvider.js

@@ -7,15 +7,15 @@
 import React, { createContext, useMemo, useEffect, useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 
-const mediaQuery = typeof window === 'undefined' ? undefined : window.matchMedia('(prefers-color-scheme: dark)');
-const useColorScheme = (initialState, colorSchemeKey) => {
+const mediaQuery$1 = typeof window === 'undefined' ? undefined : window.matchMedia('(prefers-color-scheme: dark)');
+const useColorScheme$1 = (initialState, colorSchemeKey) => {
   const localStorage =
   typeof window === 'undefined' || colorSchemeKey === null ? undefined : window.localStorage;
   const getState = useCallback(_state => {
     const isSystem = _state === 'system' || _state === undefined || _state === null;
     let colorScheme;
     if (isSystem) {
-      colorScheme = mediaQuery?.matches ? 'dark' : 'light';
+      colorScheme = mediaQuery$1?.matches ? 'dark' : 'light';
     } else {
       colorScheme = _state;
     }
@@ -35,17 +35,16 @@ const useColorScheme = (initialState, colorSchemeKey) => {
   };
 };
 const ColorSchemeContext = createContext(undefined);
-const ColorSchemeProvider = _ref => {
-  let {
-    children,
-    colorSchemeKey = 'color-scheme',
-    initialColorScheme = 'system'
-  } = _ref;
+const ColorSchemeProvider = ({
+  children,
+  colorSchemeKey = 'color-scheme',
+  initialColorScheme = 'system'
+}) => {
   const {
     isSystem,
     colorScheme,
     setColorScheme
-  } = useColorScheme(initialColorScheme, colorSchemeKey);
+  } = useColorScheme$1(initialColorScheme, colorSchemeKey);
   const contextValue = useMemo(() => ({
     colorScheme,
     isSystem,
@@ -56,12 +55,12 @@ const ColorSchemeProvider = _ref => {
       setColorScheme('system');
     };
     if (isSystem) {
-      mediaQuery?.addEventListener('change', eventListener);
+      mediaQuery$1?.addEventListener('change', eventListener);
     } else {
-      mediaQuery?.removeEventListener('change', eventListener);
+      mediaQuery$1?.removeEventListener('change', eventListener);
     }
     return () => {
-      mediaQuery?.removeEventListener('change', eventListener);
+      mediaQuery$1?.removeEventListener('change', eventListener);
     };
   }, [isSystem, setColorScheme]);
   return React.createElement(ColorSchemeContext.Provider, {

package/dist/esm/elements/ThemeProvider.js

@@ -8,14 +8,11 @@ import React from 'react';
 import { ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import DEFAULT_THEME from './theme/index.js';
 
-const ThemeProvider = _ref => {
-  let {
-    theme = DEFAULT_THEME,
-    ...other
-  } = _ref;
-  return React.createElement(ThemeProvider$1, Object.assign({
-    theme: theme
-  }, other));
-};
+const ThemeProvider = ({
+  theme = DEFAULT_THEME,
+  ...other
+}) => React.createElement(ThemeProvider$1, Object.assign({
+  theme: theme
+}, other));
 
 export { ThemeProvider };

package/dist/esm/utils/StyledBaseIcon.js

@@ -8,14 +8,11 @@ import styled from 'styled-components';
 import { cloneElement, Children } from 'react';
 
 const StyledBaseIcon = styled(
-_ref => {
-  let {
-    children,
-    theme,
-    ...props
-  } = _ref;
-  return cloneElement(Children.only(children), props);
-}).withConfig({
+({
+  children,
+  theme,
+  ...props
+}) => cloneElement(Children.only(children), props)).withConfig({
   displayName: "StyledBaseIcon",
   componentId: "sc-1moykgb-0"
 })([""]);

package/dist/esm/utils/arrowStyles.js

@@ -7,7 +7,7 @@
 import { css, keyframes } from 'styled-components';
 import { stripUnit } from 'polished';
 
-const animationStyles = (position, modifier) => {
+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);
@@ -36,8 +36,7 @@ const positionStyles = (position, size, inset, shift) => {
   }
   return css(["&::before,&::after{transform:", ";", ";}"], transform, positionCss);
 };
-function arrowStyles(position) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+function arrowStyles(position, options = {}) {
   const inset = stripUnit(options.inset || '0');
   const size = stripUnit(options.size || '6');
   const shift = stripUnit(options.shift || '0');
@@ -47,7 +46,7 @@ function arrowStyles(position) {
   const squareSizePx = `${squareSizeRounded}px`;
   const afterOffset = 0;
   const beforeOffset = afterOffset + 2;
-  return css(["position:relative;&::before,&::after{position:absolute;border-width:inherit;border-style:inherit;background-color:inherit;width:", ";height:", ";content:'';box-sizing:inherit;}&::before{border-color:inherit;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}&::after{border-color:transparent;background-clip:content-box;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}", ";", ";"], squareSizePx, squareSizePx, beforeOffset, beforeOffset, afterOffset, afterOffset, positionStyles(position, squareSizeRounded, inset, shift), options.animationModifier && animationStyles(position, options.animationModifier));
+  return css(["position:relative;&::before,&::after{position:absolute;border-width:inherit;border-style:inherit;background-color:inherit;width:", ";height:", ";content:'';box-sizing:inherit;}&::before{border-color:inherit;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}&::after{border-color:transparent;background-clip:content-box;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}", ";", ";"], squareSizePx, squareSizePx, beforeOffset, beforeOffset, afterOffset, afterOffset, positionStyles(position, squareSizeRounded, inset, shift), options.animationModifier && animationStyles$1(position, options.animationModifier));
 }
 
 export { arrowStyles as default };

package/dist/esm/utils/focusStyles.js

@@ -9,19 +9,18 @@ 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 focusStyles = ({
+  condition = true,
+  selector = SELECTOR_FOCUS_VISIBLE,
+  shadowWidth = 'md',
+  spacerWidth = 'xs',
+  styles: {
+    boxShadow,
+    ...styles
+  } = {},
+  theme,
+  ...options
+}) => {
   const _boxShadow = condition ? getFocusBoxShadow({
     boxShadow,
     shadowWidth,

package/dist/esm/utils/getCheckeredBackground.js

@@ -6,14 +6,13 @@
 */
 import { getColor } from './getColor.js';
 
-const getCheckeredBackground = _ref => {
-  let {
-    theme,
-    size,
-    overlay,
-    positionY = 0,
-    repeat = 'repeat'
-  } = _ref;
+const getCheckeredBackground = ({
+  theme,
+  size,
+  overlay,
+  positionY = 0,
+  repeat = 'repeat'
+}) => {
   const color = getColor({
     theme,
     variable: 'border.default'

package/dist/esm/utils/getColor.js

@@ -10,7 +10,7 @@ import get from 'lodash.get';
 import memoize from 'lodash.memoize';
 import DEFAULT_THEME from '../elements/theme/index.js';
 
-const adjust = (color, expected, actual) => {
+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);
@@ -37,7 +37,7 @@ const toHex = (hue, shade, offset, transparency, scheme) => {
     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);
+    retVal = adjust$1(hue[closestShade], _shade, closestShade);
   }
   return retVal;
 };
@@ -52,8 +52,7 @@ const isValidColor = maybeColor => {
   }
   return retVal;
 };
-function findNearestIndex(target, arr) {
-  let startIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+function findNearestIndex(target, arr, startIndex = 0) {
   if (typeof target !== 'number' || isNaN(target)) {
     throw new Error('Target must be a number.');
   }
@@ -183,48 +182,47 @@ const fromVariable = (variable, variables, palette) => {
   }
   return retVal;
 };
-const CACHE = new WeakMap();
-const KEYS = {
+const CACHE$1 = new WeakMap();
+const KEYS$1 = {
   colors: 0,
   palette: 0,
   opacity: 0
 };
-CACHE.set(DEFAULT_THEME.colors, KEYS.colors);
-CACHE.set(DEFAULT_THEME.palette, KEYS.palette);
-CACHE.set(DEFAULT_THEME.opacity, KEYS.opacity);
-const toKey = _ref => {
-  let {
-    dark,
-    hue,
-    light,
-    offset,
-    shade,
-    theme,
-    transparency,
-    variable
-  } = _ref;
+CACHE$1.set(DEFAULT_THEME.colors, KEYS$1.colors);
+CACHE$1.set(DEFAULT_THEME.palette, KEYS$1.palette);
+CACHE$1.set(DEFAULT_THEME.opacity, KEYS$1.opacity);
+const toKey$1 = ({
+  dark,
+  hue,
+  light,
+  offset,
+  shade,
+  theme,
+  transparency,
+  variable
+}) => {
   let themeColorsKey;
   if (theme.colors) {
-    themeColorsKey = CACHE.get(theme.colors);
+    themeColorsKey = CACHE$1.get(theme.colors);
     if (themeColorsKey === undefined) {
-      themeColorsKey = ++KEYS.colors;
-      CACHE.set(theme.colors, themeColorsKey);
+      themeColorsKey = ++KEYS$1.colors;
+      CACHE$1.set(theme.colors, themeColorsKey);
     }
   }
   let themeOpacityKey;
   if (theme.opacity) {
-    themeOpacityKey = CACHE.get(theme.opacity);
+    themeOpacityKey = CACHE$1.get(theme.opacity);
     if (themeOpacityKey === undefined) {
-      themeOpacityKey = ++KEYS.opacity;
-      CACHE.set(theme.opacity, themeOpacityKey);
+      themeOpacityKey = ++KEYS$1.opacity;
+      CACHE$1.set(theme.opacity, themeOpacityKey);
     }
   }
   let themePaletteKey;
   if (theme.palette) {
-    themePaletteKey = CACHE.get(theme.palette);
+    themePaletteKey = CACHE$1.get(theme.palette);
     if (themePaletteKey === undefined) {
-      themePaletteKey = ++KEYS.palette;
-      CACHE.set(theme.palette, themePaletteKey);
+      themePaletteKey = ++KEYS$1.palette;
+      CACHE$1.set(theme.palette, themePaletteKey);
     }
   }
   let retVal = `{${themeColorsKey},${themePaletteKey},${themeOpacityKey}}`;
@@ -251,17 +249,16 @@ const toKey = _ref => {
   }
   return retVal;
 };
-const getColor = memoize(_ref2 => {
-  let {
-    dark,
-    hue,
-    light,
-    offset,
-    shade,
-    theme,
-    transparency,
-    variable
-  } = _ref2;
+const getColor = memoize(({
+  dark,
+  hue,
+  light,
+  offset,
+  shade,
+  theme,
+  transparency,
+  variable
+}) => {
   let retVal;
   const palette = theme.palette && Object.keys(theme.palette).length > 0 ? theme.palette : DEFAULT_THEME.palette;
   const {
@@ -290,27 +287,24 @@ const getColor = memoize(_ref2 => {
     throw new Error('Error: invalid `getColor` parameters');
   }
   return retVal;
-}, _ref3 => {
-  let {
-    dark,
-    hue,
-    light,
-    offset,
-    shade,
-    theme,
-    transparency,
-    variable
-  } = _ref3;
-  return toKey({
-    dark,
-    hue,
-    light,
-    offset,
-    shade,
-    theme,
-    transparency,
-    variable
-  });
-});
+}, ({
+  dark,
+  hue,
+  light,
+  offset,
+  shade,
+  theme,
+  transparency,
+  variable
+}) => toKey$1({
+  dark,
+  hue,
+  light,
+  offset,
+  shade,
+  theme,
+  transparency,
+  variable
+}));
 
 export { getColor };

package/dist/esm/utils/getColorV8.js

@@ -24,13 +24,12 @@ const KEYS = {
 };
 CACHE.set(DEFAULT_THEME.colors, KEYS.colors);
 CACHE.set(DEFAULT_THEME.palette, KEYS.palette);
-const toKey = _ref => {
-  let {
-    hue,
-    shade,
-    theme,
-    transparency
-  } = _ref;
+const toKey = ({
+  hue,
+  shade,
+  theme,
+  transparency
+}) => {
   let retVal = `${typeof hue === 'object' ? JSON.stringify(hue) : hue}`;
   if (shade !== undefined) {
     retVal += `,${shade}`;
@@ -59,10 +58,7 @@ const toKey = _ref => {
   }
   return retVal;
 };
-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;
+const getColorV8 = memoize((hue, shade = DEFAULT_SHADE, theme, transparency) => {
   let retVal;
   if (isNaN(shade)) {
     return undefined;

package/dist/esm/utils/getFocusBoxShadow.js

@@ -8,21 +8,20 @@ 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 getFocusBoxShadow = ({
+  boxShadow,
+  inset = false,
+  color = {
+    variable: 'border.primaryEmphasis'
+  },
+  shadowWidth = 'md',
+  spacerColor = {
+    variable: 'background.default'
+  },
+  spacerWidth = 'xs',
+  theme = DEFAULT_THEME,
+  ...args
+}) => {
   const _args = args;
   const _color = _args.hue ? getColorV8(_args.hue, _args.shade, theme) : getColor({
     ...color,

package/dist/esm/utils/menuStyles.js

@@ -51,8 +51,7 @@ 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] : {};
+function menuStyles(position, options = {}) {
   const theme = options.theme || DEFAULT_THEME;
   let marginProperty;
   if (position === 'top') {

package/dist/esm/utils/useText.js

@@ -6,8 +6,7 @@
 */
 import { useMemo } from 'react';
 
-const useText = function (component, props, name, text) {
-  let condition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+const useText = (component, props, name, text, condition = true) => {
   const value = condition ? props[name] : undefined;
   return useMemo(() => {
     if (condition) {

package/dist/index.cjs.js

@@ -50,12 +50,11 @@ const useColorScheme$1 = (initialState, colorSchemeKey) => {
   };
 };
 const ColorSchemeContext = React.createContext(undefined);
-const ColorSchemeProvider = _ref => {
-  let {
-    children,
-    colorSchemeKey = 'color-scheme',
-    initialColorScheme = 'system'
-  } = _ref;
+const ColorSchemeProvider = ({
+  children,
+  colorSchemeKey = 'color-scheme',
+  initialColorScheme = 'system'
+}) => {
   const {
     isSystem,
     colorScheme,
@@ -570,15 +569,12 @@ const DEFAULT_THEME = {
   space
 };
 
-const ThemeProvider = _ref => {
-  let {
-    theme = DEFAULT_THEME,
-    ...other
-  } = _ref;
-  return React__default.default.createElement(styled.ThemeProvider, Object.assign({
-    theme: theme
-  }, other));
-};
+const ThemeProvider = ({
+  theme = DEFAULT_THEME,
+  ...other
+}) => React__default.default.createElement(styled.ThemeProvider, Object.assign({
+  theme: theme
+}, other));
 
 function retrieveComponentStyles(componentId, props) {
   const components = props.theme?.components;
@@ -676,8 +672,7 @@ const isValidColor = maybeColor => {
   }
   return retVal;
 };
-function findNearestIndex(target, arr) {
-  let startIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+function findNearestIndex(target, arr, startIndex = 0) {
   if (typeof target !== 'number' || isNaN(target)) {
     throw new Error('Target must be a number.');
   }
@@ -816,17 +811,16 @@ const KEYS$1 = {
 CACHE$1.set(DEFAULT_THEME.colors, KEYS$1.colors);
 CACHE$1.set(DEFAULT_THEME.palette, KEYS$1.palette);
 CACHE$1.set(DEFAULT_THEME.opacity, KEYS$1.opacity);
-const toKey$1 = _ref => {
-  let {
-    dark,
-    hue,
-    light,
-    offset,
-    shade,
-    theme,
-    transparency,
-    variable
-  } = _ref;
+const toKey$1 = ({
+  dark,
+  hue,
+  light,
+  offset,
+  shade,
+  theme,
+  transparency,
+  variable
+}) => {
   let themeColorsKey;
   if (theme.colors) {
     themeColorsKey = CACHE$1.get(theme.colors);
@@ -875,17 +869,16 @@ const toKey$1 = _ref => {
   }
   return retVal;
 };
-const getColor = memoize__default.default(_ref2 => {
-  let {
-    dark,
-    hue,
-    light,
-    offset,
-    shade,
-    theme,
-    transparency,
-    variable
-  } = _ref2;
+const getColor = memoize__default.default(({
+  dark,
+  hue,
+  light,
+  offset,
+  shade,
+  theme,
+  transparency,
+  variable
+}) => {
   let retVal;
   const palette = theme.palette && Object.keys(theme.palette).length > 0 ? theme.palette : DEFAULT_THEME.palette;
   const {
@@ -914,37 +907,33 @@ const getColor = memoize__default.default(_ref2 => {
     throw new Error('Error: invalid `getColor` parameters');
   }
   return retVal;
-}, _ref3 => {
-  let {
-    dark,
-    hue,
-    light,
-    offset,
-    shade,
-    theme,
-    transparency,
-    variable
-  } = _ref3;
-  return toKey$1({
-    dark,
-    hue,
-    light,
-    offset,
-    shade,
-    theme,
-    transparency,
-    variable
-  });
-});
+}, ({
+  dark,
+  hue,
+  light,
+  offset,
+  shade,
+  theme,
+  transparency,
+  variable
+}) => toKey$1({
+  dark,
+  hue,
+  light,
+  offset,
+  shade,
+  theme,
+  transparency,
+  variable
+}));
 
-const getCheckeredBackground = _ref => {
-  let {
-    theme,
-    size,
-    overlay,
-    positionY = 0,
-    repeat = 'repeat'
-  } = _ref;
+const getCheckeredBackground = ({
+  theme,
+  size,
+  overlay,
+  positionY = 0,
+  repeat = 'repeat'
+}) => {
   const color = getColor({
     theme,
     variable: 'border.default'
@@ -1125,13 +1114,12 @@ const KEYS = {
 };
 CACHE.set(DEFAULT_THEME.colors, KEYS.colors);
 CACHE.set(DEFAULT_THEME.palette, KEYS.palette);
-const toKey = _ref => {
-  let {
-    hue,
-    shade,
-    theme,
-    transparency
-  } = _ref;
+const toKey = ({
+  hue,
+  shade,
+  theme,
+  transparency
+}) => {
   let retVal = `${typeof hue === 'object' ? JSON.stringify(hue) : hue}`;
   if (shade !== undefined) {
     retVal += `,${shade}`;
@@ -1160,10 +1148,7 @@ const toKey = _ref => {
   }
   return retVal;
 };
-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;
+const getColorV8 = memoize__default.default((hue, shade = DEFAULT_SHADE, theme, transparency) => {
   let retVal;
   if (isNaN(shade)) {
     return undefined;
@@ -1262,21 +1247,20 @@ const getFloatingPlacements = (theme, placement, fallbackPlacements) => {
   return [floatingPlacement, floatingFallbackPlacements];
 };
 
-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 getFocusBoxShadow = ({
+  boxShadow,
+  inset = false,
+  color = {
+    variable: 'border.primaryEmphasis'
+  },
+  shadowWidth = 'md',
+  spacerColor = {
+    variable: 'background.default'
+  },
+  spacerWidth = 'xs',
+  theme = DEFAULT_THEME,
+  ...args
+}) => {
   const _args = args;
   const _color = _args.hue ? getColorV8(_args.hue, _args.shade, theme) : getColor({
     ...color,
@@ -1388,8 +1372,7 @@ const positionStyles = (position, size, inset, shift) => {
   }
   return styled.css(["&::before,&::after{transform:", ";", ";}"], transform, positionCss);
 };
-function arrowStyles(position) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+function arrowStyles(position, options = {}) {
   const inset = polished.stripUnit(options.inset || '0');
   const size = polished.stripUnit(options.size || '6');
   const shift = polished.stripUnit(options.shift || '0');
@@ -1434,8 +1417,7 @@ const useWindow = theme => {
   return controlledWindow;
 };
 
-const useText = function (component, props, name, text) {
-  let condition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+const useText = (component, props, name, text, condition = true) => {
   const value = condition ? props[name] : undefined;
   return React.useMemo(() => {
     if (condition) {
@@ -1497,8 +1479,7 @@ const hiddenStyles = options => {
   const transition = 'opacity 0.2s ease-in-out, 0.2s visibility 0s linear';
   return styled.css(["transition:", ";visibility:hidden;opacity:0;"], options.animationModifier && transition);
 };
-function menuStyles(position) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+function menuStyles(position, options = {}) {
   const theme = options.theme || DEFAULT_THEME;
   let marginProperty;
   if (position === 'top') {
@@ -1514,19 +1495,18 @@ function menuStyles(position) {
 }
 
 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 focusStyles = ({
+  condition = true,
+  selector = SELECTOR_FOCUS_VISIBLE,
+  shadowWidth = 'md',
+  spacerWidth = 'xs',
+  styles: {
+    boxShadow,
+    ...styles
+  } = {},
+  theme,
+  ...options
+}) => {
   const _boxShadow = condition ? getFocusBoxShadow({
     boxShadow,
     shadowWidth,
@@ -1546,14 +1526,11 @@ const focusStyles = _ref => {
 };
 
 const StyledBaseIcon = styled__default.default(
-_ref => {
-  let {
-    children,
-    theme,
-    ...props
-  } = _ref;
-  return React.cloneElement(React.Children.only(children), props);
-}).withConfig({
+({
+  children,
+  theme,
+  ...props
+}) => React.cloneElement(React.Children.only(children), props)).withConfig({
   displayName: "StyledBaseIcon",
   componentId: "sc-1moykgb-0"
 })([""]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-theming",
-  "version": "9.12.2",
+  "version": "9.12.4",
   "description": "Theming utilities and components within the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "9b6f34bf0eda4bee3b47f97a437aa9b7f3008af4"
+  "gitHead": "e79e9687e6bcbd097c059add2938cdae59a5173b"
 }