@zendeskgarden/react-grid 9.0.0-next.9 → 9.0.0

package/dist/esm/elements/Col.js

@@ -35,7 +35,7 @@ const Col = React.forwardRef((_ref, ref) => {
     ref: ref
   }, props));
 });
-Col.displayName = 'Col';
+Col.displayName = 'Grid.Col';
 Col.propTypes = {
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   xs: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),

package/dist/esm/elements/Row.js

@@ -33,7 +33,7 @@ const Row = React.forwardRef((_ref, ref) => {
     ref: ref
   }, props));
 });
-Row.displayName = 'Row';
+Row.displayName = 'Grid.Row';
 Row.propTypes = {
   alignItems: PropTypes.oneOf(ALIGN_ITEMS),
   alignItemsXs: PropTypes.oneOf(ALIGN_ITEMS),

package/dist/esm/styled/StyledCol.js

@@ -6,11 +6,23 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'grid.col';
-const colorStyles = props => {
-  const backgroundColor = getColorV8('primaryHue', 600, props.theme, 0.1);
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.primaryEmphasis',
+    dark: {
+      transparency: theme.opacity[200]
+    },
+    light: {
+      transparency: theme.opacity[100]
+    }
+  });
   return css(["background-clip:content-box;background-color:", ";"], backgroundColor);
 };
 const flexStyles = (size, alignSelf, textAlign, offset, order, props) => {
@@ -54,17 +66,21 @@ const flexStyles = (size, alignSelf, textAlign, offset, order, props) => {
 const mediaStyles = (minWidth, size, alignSelf, textAlign, offset, order, props) => {
   return css(["@media (min-width:", "){", ";}"], minWidth, flexStyles(size, alignSelf, textAlign, offset, order, props));
 };
-const sizeStyles = props => {
-  const padding = props.gutters ? math(`${props.theme.space[props.gutters]} / 2`) : 0;
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    gutters
+  } = _ref2;
+  const padding = gutters ? math(`${theme.space[gutters]} / 2`) : 0;
   return css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
 const StyledCol = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
-})(["box-sizing:border-box;width:100%;", ";", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(!props.sizeAll && (props.xs || props.sm || props.md || props.lg || props.xl) ? undefined : props.sizeAll || false, props.alignSelf, props.textAlign, props.offset, props.order, props), props => sizeStyles(props), props => props.debug && colorStyles(props), props => mediaStyles(props.theme.breakpoints.xs, props.xs, props.alignSelfXs, props.textAlignXs, props.offsetXs, props.orderXs, props), props => mediaStyles(props.theme.breakpoints.sm, props.sm, props.alignSelfSm, props.textAlignSm, props.offsetSm, props.orderSm, props), props => mediaStyles(props.theme.breakpoints.md, props.md, props.alignSelfMd, props.textAlignMd, props.offsetMd, props.orderMd, props), props => mediaStyles(props.theme.breakpoints.lg, props.lg, props.alignSelfLg, props.textAlignLg, props.offsetLg, props.orderLg, props), props => mediaStyles(props.theme.breakpoints.xl, props.xl, props.alignSelfXl, props.textAlignXl, props.offsetXl, props.orderXl, props), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["box-sizing:border-box;width:100%;", ";", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(!props.sizeAll && (props.xs || props.sm || props.md || props.lg || props.xl) ? undefined : props.sizeAll || false, props.alignSelf, props.textAlign, props.offset, props.order, props), sizeStyles, props => props.debug && colorStyles(props), props => mediaStyles(props.theme.breakpoints.xs, props.xs, props.alignSelfXs, props.textAlignXs, props.offsetXs, props.orderXs, props), props => mediaStyles(props.theme.breakpoints.sm, props.sm, props.alignSelfSm, props.textAlignSm, props.offsetSm, props.orderSm, props), props => mediaStyles(props.theme.breakpoints.md, props.md, props.alignSelfMd, props.textAlignMd, props.offsetMd, props.orderMd, props), props => mediaStyles(props.theme.breakpoints.lg, props.lg, props.alignSelfLg, props.textAlignLg, props.offsetLg, props.orderLg, props), props => mediaStyles(props.theme.breakpoints.xl, props.xl, props.alignSelfXl, props.textAlignXl, props.offsetXl, props.orderXl, props), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledCol.defaultProps = {
   columns: 12,
   theme: DEFAULT_THEME

package/dist/esm/styled/StyledGrid.js

@@ -6,25 +6,41 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'grid.grid';
-const colorStyles = props => {
-  const borderColor = getColorV8(props.theme.palette.crimson, 400, props.theme, 0.5);
-  const borderWidth = math(`${props.theme.borderWidths.sm} * 2`);
-  return css(["box-shadow:-", " 0 0 0 ", ",", " 0 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
+const colorStyles = _ref => {
+  let {
+    theme,
+    debug
+  } = _ref;
+  const borderColor = debug && getColor({
+    theme,
+    hue: 'crimson',
+    shade: 700,
+    transparency: theme.opacity[600]
+  });
+  const borderWidth = debug && math(`${theme.borderWidths.sm} * 2`);
+  return css(["color-scheme:only ", ";box-shadow:", ";"], theme.colors.base, debug && `
+      -${borderWidth} 0 0 0 ${borderColor},
+      ${borderWidth} 0 0 0 ${borderColor}
+    `);
 };
-const sizeStyles = props => {
-  const padding = props.gutters ? math(`${props.theme.space[props.gutters]} / 2`) : 0;
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    gutters
+  } = _ref2;
+  const padding = gutters ? math(`${theme.space[gutters]} / 2`) : 0;
   return css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
 const StyledGrid = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
-})(["direction:", ";margin-right:auto;margin-left:auto;width:100%;box-sizing:border-box;", ";", ";", ";"], props => props.theme.rtl && 'rtl', props => sizeStyles(props), props => props.debug && colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["direction:", ";margin-right:auto;margin-left:auto;width:100%;box-sizing:border-box;", ";", ";", ";"], props => props.theme.rtl && 'rtl', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledGrid.defaultProps = {
   gutters: 'md',
   theme: DEFAULT_THEME

package/dist/esm/styled/StyledRow.js

@@ -6,12 +6,20 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'grid.row';
-const colorStyles = props => {
-  const borderColor = getColorV8(props.theme.palette.mint, 600, props.theme, 0.5);
-  const borderWidth = props.theme.borderWidths.sm;
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = getColor({
+    theme,
+    hue: 'mint',
+    shade: 700,
+    transparency: theme.opacity[600]
+  });
+  const borderWidth = theme.borderWidths.sm;
   return css(["box-shadow:inset 0 ", " 0 0 ", ",inset 0 -", " 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
 };
 const flexStyles = (alignItems, justifyContent, wrap) => {
@@ -34,17 +42,21 @@ const flexStyles = (alignItems, justifyContent, wrap) => {
 const mediaStyles = (minWidth, alignItems, justifyContent, wrap) => {
   return css(["@media (min-width:", "){", ";}"], minWidth, flexStyles(alignItems, justifyContent, wrap));
 };
-const sizeStyles = props => {
-  const margin = props.gutters ? math(`${props.theme.space[props.gutters]} / 2`) : 0;
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    gutters
+  } = _ref2;
+  const margin = gutters ? math(`${theme.space[gutters]} / 2`) : 0;
   return css(["margin-right:-", ";margin-left:-", ";"], margin, margin);
 };
 const StyledRow = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
-})(["display:flex;box-sizing:border-box;", " ", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(props.alignItems, props.justifyContent, props.wrapAll), props => sizeStyles(props), props => props.debug && colorStyles(props), props => mediaStyles(props.theme.breakpoints.xs, props.alignItemsXs, props.justifyContentXs, props.wrapXs), props => mediaStyles(props.theme.breakpoints.sm, props.alignItemsSm, props.justifyContentSm, props.wrapSm), props => mediaStyles(props.theme.breakpoints.md, props.alignItemsMd, props.justifyContentMd, props.wrapMd), props => mediaStyles(props.theme.breakpoints.lg, props.alignItemsLg, props.justifyContentLg, props.wrapLg), props => mediaStyles(props.theme.breakpoints.xl, props.alignItemsXl, props.justifyContentXl, props.wrapXl), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;box-sizing:border-box;", " ", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(props.alignItems, props.justifyContent, props.wrapAll), sizeStyles, props => props.debug && colorStyles(props), props => mediaStyles(props.theme.breakpoints.xs, props.alignItemsXs, props.justifyContentXs, props.wrapXs), props => mediaStyles(props.theme.breakpoints.sm, props.alignItemsSm, props.justifyContentSm, props.wrapSm), props => mediaStyles(props.theme.breakpoints.md, props.alignItemsMd, props.justifyContentMd, props.wrapMd), props => mediaStyles(props.theme.breakpoints.lg, props.alignItemsLg, props.justifyContentLg, props.wrapLg), props => mediaStyles(props.theme.breakpoints.xl, props.alignItemsXl, props.justifyContentXl, props.wrapXl), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledRow.defaultProps = {
   wrapAll: 'wrap',
   theme: DEFAULT_THEME

package/dist/esm/styled/pane/StyledPane.js

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'pane';
 const StyledPane = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
 })(["position:relative;min-width:0;min-height:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledPane.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledPane };

package/dist/esm/styled/pane/StyledPaneContent.js

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'pane.content';
 const StyledPaneContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
-})(["height:100%;overflow:auto;&[hidden]{display:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledPaneContent.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["height:100%;overflow:auto;color-scheme:only ", ";&[hidden]{display:none;}", ";"], p => p.theme.colors.base, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledPaneContent };

package/dist/esm/styled/pane/StyledPaneSplitter.js

@@ -6,27 +6,47 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'pane.splitter';
-const colorStyles = props => {
-  const color = getColorV8('neutralHue', 300, props.theme);
-  const hoverColor = getColorV8('primaryHue', 600, props.theme);
-  const activeColor = getColorV8('primaryHue', 800, props.theme);
-  return css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}", " &:active::before{background-color:", ";}"], color, hoverColor, focusStyles({
-    theme: props.theme,
-    color: {
-      hue: hoverColor
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const color = getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const options = {
+    theme,
+    variable: 'border.primaryEmphasis'
+  };
+  const hoverColor = getColor(options);
+  const activeColor = getColor({
+    ...options,
+    dark: {
+      offset: -200
     },
+    light: {
+      offset: 200
+    }
+  });
+  return css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}", " &:active::before{background-color:", ";}"], color, hoverColor, focusStyles({
+    theme,
     styles: {
       backgroundColor: hoverColor
     },
     selector: '&:focus-visible::before'
   }), activeColor);
 };
-const sizeStyles = props => {
-  const size = math(`${props.theme.shadowWidths.md} * 2`);
-  const separatorSize = math(`${props.theme.borderWidths.sm} * 2`);
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    orientation,
+    isFixed
+  } = _ref2;
+  const size = math(`${theme.shadowWidths.md} * 2`);
+  const separatorSize = math(`${theme.borderWidths.sm} * 2`);
   const offset = math(`-${size} / 2`);
   let cursor;
   let top;
@@ -37,14 +57,14 @@ const sizeStyles = props => {
   let height;
   let separatorWidth;
   let separatorHeight;
-  switch (props.orientation) {
+  switch (orientation) {
     case 'top':
       cursor = 'row-resize';
       top = offset;
       width = '100%';
       height = size;
       separatorWidth = width;
-      separatorHeight = props.theme.borderWidths.sm;
+      separatorHeight = theme.borderWidths.sm;
       break;
     case 'bottom':
       cursor = 'row-resize';
@@ -52,16 +72,16 @@ const sizeStyles = props => {
       width = '100%';
       height = size;
       separatorWidth = width;
-      separatorHeight = props.theme.borderWidths.sm;
+      separatorHeight = theme.borderWidths.sm;
       break;
     case 'start':
       cursor = 'col-resize';
       top = 0;
       width = size;
       height = '100%';
-      separatorWidth = props.theme.borderWidths.sm;
+      separatorWidth = theme.borderWidths.sm;
       separatorHeight = height;
-      if (props.theme.rtl) {
+      if (theme.rtl) {
         right = offset;
       } else {
         left = offset;
@@ -73,9 +93,9 @@ const sizeStyles = props => {
       top = 0;
       width = size;
       height = '100%';
-      separatorWidth = props.theme.borderWidths.sm;
+      separatorWidth = theme.borderWidths.sm;
       separatorHeight = height;
-      if (props.theme.rtl) {
+      if (theme.rtl) {
         left = offset;
       } else {
         right = offset;
@@ -83,17 +103,14 @@ const sizeStyles = props => {
       break;
   }
   const dimensionProperty = width === '100%' ? 'height' : 'width';
-  return css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{width:", ";height:", ";}&:hover::before{", ":", ";}&:focus::before,&:focus-visible::before{", ":", ";}&:focus-visible::before{border-radius:", ";}"], top, right, bottom, left, props.isFixed ? 'pointer' : cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, separatorSize, dimensionProperty, separatorSize, props.theme.borderRadii.md);
+  return css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{width:", ";height:", ";}&:hover::before{", ":", ";}&:focus::before,&:focus-visible::before{", ":", ";}&:focus-visible::before{border-radius:", ";}"], top, right, bottom, left, isFixed ? 'pointer' : cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, separatorSize, dimensionProperty, separatorSize, theme.borderRadii.md);
 };
 const StyledPaneSplitter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
 })(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";", "{z-index:2;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles, SELECTOR_FOCUS_VISIBLE, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledPaneSplitter.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledPaneSplitter };

package/dist/esm/styled/pane/StyledPaneSplitterButton.js

@@ -5,10 +5,8 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { ChevronButton } from '@zendeskgarden/react-buttons';
 
-const COMPONENT_ID = 'pane.splitter_button';
 const getSize = theme => theme.space.base * 6;
 const sizeStyles = _ref => {
   let {
@@ -32,17 +30,13 @@ const transformStyles = props => {
   return css(["& > svg{transform:rotate(", "deg);}"], degrees);
 };
 const StyledPaneSplitterButton = styled(ChevronButton).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9',
+  'data-garden-version': '9.0.0',
   isBasic: true,
   isPill: true,
   size: 'small'
 }).withConfig({
   displayName: "StyledPaneSplitterButton",
   componentId: "sc-zh032e-0"
-})(["", ";", ";", ";"], sizeStyles, transformStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledPaneSplitterButton.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["", ";", ";"], sizeStyles, transformStyles);
 
 export { StyledPaneSplitterButton, getSize };

package/dist/esm/styled/pane/StyledPaneSplitterButtonContainer.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { stripUnit, math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledPaneSplitter } from './StyledPaneSplitter.js';
 import { getSize } from './StyledPaneSplitterButton.js';
 
@@ -15,20 +15,32 @@ const colorStyles = _ref => {
   let {
     theme
   } = _ref;
-  const backgroundColor = getColorV8('background', 600 , theme);
-  const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColorV8('chromeHue', 600, theme, 0.15));
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.raised'
+  });
+  const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColor({
+    variable: 'shadow.small',
+    theme
+  }));
   return css(["box-shadow:", ";background-color:", ";"], boxShadow, backgroundColor);
 };
-const positionStyles = props => {
+const positionStyles = _ref2 => {
+  let {
+    theme,
+    placement,
+    splitterSize,
+    orientation
+  } = _ref2;
   let top;
   let left;
   let right;
   let bottom;
-  const size = getSize(props.theme);
+  const size = getSize(theme);
   const inset = `-${size / 2}px`;
-  if (props.placement === 'center' || props.splitterSize < size * 3) {
-    const center = `${props.splitterSize / 2 - size / 2}px`;
-    switch (`${props.orientation}-${props.theme.rtl ? 'rtl' : 'ltr'}`) {
+  if (placement === 'center' || splitterSize < size * 3) {
+    const center = `${splitterSize / 2 - size / 2}px`;
+    switch (`${orientation}-${theme.rtl ? 'rtl' : 'ltr'}`) {
       case 'top-ltr':
       case 'top-rtl':
         top = inset;
@@ -52,7 +64,7 @@ const positionStyles = props => {
     }
   } else {
     const offset = `${size}px`;
-    switch (`${props.orientation}-${props.placement}-${props.theme.rtl ? 'rtl' : 'ltr'}`) {
+    switch (`${orientation}-${placement}-${theme.rtl ? 'rtl' : 'ltr'}`) {
       case 'top-end-ltr':
       case 'top-end-rtl':
       case 'top-start-rtl':
@@ -97,10 +109,10 @@ const positionStyles = props => {
   }
   return css(["top:", ";right:", ";bottom:", ";left:", ";"], top, right, bottom, left);
 };
-const sizeStyles = _ref2 => {
+const sizeStyles = _ref3 => {
   let {
     theme
-  } = _ref2;
+  } = _ref3;
   const size = getSize(theme);
   return css(["border-radius:", "px;width:", "px;height:", "px;"], size, size, size);
 };
@@ -109,8 +121,5 @@ const StyledPaneSplitterButtonContainer = styled.div.withConfig({
   displayName: "StyledPaneSplitterButtonContainer",
   componentId: "sc-1w84y62-0"
 })(["display:", ";position:absolute;transition:box-shadow 0.1s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;z-index:2;", ";", ";", ";&:hover,&:focus-within,", ":hover ~ &,", ":focus-visible ~ &{opacity:1;}", ";"], props => props.splitterSize <= minimumSplitterSize(props.theme) ? 'none' : undefined, positionStyles, sizeStyles, colorStyles, StyledPaneSplitter, StyledPaneSplitter, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledPaneSplitterButtonContainer.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledPaneSplitterButtonContainer };

package/dist/index.cjs.js

@@ -34,9 +34,21 @@ const SPACE = [false, 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
 const WRAP = ['nowrap', 'wrap', 'wrap-reverse'];
 const ORIENTATION = ['top', 'bottom', 'start', 'end'];
 
-const COMPONENT_ID$7 = 'grid.col';
-const colorStyles$4 = props => {
-  const backgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.1);
+const COMPONENT_ID$6 = 'grid.col';
+const colorStyles$4 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.primaryEmphasis',
+    dark: {
+      transparency: theme.opacity[200]
+    },
+    light: {
+      transparency: theme.opacity[100]
+    }
+  });
   return styled.css(["background-clip:content-box;background-color:", ";"], backgroundColor);
 };
 const flexStyles$1 = (size, alignSelf, textAlign, offset, order, props) => {
@@ -80,48 +92,76 @@ const flexStyles$1 = (size, alignSelf, textAlign, offset, order, props) => {
 const mediaStyles$1 = (minWidth, size, alignSelf, textAlign, offset, order, props) => {
   return styled.css(["@media (min-width:", "){", ";}"], minWidth, flexStyles$1(size, alignSelf, textAlign, offset, order, props));
 };
-const sizeStyles$5 = props => {
-  const padding = props.gutters ? polished.math(`${props.theme.space[props.gutters]} / 2`) : 0;
+const sizeStyles$5 = _ref2 => {
+  let {
+    theme,
+    gutters
+  } = _ref2;
+  const padding = gutters ? polished.math(`${theme.space[gutters]} / 2`) : 0;
   return styled.css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
 const StyledCol = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
-})(["box-sizing:border-box;width:100%;", ";", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles$1(!props.sizeAll && (props.xs || props.sm || props.md || props.lg || props.xl) ? undefined : props.sizeAll || false, props.alignSelf, props.textAlign, props.offset, props.order, props), props => sizeStyles$5(props), props => props.debug && colorStyles$4(props), props => mediaStyles$1(props.theme.breakpoints.xs, props.xs, props.alignSelfXs, props.textAlignXs, props.offsetXs, props.orderXs, props), props => mediaStyles$1(props.theme.breakpoints.sm, props.sm, props.alignSelfSm, props.textAlignSm, props.offsetSm, props.orderSm, props), props => mediaStyles$1(props.theme.breakpoints.md, props.md, props.alignSelfMd, props.textAlignMd, props.offsetMd, props.orderMd, props), props => mediaStyles$1(props.theme.breakpoints.lg, props.lg, props.alignSelfLg, props.textAlignLg, props.offsetLg, props.orderLg, props), props => mediaStyles$1(props.theme.breakpoints.xl, props.xl, props.alignSelfXl, props.textAlignXl, props.offsetXl, props.orderXl, props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
+})(["box-sizing:border-box;width:100%;", ";", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles$1(!props.sizeAll && (props.xs || props.sm || props.md || props.lg || props.xl) ? undefined : props.sizeAll || false, props.alignSelf, props.textAlign, props.offset, props.order, props), sizeStyles$5, props => props.debug && colorStyles$4(props), props => mediaStyles$1(props.theme.breakpoints.xs, props.xs, props.alignSelfXs, props.textAlignXs, props.offsetXs, props.orderXs, props), props => mediaStyles$1(props.theme.breakpoints.sm, props.sm, props.alignSelfSm, props.textAlignSm, props.offsetSm, props.orderSm, props), props => mediaStyles$1(props.theme.breakpoints.md, props.md, props.alignSelfMd, props.textAlignMd, props.offsetMd, props.orderMd, props), props => mediaStyles$1(props.theme.breakpoints.lg, props.lg, props.alignSelfLg, props.textAlignLg, props.offsetLg, props.orderLg, props), props => mediaStyles$1(props.theme.breakpoints.xl, props.xl, props.alignSelfXl, props.textAlignXl, props.offsetXl, props.orderXl, props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledCol.defaultProps = {
   columns: 12,
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$6 = 'grid.grid';
-const colorStyles$3 = props => {
-  const borderColor = reactTheming.getColorV8(props.theme.palette.crimson, 400, props.theme, 0.5);
-  const borderWidth = polished.math(`${props.theme.borderWidths.sm} * 2`);
-  return styled.css(["box-shadow:-", " 0 0 0 ", ",", " 0 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
-};
-const sizeStyles$4 = props => {
-  const padding = props.gutters ? polished.math(`${props.theme.space[props.gutters]} / 2`) : 0;
+const COMPONENT_ID$5 = 'grid.grid';
+const colorStyles$3 = _ref => {
+  let {
+    theme,
+    debug
+  } = _ref;
+  const borderColor = debug && reactTheming.getColor({
+    theme,
+    hue: 'crimson',
+    shade: 700,
+    transparency: theme.opacity[600]
+  });
+  const borderWidth = debug && polished.math(`${theme.borderWidths.sm} * 2`);
+  return styled.css(["color-scheme:only ", ";box-shadow:", ";"], theme.colors.base, debug && `
+      -${borderWidth} 0 0 0 ${borderColor},
+      ${borderWidth} 0 0 0 ${borderColor}
+    `);
+};
+const sizeStyles$4 = _ref2 => {
+  let {
+    theme,
+    gutters
+  } = _ref2;
+  const padding = gutters ? polished.math(`${theme.space[gutters]} / 2`) : 0;
   return styled.css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
 const StyledGrid = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
-})(["direction:", ";margin-right:auto;margin-left:auto;width:100%;box-sizing:border-box;", ";", ";", ";"], props => props.theme.rtl && 'rtl', props => sizeStyles$4(props), props => props.debug && colorStyles$3(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
+})(["direction:", ";margin-right:auto;margin-left:auto;width:100%;box-sizing:border-box;", ";", ";", ";"], props => props.theme.rtl && 'rtl', sizeStyles$4, colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledGrid.defaultProps = {
   gutters: 'md',
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$5 = 'grid.row';
-const colorStyles$2 = props => {
-  const borderColor = reactTheming.getColorV8(props.theme.palette.mint, 600, props.theme, 0.5);
-  const borderWidth = props.theme.borderWidths.sm;
+const COMPONENT_ID$4 = 'grid.row';
+const colorStyles$2 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = reactTheming.getColor({
+    theme,
+    hue: 'mint',
+    shade: 700,
+    transparency: theme.opacity[600]
+  });
+  const borderWidth = theme.borderWidths.sm;
   return styled.css(["box-shadow:inset 0 ", " 0 0 ", ",inset 0 -", " 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
 };
 const flexStyles = (alignItems, justifyContent, wrap) => {
@@ -144,65 +184,83 @@ const flexStyles = (alignItems, justifyContent, wrap) => {
 const mediaStyles = (minWidth, alignItems, justifyContent, wrap) => {
   return styled.css(["@media (min-width:", "){", ";}"], minWidth, flexStyles(alignItems, justifyContent, wrap));
 };
-const sizeStyles$3 = props => {
-  const margin = props.gutters ? polished.math(`${props.theme.space[props.gutters]} / 2`) : 0;
+const sizeStyles$3 = _ref2 => {
+  let {
+    theme,
+    gutters
+  } = _ref2;
+  const margin = gutters ? polished.math(`${theme.space[gutters]} / 2`) : 0;
   return styled.css(["margin-right:-", ";margin-left:-", ";"], margin, margin);
 };
 const StyledRow = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
-})(["display:flex;box-sizing:border-box;", " ", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(props.alignItems, props.justifyContent, props.wrapAll), props => sizeStyles$3(props), props => props.debug && colorStyles$2(props), props => mediaStyles(props.theme.breakpoints.xs, props.alignItemsXs, props.justifyContentXs, props.wrapXs), props => mediaStyles(props.theme.breakpoints.sm, props.alignItemsSm, props.justifyContentSm, props.wrapSm), props => mediaStyles(props.theme.breakpoints.md, props.alignItemsMd, props.justifyContentMd, props.wrapMd), props => mediaStyles(props.theme.breakpoints.lg, props.alignItemsLg, props.justifyContentLg, props.wrapLg), props => mediaStyles(props.theme.breakpoints.xl, props.alignItemsXl, props.justifyContentXl, props.wrapXl), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["display:flex;box-sizing:border-box;", " ", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(props.alignItems, props.justifyContent, props.wrapAll), sizeStyles$3, props => props.debug && colorStyles$2(props), props => mediaStyles(props.theme.breakpoints.xs, props.alignItemsXs, props.justifyContentXs, props.wrapXs), props => mediaStyles(props.theme.breakpoints.sm, props.alignItemsSm, props.justifyContentSm, props.wrapSm), props => mediaStyles(props.theme.breakpoints.md, props.alignItemsMd, props.justifyContentMd, props.wrapMd), props => mediaStyles(props.theme.breakpoints.lg, props.alignItemsLg, props.justifyContentLg, props.wrapLg), props => mediaStyles(props.theme.breakpoints.xl, props.alignItemsXl, props.justifyContentXl, props.wrapXl), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledRow.defaultProps = {
   wrapAll: 'wrap',
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$4 = 'pane';
+const COMPONENT_ID$3 = 'pane';
 const StyledPane = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
-})(["position:relative;min-width:0;min-height:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledPane.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["position:relative;min-width:0;min-height:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 
-const COMPONENT_ID$3 = 'pane.content';
+const COMPONENT_ID$2 = 'pane.content';
 const StyledPaneContent = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
-})(["height:100%;overflow:auto;&[hidden]{display:none;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledPaneContent.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["height:100%;overflow:auto;color-scheme:only ", ";&[hidden]{display:none;}", ";"], p => p.theme.colors.base, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 
-const COMPONENT_ID$2 = 'pane.splitter';
-const colorStyles$1 = props => {
-  const color = reactTheming.getColorV8('neutralHue', 300, props.theme);
-  const hoverColor = reactTheming.getColorV8('primaryHue', 600, props.theme);
-  const activeColor = reactTheming.getColorV8('primaryHue', 800, props.theme);
-  return styled.css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}", " &:active::before{background-color:", ";}"], color, hoverColor, reactTheming.focusStyles({
-    theme: props.theme,
-    color: {
-      hue: hoverColor
+const COMPONENT_ID$1 = 'pane.splitter';
+const colorStyles$1 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const color = reactTheming.getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const options = {
+    theme,
+    variable: 'border.primaryEmphasis'
+  };
+  const hoverColor = reactTheming.getColor(options);
+  const activeColor = reactTheming.getColor({
+    ...options,
+    dark: {
+      offset: -200
     },
+    light: {
+      offset: 200
+    }
+  });
+  return styled.css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}", " &:active::before{background-color:", ";}"], color, hoverColor, reactTheming.focusStyles({
+    theme,
     styles: {
       backgroundColor: hoverColor
     },
     selector: '&:focus-visible::before'
   }), activeColor);
 };
-const sizeStyles$2 = props => {
-  const size = polished.math(`${props.theme.shadowWidths.md} * 2`);
-  const separatorSize = polished.math(`${props.theme.borderWidths.sm} * 2`);
+const sizeStyles$2 = _ref2 => {
+  let {
+    theme,
+    orientation,
+    isFixed
+  } = _ref2;
+  const size = polished.math(`${theme.shadowWidths.md} * 2`);
+  const separatorSize = polished.math(`${theme.borderWidths.sm} * 2`);
   const offset = polished.math(`-${size} / 2`);
   let cursor;
   let top;
@@ -213,14 +271,14 @@ const sizeStyles$2 = props => {
   let height;
   let separatorWidth;
   let separatorHeight;
-  switch (props.orientation) {
+  switch (orientation) {
     case 'top':
       cursor = 'row-resize';
       top = offset;
       width = '100%';
       height = size;
       separatorWidth = width;
-      separatorHeight = props.theme.borderWidths.sm;
+      separatorHeight = theme.borderWidths.sm;
       break;
     case 'bottom':
       cursor = 'row-resize';
@@ -228,16 +286,16 @@ const sizeStyles$2 = props => {
       width = '100%';
       height = size;
       separatorWidth = width;
-      separatorHeight = props.theme.borderWidths.sm;
+      separatorHeight = theme.borderWidths.sm;
       break;
     case 'start':
       cursor = 'col-resize';
       top = 0;
       width = size;
       height = '100%';
-      separatorWidth = props.theme.borderWidths.sm;
+      separatorWidth = theme.borderWidths.sm;
       separatorHeight = height;
-      if (props.theme.rtl) {
+      if (theme.rtl) {
         right = offset;
       } else {
         left = offset;
@@ -249,9 +307,9 @@ const sizeStyles$2 = props => {
       top = 0;
       width = size;
       height = '100%';
-      separatorWidth = props.theme.borderWidths.sm;
+      separatorWidth = theme.borderWidths.sm;
       separatorHeight = height;
-      if (props.theme.rtl) {
+      if (theme.rtl) {
         left = offset;
       } else {
         right = offset;
@@ -259,20 +317,16 @@ const sizeStyles$2 = props => {
       break;
   }
   const dimensionProperty = width === '100%' ? 'height' : 'width';
-  return styled.css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{width:", ";height:", ";}&:hover::before{", ":", ";}&:focus::before,&:focus-visible::before{", ":", ";}&:focus-visible::before{border-radius:", ";}"], top, right, bottom, left, props.isFixed ? 'pointer' : cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, separatorSize, dimensionProperty, separatorSize, props.theme.borderRadii.md);
+  return styled.css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{width:", ";height:", ";}&:hover::before{", ":", ";}&:focus::before,&:focus-visible::before{", ":", ";}&:focus-visible::before{border-radius:", ";}"], top, right, bottom, left, isFixed ? 'pointer' : cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, separatorSize, dimensionProperty, separatorSize, theme.borderRadii.md);
 };
 const StyledPaneSplitter = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
-})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";", "{z-index:2;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles$2, reactTheming.SELECTOR_FOCUS_VISIBLE, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledPaneSplitter.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";", "{z-index:2;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles$2, reactTheming.SELECTOR_FOCUS_VISIBLE, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 
-const COMPONENT_ID$1 = 'pane.splitter_button';
 const getSize = theme => theme.space.base * 6;
 const sizeStyles$1 = _ref => {
   let {
@@ -296,38 +350,46 @@ const transformStyles = props => {
   return styled.css(["& > svg{transform:rotate(", "deg);}"], degrees);
 };
 const StyledPaneSplitterButton = styled__default.default(reactButtons.ChevronButton).attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.9',
+  'data-garden-version': '9.0.0',
   isBasic: true,
   isPill: true,
   size: 'small'
 }).withConfig({
   displayName: "StyledPaneSplitterButton",
   componentId: "sc-zh032e-0"
-})(["", ";", ";", ";"], sizeStyles$1, transformStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledPaneSplitterButton.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["", ";", ";"], sizeStyles$1, transformStyles);
 
 const COMPONENT_ID = 'pane.splitter_button_container';
 const colorStyles = _ref => {
   let {
     theme
   } = _ref;
-  const backgroundColor = reactTheming.getColorV8('background', 600 , theme);
-  const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColorV8('chromeHue', 600, theme, 0.15));
+  const backgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.raised'
+  });
+  const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColor({
+    variable: 'shadow.small',
+    theme
+  }));
   return styled.css(["box-shadow:", ";background-color:", ";"], boxShadow, backgroundColor);
 };
-const positionStyles = props => {
+const positionStyles = _ref2 => {
+  let {
+    theme,
+    placement,
+    splitterSize,
+    orientation
+  } = _ref2;
   let top;
   let left;
   let right;
   let bottom;
-  const size = getSize(props.theme);
+  const size = getSize(theme);
   const inset = `-${size / 2}px`;
-  if (props.placement === 'center' || props.splitterSize < size * 3) {
-    const center = `${props.splitterSize / 2 - size / 2}px`;
-    switch (`${props.orientation}-${props.theme.rtl ? 'rtl' : 'ltr'}`) {
+  if (placement === 'center' || splitterSize < size * 3) {
+    const center = `${splitterSize / 2 - size / 2}px`;
+    switch (`${orientation}-${theme.rtl ? 'rtl' : 'ltr'}`) {
       case 'top-ltr':
       case 'top-rtl':
         top = inset;
@@ -351,7 +413,7 @@ const positionStyles = props => {
     }
   } else {
     const offset = `${size}px`;
-    switch (`${props.orientation}-${props.placement}-${props.theme.rtl ? 'rtl' : 'ltr'}`) {
+    switch (`${orientation}-${placement}-${theme.rtl ? 'rtl' : 'ltr'}`) {
       case 'top-end-ltr':
       case 'top-end-rtl':
       case 'top-start-rtl':
@@ -396,10 +458,10 @@ const positionStyles = props => {
   }
   return styled.css(["top:", ";right:", ";bottom:", ";left:", ";"], top, right, bottom, left);
 };
-const sizeStyles = _ref2 => {
+const sizeStyles = _ref3 => {
   let {
     theme
-  } = _ref2;
+  } = _ref3;
   const size = getSize(theme);
   return styled.css(["border-radius:", "px;width:", "px;height:", "px;"], size, size, size);
 };
@@ -408,9 +470,6 @@ const StyledPaneSplitterButtonContainer = styled__default.default.div.withConfig
   displayName: "StyledPaneSplitterButtonContainer",
   componentId: "sc-1w84y62-0"
 })(["display:", ";position:absolute;transition:box-shadow 0.1s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;z-index:2;", ";", ";", ";&:hover,&:focus-within,", ":hover ~ &,", ":focus-visible ~ &{opacity:1;}", ";"], props => props.splitterSize <= minimumSplitterSize(props.theme) ? 'none' : undefined, positionStyles, sizeStyles, colorStyles, StyledPaneSplitter, StyledPaneSplitter, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
-StyledPaneSplitterButtonContainer.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const GridContext = React.createContext({
   gutters: 'md'
@@ -437,7 +496,7 @@ const Col = React__default.default.forwardRef((_ref, ref) => {
     ref: ref
   }, props));
 });
-Col.displayName = 'Col';
+Col.displayName = 'Grid.Col';
 Col.propTypes = {
   size: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
   xs: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string, PropTypes__default.default.bool]),
@@ -487,7 +546,7 @@ const Row = React__default.default.forwardRef((_ref, ref) => {
     ref: ref
   }, props));
 });
-Row.displayName = 'Row';
+Row.displayName = 'Grid.Row';
 Row.propTypes = {
   alignItems: PropTypes__default.default.oneOf(ALIGN_ITEMS),
   alignItemsXs: PropTypes__default.default.oneOf(ALIGN_ITEMS),

package/dist/typings/elements/Grid.d.ts

@@ -12,7 +12,7 @@ export declare const GridComponent: React.ForwardRefExoticComponent<IGridProps &
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Grid: React.ForwardRefExoticComponent<IGridProps & React.RefAttributes<HTMLDivElement>> & {
+export declare const Grid: typeof GridComponent & {
     Row: typeof Row;
     Col: typeof Col;
 };

package/dist/typings/elements/pane/Pane.d.ts

@@ -8,11 +8,13 @@ import React from 'react';
 import { Splitter } from './components/Splitter';
 import { Content } from './components/Content';
 import { SplitterButton } from './components/SplitterButton';
+declare const PaneComponent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Pane: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>> & {
+export declare const Pane: typeof PaneComponent & {
     Content: typeof Content;
     Splitter: typeof Splitter;
     SplitterButton: typeof SplitterButton;
 };
+export {};

package/dist/typings/styled/pane/StyledPaneSplitterButton.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="react" />
 import { DefaultTheme } from 'styled-components';
 import { Orientation } from '../../types';
 interface IStyledSplitterButtonProps {

package/dist/typings/utils/useGridContext.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="react" />
 import { GridNumber, Space } from '../types';
 interface IGridContext {
     columns?: GridNumber;

package/dist/typings/utils/usePaneContext.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="react" />
 interface IPaneContext {
     id?: string;
     isVisible?: boolean;

package/dist/typings/utils/usePaneProviderContext.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="react" />
 interface IPaneProviderContextData {
     rowState: Record<string, number>;
     columnState: Record<string, number>;

package/dist/typings/utils/usePaneSplitterContext.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="react" />
 import { ISplitterProps, Orientation } from '../types';
 interface IPaneSplitterContext {
     orientation?: Orientation;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "9.0.0-next.9",
+  "version": "9.0.0",
   "description": "Components relating to layout grids in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,23 +21,23 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-splitter": "^2.0.3",
+    "@zendeskgarden/container-splitter": "^2.0.17",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^9.0.0-next.9",
-    "@zendeskgarden/react-tooltips": "^9.0.0-next.9",
-    "polished": "^4.0.0",
+    "@zendeskgarden/react-buttons": "^9.0.0",
+    "@zendeskgarden/react-tooltips": "^9.0.0",
+    "polished": "^4.3.1",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^2.0.0",
     "use-resize-observer": "^9.1.0"
   },
   "peerDependencies": {
     "@zendeskgarden/react-theming": ">=9.0.0-next",
-    "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": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.9"
+    "@zendeskgarden/react-theming": "^9.0.0"
   },
   "keywords": [
     "components",
@@ -48,6 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "zendeskgarden:src": "src/index.ts",
-  "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
+  "zendeskgarden:src": "src/index.ts"
 }

package/LICENSE.md

@@ -1,176 +0,0 @@
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS