@zendeskgarden/react-grid 9.11.1 → 9.11.3

package/dist/esm/elements/Grid.js

@@ -21,8 +21,8 @@ import { Col } from './Col.js';
 
 const GridComponent = React.forwardRef((_ref, ref) => {
   let {
-    columns,
-    gutters,
+    columns = 12,
+    gutters = 'md',
     debug,
     ...other
   } = _ref;
@@ -45,10 +45,6 @@ GridComponent.propTypes = {
   gutters: PropTypes.oneOf(SPACE),
   debug: PropTypes.bool
 };
-GridComponent.defaultProps = {
-  columns: 12,
-  gutters: 'md'
-};
 const Grid = GridComponent;
 Grid.Row = Row;
 Grid.Col = Col;

package/dist/esm/elements/pane/components/Splitter.js

@@ -42,7 +42,7 @@ const SplitterComponent = forwardRef((_ref, ref) => {
     layoutKey,
     min,
     max,
-    orientation,
+    orientation = 'end',
     isFixed,
     onMouseDown,
     onTouchStart,
@@ -120,9 +120,6 @@ SplitterComponent.propTypes = {
   orientation: PropTypes.oneOf(ORIENTATION),
   isFixed: PropTypes.bool
 };
-SplitterComponent.defaultProps = {
-  orientation: 'end'
-};
 const Splitter = SplitterComponent;
 
 export { Splitter };

package/dist/esm/styled/StyledCol.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'grid.col';
 const colorStyles = _ref => {
@@ -74,16 +74,13 @@ const sizeStyles = _ref2 => {
   const padding = $gutters ? math(`${theme.space[$gutters]} / 2`) : 0;
   return css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
-const StyledCol = styled.div.attrs({
+const StyledCol = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.11.1'
-}).withConfig({
+  'data-garden-version': '9.11.3',
+  $columns: props.$columns ?? 12
+})).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), 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), componentStyles);
-StyledCol.defaultProps = {
-  $columns: 12,
-  theme: DEFAULT_THEME
-};
 
 export { StyledCol };

package/dist/esm/styled/StyledGrid.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'grid.grid';
 const colorStyles = _ref => {
@@ -34,16 +34,13 @@ const sizeStyles = _ref2 => {
   const padding = $gutters ? math(`${theme.space[$gutters]} / 2`) : 0;
   return css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
-const StyledGrid = styled.div.attrs({
+const StyledGrid = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.11.1'
-}).withConfig({
+  'data-garden-version': '9.11.3',
+  $gutters: props.$gutters ?? 'md'
+})).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', sizeStyles, colorStyles, componentStyles);
-StyledGrid.defaultProps = {
-  $gutters: 'md',
-  theme: DEFAULT_THEME
-};
 
 export { StyledGrid };

package/dist/esm/styled/StyledRow.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'grid.row';
 const colorStyles = _ref => {
@@ -50,16 +50,13 @@ const sizeStyles = _ref2 => {
   const margin = $gutters ? math(`${theme.space[$gutters]} / 2`) : 0;
   return css(["margin-right:-", ";margin-left:-", ";"], margin, margin);
 };
-const StyledRow = styled.div.attrs({
+const StyledRow = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.11.1'
-}).withConfig({
+  'data-garden-version': '9.11.3',
+  $wrapAll: props.$wrapAll ?? 'wrap'
+})).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
 })(["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), componentStyles);
-StyledRow.defaultProps = {
-  $wrapAll: 'wrap',
-  theme: DEFAULT_THEME
-};
 
 export { StyledRow };

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

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'pane';
 const StyledPane = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.11.1'
+  'data-garden-version': '9.11.3'
 }).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 = 'pane.content';
 const StyledPaneContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.11.1'
+  'data-garden-version': '9.11.3'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"

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

@@ -107,7 +107,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledPaneSplitter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.11.1'
+  'data-garden-version': '9.11.3'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"

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

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

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

@@ -119,7 +119,7 @@ const sizeStyles = _ref3 => {
 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.11.1'
+  'data-garden-version': '9.11.3'
 }).withConfig({
   displayName: "StyledPaneSplitterButtonContainer",
   componentId: "sc-1w84y62-0"

package/dist/index.cjs.js

@@ -100,17 +100,14 @@ const sizeStyles$5 = _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({
+const StyledCol = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.11.1'
-}).withConfig({
+  'data-garden-version': '9.11.3',
+  $columns: props.$columns ?? 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), 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), reactTheming.componentStyles);
-StyledCol.defaultProps = {
-  $columns: 12,
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$5 = 'grid.grid';
 const colorStyles$3 = _ref => {
@@ -138,17 +135,14 @@ const sizeStyles$4 = _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({
+const StyledGrid = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.11.1'
-}).withConfig({
+  'data-garden-version': '9.11.3',
+  $gutters: props.$gutters ?? 'md'
+})).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', sizeStyles$4, colorStyles$3, reactTheming.componentStyles);
-StyledGrid.defaultProps = {
-  $gutters: 'md',
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$4 = 'grid.row';
 const colorStyles$2 = _ref => {
@@ -192,22 +186,19 @@ const sizeStyles$3 = _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({
+const StyledRow = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.11.1'
-}).withConfig({
+  'data-garden-version': '9.11.3',
+  $wrapAll: props.$wrapAll ?? 'wrap'
+})).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);
-StyledRow.defaultProps = {
-  $wrapAll: 'wrap',
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$3 = 'pane';
 const StyledPane = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.11.1'
+  'data-garden-version': '9.11.3'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
@@ -216,7 +207,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.11.1'
+  'data-garden-version': '9.11.3'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
@@ -321,7 +312,7 @@ const sizeStyles$2 = _ref2 => {
 };
 const StyledPaneSplitter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.11.1'
+  'data-garden-version': '9.11.3'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
@@ -355,7 +346,7 @@ const transformStyles = _ref2 => {
   return styled.css(["& > svg{transform:rotate(", "deg);}"], degrees);
 };
 const StyledPaneSplitterButton = styled__default.default(reactButtons.ChevronButton).attrs({
-  'data-garden-version': '9.11.1',
+  'data-garden-version': '9.11.3',
   isBasic: true,
   isPill: true,
   size: 'small'
@@ -473,7 +464,7 @@ const sizeStyles = _ref3 => {
 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.11.1'
+  'data-garden-version': '9.11.3'
 }).withConfig({
   displayName: "StyledPaneSplitterButtonContainer",
   componentId: "sc-1w84y62-0"
@@ -670,8 +661,8 @@ Row.propTypes = {
 
 const GridComponent = React__default.default.forwardRef((_ref, ref) => {
   let {
-    columns,
-    gutters,
+    columns = 12,
+    gutters = 'md',
     debug,
     ...other
   } = _ref;
@@ -694,10 +685,6 @@ GridComponent.propTypes = {
   gutters: PropTypes__default.default.oneOf(SPACE),
   debug: PropTypes__default.default.bool
 };
-GridComponent.defaultProps = {
-  columns: 12,
-  gutters: 'md'
-};
 const Grid = GridComponent;
 Grid.Row = Row;
 Grid.Col = Col;
@@ -934,7 +921,7 @@ const SplitterComponent = React.forwardRef((_ref, ref) => {
     layoutKey,
     min,
     max,
-    orientation,
+    orientation = 'end',
     isFixed,
     onMouseDown,
     onTouchStart,
@@ -1012,9 +999,6 @@ SplitterComponent.propTypes = {
   orientation: PropTypes__default.default.oneOf(ORIENTATION),
   isFixed: PropTypes__default.default.bool
 };
-SplitterComponent.defaultProps = {
-  orientation: 'end'
-};
 const Splitter = SplitterComponent;
 
 const ContentComponent = React.forwardRef((props, ref) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "9.11.1",
+  "version": "9.11.3",
   "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.17",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^9.11.1",
-    "@zendeskgarden/react-tooltips": "^9.11.1",
+    "@zendeskgarden/react-buttons": "^9.11.3",
+    "@zendeskgarden/react-tooltips": "^9.11.3",
     "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.11.1"
+    "@zendeskgarden/react-theming": "^9.11.3"
   },
   "keywords": [
     "components",
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "c45a8893e0ed1fd9f1cf257b2badf6bbeae90bc0"
+  "gitHead": "3f20a4270555169d6fc00ecd93e85346a5ee50f5"
 }