@zendeskgarden/react-theming 9.0.0-next.21 → 9.0.0-next.23

package/dist/esm/index.js

@@ -7,7 +7,6 @@
 export { ThemeProvider } from './elements/ThemeProvider.js';
 export { default as DEFAULT_THEME } from './elements/theme/index.js';
 export { default as PALETTE } from './elements/palette/index.js';
-export { default as PALETTE_V8 } from './elements/palette/v8.js';
 export { default as retrieveComponentStyles } from './utils/retrieveComponentStyles.js';
 export { getArrowPosition } from './utils/getArrowPosition.js';
 export { getCheckeredBackground } from './utils/getCheckeredBackground.js';

package/dist/esm/utils/arrowStyles.js

@@ -12,27 +12,27 @@ const animationStyles = (position, modifier) => {
   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 positionStyles = (position, size, inset, shift) => {
   const defaultInset = 0.3;
   const margin = size / -2;
   const placement = Math.round((margin + inset + defaultInset) * 100) / 100;
   const marginPx = `${margin}px`;
   const placementPx = `${placement}px`;
-  const sizePx = `${size}px`;
+  const offsetPx = `${size + shift}px`;
   let positionCss;
   let transform;
   if (position.startsWith('top')) {
     transform = 'rotate(-135deg)';
-    positionCss = css(["top:", ";right:", ";left:", ";margin-left:", ";"], placementPx, position === 'top-right' && sizePx, position === 'top' ? '50%' : position === 'top-left' && sizePx, position === 'top' && marginPx);
+    positionCss = css(["top:", ";right:", ";left:", ";margin-left:", ";"], placementPx, position === 'top-right' && offsetPx, position === 'top' ? '50%' : position === 'top-left' && offsetPx, position === 'top' && marginPx);
   } else if (position.startsWith('right')) {
     transform = 'rotate(-45deg)';
-    positionCss = css(["top:", ";right:", ";bottom:", ";margin-top:", ";"], position === 'right' ? '50%' : position === 'right-top' && sizePx, placementPx, position === 'right-bottom' && sizePx, position === 'right' && marginPx);
+    positionCss = css(["top:", ";right:", ";bottom:", ";margin-top:", ";"], position === 'right' ? '50%' : position === 'right-top' && offsetPx, placementPx, position === 'right-bottom' && offsetPx, position === 'right' && marginPx);
   } else if (position.startsWith('bottom')) {
     transform = 'rotate(45deg)';
-    positionCss = css(["right:", ";bottom:", ";left:", ";margin-left:", ";"], position === 'bottom-right' && sizePx, placementPx, position === 'bottom' ? '50%' : position === 'bottom-left' && sizePx, position === 'bottom' && marginPx);
+    positionCss = css(["right:", ";bottom:", ";left:", ";margin-left:", ";"], position === 'bottom-right' && offsetPx, placementPx, position === 'bottom' ? '50%' : position === 'bottom-left' && offsetPx, position === 'bottom' && marginPx);
   } else if (position.startsWith('left')) {
     transform = 'rotate(135deg)';
-    positionCss = css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? '50%' : position === 'left-top' && sizePx, size, placementPx, position === 'left' && marginPx);
+    positionCss = css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? '50%' : position === 'left-top' && offsetPx, offsetPx, placementPx, position === 'left' && marginPx);
   }
   return css(["&::before,&::after{transform:", ";", ";}"], transform, positionCss);
 };
@@ -40,13 +40,14 @@ function arrowStyles(position) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const inset = stripUnit(options.inset || '0');
   const size = stripUnit(options.size || '6');
+  const shift = stripUnit(options.shift || '0');
   const sizeOffset = 2;
   const squareSize = size * 2 / Math.sqrt(2) + sizeOffset;
   const squareSizeRounded = Math.round(squareSize * 100) / 100;
   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), 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(position, options.animationModifier));
 }
 
 export { arrowStyles as default };

package/dist/index.cjs.js

@@ -516,148 +516,6 @@ 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) {
@@ -961,6 +819,148 @@ const getCheckeredBackground = _ref => {
   return retVal;
 };
 
+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'
+  }
+};
+
 const DEFAULT_SHADE = 600;
 const adjust = (color, expected, actual) => {
   if (expected !== actual) {
@@ -1174,27 +1174,27 @@ const animationStyles$1 = (position, modifier) => {
   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 positionStyles = (position, size, inset, shift) => {
   const defaultInset = 0.3;
   const margin = size / -2;
   const placement = Math.round((margin + inset + defaultInset) * 100) / 100;
   const marginPx = `${margin}px`;
   const placementPx = `${placement}px`;
-  const sizePx = `${size}px`;
+  const offsetPx = `${size + shift}px`;
   let positionCss;
   let transform;
   if (position.startsWith('top')) {
     transform = 'rotate(-135deg)';
-    positionCss = styled.css(["top:", ";right:", ";left:", ";margin-left:", ";"], placementPx, position === 'top-right' && sizePx, position === 'top' ? '50%' : position === 'top-left' && sizePx, position === 'top' && marginPx);
+    positionCss = styled.css(["top:", ";right:", ";left:", ";margin-left:", ";"], placementPx, position === 'top-right' && offsetPx, position === 'top' ? '50%' : position === 'top-left' && offsetPx, position === 'top' && marginPx);
   } else if (position.startsWith('right')) {
     transform = 'rotate(-45deg)';
-    positionCss = styled.css(["top:", ";right:", ";bottom:", ";margin-top:", ";"], position === 'right' ? '50%' : position === 'right-top' && sizePx, placementPx, position === 'right-bottom' && sizePx, position === 'right' && marginPx);
+    positionCss = styled.css(["top:", ";right:", ";bottom:", ";margin-top:", ";"], position === 'right' ? '50%' : position === 'right-top' && offsetPx, placementPx, position === 'right-bottom' && offsetPx, position === 'right' && marginPx);
   } else if (position.startsWith('bottom')) {
     transform = 'rotate(45deg)';
-    positionCss = styled.css(["right:", ";bottom:", ";left:", ";margin-left:", ";"], position === 'bottom-right' && sizePx, placementPx, position === 'bottom' ? '50%' : position === 'bottom-left' && sizePx, position === 'bottom' && marginPx);
+    positionCss = styled.css(["right:", ";bottom:", ";left:", ";margin-left:", ";"], position === 'bottom-right' && offsetPx, placementPx, position === 'bottom' ? '50%' : position === 'bottom-left' && offsetPx, position === 'bottom' && marginPx);
   } else if (position.startsWith('left')) {
     transform = 'rotate(135deg)';
-    positionCss = styled.css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? '50%' : position === 'left-top' && sizePx, size, placementPx, position === 'left' && marginPx);
+    positionCss = styled.css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? '50%' : position === 'left-top' && offsetPx, offsetPx, placementPx, position === 'left' && marginPx);
   }
   return styled.css(["&::before,&::after{transform:", ";", ";}"], transform, positionCss);
 };
@@ -1202,13 +1202,14 @@ function arrowStyles(position) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const inset = polished.stripUnit(options.inset || '0');
   const size = polished.stripUnit(options.size || '6');
+  const shift = polished.stripUnit(options.shift || '0');
   const sizeOffset = 2;
   const squareSize = size * 2 / Math.sqrt(2) + sizeOffset;
   const squareSizeRounded = Math.round(squareSize * 100) / 100;
   const squareSizePx = `${squareSizeRounded}px`;
   const afterOffset = 0;
   const beforeOffset = afterOffset + 2;
-  return styled.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), options.animationModifier && animationStyles$1(position, options.animationModifier));
+  return styled.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));
 }
 
 const useDocument = theme => {
@@ -1366,7 +1367,6 @@ 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;

package/dist/typings/index.d.ts

@@ -7,7 +7,6 @@
 export { ThemeProvider } from './elements/ThemeProvider';
 export { default as DEFAULT_THEME } from './elements/theme';
 export { default as PALETTE } from './elements/palette';
-export { default as PALETTE_V8 } from './elements/palette/v8';
 export { default as retrieveComponentStyles } from './utils/retrieveComponentStyles';
 export { getArrowPosition } from './utils/getArrowPosition';
 export { getCheckeredBackground } from './utils/getCheckeredBackground';

package/dist/typings/utils/arrowStyles.d.ts

@@ -8,6 +8,7 @@ import { ArrowPosition } from '../types';
 type ArrowOptions = {
     size?: string;
     inset?: string;
+    shift?: string;
     animationModifier?: string;
 };
 /**
@@ -37,6 +38,8 @@ type ArrowOptions = {
  *  (right angle) of the arrow expressed as a CSS dimension.
  * @param {string} [options.inset='0'] Tweak arrow positioning by adjusting with
  *  either a positive (push the arrow in) or negative (pull the arrow out) value.
+ * @param {string} [options.shift='0'] Shifts arrow positioning along
+ * the edge of the parent container.
  * @param {string} [options.animationModifier] A CSS class or attribute selector
  *  which, when applied, animates the arrow's appearance.
  *

package/dist/typings/utils/getColor.d.ts

@@ -4,7 +4,6 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-/// <reference types="lodash" />
 import { ColorParameters } from '../types';
 /**
  * Get a color value from the theme. Variable lookup takes precedence, followed

package/dist/typings/utils/getColorV8.d.ts

@@ -4,7 +4,6 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-/// <reference types="lodash" />
 import { Hue } from '../types';
 import { DefaultTheme } from 'styled-components';
 export declare const DEFAULT_SHADE = 600;

package/dist/typings/utils/useText.d.ts

@@ -16,4 +16,4 @@ import { FC } from 'react';
  * @param text The default text to apply if the value of `props[name]` is undefined
  * @param condition An optional condition that can be used to prevent evaluation
  */
-export declare const useText: (component: Pick<FC, 'displayName'>, props: Record<string, any>, name: string, text: string, condition?: boolean) => string | undefined;
+export declare const useText: (component: Pick<FC, "displayName">, props: Record<string, any>, name: string, text: string, condition?: boolean) => string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-theming",
-  "version": "9.0.0-next.21",
+  "version": "9.0.0-next.23",
   "description": "Theming utilities and components within the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -29,8 +29,8 @@
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "styled-components": "^4.2.0 || ^5.3.1"
   },
   "devDependencies": {
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a245ce2b794ea65142174a6a1f855a111b2677a2"
+  "gitHead": "5e7d2ed69a1615e09406a3f9285359346bb90cc7"
 }