@zendeskgarden/react-grid 9.15.6 → 9.15.8

package/dist/esm/styled/StyledCol.js

@@ -25,7 +25,8 @@ const colorStyles$4 = ({
   return css(["background-clip:content-box;background-color:", ";"], backgroundColor);
 };
 const flexStyles$1 = (size, alignSelf, textAlign, offset, order, props) => {
-  const margin = offset && `${math(`${offset} / ${props.$columns} * 100`)}%`;
+  const columns = props.$columns ?? 12;
+  const margin = offset && `${math(`${offset} / ${columns} * 100`)}%`;
   let flexBasis;
   let flexGrow;
   let maxWidth;
@@ -40,7 +41,7 @@ const flexStyles$1 = (size, alignSelf, textAlign, offset, order, props) => {
     maxWidth = '100%';
     width = 'auto';
   } else if (size !== undefined) {
-    flexBasis = `${math(`${size} / ${props.$columns} * 100`)}%`;
+    flexBasis = `${math(`${size} / ${columns} * 100`)}%`;
     flexGrow = 0;
     maxWidth = flexBasis;
   }
@@ -56,7 +57,7 @@ const flexStyles$1 = (size, alignSelf, textAlign, offset, order, props) => {
   if (order === 'first') {
     flexOrder = -1;
   } else if (order === 'last') {
-    flexOrder = math(`${props.$columns} + 1`);
+    flexOrder = math(`${columns} + 1`);
   } else {
     flexOrder = order;
   }
@@ -72,10 +73,9 @@ const sizeStyles$5 = ({
   const padding = $gutters ? math(`${theme.space[$gutters]} / 2`) : 0;
   return css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
-const StyledCol = styled.div.attrs(props => ({
+const StyledCol = styled.div.attrs(() => ({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.15.6',
-  $columns: props.$columns ?? 12
+  'data-garden-version': '9.15.8'
 })).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"

package/dist/esm/styled/StyledGrid.js

@@ -29,13 +29,13 @@ const sizeStyles$4 = ({
   theme,
   $gutters
 }) => {
-  const padding = $gutters ? math(`${theme.space[$gutters]} / 2`) : 0;
+  const gutters = $gutters ?? 'md';
+  const padding = gutters ? math(`${theme.space[gutters]} / 2`) : 0;
   return css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
-const StyledGrid = styled.div.attrs(props => ({
+const StyledGrid = styled.div.attrs(() => ({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.15.6',
-  $gutters: props.$gutters ?? 'md'
+  'data-garden-version': '9.15.8'
 })).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"

package/dist/esm/styled/StyledRow.js

@@ -48,13 +48,12 @@ const sizeStyles$3 = ({
   const margin = $gutters ? math(`${theme.space[$gutters]} / 2`) : 0;
   return css(["margin-right:-", ";margin-left:-", ";"], margin, margin);
 };
-const StyledRow = styled.div.attrs(props => ({
+const StyledRow = styled.div.attrs(() => ({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.15.6',
-  $wrapAll: props.$wrapAll ?? 'wrap'
+  'data-garden-version': '9.15.8'
 })).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
-})(["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), componentStyles);
+})(["display:flex;box-sizing:border-box;", " ", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(props.$alignItems, props.$justifyContent, props.$wrapAll ?? 'wrap'), 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), componentStyles);
 
 export { StyledRow };

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

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID$3 = 'pane';
 const StyledPane = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.15.6'
+  'data-garden-version': '9.15.8'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"

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

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID$2 = 'pane.content';
 const StyledPaneContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.15.6'
+  'data-garden-version': '9.15.8'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"

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

@@ -105,7 +105,7 @@ const sizeStyles$2 = ({
 };
 const StyledPaneSplitter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.15.6'
+  'data-garden-version': '9.15.8'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"

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

@@ -34,7 +34,7 @@ const transformStyles = ({
   return css(["& > svg{transform:rotate(", "deg);}"], degrees);
 };
 const StyledPaneSplitterButton = styled(ChevronButton).attrs({
-  'data-garden-version': '9.15.6',
+  'data-garden-version': '9.15.8',
   isBasic: true,
   isPill: true,
   size: 'small'

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

@@ -116,7 +116,7 @@ const sizeStyles = ({
 const minimumSplitterSize = theme => stripUnit(math(`${theme.shadowWidths.md} * 2 + ${getSize(theme)}`));
 const StyledPaneSplitterButtonContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.15.6'
+  'data-garden-version': '9.15.8'
 }).withConfig({
   displayName: "StyledPaneSplitterButtonContainer",
   componentId: "sc-1w84y62-0"

package/dist/esm/utils/useGridContext.js

@@ -7,6 +7,7 @@
 import { createContext, useContext } from 'react';
 
 const GridContext = createContext({
+  columns: 12,
   gutters: 'md'
 });
 const useGridContext = () => {

package/dist/index.cjs.js

@@ -51,7 +51,8 @@ const colorStyles$4 = ({
   return styled.css(["background-clip:content-box;background-color:", ";"], backgroundColor);
 };
 const flexStyles$1 = (size, alignSelf, textAlign, offset, order, props) => {
-  const margin = offset && `${polished.math(`${offset} / ${props.$columns} * 100`)}%`;
+  const columns = props.$columns ?? 12;
+  const margin = offset && `${polished.math(`${offset} / ${columns} * 100`)}%`;
   let flexBasis;
   let flexGrow;
   let maxWidth;
@@ -66,7 +67,7 @@ const flexStyles$1 = (size, alignSelf, textAlign, offset, order, props) => {
     maxWidth = '100%';
     width = 'auto';
   } else if (size !== undefined) {
-    flexBasis = `${polished.math(`${size} / ${props.$columns} * 100`)}%`;
+    flexBasis = `${polished.math(`${size} / ${columns} * 100`)}%`;
     flexGrow = 0;
     maxWidth = flexBasis;
   }
@@ -82,7 +83,7 @@ const flexStyles$1 = (size, alignSelf, textAlign, offset, order, props) => {
   if (order === 'first') {
     flexOrder = -1;
   } else if (order === 'last') {
-    flexOrder = polished.math(`${props.$columns} + 1`);
+    flexOrder = polished.math(`${columns} + 1`);
   } else {
     flexOrder = order;
   }
@@ -98,10 +99,9 @@ const sizeStyles$5 = ({
   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(props => ({
+const StyledCol = styled__default.default.div.attrs(() => ({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.15.6',
-  $columns: props.$columns ?? 12
+  'data-garden-version': '9.15.8'
 })).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
@@ -128,13 +128,13 @@ const sizeStyles$4 = ({
   theme,
   $gutters
 }) => {
-  const padding = $gutters ? polished.math(`${theme.space[$gutters]} / 2`) : 0;
+  const gutters = $gutters ?? 'md';
+  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(props => ({
+const StyledGrid = styled__default.default.div.attrs(() => ({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.15.6',
-  $gutters: props.$gutters ?? 'md'
+  'data-garden-version': '9.15.8'
 })).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
@@ -180,19 +180,18 @@ const sizeStyles$3 = ({
   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(props => ({
+const StyledRow = styled__default.default.div.attrs(() => ({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.15.6',
-  $wrapAll: props.$wrapAll ?? 'wrap'
+  'data-garden-version': '9.15.8'
 })).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
-})(["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), reactTheming.componentStyles);
+})(["display:flex;box-sizing:border-box;", " ", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(props.$alignItems, props.$justifyContent, props.$wrapAll ?? 'wrap'), 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), reactTheming.componentStyles);
 
 const COMPONENT_ID$3 = 'pane';
 const StyledPane = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.15.6'
+  'data-garden-version': '9.15.8'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
@@ -201,7 +200,7 @@ const StyledPane = styled__default.default.div.attrs({
 const COMPONENT_ID$2 = 'pane.content';
 const StyledPaneContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.15.6'
+  'data-garden-version': '9.15.8'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
@@ -304,7 +303,7 @@ const sizeStyles$2 = ({
 };
 const StyledPaneSplitter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.15.6'
+  'data-garden-version': '9.15.8'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
@@ -336,7 +335,7 @@ const transformStyles = ({
   return styled.css(["& > svg{transform:rotate(", "deg);}"], degrees);
 };
 const StyledPaneSplitterButton = styled__default.default(reactButtons.ChevronButton).attrs({
-  'data-garden-version': '9.15.6',
+  'data-garden-version': '9.15.8',
   isBasic: true,
   isPill: true,
   size: 'small'
@@ -451,13 +450,14 @@ const sizeStyles = ({
 const minimumSplitterSize = theme => polished.stripUnit(polished.math(`${theme.shadowWidths.md} * 2 + ${getSize(theme)}`));
 const StyledPaneSplitterButtonContainer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.15.6'
+  'data-garden-version': '9.15.8'
 }).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, reactTheming.componentStyles);
 
 const GridContext = React.createContext({
+  columns: 12,
   gutters: 'md'
 });
 const useGridContext = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "9.15.6",
+  "version": "9.15.8",
   "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.22",
     "@zendeskgarden/container-utilities": "^2.0.4",
-    "@zendeskgarden/react-buttons": "^9.15.6",
-    "@zendeskgarden/react-tooltips": "^9.15.6",
+    "@zendeskgarden/react-buttons": "^9.15.8",
+    "@zendeskgarden/react-tooltips": "^9.15.8",
     "polished": "^4.3.1",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^2.0.0",
@@ -37,7 +37,7 @@
     "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.15.6"
+    "@zendeskgarden/react-theming": "^9.15.8"
   },
   "keywords": [
     "components",
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "3f69e9346e936577e5551ca06e5f5d67a62ba1b8"
+  "gitHead": "d82f80c4b56f8c2e3cd40a475dfffda5eac7ac37"
 }