@zendeskgarden/react-grid 9.1.1 → 9.1.2

package/dist/esm/elements/Col.js

@@ -19,8 +19,37 @@ import useGridContext from '../utils/useGridContext.js';
 
 const Col = React.forwardRef((_ref, ref) => {
   let {
+    alignSelf,
+    alignSelfLg,
+    alignSelfMd,
+    alignSelfSm,
+    alignSelfXl,
+    alignSelfXs,
+    lg,
+    md,
+    offset,
+    offsetLg,
+    offsetMd,
+    offsetSm,
+    offsetXl,
+    offsetXs,
+    order,
+    orderLg,
+    orderMd,
+    orderSm,
+    orderXl,
+    orderXs,
     size,
-    ...props
+    sm,
+    textAlign,
+    textAlignLg,
+    textAlignMd,
+    textAlignSm,
+    textAlignXl,
+    textAlignXs,
+    xl,
+    xs,
+    ...other
   } = _ref;
   const {
     columns,
@@ -28,12 +57,41 @@ const Col = React.forwardRef((_ref, ref) => {
     debug
   } = useGridContext();
   return React.createElement(StyledCol, Object.assign({
-    sizeAll: size,
-    columns: columns,
-    gutters: gutters,
-    debug: debug,
+    $xs: xs,
+    $sm: sm,
+    $md: md,
+    $lg: lg,
+    $xl: xl,
+    $alignSelf: alignSelf,
+    $alignSelfXs: alignSelfXs,
+    $alignSelfSm: alignSelfSm,
+    $alignSelfMd: alignSelfMd,
+    $alignSelfLg: alignSelfLg,
+    $alignSelfXl: alignSelfXl,
+    $textAlign: textAlign,
+    $textAlignXs: textAlignXs,
+    $textAlignSm: textAlignSm,
+    $textAlignMd: textAlignMd,
+    $textAlignLg: textAlignLg,
+    $textAlignXl: textAlignXl,
+    $offset: offset,
+    $offsetXs: offsetXs,
+    $offsetSm: offsetSm,
+    $offsetMd: offsetMd,
+    $offsetLg: offsetLg,
+    $offsetXl: offsetXl,
+    $order: order,
+    $orderXs: orderXs,
+    $orderSm: orderSm,
+    $orderMd: orderMd,
+    $orderLg: orderLg,
+    $orderXl: orderXl,
+    $sizeAll: size,
+    $columns: columns,
+    $gutters: gutters,
+    $debug: debug,
     ref: ref
-  }, props));
+  }, other));
 });
 Col.displayName = 'Grid.Col';
 Col.propTypes = {

package/dist/esm/elements/Grid.js

@@ -22,20 +22,22 @@ import { Col } from './Col.js';
 const GridComponent = React.forwardRef((_ref, ref) => {
   let {
     columns,
+    gutters,
     debug,
-    ...props
+    ...other
   } = _ref;
   const value = useMemo(() => ({
     columns,
-    gutters: props.gutters,
+    gutters: gutters,
     debug
-  }), [columns, props.gutters, debug]);
+  }), [columns, gutters, debug]);
   return React.createElement(GridContext.Provider, {
     value: value
   }, React.createElement(StyledGrid, Object.assign({
-    debug: debug,
+    $debug: debug,
+    $gutters: gutters,
     ref: ref
-  }, props)));
+  }, other)));
 });
 GridComponent.displayName = 'Grid';
 GridComponent.propTypes = {

package/dist/esm/elements/Row.js

@@ -19,7 +19,24 @@ import '../styled/pane/StyledPaneSplitterButtonContainer.js';
 
 const Row = React.forwardRef((_ref, ref) => {
   let {
+    alignItems,
+    alignItemsXs,
+    alignItemsSm,
+    alignItemsMd,
+    alignItemsLg,
+    alignItemsXl,
+    justifyContent,
+    justifyContentXs,
+    justifyContentSm,
+    justifyContentMd,
+    justifyContentLg,
+    justifyContentXl,
     wrap,
+    wrapXs,
+    wrapSm,
+    wrapMd,
+    wrapLg,
+    wrapXl,
     ...props
   } = _ref;
   const {
@@ -27,9 +44,26 @@ const Row = React.forwardRef((_ref, ref) => {
     debug
   } = useGridContext();
   return React.createElement(StyledRow, Object.assign({
-    gutters: gutters,
-    debug: debug,
-    wrapAll: wrap,
+    $gutters: gutters,
+    $debug: debug,
+    $alignItems: alignItems,
+    $alignItemsXs: alignItemsXs,
+    $alignItemsSm: alignItemsSm,
+    $alignItemsMd: alignItemsMd,
+    $alignItemsLg: alignItemsLg,
+    $alignItemsXl: alignItemsXl,
+    $justifyContent: justifyContent,
+    $justifyContentXs: justifyContentXs,
+    $justifyContentSm: justifyContentSm,
+    $justifyContentMd: justifyContentMd,
+    $justifyContentLg: justifyContentLg,
+    $justifyContentXl: justifyContentXl,
+    $wrapAll: wrap,
+    $wrapXs: wrapXs,
+    $wrapSm: wrapSm,
+    $wrapMd: wrapMd,
+    $wrapLg: wrapLg,
+    $wrapXl: wrapXl,
     ref: ref
   }, props));
 });

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

@@ -106,8 +106,8 @@ const SplitterComponent = forwardRef((_ref, ref) => {
       isRow
     }), [orientation, layoutKey, min, max, valueInFr, size, isRow])
   }, React.createElement(StyledPaneSplitter, Object.assign({
-    isFixed: isFixed,
-    orientation: orientation
+    $isFixed: isFixed,
+    $orientation: orientation
   }, separatorProps, props, {
     ref: mergeRefs([separatorRef, ref])
   })), children );

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

@@ -64,11 +64,12 @@ const SplitterButtonComponent = forwardRef((props, ref) => {
   const onMouseDown = composeEventHandlers(props.onMouseDown, event => event.stopPropagation()
   );
   return React.createElement(StyledPaneSplitterButtonContainer, {
-    orientation: orientation,
-    placement: placement,
-    splitterSize: size || 0
+    $orientation: orientation,
+    $placement: placement,
+    $splitterSize: size || 0
   }, React.createElement(Tooltip, {
     content: label,
+    placement: "auto",
     zIndex: 2,
     style: {
       cursor: 'default'
@@ -77,8 +78,8 @@ const SplitterButtonComponent = forwardRef((props, ref) => {
   }, React.createElement(StyledPaneSplitterButton, Object.assign({
     "aria-label": label
   }, props, {
-    orientation: orientation,
-    isRotated: isMin,
+    $orientation: orientation,
+    $isRotated: isMin,
     ref: ref,
     onClick: onClick,
     onKeyDown: onKeyDown,

package/dist/esm/styled/StyledCol.js

@@ -26,7 +26,7 @@ const colorStyles = _ref => {
   return css(["background-clip:content-box;background-color:", ";"], backgroundColor);
 };
 const flexStyles = (size, alignSelf, textAlign, offset, order, props) => {
-  const margin = offset && `${math(`${offset} / ${props.columns} * 100`)}%`;
+  const margin = offset && `${math(`${offset} / ${props.$columns} * 100`)}%`;
   let flexBasis;
   let flexGrow;
   let maxWidth;
@@ -41,7 +41,7 @@ const flexStyles = (size, alignSelf, textAlign, offset, order, props) => {
     maxWidth = '100%';
     width = 'auto';
   } else if (size !== undefined) {
-    flexBasis = `${math(`${size} / ${props.columns} * 100`)}%`;
+    flexBasis = `${math(`${size} / ${props.$columns} * 100`)}%`;
     flexGrow = 0;
     maxWidth = flexBasis;
   }
@@ -57,7 +57,7 @@ const flexStyles = (size, alignSelf, textAlign, offset, order, props) => {
   if (order === 'first') {
     flexOrder = -1;
   } else if (order === 'last') {
-    flexOrder = math(`${props.columns} + 1`);
+    flexOrder = math(`${props.$columns} + 1`);
   } else {
     flexOrder = order;
   }
@@ -69,20 +69,20 @@ const mediaStyles = (minWidth, size, alignSelf, textAlign, offset, order, props)
 const sizeStyles = _ref2 => {
   let {
     theme,
-    gutters
+    $gutters
   } = _ref2;
-  const padding = gutters ? math(`${theme.space[gutters]} / 2`) : 0;
+  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.1.1'
+  'data-garden-version': '9.1.2'
 }).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), 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,
+  $columns: 12,
   theme: DEFAULT_THEME
 };
 

package/dist/esm/styled/StyledGrid.js

@@ -12,16 +12,16 @@ const COMPONENT_ID = 'grid.grid';
 const colorStyles = _ref => {
   let {
     theme,
-    debug
+    $debug
   } = _ref;
-  const borderColor = debug && getColor({
+  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 && `
+  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}
     `);
@@ -29,20 +29,20 @@ const colorStyles = _ref => {
 const sizeStyles = _ref2 => {
   let {
     theme,
-    gutters
+    $gutters
   } = _ref2;
-  const padding = gutters ? math(`${theme.space[gutters]} / 2`) : 0;
+  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.1.1'
+  'data-garden-version': '9.1.2'
 }).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, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledGrid.defaultProps = {
-  gutters: 'md',
+  $gutters: 'md',
   theme: DEFAULT_THEME
 };
 

package/dist/esm/styled/StyledRow.js

@@ -45,20 +45,20 @@ const mediaStyles = (minWidth, alignItems, justifyContent, wrap) => {
 const sizeStyles = _ref2 => {
   let {
     theme,
-    gutters
+    $gutters
   } = _ref2;
-  const margin = gutters ? math(`${theme.space[gutters]} / 2`) : 0;
+  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.1.1'
+  'data-garden-version': '9.1.2'
 }).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), 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',
+  $wrapAll: 'wrap',
   theme: DEFAULT_THEME
 };
 

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

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

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

@@ -10,7 +10,7 @@ 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.1.1'
+  'data-garden-version': '9.1.2'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"

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

@@ -42,8 +42,8 @@ const colorStyles = _ref => {
 const sizeStyles = _ref2 => {
   let {
     theme,
-    orientation,
-    isFixed
+    $orientation,
+    $isFixed
   } = _ref2;
   const size = math(`${theme.shadowWidths.md} * 2`);
   const separatorSize = math(`${theme.borderWidths.sm} * 2`);
@@ -57,7 +57,7 @@ const sizeStyles = _ref2 => {
   let height;
   let separatorWidth;
   let separatorHeight;
-  switch (orientation) {
+  switch ($orientation) {
     case 'top':
       cursor = 'row-resize';
       top = offset;
@@ -103,11 +103,11 @@ const sizeStyles = _ref2 => {
       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, isFixed ? 'pointer' : cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, separatorSize, dimensionProperty, separatorSize, 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.1.1'
+  'data-garden-version': '9.1.2'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"

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

@@ -15,22 +15,27 @@ const sizeStyles = _ref => {
   const size = `${getSize(theme)}px`;
   return css(["width:", ";min-width:", ";height:", ";"], size, size, size);
 };
-const transformStyles = props => {
+const transformStyles = _ref2 => {
+  let {
+    $isRotated,
+    $orientation,
+    theme
+  } = _ref2;
   let degrees = 0;
-  if (props.isRotated) {
-    degrees = props.theme.rtl ? -180 : 180;
+  if ($isRotated) {
+    degrees = theme.rtl ? -180 : 180;
   }
-  if (props.orientation === 'end') {
-    degrees += props.theme.rtl ? -90 : 90;
-  } else if (props.orientation === 'start') {
-    degrees += props.theme.rtl ? 90 : -90;
-  } else if (props.orientation === 'bottom') {
+  if ($orientation === 'end') {
+    degrees += theme.rtl ? -90 : 90;
+  } else if ($orientation === 'start') {
+    degrees += theme.rtl ? 90 : -90;
+  } else if ($orientation === 'bottom') {
     degrees += 180;
   }
   return css(["& > svg{transform:rotate(", "deg);}"], degrees);
 };
 const StyledPaneSplitterButton = styled(ChevronButton).attrs({
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.1.2',
   isBasic: true,
   isPill: true,
   size: 'small'

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

@@ -28,9 +28,9 @@ const colorStyles = _ref => {
 const positionStyles = _ref2 => {
   let {
     theme,
-    placement,
-    splitterSize,
-    orientation
+    $orientation,
+    $placement,
+    $splitterSize
   } = _ref2;
   let top;
   let left;
@@ -38,9 +38,9 @@ const positionStyles = _ref2 => {
   let bottom;
   const size = getSize(theme);
   const inset = `-${size / 2}px`;
-  if (placement === 'center' || splitterSize < size * 3) {
-    const center = `${splitterSize / 2 - size / 2}px`;
-    switch (`${orientation}-${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;
@@ -64,7 +64,7 @@ const positionStyles = _ref2 => {
     }
   } else {
     const offset = `${size}px`;
-    switch (`${orientation}-${placement}-${theme.rtl ? 'rtl' : 'ltr'}`) {
+    switch (`${$orientation}-${$placement}-${theme.rtl ? 'rtl' : 'ltr'}`) {
       case 'top-end-ltr':
       case 'top-end-rtl':
       case 'top-start-rtl':
@@ -120,6 +120,6 @@ const minimumSplitterSize = theme => stripUnit(math(`${theme.shadowWidths.md} *
 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));
+})(["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));
 
 export { StyledPaneSplitterButtonContainer };

package/dist/index.cjs.js

@@ -52,7 +52,7 @@ const colorStyles$4 = _ref => {
   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 margin = offset && `${polished.math(`${offset} / ${props.$columns} * 100`)}%`;
   let flexBasis;
   let flexGrow;
   let maxWidth;
@@ -67,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} / ${props.$columns} * 100`)}%`;
     flexGrow = 0;
     maxWidth = flexBasis;
   }
@@ -83,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(`${props.$columns} + 1`);
   } else {
     flexOrder = order;
   }
@@ -95,20 +95,20 @@ const mediaStyles$1 = (minWidth, size, alignSelf, textAlign, offset, order, prop
 const sizeStyles$5 = _ref2 => {
   let {
     theme,
-    gutters
+    $gutters
   } = _ref2;
-  const padding = gutters ? polished.math(`${theme.space[gutters]} / 2`) : 0;
+  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$6,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.1.2'
 }).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), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, 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,
+  $columns: 12,
   theme: reactTheming.DEFAULT_THEME
 };
 
@@ -116,16 +116,16 @@ const COMPONENT_ID$5 = 'grid.grid';
 const colorStyles$3 = _ref => {
   let {
     theme,
-    debug
+    $debug
   } = _ref;
-  const borderColor = debug && reactTheming.getColor({
+  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 && `
+  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}
     `);
@@ -133,20 +133,20 @@ const colorStyles$3 = _ref => {
 const sizeStyles$4 = _ref2 => {
   let {
     theme,
-    gutters
+    $gutters
   } = _ref2;
-  const padding = gutters ? polished.math(`${theme.space[gutters]} / 2`) : 0;
+  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$5,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.1.2'
 }).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, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledGrid.defaultProps = {
-  gutters: 'md',
+  $gutters: 'md',
   theme: reactTheming.DEFAULT_THEME
 };
 
@@ -187,27 +187,27 @@ const mediaStyles = (minWidth, alignItems, justifyContent, wrap) => {
 const sizeStyles$3 = _ref2 => {
   let {
     theme,
-    gutters
+    $gutters
   } = _ref2;
-  const margin = gutters ? polished.math(`${theme.space[gutters]} / 2`) : 0;
+  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$4,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.1.2'
 }).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), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, 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',
+  $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.1.1'
+  'data-garden-version': '9.1.2'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
@@ -216,7 +216,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.1.1'
+  'data-garden-version': '9.1.2'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
@@ -256,8 +256,8 @@ const colorStyles$1 = _ref => {
 const sizeStyles$2 = _ref2 => {
   let {
     theme,
-    orientation,
-    isFixed
+    $orientation,
+    $isFixed
   } = _ref2;
   const size = polished.math(`${theme.shadowWidths.md} * 2`);
   const separatorSize = polished.math(`${theme.borderWidths.sm} * 2`);
@@ -271,7 +271,7 @@ const sizeStyles$2 = _ref2 => {
   let height;
   let separatorWidth;
   let separatorHeight;
-  switch (orientation) {
+  switch ($orientation) {
     case 'top':
       cursor = 'row-resize';
       top = offset;
@@ -317,11 +317,11 @@ const sizeStyles$2 = _ref2 => {
       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, isFixed ? 'pointer' : cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, separatorSize, dimensionProperty, separatorSize, 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$1,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.1.2'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
@@ -335,22 +335,27 @@ const sizeStyles$1 = _ref => {
   const size = `${getSize(theme)}px`;
   return styled.css(["width:", ";min-width:", ";height:", ";"], size, size, size);
 };
-const transformStyles = props => {
+const transformStyles = _ref2 => {
+  let {
+    $isRotated,
+    $orientation,
+    theme
+  } = _ref2;
   let degrees = 0;
-  if (props.isRotated) {
-    degrees = props.theme.rtl ? -180 : 180;
+  if ($isRotated) {
+    degrees = theme.rtl ? -180 : 180;
   }
-  if (props.orientation === 'end') {
-    degrees += props.theme.rtl ? -90 : 90;
-  } else if (props.orientation === 'start') {
-    degrees += props.theme.rtl ? 90 : -90;
-  } else if (props.orientation === 'bottom') {
+  if ($orientation === 'end') {
+    degrees += theme.rtl ? -90 : 90;
+  } else if ($orientation === 'start') {
+    degrees += theme.rtl ? 90 : -90;
+  } else if ($orientation === 'bottom') {
     degrees += 180;
   }
   return styled.css(["& > svg{transform:rotate(", "deg);}"], degrees);
 };
 const StyledPaneSplitterButton = styled__default.default(reactButtons.ChevronButton).attrs({
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.1.2',
   isBasic: true,
   isPill: true,
   size: 'small'
@@ -377,9 +382,9 @@ const colorStyles = _ref => {
 const positionStyles = _ref2 => {
   let {
     theme,
-    placement,
-    splitterSize,
-    orientation
+    $orientation,
+    $placement,
+    $splitterSize
   } = _ref2;
   let top;
   let left;
@@ -387,9 +392,9 @@ const positionStyles = _ref2 => {
   let bottom;
   const size = getSize(theme);
   const inset = `-${size / 2}px`;
-  if (placement === 'center' || splitterSize < size * 3) {
-    const center = `${splitterSize / 2 - size / 2}px`;
-    switch (`${orientation}-${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;
@@ -413,7 +418,7 @@ const positionStyles = _ref2 => {
     }
   } else {
     const offset = `${size}px`;
-    switch (`${orientation}-${placement}-${theme.rtl ? 'rtl' : 'ltr'}`) {
+    switch (`${$orientation}-${$placement}-${theme.rtl ? 'rtl' : 'ltr'}`) {
       case 'top-end-ltr':
       case 'top-end-rtl':
       case 'top-start-rtl':
@@ -469,7 +474,7 @@ const minimumSplitterSize = theme => polished.stripUnit(polished.math(`${theme.s
 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));
+})(["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));
 
 const GridContext = React.createContext({
   gutters: 'md'
@@ -480,8 +485,37 @@ const useGridContext = () => {
 
 const Col = React__default.default.forwardRef((_ref, ref) => {
   let {
+    alignSelf,
+    alignSelfLg,
+    alignSelfMd,
+    alignSelfSm,
+    alignSelfXl,
+    alignSelfXs,
+    lg,
+    md,
+    offset,
+    offsetLg,
+    offsetMd,
+    offsetSm,
+    offsetXl,
+    offsetXs,
+    order,
+    orderLg,
+    orderMd,
+    orderSm,
+    orderXl,
+    orderXs,
     size,
-    ...props
+    sm,
+    textAlign,
+    textAlignLg,
+    textAlignMd,
+    textAlignSm,
+    textAlignXl,
+    textAlignXs,
+    xl,
+    xs,
+    ...other
   } = _ref;
   const {
     columns,
@@ -489,12 +523,41 @@ const Col = React__default.default.forwardRef((_ref, ref) => {
     debug
   } = useGridContext();
   return React__default.default.createElement(StyledCol, Object.assign({
-    sizeAll: size,
-    columns: columns,
-    gutters: gutters,
-    debug: debug,
+    $xs: xs,
+    $sm: sm,
+    $md: md,
+    $lg: lg,
+    $xl: xl,
+    $alignSelf: alignSelf,
+    $alignSelfXs: alignSelfXs,
+    $alignSelfSm: alignSelfSm,
+    $alignSelfMd: alignSelfMd,
+    $alignSelfLg: alignSelfLg,
+    $alignSelfXl: alignSelfXl,
+    $textAlign: textAlign,
+    $textAlignXs: textAlignXs,
+    $textAlignSm: textAlignSm,
+    $textAlignMd: textAlignMd,
+    $textAlignLg: textAlignLg,
+    $textAlignXl: textAlignXl,
+    $offset: offset,
+    $offsetXs: offsetXs,
+    $offsetSm: offsetSm,
+    $offsetMd: offsetMd,
+    $offsetLg: offsetLg,
+    $offsetXl: offsetXl,
+    $order: order,
+    $orderXs: orderXs,
+    $orderSm: orderSm,
+    $orderMd: orderMd,
+    $orderLg: orderLg,
+    $orderXl: orderXl,
+    $sizeAll: size,
+    $columns: columns,
+    $gutters: gutters,
+    $debug: debug,
     ref: ref
-  }, props));
+  }, other));
 });
 Col.displayName = 'Grid.Col';
 Col.propTypes = {
@@ -532,7 +595,24 @@ Col.propTypes = {
 
 const Row = React__default.default.forwardRef((_ref, ref) => {
   let {
+    alignItems,
+    alignItemsXs,
+    alignItemsSm,
+    alignItemsMd,
+    alignItemsLg,
+    alignItemsXl,
+    justifyContent,
+    justifyContentXs,
+    justifyContentSm,
+    justifyContentMd,
+    justifyContentLg,
+    justifyContentXl,
     wrap,
+    wrapXs,
+    wrapSm,
+    wrapMd,
+    wrapLg,
+    wrapXl,
     ...props
   } = _ref;
   const {
@@ -540,9 +620,26 @@ const Row = React__default.default.forwardRef((_ref, ref) => {
     debug
   } = useGridContext();
   return React__default.default.createElement(StyledRow, Object.assign({
-    gutters: gutters,
-    debug: debug,
-    wrapAll: wrap,
+    $gutters: gutters,
+    $debug: debug,
+    $alignItems: alignItems,
+    $alignItemsXs: alignItemsXs,
+    $alignItemsSm: alignItemsSm,
+    $alignItemsMd: alignItemsMd,
+    $alignItemsLg: alignItemsLg,
+    $alignItemsXl: alignItemsXl,
+    $justifyContent: justifyContent,
+    $justifyContentXs: justifyContentXs,
+    $justifyContentSm: justifyContentSm,
+    $justifyContentMd: justifyContentMd,
+    $justifyContentLg: justifyContentLg,
+    $justifyContentXl: justifyContentXl,
+    $wrapAll: wrap,
+    $wrapXs: wrapXs,
+    $wrapSm: wrapSm,
+    $wrapMd: wrapMd,
+    $wrapLg: wrapLg,
+    $wrapXl: wrapXl,
     ref: ref
   }, props));
 });
@@ -571,20 +668,22 @@ Row.propTypes = {
 const GridComponent = React__default.default.forwardRef((_ref, ref) => {
   let {
     columns,
+    gutters,
     debug,
-    ...props
+    ...other
   } = _ref;
   const value = React.useMemo(() => ({
     columns,
-    gutters: props.gutters,
+    gutters: gutters,
     debug
-  }), [columns, props.gutters, debug]);
+  }), [columns, gutters, debug]);
   return React__default.default.createElement(GridContext.Provider, {
     value: value
   }, React__default.default.createElement(StyledGrid, Object.assign({
-    debug: debug,
+    $debug: debug,
+    $gutters: gutters,
     ref: ref
-  }, props)));
+  }, other)));
 });
 GridComponent.displayName = 'Grid';
 GridComponent.propTypes = {
@@ -896,8 +995,8 @@ const SplitterComponent = React.forwardRef((_ref, ref) => {
       isRow
     }), [orientation, layoutKey, min, max, valueInFr, size, isRow])
   }, React__default.default.createElement(StyledPaneSplitter, Object.assign({
-    isFixed: isFixed,
-    orientation: orientation
+    $isFixed: isFixed,
+    $orientation: orientation
   }, separatorProps, props, {
     ref: reactMergeRefs.mergeRefs([separatorRef, ref])
   })), children );
@@ -973,11 +1072,12 @@ const SplitterButtonComponent = React.forwardRef((props, ref) => {
   const onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, event => event.stopPropagation()
   );
   return React__default.default.createElement(StyledPaneSplitterButtonContainer, {
-    orientation: orientation,
-    placement: placement,
-    splitterSize: size || 0
+    $orientation: orientation,
+    $placement: placement,
+    $splitterSize: size || 0
   }, React__default.default.createElement(reactTooltips.Tooltip, {
     content: label,
+    placement: "auto",
     zIndex: 2,
     style: {
       cursor: 'default'
@@ -986,8 +1086,8 @@ const SplitterButtonComponent = React.forwardRef((props, ref) => {
   }, React__default.default.createElement(StyledPaneSplitterButton, Object.assign({
     "aria-label": label
   }, props, {
-    orientation: orientation,
-    isRotated: isMin,
+    $orientation: orientation,
+    $isRotated: isMin,
     ref: ref,
     onClick: onClick,
     onKeyDown: onKeyDown,

package/dist/typings/styled/StyledCol.d.ts

@@ -6,11 +6,40 @@
  */
 import { ThemeProps, DefaultTheme } from 'styled-components';
 import { IColProps, IGridProps } from '../types';
-interface IStyledColProps extends Omit<IColProps, 'size'>, ThemeProps<DefaultTheme> {
-    columns?: IGridProps['columns'];
-    gutters?: IGridProps['gutters'];
-    sizeAll?: IColProps['size'];
-    debug?: IGridProps['debug'];
+interface IStyledColProps extends ThemeProps<DefaultTheme> {
+    $columns?: IGridProps['columns'];
+    $gutters?: IGridProps['gutters'];
+    $sizeAll?: IColProps['size'];
+    $debug?: IGridProps['debug'];
+    $xs?: IColProps['xs'];
+    $sm?: IColProps['sm'];
+    $md?: IColProps['md'];
+    $lg?: IColProps['lg'];
+    $xl?: IColProps['xl'];
+    $alignSelf?: IColProps['alignSelf'];
+    $alignSelfXs?: IColProps['alignSelfXs'];
+    $alignSelfSm?: IColProps['alignSelfSm'];
+    $alignSelfMd?: IColProps['alignSelfMd'];
+    $alignSelfLg?: IColProps['alignSelfLg'];
+    $alignSelfXl?: IColProps['alignSelfXl'];
+    $textAlign?: IColProps['textAlign'];
+    $textAlignXs?: IColProps['textAlignXs'];
+    $textAlignSm?: IColProps['textAlignSm'];
+    $textAlignMd?: IColProps['textAlignMd'];
+    $textAlignLg?: IColProps['textAlignLg'];
+    $textAlignXl?: IColProps['textAlignXl'];
+    $offset?: IColProps['offset'];
+    $offsetXs?: IColProps['offsetXs'];
+    $offsetSm?: IColProps['offsetSm'];
+    $offsetMd?: IColProps['offsetMd'];
+    $offsetLg?: IColProps['offsetLg'];
+    $offsetXl?: IColProps['offsetXl'];
+    $order?: IColProps['order'];
+    $orderXs?: IColProps['orderXs'];
+    $orderSm?: IColProps['orderSm'];
+    $orderMd?: IColProps['orderMd'];
+    $orderLg?: IColProps['orderLg'];
+    $orderXl?: IColProps['orderXl'];
 }
 export declare const StyledCol: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledColProps, never>;
 export {};

package/dist/typings/styled/StyledGrid.d.ts

@@ -6,7 +6,9 @@
  */
 import { ThemeProps, DefaultTheme } from 'styled-components';
 import { IGridProps } from '../types';
-interface IStyledGridProps extends Omit<IGridProps, 'columns'>, ThemeProps<DefaultTheme> {
+interface IStyledGridProps extends ThemeProps<DefaultTheme> {
+    $debug?: IGridProps['debug'];
+    $gutters?: IGridProps['gutters'];
 }
 export declare const StyledGrid: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledGridProps, never>;
 export {};

package/dist/typings/styled/StyledRow.d.ts

@@ -5,11 +5,28 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { ThemeProps, DefaultTheme } from 'styled-components';
-import { IGridProps, IRowProps } from '../types';
-interface IStyledRowProps extends Omit<IRowProps, 'wrap'>, ThemeProps<DefaultTheme> {
-    gutters?: IGridProps['gutters'];
-    wrapAll?: IRowProps['wrap'];
-    debug?: IGridProps['debug'];
+import { AlignItems, IGridProps, IRowProps, JustifyContent, Wrap } from '../types';
+interface IStyledRowProps extends ThemeProps<DefaultTheme> {
+    $gutters?: IGridProps['gutters'];
+    $debug?: IGridProps['debug'];
+    $alignItems?: AlignItems;
+    $alignItemsXs?: AlignItems;
+    $alignItemsSm?: AlignItems;
+    $alignItemsMd?: AlignItems;
+    $alignItemsLg?: AlignItems;
+    $alignItemsXl?: AlignItems;
+    $justifyContent?: JustifyContent;
+    $justifyContentXs?: JustifyContent;
+    $justifyContentSm?: JustifyContent;
+    $justifyContentMd?: JustifyContent;
+    $justifyContentLg?: JustifyContent;
+    $justifyContentXl?: JustifyContent;
+    $wrapAll?: IRowProps['wrap'];
+    $wrapXs?: Wrap;
+    $wrapSm?: Wrap;
+    $wrapMd?: Wrap;
+    $wrapLg?: Wrap;
+    $wrapXl?: Wrap;
 }
 export declare const StyledRow: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledRowProps, never>;
 export {};

package/dist/typings/styled/pane/StyledPaneSplitter.d.ts

@@ -7,8 +7,8 @@
 import { DefaultTheme } from 'styled-components';
 import { Orientation } from '../../types';
 interface IStyledPaneSplitterProps {
-    orientation?: Orientation;
-    isFixed?: boolean;
+    $orientation?: Orientation;
+    $isFixed?: boolean;
 }
 /**
  * 1. Elevated initial context to pickup full-width hover

package/dist/typings/styled/pane/StyledPaneSplitterButton.d.ts

@@ -7,8 +7,8 @@
 import { DefaultTheme } from 'styled-components';
 import { Orientation } from '../../types';
 interface IStyledSplitterButtonProps {
-    orientation: Orientation;
-    isRotated: boolean;
+    $orientation: Orientation;
+    $isRotated: boolean;
 }
 export declare const getSize: (theme: DefaultTheme) => number;
 export declare const StyledPaneSplitterButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-buttons").IIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, DefaultTheme, IStyledSplitterButtonProps, never>;

package/dist/typings/styled/pane/StyledPaneSplitterButtonContainer.d.ts

@@ -7,9 +7,9 @@
 import { DefaultTheme } from 'styled-components';
 import { Orientation, PLACEMENT } from '../../types';
 interface IStyledSplitterButtonContainerProps {
-    orientation: Orientation;
-    placement: (typeof PLACEMENT)[number];
-    splitterSize: number;
+    $orientation: Orientation;
+    $placement: (typeof PLACEMENT)[number];
+    $splitterSize: number;
 }
 /**
  * 1. Match focused `Splitter` z-index

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "9.1.1",
+  "version": "9.1.2",
   "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.1.1",
-    "@zendeskgarden/react-tooltips": "^9.1.1",
+    "@zendeskgarden/react-buttons": "^9.1.2",
+    "@zendeskgarden/react-tooltips": "^9.1.2",
     "polished": "^4.3.1",
     "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.1.1"
+    "@zendeskgarden/react-theming": "^9.1.2"
   },
   "keywords": [
     "components",
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "21eaf7b57f27f1a846ed332f1b8e655d6bc0a13b"
+  "gitHead": "dd7b2e7fb6747ef39a028b4e7b9924c2098deea0"
 }