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

package/dist/index.cjs.js

@@ -7,8 +7,8 @@
 'use strict';
 
 var React = require('react');
-var styledComponents = require('styled-components');
-var chromaJs = require('chroma-js');
+var styled = require('styled-components');
+var color2k = require('color2k');
 var polished = require('polished');
 var get = require('lodash.get');
 var memoize = require('lodash.memoize');
@@ -16,6 +16,7 @@ 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);
 
@@ -24,274 +25,250 @@ const PALETTE = {
   white: '#fff',
   product: {
     support: '#00a656',
-    message: '#37b8af',
     explore: '#30aabc',
     gather: '#f6c8be',
     guide: '#eb4962',
-    connect: '#ff6224',
     chat: '#f79a3e',
     talk: '#efc93d',
     sell: '#c38f00'
   },
   grey: {
-    100: '#f4f6f6',
-    200: '#e4e7e9',
-    300: '#c7cdd0',
-    400: '#afb7bd',
-    500: '#88929d',
-    600: '#7f8a95',
-    700: '#65707a',
-    800: '#4b565f',
-    900: '#2e373f',
-    1000: '#1e252a',
-    1100: '#171b1f',
-    1200: '#101316'
+    100: '#f8f9f9',
+    200: '#e8eaec',
+    300: '#d8dcde',
+    400: '#b0b8be',
+    500: '#919ca5',
+    600: '#848f99',
+    700: '#5c6970',
+    800: '#39434b',
+    900: '#293239',
+    1000: '#1c2227',
+    1100: '#151a1e',
+    1200: '#0a0d0e'
   },
   blue: {
     100: '#edf7ff',
-    200: '#d9eaf7',
-    300: '#b3d0e7',
-    400: '#92bbdb',
-    500: '#5896c9',
-    600: '#4b8ec5',
+    200: '#ddecf8',
+    300: '#cce0f1',
+    400: '#93bcdc',
+    500: '#66a0cd',
+    600: '#2694d6',
     700: '#1f73b7',
-    800: '#18578b',
-    900: '#103859',
-    1000: '#0b253b',
-    1100: '#081c2d',
-    1200: '#061420'
+    800: '#13456d',
+    900: '#0f3655',
+    1000: '#0a2338',
+    1100: '#061420',
+    1200: '#040d15'
   },
   red: {
     100: '#fff2f3',
-    200: '#fde1e3',
-    300: '#f5bfc4',
-    400: '#f2a0a6',
-    500: '#e76973',
-    600: '#e35c67',
+    200: '#fee3e5',
+    300: '#f5d5d8',
+    400: '#f2a1a8',
+    500: '#ea7881',
+    600: '#eb5c69',
     700: '#cd3642',
-    800: '#9d2933',
-    900: '#6c1219',
-    1000: '#431418',
-    1100: '#2d1315',
-    1200: '#1b1011'
+    800: '#7e1d25',
+    900: '#671219',
+    1000: '#3d1418',
+    1100: '#1d1011',
+    1200: '#100b0c'
   },
   yellow: {
     100: '#fff3e4',
-    200: '#ffe2c2',
-    300: '#ffc079',
-    400: '#fba246',
-    500: '#d87916',
-    600: '#ce7117',
+    200: '#ffe6cb',
+    300: '#fed6a9',
+    400: '#fca347',
+    500: '#e38215',
+    600: '#d67305',
     700: '#ac5918',
-    800: '#874114',
-    900: '#512d17',
-    1000: '#312016',
-    1100: '#221913',
-    1200: '#17120f'
+    800: '#673515',
+    900: '#4c2c17',
+    1000: '#2d1e15',
+    1100: '#18120f',
+    1200: '#0e0c0b'
   },
   green: {
     100: '#eef8f4',
-    200: '#d7ede4',
-    300: '#b4d3c6',
-    400: '#91bfae',
-    500: '#3fa17e',
-    600: '#329974',
+    200: '#daeee6',
+    300: '#cae3d9',
+    400: '#94c1b0',
+    500: '#4eab89',
+    600: '#26a178',
     700: '#037f52',
-    800: '#186045',
-    900: '#0b3e2b',
-    1000: '#0c291e',
-    1100: '#0b1e17',
-    1200: '#0a1511'
+    800: '#104b35',
+    900: '#0b3b29',
+    1000: '#0c261c',
+    1100: '#0a1511',
+    1200: '#080d0c'
   },
   kale: {
     100: '#ecf9f9',
-    200: '#d8ebeb',
-    300: '#b3d2d0',
-    400: '#94bebd',
-    500: '#5e9b9c',
-    600: '#579394',
+    200: '#daeded',
+    300: '#cbe2e1',
+    400: '#97bfbf',
+    500: '#6ba4a5',
+    600: '#4a9999',
     700: '#40787a',
-    800: '#275c5f',
-    900: '#0a3c42',
-    1000: '#02282d',
-    1100: '#041e22',
-    1200: '#061517'
+    800: '#16494f',
+    900: '#063940',
+    1000: '#03252a',
+    1100: '#061517',
+    1200: '#060e0e'
   },
   fuschia: {
     100: '#fbf3f8',
-    200: '#f6e2ef',
-    300: '#ecc0dc',
-    400: '#e3a2cc',
-    500: '#d36faf',
-    600: '#cf63a8',
+    200: '#f7e6f1',
+    300: '#f2d5e7',
+    400: '#e3a4cc',
+    500: '#d77db7',
+    600: '#d16aac',
     700: '#b34496',
-    800: '#971688',
-    900: '#640e59',
-    1000: '#430a3d',
-    1100: '#34072f',
-    1200: '#260523',
-    M400: '#cf62a8',
-    M600: '#a8458c'
+    800: '#78116c',
+    900: '#5a0d51',
+    1000: '#3f0939',
+    1100: '#31072c',
+    1200: '#1b0418'
   },
   pink: {
-    100: '#fcf4f5',
-    200: '#f7e3e8',
-    300: '#edc1ca',
-    400: '#e4a5b3',
-    500: '#d57388',
-    600: '#e35b72',
+    100: '#fcf3f4',
+    200: '#f7e5e8',
+    300: '#f3d6dc',
+    400: '#e5a6b4',
+    500: '#d98193',
+    600: '#d96b81',
     700: '#d62054',
-    800: '#94304e',
-    900: '#611f32',
-    1000: '#401522',
-    1100: '#31101a',
-    1200: '#230b12',
-    M400: '#d57287',
-    M600: '#b23a5d'
+    800: '#75263d',
+    900: '#561d2e',
+    1000: '#3c141f',
+    1100: '#2e0f18',
+    1200: '#17080c'
   },
   crimson: {
-    100: '#fbf4f3',
-    200: '#f6e4e1',
-    300: '#eac3bc',
-    400: '#e1a89e',
-    500: '#d1796a',
-    600: '#cd6e5d',
+    100: '#fbf3f2',
+    200: '#f7e7e4',
+    300: '#f1d7d2',
+    400: '#e2aaa0',
+    500: '#d58678',
+    600: '#cf7464',
     700: '#be4938',
-    800: '#a32217',
-    900: '#6b160f',
-    1000: '#480f0a',
-    1100: '#370c08',
-    1200: '#280806',
-    M400: '#cc6c5b',
-    M600: '#b24a3c'
+    800: '#811b12',
+    900: '#61140d',
+    1000: '#440e09',
+    1100: '#340b07',
+    1200: '#1c0604'
   },
   orange: {
     100: '#fdf3ed',
-    200: '#f9e3d3',
-    300: '#f2c39f',
-    400: '#eda671',
-    500: '#e2721e',
-    600: '#d26e20',
+    200: '#fae7d8',
+    300: '#f7d7be',
+    400: '#eda875',
+    500: '#e58035',
+    600: '#d57428',
     700: '#af5626',
-    800: '#85421d',
-    900: '#562b13',
-    1000: '#3a1c0d',
-    1100: '#2c150a',
-    1200: '#1f0f07',
-    M400: '#d4772c',
-    M600: '#b35827'
+    800: '#693317',
+    900: '#4d2711',
+    1000: '#361a0c',
+    1100: '#291409',
+    1200: '#150a04'
   },
   lemon: {
-    100: '#fff6cf',
-    200: '#ffe682',
-    300: '#ffc417',
-    400: '#eda900',
-    500: '#ba8900',
-    600: '#b08100',
+    100: '#fff7d4',
+    200: '#ffea97',
+    300: '#ffdc4f',
+    400: '#efab00',
+    500: '#c79100',
+    600: '#b68500',
     700: '#8f6900',
-    800: '#6d5000',
-    900: '#463300',
-    1000: '#2f2200',
-    1100: '#231a00',
-    1200: '#191200',
-    M400: '#e7a500',
-    M600: '#c38f00'
+    800: '#563e00',
+    900: '#3f2e00',
+    1000: '#2b2000',
+    1100: '#221800',
+    1200: '#110c00'
   },
   lime: {
-    100: '#ebfae6',
-    200: '#c9f2bd',
-    300: '#88e270',
-    400: '#4ecf2a',
-    500: '#4da42a',
-    600: '#489b20',
+    100: '#ecfae7',
+    200: '#d1f3c7',
+    300: '#b3eda3',
+    400: '#4fd12b',
+    500: '#45b025',
+    600: '#509f2d',
     700: '#3d7e19',
-    800: '#385f23',
-    900: '#243c16',
-    1000: '#18280f',
-    1100: '#121e0b',
-    1200: '#0d1508',
-    M400: '#519e2d',
-    M600: '#47782c'
+    800: '#2c491b',
+    900: '#203614',
+    1000: '#16250e',
+    1100: '#111d0a',
+    1200: '#090e05'
   },
   mint: {
     100: '#d6ffeb',
-    200: '#83ffc3',
-    300: '#00ea79',
-    400: '#00d16d',
-    500: '#00a756',
-    600: '#279b65',
-    700: '#2d7d55',
-    800: '#225f41',
-    900: '#163d2a',
-    1000: '#0f291c',
-    1100: '#0b1e15',
-    1200: '#08150f',
-    M400: '#299c66',
-    M600: '#2e8057'
+    200: '#9affce',
+    300: '#0afe89',
+    400: '#00d26d',
+    500: '#01b15c',
+    600: '#16a260',
+    700: '#2d7e55',
+    800: '#1b4b33',
+    900: '#143726',
+    1000: '#0e261a',
+    1100: '#0b1d14',
+    1200: '#050e0a'
   },
   teal: {
-    100: '#d6fefa',
-    200: '#70fdef',
-    300: '#03e5ce',
-    400: '#03ccb8',
-    500: '#02a392',
-    600: '#1f998b',
+    100: '#d4fefa',
+    200: '#88fdf1',
+    300: '#0bf8e1',
+    400: '#03cdb8',
+    500: '#02ad9c',
+    600: '#2a9d8f',
     700: '#367a74',
-    800: '#2e5c59',
-    900: '#1e3b39',
-    1000: '#142726',
-    1100: '#0f1d1c',
-    1200: '#0a1514',
-    M400: '#2d9e8f',
-    M600: '#3c7873'
+    800: '#254846',
+    900: '#1b3534',
+    1000: '#122423',
+    1100: '#0e1c1a',
+    1200: '#070d0d'
   },
   azure: {
-    100: '#f0f7fe',
-    200: '#d7eafb',
-    300: '#a8d1f7',
-    400: '#7fbbf3',
-    500: '#3795ed',
-    600: '#598ad0',
-    700: '#2770c4',
-    800: '#2c5689',
-    900: '#1d3758',
-    1000: '#13253a',
-    1100: '#0e1b2c',
-    1200: '#0a131f',
-    M400: '#5f8dcf',
-    M600: '#3a70b2'
+    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: {
-    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'
+    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: {
-    100: '#f9f4fb',
-    200: '#efe3f5',
-    300: '#ddc3e9',
-    400: '#cea8e0',
-    500: '#b57acf',
-    600: '#b16ecf',
+    100: '#f9f3fb',
+    200: '#f2e7f6',
+    300: '#e9d8f1',
+    400: '#d0a9e0',
+    500: '#bb86d3',
+    600: '#b276cd',
     700: '#9256b1',
-    800: '#722eb8',
-    900: '#491b7f',
-    1000: '#311256',
-    1100: '#250e41',
-    1200: '#1b0a2e',
-    M400: '#b072cc',
-    M600: '#9358b0'
+    800: '#58209a',
+    900: '#411973',
+    1000: '#2e1150',
+    1100: '#230d3f',
+    1200: '#120720'
   }
 };
 
@@ -333,26 +310,27 @@ const colors = {
         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'
+        dangerEmphasis: 'dangerHue.600',
+        disabled: 'rgba(neutralHue.500, 100)'
       },
       border: {
         default: 'neutralHue.800',
         emphasis: 'neutralHue.600',
         subtle: 'neutralHue.900',
-        success: 'successHue.800',
-        warning: 'warningHue.800',
-        danger: 'dangerHue.800',
+        success: 'successHue.900',
+        warning: 'warningHue.900',
+        danger: 'dangerHue.900',
         primaryEmphasis: 'primaryHue.600',
         successEmphasis: 'successHue.600',
         warningEmphasis: 'warningHue.600',
-        dangerEmphasis: 'dangerHue.600'
+        dangerEmphasis: 'dangerHue.600',
+        disabled: 'neutralHue.800'
       },
       foreground: {
         default: 'neutralHue.300',
@@ -364,7 +342,13 @@ const colors = {
         danger: 'dangerHue.400',
         successEmphasis: 'successHue.300',
         warningEmphasis: 'warningHue.300',
-        dangerEmphasis: 'dangerHue.300'
+        dangerEmphasis: 'dangerHue.300',
+        disabled: 'neutralHue.700'
+      },
+      shadow: {
+        small: 'rgba(neutralHue.1200, 1100)',
+        medium: 'rgba(neutralHue.1200, 800)',
+        large: 'rgba(neutralHue.1200, 1000)'
       }
     },
     light: {
@@ -374,14 +358,14 @@ const colors = {
         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'
+        dangerEmphasis: 'dangerHue.700',
+        disabled: 'rgba(neutralHue.700, 100)'
       },
       border: {
         default: 'neutralHue.300',
@@ -393,7 +377,8 @@ const colors = {
         primaryEmphasis: 'primaryHue.700',
         successEmphasis: 'successHue.700',
         warningEmphasis: 'warningHue.700',
-        dangerEmphasis: 'dangerHue.700'
+        dangerEmphasis: 'dangerHue.700',
+        disabled: 'neutralHue.300'
       },
       foreground: {
         default: 'neutralHue.900',
@@ -405,7 +390,13 @@ const colors = {
         danger: 'dangerHue.700',
         successEmphasis: 'successHue.900',
         warningEmphasis: 'warningHue.900',
-        dangerEmphasis: 'dangerHue.900'
+        dangerEmphasis: 'dangerHue.900',
+        disabled: 'neutralHue.600'
+      },
+      shadow: {
+        small: 'rgba(neutralHue.1200, 200)',
+        medium: 'rgba(neutralHue.1200, 200)',
+        large: 'rgba(neutralHue.1200, 200)'
       }
     }
   }
@@ -447,6 +438,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
 };
@@ -488,6 +493,7 @@ const DEFAULT_THEME = {
   fontWeights,
   iconSizes,
   lineHeights,
+  opacity,
   palette,
   rtl: false,
   shadowWidths,
@@ -497,158 +503,13 @@ const DEFAULT_THEME = {
 
 const ThemeProvider = _ref => {
   let {
-    theme,
+    theme = DEFAULT_THEME,
     ...other
   } = _ref;
-  return React__default.default.createElement(styledComponents.ThemeProvider, Object.assign({
+  return React__default.default.createElement(styled.ThemeProvider, Object.assign({
     theme: theme
   }, 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;
@@ -690,7 +551,6 @@ 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;
@@ -721,7 +581,79 @@ const toHex = (hue, shade, offset, scheme) => {
   }
   return retVal;
 };
-const toColor = (colors, palette, scheme, hue, shade, offset, transparency) => {
+const isValidColor = maybeColor => {
+  let retVal = ['currentcolor', 'inherit', 'transparent'].includes(maybeColor);
+  if (!retVal) {
+    try {
+      retVal = !!color2k.parseToRgba(maybeColor);
+    } catch {
+      retVal = false;
+    }
+  }
+  return retVal;
+};
+function findNearestIndex(target, arr) {
+  let startIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  if (typeof target !== 'number' || isNaN(target)) {
+    throw new Error('Target must be a number.');
+  }
+  if (!Array.isArray(arr)) {
+    throw new Error('Second argument must be an array.');
+  }
+  let left = startIndex;
+  let right = arr.length - 1;
+  if (target < arr[left]) return left;
+  if (target > arr[right]) return right;
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2);
+    if (arr[mid] === target) {
+      return mid;
+    } else if (arr[mid] < target) {
+      left = mid + 1;
+    } else {
+      right = mid - 1;
+    }
+  }
+  return arr[left] - target < target - arr[right] ? left : right;
+}
+const OFFSET_TO_TARGET_RATIO = {
+  100: 1.08,
+  200: 1.2,
+  300: 1.35,
+  400: 2,
+  500: 2.8,
+  600: 3.3,
+  700: 5,
+  800: 10,
+  900: 13,
+  1000: 16,
+  1100: 17.5,
+  1200: 19
+};
+const generateColorScale = memoize__default.default(color => {
+  const scaleSize = 200;
+  const _scale = color2k.getScale('#FFF', color, '#000');
+  const scale = x => _scale(x / scaleSize);
+  const colors = [];
+  const contrastRatios = [];
+  for (let i = 0; i <= scaleSize; i++) {
+    const _color = scale(i);
+    colors.push(_color);
+    contrastRatios.push(polished.getContrast('#FFF', _color));
+  }
+  const palette = {};
+  let startIndex = 0;
+  for (const offset in OFFSET_TO_TARGET_RATIO) {
+    if (Object.prototype.hasOwnProperty.call(OFFSET_TO_TARGET_RATIO, offset)) {
+      const ratio = OFFSET_TO_TARGET_RATIO[offset];
+      const nearestIndex = findNearestIndex(ratio, contrastRatios, startIndex);
+      startIndex = nearestIndex + 1;
+      palette[offset] = colors[nearestIndex];
+    }
+  }
+  return palette;
+});
+const toColor = (colors, palette, opacity, scheme, hue, shade, offset, transparency) => {
   let retVal;
   let _hue = colors[hue]  || hue;
   if (Object.hasOwn(palette, _hue)) {
@@ -729,22 +661,20 @@ const toColor = (colors, palette, scheme, hue, shade, offset, transparency) => {
   }
   if (typeof _hue === 'object') {
     retVal = toHex(_hue, shade, offset, scheme);
-  } else if (_hue === 'transparent' || chromaJs.valid(_hue)) {
+  } else if (isValidColor(_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;
-      }, {});
+      _hue = generateColorScale(_hue);
       retVal = toHex(_hue, shade, offset, scheme);
     }
   }
   if (retVal && transparency) {
-    retVal = polished.rgba(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;
 };
@@ -758,6 +688,41 @@ const toProperty = (object, path) => {
     throw new TypeError(`Error: unexpected '${typeof retVal}' type for color variable "${path}"`);
   }
 };
+const fromRgba = value => {
+  let retVal;
+  const regex = /rgba\s*\(\s*(?<property>[#\w.]+)\s*,\s*(?<alpha>[\w.]+)\s*\)/gu;
+  const _rgba = regex.exec(value);
+  if (_rgba && _rgba.groups) {
+    const property = _rgba.groups.property;
+    const transparency = parseFloat(_rgba.groups.alpha);
+    retVal = {
+      property,
+      transparency
+    };
+  } else {
+    throw new Error(`Error: invalid \`rgba\` value "${value}"`);
+  }
+  return retVal;
+};
+const fromVariable = (variable, variables, palette) => {
+  const retVal = {};
+  let property = toProperty(variables, variable);
+  if (property.startsWith('rgba')) {
+    const value = fromRgba(property);
+    property = value.property;
+    retVal.transparency = value.transparency;
+  }
+  const [key, value] = property.split(/\.(?<value>.*)/u);
+  if (key === 'palette') {
+    retVal.hue = toProperty(palette, value);
+  } else {
+    retVal.hue = key;
+    if (value !== undefined) {
+      retVal.shade = parseInt(value, 10);
+    }
+  }
+  return retVal;
+};
 const getColor = memoize__default.default(_ref => {
   let {
     dark,
@@ -781,20 +746,17 @@ const getColor = memoize__default.default(_ref => {
   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;
+  let _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);
-    }
+    const value = fromVariable(variable, _variables, palette);
+    _hue = value.hue;
+    _shade = value.shade;
+    _transparency = _transparency === undefined ? value.transparency : _transparency;
   }
   if (_hue) {
-    retVal = toColor(colors, palette, scheme, _hue, _shade, _offset, _transparency);
+    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');
@@ -819,11 +781,185 @@ const getColor = memoize__default.default(_ref => {
     shade,
     colors: theme.colors,
     palette: theme.palette,
+    opacity: theme.opacity,
     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 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) {
@@ -1032,58 +1168,47 @@ function mediaQuery(query, breakpoint, theme) {
   return retVal;
 }
 
-const exponentialSymbols = {
-  symbols: {
-    sqrt: {
-      func: {
-        symbol: 'sqrt',
-        f: a => Math.sqrt(a),
-        notation: 'func',
-        precedence: 0,
-        rightToLeft: 0,
-        argCount: 1
-      },
-      symbol: 'sqrt',
-      regSymbol: 'sqrt\\b'
-    }
-  }
-};
 const animationStyles$1 = (position, modifier) => {
   const property = position.split('-')[0];
-  const animationName = 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`);
-  const placement = polished.math(`${margin} + ${inset}`);
-  let clipPath;
+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 offsetPx = `${size + shift}px`;
   let positionCss;
-  let propertyRadius;
+  let transform;
   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);
+    transform = 'rotate(-135deg)';
+    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')) {
-    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);
+    transform = 'rotate(-45deg)';
+    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')) {
-    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);
+    transform = 'rotate(45deg)';
+    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')) {
-    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);
+    transform = 'rotate(135deg)';
+    positionCss = styled.css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? '50%' : position === 'left-top' && offsetPx, offsetPx, placementPx, position === 'left' && marginPx);
   }
-  return styledComponents.css(["&::before{", ":100%;clip-path:", ";}&::before,&::after{", "}"], propertyRadius, clipPath, positionCss);
+  return styled.css(["&::before,&::after{transform:", ";", ";}"], transform, 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));
+  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, shift), options.animationModifier && animationStyles$1(position, options.animationModifier));
 }
 
 const useDocument = theme => {
@@ -1145,12 +1270,33 @@ 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:", "(", ");pointer-events:none;}100%{pointer-events:auto;}"], transformFunction, translateValue);
+  return styled.css(["&", " ", "{animation:0.2s cubic-bezier(0.15,0.85,0.35,1.2) ", ";}"], options.animationModifier, options.childSelector || '> *', animationName);
+};
+const colorStyles = theme => {
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.raised'
+  });
+  const borderColor = getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const boxShadowColor = getColor({
+    variable: 'shadow.medium',
+    theme
+  });
+  const boxShadowBlurRadius = `${theme.space.base * (theme.colors.base === 'dark' ? 5 : 6)}px`;
+  const boxShadowOffsetY = `${theme.space.base * (theme.colors.base === 'dark' ? 4 : 5)}px`;
+  const foregroundColor = getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+  return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";"], borderColor, theme.shadows.lg(boxShadowOffsetY, boxShadowBlurRadius, boxShadowColor), backgroundColor, foregroundColor);
 };
 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] : {};
@@ -1165,21 +1311,7 @@ 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;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));
+  return styled.css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;color-scheme:only ", ";& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", ";border-radius:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, p => p.theme.colors.base, options.childSelector || '> *', theme.borders.sm, theme.borderRadii.md, theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', colorStyles(theme), options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
 }
 
 const SELECTOR_FOCUS_VISIBLE = '&:focus-visible';
@@ -1211,9 +1343,21 @@ 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'];
@@ -1222,13 +1366,14 @@ 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;