@zendeskgarden/react-grid 9.0.0-next.11 → 9.0.0-next.12

package/dist/esm/styled/StyledCol.js

@@ -60,7 +60,7 @@ const sizeStyles = props => {
 };
 const StyledCol = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"

package/dist/esm/styled/StyledGrid.js

@@ -20,7 +20,7 @@ const sizeStyles = props => {
 };
 const StyledGrid = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"

package/dist/esm/styled/StyledRow.js

@@ -40,7 +40,7 @@ const sizeStyles = props => {
 };
 const StyledRow = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"

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

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'pane';
 const StyledPane = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"

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

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'pane.content';
 const StyledPaneContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"

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

@@ -87,7 +87,7 @@ const sizeStyles = props => {
 };
 const StyledPaneSplitter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"

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

@@ -5,10 +5,9 @@
 * 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 { 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,15 +31,14 @@ 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.11',
+  'data-garden-version': '9.0.0-next.12',
   isBasic: true,
   isPill: true,
   size: 'small'
 }).withConfig({
   displayName: "StyledPaneSplitterButton",
   componentId: "sc-zh032e-0"
-})(["", ";", ";", ";"], sizeStyles, transformStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["", ";", ";"], sizeStyles, transformStyles);
 StyledPaneSplitterButton.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/index.cjs.js

@@ -34,7 +34,7 @@ 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 COMPONENT_ID$6 = 'grid.col';
 const colorStyles$4 = props => {
   const backgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.1);
   return styled.css(["background-clip:content-box;background-color:", ";"], backgroundColor);
@@ -85,18 +85,18 @@ const sizeStyles$5 = props => {
   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.11'
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.0.0-next.12'
 }).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), 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$6, props));
 StyledCol.defaultProps = {
   columns: 12,
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$6 = 'grid.grid';
+const COMPONENT_ID$5 = '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`);
@@ -107,18 +107,18 @@ const sizeStyles$4 = props => {
   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.11'
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.0.0-next.12'
 }).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', props => sizeStyles$4(props), props => props.debug && colorStyles$3(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledGrid.defaultProps = {
   gutters: 'md',
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$5 = 'grid.row';
+const COMPONENT_ID$4 = '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;
@@ -149,42 +149,42 @@ const sizeStyles$3 = props => {
   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.11'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.0.0-next.12'
 }).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), 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$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.11'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
-})(["position:relative;min-width:0;min-height:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
+})(["position:relative;min-width:0;min-height:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledPane.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-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.11'
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
-})(["height:100%;overflow:auto;&[hidden]{display:none;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["height:100%;overflow:auto;&[hidden]{display:none;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledPaneContent.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$2 = 'pane.splitter';
+const COMPONENT_ID$1 = 'pane.splitter';
 const colorStyles$1 = props => {
   const color = reactTheming.getColorV8('neutralHue', 300, props.theme);
   const hoverColor = reactTheming.getColorV8('primaryHue', 600, props.theme);
@@ -262,17 +262,16 @@ const sizeStyles$2 = props => {
   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);
 };
 const StyledPaneSplitter = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.0.0-next.12'
 }).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));
+})(["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));
 StyledPaneSplitter.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$1 = 'pane.splitter_button';
 const getSize = theme => theme.space.base * 6;
 const sizeStyles$1 = _ref => {
   let {
@@ -296,15 +295,14 @@ 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.11',
+  'data-garden-version': '9.0.0-next.12',
   isBasic: true,
   isPill: true,
   size: 'small'
 }).withConfig({
   displayName: "StyledPaneSplitterButton",
   componentId: "sc-zh032e-0"
-})(["", ";", ";", ";"], sizeStyles$1, transformStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
+})(["", ";", ";"], sizeStyles$1, transformStyles);
 StyledPaneSplitterButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "9.0.0-next.11",
+  "version": "9.0.0-next.12",
   "description": "Components relating to layout grids in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,8 +23,8 @@
   "dependencies": {
     "@zendeskgarden/container-splitter": "^2.0.3",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^9.0.0-next.11",
-    "@zendeskgarden/react-tooltips": "^9.0.0-next.11",
+    "@zendeskgarden/react-buttons": "^9.0.0-next.12",
+    "@zendeskgarden/react-tooltips": "^9.0.0-next.12",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^2.0.0",
@@ -37,7 +37,7 @@
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.11"
+    "@zendeskgarden/react-theming": "^9.0.0-next.12"
   },
   "keywords": [
     "components",
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "0de1cc664807bd993ccd3beeb78e8fd1f3828320"
+  "gitHead": "7925ff78236795111e2953efbce549839df3a86d"
 }