@zendeskgarden/react-grid 8.49.2 → 8.50.0

package/dist/index.cjs.js

@@ -75,13 +75,13 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
-var ARRAY_ALIGN_ITEMS = ['start', 'end', 'center', 'baseline', 'stretch'];
-var ARRAY_ALIGN_SELF = ['auto', 'start', 'end', 'center', 'baseline', 'stretch'];
-var ARRAY_DIRECTION = ['row', 'row-reverse', 'column', 'column-reverse'];
-var ARRAY_JUSTIFY_CONTENT = ['start', 'end', 'center', 'between', 'around'];
-var ARRAY_TEXT_ALIGN = ['start', 'end', 'center', 'justify'];
-var ARRAY_SPACE = [false, 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
-var ARRAY_WRAP = ['nowrap', 'wrap', 'wrap-reverse'];
+var ALIGN_ITEMS = ['start', 'end', 'center', 'baseline', 'stretch'];
+var ALIGN_SELF = ['auto'].concat(ALIGN_ITEMS);
+var DIRECTION = ['row', 'row-reverse', 'column', 'column-reverse'];
+var JUSTIFY_CONTENT = ['start', 'end', 'center', 'between', 'around'];
+var TEXT_ALIGN = ['start', 'end', 'center', 'justify'];
+var SPACE = [false, 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+var WRAP = ['nowrap', 'wrap', 'wrap-reverse'];
 
 var COMPONENT_ID$2 = 'grid.col';
 var colorStyles$2 = function colorStyles(props) {
@@ -135,7 +135,7 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledCol = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.49.2'
+  'data-garden-version': '8.50.0'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
@@ -175,7 +175,7 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledGrid = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.49.2'
+  'data-garden-version': '8.50.0'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
@@ -225,7 +225,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledRow = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.49.2'
+  'data-garden-version': '8.50.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
@@ -284,18 +284,18 @@ Col.propTypes = {
   md: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].bool]),
   lg: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].bool]),
   xl: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].bool]),
-  alignSelf: PropTypes__default["default"].oneOf(ARRAY_ALIGN_SELF),
-  alignSelfXs: PropTypes__default["default"].oneOf(ARRAY_ALIGN_SELF),
-  alignSelfSm: PropTypes__default["default"].oneOf(ARRAY_ALIGN_SELF),
-  alignSelfMd: PropTypes__default["default"].oneOf(ARRAY_ALIGN_SELF),
-  alignSelfLg: PropTypes__default["default"].oneOf(ARRAY_ALIGN_SELF),
-  alignSelfXl: PropTypes__default["default"].oneOf(ARRAY_ALIGN_SELF),
-  textAlign: PropTypes__default["default"].oneOf(ARRAY_TEXT_ALIGN),
-  textAlignXs: PropTypes__default["default"].oneOf(ARRAY_TEXT_ALIGN),
-  textAlignSm: PropTypes__default["default"].oneOf(ARRAY_TEXT_ALIGN),
-  textAlignMd: PropTypes__default["default"].oneOf(ARRAY_TEXT_ALIGN),
-  textAlignLg: PropTypes__default["default"].oneOf(ARRAY_TEXT_ALIGN),
-  textAlignXl: PropTypes__default["default"].oneOf(ARRAY_TEXT_ALIGN),
+  alignSelf: PropTypes__default["default"].oneOf(ALIGN_SELF),
+  alignSelfXs: PropTypes__default["default"].oneOf(ALIGN_SELF),
+  alignSelfSm: PropTypes__default["default"].oneOf(ALIGN_SELF),
+  alignSelfMd: PropTypes__default["default"].oneOf(ALIGN_SELF),
+  alignSelfLg: PropTypes__default["default"].oneOf(ALIGN_SELF),
+  alignSelfXl: PropTypes__default["default"].oneOf(ALIGN_SELF),
+  textAlign: PropTypes__default["default"].oneOf(TEXT_ALIGN),
+  textAlignXs: PropTypes__default["default"].oneOf(TEXT_ALIGN),
+  textAlignSm: PropTypes__default["default"].oneOf(TEXT_ALIGN),
+  textAlignMd: PropTypes__default["default"].oneOf(TEXT_ALIGN),
+  textAlignLg: PropTypes__default["default"].oneOf(TEXT_ALIGN),
+  textAlignXl: PropTypes__default["default"].oneOf(TEXT_ALIGN),
   offset: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
   offsetXs: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
   offsetSm: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
@@ -332,7 +332,7 @@ var Grid = React__default["default"].forwardRef(function (_ref, ref) {
 Grid.displayName = 'Grid';
 Grid.propTypes = {
   columns: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  gutters: PropTypes__default["default"].oneOf(ARRAY_SPACE),
+  gutters: PropTypes__default["default"].oneOf(SPACE),
   debug: PropTypes__default["default"].bool
 };
 Grid.defaultProps = {
@@ -356,33 +356,33 @@ var Row = React__default["default"].forwardRef(function (_ref, ref) {
 });
 Row.displayName = 'Row';
 Row.propTypes = {
-  alignItems: PropTypes__default["default"].oneOf(ARRAY_ALIGN_ITEMS),
-  alignItemsXs: PropTypes__default["default"].oneOf(ARRAY_ALIGN_ITEMS),
-  alignItemsSm: PropTypes__default["default"].oneOf(ARRAY_ALIGN_ITEMS),
-  alignItemsMd: PropTypes__default["default"].oneOf(ARRAY_ALIGN_ITEMS),
-  alignItemsLg: PropTypes__default["default"].oneOf(ARRAY_ALIGN_ITEMS),
-  alignItemsXl: PropTypes__default["default"].oneOf(ARRAY_ALIGN_ITEMS),
-  justifyContent: PropTypes__default["default"].oneOf(ARRAY_JUSTIFY_CONTENT),
-  justifyContentXs: PropTypes__default["default"].oneOf(ARRAY_JUSTIFY_CONTENT),
-  justifyContentSm: PropTypes__default["default"].oneOf(ARRAY_JUSTIFY_CONTENT),
-  justifyContentMd: PropTypes__default["default"].oneOf(ARRAY_JUSTIFY_CONTENT),
-  justifyContentLg: PropTypes__default["default"].oneOf(ARRAY_JUSTIFY_CONTENT),
-  justifyContentXl: PropTypes__default["default"].oneOf(ARRAY_JUSTIFY_CONTENT),
-  wrap: PropTypes__default["default"].oneOf(ARRAY_WRAP),
-  wrapXs: PropTypes__default["default"].oneOf(ARRAY_WRAP),
-  wrapSm: PropTypes__default["default"].oneOf(ARRAY_WRAP),
-  wrapMd: PropTypes__default["default"].oneOf(ARRAY_WRAP),
-  wrapLg: PropTypes__default["default"].oneOf(ARRAY_WRAP),
-  wrapXl: PropTypes__default["default"].oneOf(ARRAY_WRAP)
+  alignItems: PropTypes__default["default"].oneOf(ALIGN_ITEMS),
+  alignItemsXs: PropTypes__default["default"].oneOf(ALIGN_ITEMS),
+  alignItemsSm: PropTypes__default["default"].oneOf(ALIGN_ITEMS),
+  alignItemsMd: PropTypes__default["default"].oneOf(ALIGN_ITEMS),
+  alignItemsLg: PropTypes__default["default"].oneOf(ALIGN_ITEMS),
+  alignItemsXl: PropTypes__default["default"].oneOf(ALIGN_ITEMS),
+  justifyContent: PropTypes__default["default"].oneOf(JUSTIFY_CONTENT),
+  justifyContentXs: PropTypes__default["default"].oneOf(JUSTIFY_CONTENT),
+  justifyContentSm: PropTypes__default["default"].oneOf(JUSTIFY_CONTENT),
+  justifyContentMd: PropTypes__default["default"].oneOf(JUSTIFY_CONTENT),
+  justifyContentLg: PropTypes__default["default"].oneOf(JUSTIFY_CONTENT),
+  justifyContentXl: PropTypes__default["default"].oneOf(JUSTIFY_CONTENT),
+  wrap: PropTypes__default["default"].oneOf(WRAP),
+  wrapXs: PropTypes__default["default"].oneOf(WRAP),
+  wrapSm: PropTypes__default["default"].oneOf(WRAP),
+  wrapMd: PropTypes__default["default"].oneOf(WRAP),
+  wrapLg: PropTypes__default["default"].oneOf(WRAP),
+  wrapXl: PropTypes__default["default"].oneOf(WRAP)
 };
 
-exports.ARRAY_ALIGN_ITEMS = ARRAY_ALIGN_ITEMS;
-exports.ARRAY_ALIGN_SELF = ARRAY_ALIGN_SELF;
-exports.ARRAY_DIRECTION = ARRAY_DIRECTION;
-exports.ARRAY_JUSTIFY_CONTENT = ARRAY_JUSTIFY_CONTENT;
-exports.ARRAY_SPACE = ARRAY_SPACE;
-exports.ARRAY_TEXT_ALIGN = ARRAY_TEXT_ALIGN;
-exports.ARRAY_WRAP = ARRAY_WRAP;
+exports.ARRAY_ALIGN_ITEMS = ALIGN_ITEMS;
+exports.ARRAY_ALIGN_SELF = ALIGN_SELF;
+exports.ARRAY_DIRECTION = DIRECTION;
+exports.ARRAY_JUSTIFY_CONTENT = JUSTIFY_CONTENT;
+exports.ARRAY_SPACE = SPACE;
+exports.ARRAY_TEXT_ALIGN = TEXT_ALIGN;
+exports.ARRAY_WRAP = WRAP;
 exports.Col = Col;
 exports.Grid = Grid;
 exports.Row = Row;

package/dist/index.esm.js

@@ -65,13 +65,13 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
-var ARRAY_ALIGN_ITEMS = ['start', 'end', 'center', 'baseline', 'stretch'];
-var ARRAY_ALIGN_SELF = ['auto', 'start', 'end', 'center', 'baseline', 'stretch'];
-var ARRAY_DIRECTION = ['row', 'row-reverse', 'column', 'column-reverse'];
-var ARRAY_JUSTIFY_CONTENT = ['start', 'end', 'center', 'between', 'around'];
-var ARRAY_TEXT_ALIGN = ['start', 'end', 'center', 'justify'];
-var ARRAY_SPACE = [false, 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
-var ARRAY_WRAP = ['nowrap', 'wrap', 'wrap-reverse'];
+var ALIGN_ITEMS = ['start', 'end', 'center', 'baseline', 'stretch'];
+var ALIGN_SELF = ['auto'].concat(ALIGN_ITEMS);
+var DIRECTION = ['row', 'row-reverse', 'column', 'column-reverse'];
+var JUSTIFY_CONTENT = ['start', 'end', 'center', 'between', 'around'];
+var TEXT_ALIGN = ['start', 'end', 'center', 'justify'];
+var SPACE = [false, 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+var WRAP = ['nowrap', 'wrap', 'wrap-reverse'];
 
 var COMPONENT_ID$2 = 'grid.col';
 var colorStyles$2 = function colorStyles(props) {
@@ -125,7 +125,7 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledCol = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.49.2'
+  'data-garden-version': '8.50.0'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
@@ -165,7 +165,7 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledGrid = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.49.2'
+  'data-garden-version': '8.50.0'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
@@ -215,7 +215,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledRow = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.49.2'
+  'data-garden-version': '8.50.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
@@ -274,18 +274,18 @@ Col.propTypes = {
   md: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),
   lg: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),
   xl: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),
-  alignSelf: PropTypes.oneOf(ARRAY_ALIGN_SELF),
-  alignSelfXs: PropTypes.oneOf(ARRAY_ALIGN_SELF),
-  alignSelfSm: PropTypes.oneOf(ARRAY_ALIGN_SELF),
-  alignSelfMd: PropTypes.oneOf(ARRAY_ALIGN_SELF),
-  alignSelfLg: PropTypes.oneOf(ARRAY_ALIGN_SELF),
-  alignSelfXl: PropTypes.oneOf(ARRAY_ALIGN_SELF),
-  textAlign: PropTypes.oneOf(ARRAY_TEXT_ALIGN),
-  textAlignXs: PropTypes.oneOf(ARRAY_TEXT_ALIGN),
-  textAlignSm: PropTypes.oneOf(ARRAY_TEXT_ALIGN),
-  textAlignMd: PropTypes.oneOf(ARRAY_TEXT_ALIGN),
-  textAlignLg: PropTypes.oneOf(ARRAY_TEXT_ALIGN),
-  textAlignXl: PropTypes.oneOf(ARRAY_TEXT_ALIGN),
+  alignSelf: PropTypes.oneOf(ALIGN_SELF),
+  alignSelfXs: PropTypes.oneOf(ALIGN_SELF),
+  alignSelfSm: PropTypes.oneOf(ALIGN_SELF),
+  alignSelfMd: PropTypes.oneOf(ALIGN_SELF),
+  alignSelfLg: PropTypes.oneOf(ALIGN_SELF),
+  alignSelfXl: PropTypes.oneOf(ALIGN_SELF),
+  textAlign: PropTypes.oneOf(TEXT_ALIGN),
+  textAlignXs: PropTypes.oneOf(TEXT_ALIGN),
+  textAlignSm: PropTypes.oneOf(TEXT_ALIGN),
+  textAlignMd: PropTypes.oneOf(TEXT_ALIGN),
+  textAlignLg: PropTypes.oneOf(TEXT_ALIGN),
+  textAlignXl: PropTypes.oneOf(TEXT_ALIGN),
   offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   offsetXs: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   offsetSm: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -322,7 +322,7 @@ var Grid = React.forwardRef(function (_ref, ref) {
 Grid.displayName = 'Grid';
 Grid.propTypes = {
   columns: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  gutters: PropTypes.oneOf(ARRAY_SPACE),
+  gutters: PropTypes.oneOf(SPACE),
   debug: PropTypes.bool
 };
 Grid.defaultProps = {
@@ -346,24 +346,24 @@ var Row = React.forwardRef(function (_ref, ref) {
 });
 Row.displayName = 'Row';
 Row.propTypes = {
-  alignItems: PropTypes.oneOf(ARRAY_ALIGN_ITEMS),
-  alignItemsXs: PropTypes.oneOf(ARRAY_ALIGN_ITEMS),
-  alignItemsSm: PropTypes.oneOf(ARRAY_ALIGN_ITEMS),
-  alignItemsMd: PropTypes.oneOf(ARRAY_ALIGN_ITEMS),
-  alignItemsLg: PropTypes.oneOf(ARRAY_ALIGN_ITEMS),
-  alignItemsXl: PropTypes.oneOf(ARRAY_ALIGN_ITEMS),
-  justifyContent: PropTypes.oneOf(ARRAY_JUSTIFY_CONTENT),
-  justifyContentXs: PropTypes.oneOf(ARRAY_JUSTIFY_CONTENT),
-  justifyContentSm: PropTypes.oneOf(ARRAY_JUSTIFY_CONTENT),
-  justifyContentMd: PropTypes.oneOf(ARRAY_JUSTIFY_CONTENT),
-  justifyContentLg: PropTypes.oneOf(ARRAY_JUSTIFY_CONTENT),
-  justifyContentXl: PropTypes.oneOf(ARRAY_JUSTIFY_CONTENT),
-  wrap: PropTypes.oneOf(ARRAY_WRAP),
-  wrapXs: PropTypes.oneOf(ARRAY_WRAP),
-  wrapSm: PropTypes.oneOf(ARRAY_WRAP),
-  wrapMd: PropTypes.oneOf(ARRAY_WRAP),
-  wrapLg: PropTypes.oneOf(ARRAY_WRAP),
-  wrapXl: PropTypes.oneOf(ARRAY_WRAP)
+  alignItems: PropTypes.oneOf(ALIGN_ITEMS),
+  alignItemsXs: PropTypes.oneOf(ALIGN_ITEMS),
+  alignItemsSm: PropTypes.oneOf(ALIGN_ITEMS),
+  alignItemsMd: PropTypes.oneOf(ALIGN_ITEMS),
+  alignItemsLg: PropTypes.oneOf(ALIGN_ITEMS),
+  alignItemsXl: PropTypes.oneOf(ALIGN_ITEMS),
+  justifyContent: PropTypes.oneOf(JUSTIFY_CONTENT),
+  justifyContentXs: PropTypes.oneOf(JUSTIFY_CONTENT),
+  justifyContentSm: PropTypes.oneOf(JUSTIFY_CONTENT),
+  justifyContentMd: PropTypes.oneOf(JUSTIFY_CONTENT),
+  justifyContentLg: PropTypes.oneOf(JUSTIFY_CONTENT),
+  justifyContentXl: PropTypes.oneOf(JUSTIFY_CONTENT),
+  wrap: PropTypes.oneOf(WRAP),
+  wrapXs: PropTypes.oneOf(WRAP),
+  wrapSm: PropTypes.oneOf(WRAP),
+  wrapMd: PropTypes.oneOf(WRAP),
+  wrapLg: PropTypes.oneOf(WRAP),
+  wrapXl: PropTypes.oneOf(WRAP)
 };
 
-export { ARRAY_ALIGN_ITEMS, ARRAY_ALIGN_SELF, ARRAY_DIRECTION, ARRAY_JUSTIFY_CONTENT, ARRAY_SPACE, ARRAY_TEXT_ALIGN, ARRAY_WRAP, Col, Grid, Row };
+export { ALIGN_ITEMS as ARRAY_ALIGN_ITEMS, ALIGN_SELF as ARRAY_ALIGN_SELF, DIRECTION as ARRAY_DIRECTION, JUSTIFY_CONTENT as ARRAY_JUSTIFY_CONTENT, SPACE as ARRAY_SPACE, TEXT_ALIGN as ARRAY_TEXT_ALIGN, WRAP as ARRAY_WRAP, Col, Grid, Row };

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

@@ -4,84 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React, { HTMLAttributes } from 'react';
-import { ALIGN_SELF, GRID_NUMBER, BREAKPOINT, TEXT_ALIGN } from '../utils/types';
-export interface IColProps extends HTMLAttributes<HTMLDivElement> {
-    /** Sets the total number of grid `columns` that the column spans on all screen sizes */
-    size?: GRID_NUMBER;
-    /** Defines the column size on extra-small screens.
-     *  See [breakpoints](/components/theme-object#default_theme).
-     */
-    xs?: BREAKPOINT;
-    /** Defines the column size on small screens*/
-    sm?: BREAKPOINT;
-    /** Defines the column size on medium screens */
-    md?: BREAKPOINT;
-    /** Defines the column size on large screens */
-    lg?: BREAKPOINT;
-    /** Defines the column size on extra-large screens */
-    xl?: BREAKPOINT;
-    /**
-     * Applies the `align-self` flex item property, overriding `Row alignItems`
-     * vertical alignment on all screen sizes
-     */
-    alignSelf?: ALIGN_SELF;
-    /** Applies the `align-self` flex item property to the column on extra-small screens */
-    alignSelfXs?: ALIGN_SELF;
-    /** Applies the `align-self` flex item property to the column on small screens */
-    alignSelfSm?: ALIGN_SELF;
-    /** Applies the `align-self` flex item property to the column on medium screens */
-    alignSelfMd?: ALIGN_SELF;
-    /** Applies the `align-self` flex item property to the column on large screens */
-    alignSelfLg?: ALIGN_SELF;
-    /** Applies the `align-self` flex item property to the column on extra-large screens */
-    alignSelfXl?: ALIGN_SELF;
-    /**
-     * Applies the RTL-aware `text-align` property to the column on all screen sizes
-     */
-    textAlign?: TEXT_ALIGN;
-    /** Applies the `text-align` property to the column on extra-small screens */
-    textAlignXs?: TEXT_ALIGN;
-    /** Applies the `text-align` property to the column on small screens */
-    textAlignSm?: TEXT_ALIGN;
-    /** Applies the `text-align` property to the column on medium screens */
-    textAlignMd?: TEXT_ALIGN;
-    /** Applies the `text-align` property to the column on large screens */
-    textAlignLg?: TEXT_ALIGN;
-    /** Applies the `text-align` property to the column on extra-large screens */
-    textAlignXl?: TEXT_ALIGN;
-    /**
-     * Offsets the column relative to the total number of `columns` in the
-     * grid on all screen sizes
-     */
-    offset?: GRID_NUMBER;
-    /** Applies offset to the column on extra-small screens */
-    offsetXs?: GRID_NUMBER;
-    /** Applies offset to the column on small screens */
-    offsetSm?: GRID_NUMBER;
-    /** Applies offset to the column on medium screens */
-    offsetMd?: GRID_NUMBER;
-    /** Applies offset to the column on large screens */
-    offsetLg?: GRID_NUMBER;
-    /** Applies offset to the column on extra-large screens */
-    offsetXl?: GRID_NUMBER;
-    /**
-     * Applies the `order` flex item property to the column on all screen sizes. Note that
-     * order modification can introduce accessibility problems by
-     * confusing tab ordering. Rely on semantic DOM ordering whenever possible.
-     */
-    order?: GRID_NUMBER;
-    /** Sets the `order` flex item property of the column on extra-small screens */
-    orderXs?: GRID_NUMBER;
-    /** Sets the `order` flex item property of the column on small screens */
-    orderSm?: GRID_NUMBER;
-    /** Sets the `order` flex item property of the column on medium screens */
-    orderMd?: GRID_NUMBER;
-    /** Sets the `order` flex item property of the column on large screens */
-    orderLg?: GRID_NUMBER;
-    /** Sets the `order` flex item property of the column on extra-large screens */
-    orderXl?: GRID_NUMBER;
-}
+import React from 'react';
+import { IColProps } from '../types';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */

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

@@ -4,16 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React, { HTMLAttributes } from 'react';
-import { GRID_NUMBER, SPACE } from '../utils/types';
-export interface IGridProps extends HTMLAttributes<HTMLDivElement> {
-    /** Defines the number of individual columns that the grid contains */
-    columns?: GRID_NUMBER;
-    /** Specifies the grid column gutter width. The value `false` collapses the gutters */
-    gutters?: SPACE;
-    /** Highlights the columns for layout debugging */
-    debug?: boolean;
-}
+import React from 'react';
+import { IGridProps } from '../types';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */

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

@@ -4,55 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React, { HTMLAttributes } from 'react';
-import { ALIGN_ITEMS, JUSTIFY_CONTENT, WRAP } from '../utils/types';
-export interface IRowProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Applies the `align-items` flex container property to the row.
-     * This affects vertical `Col` alignment on all screen sizes.
-     */
-    alignItems?: ALIGN_ITEMS;
-    /** Applies the `align-items` flex container property to the row on extra-small screens */
-    alignItemsXs?: ALIGN_ITEMS;
-    /** Applies the `align-items` flex container property to the row on small screens */
-    alignItemsSm?: ALIGN_ITEMS;
-    /** Applies the `align-items` flex container property to the row on medium screens */
-    alignItemsMd?: ALIGN_ITEMS;
-    /** Applies the `align-items` flex container property to the row on large screens */
-    alignItemsLg?: ALIGN_ITEMS;
-    /** Applies the `align-items` flex container property to the row on extra-large screens */
-    alignItemsXl?: ALIGN_ITEMS;
-    /**
-     * Applies the `justify-content` flex container property to the row.
-     * This affects horizontal `Col` alignment on all screen sizes.
-     */
-    justifyContent?: JUSTIFY_CONTENT;
-    /** Applies the `justify-content` flex container property to the row on extra-small screens */
-    justifyContentXs?: JUSTIFY_CONTENT;
-    /** Applies the `justify-content` flex container property to the row on small screens */
-    justifyContentSm?: JUSTIFY_CONTENT;
-    /** Applies the `justify-content` flex container property to the row on medium screens */
-    justifyContentMd?: JUSTIFY_CONTENT;
-    /** Applies the `justify-content` flex container property to the row on large screens */
-    justifyContentLg?: JUSTIFY_CONTENT;
-    /** Applies the `justify-content` flex container property to the row on extra-large screens */
-    justifyContentXl?: JUSTIFY_CONTENT;
-    /**
-     * Applies the `flex-wrap` container property to the row. This affects `Col` wrapping on
-     * all screen sizes.
-     */
-    wrap?: WRAP;
-    /** Applies the `flex-wrap` container property to the row on extra-small screens */
-    wrapXs?: WRAP;
-    /** Applies the `flex-wrap` container property to the row on small screens */
-    wrapSm?: WRAP;
-    /** Applies the `flex-wrap` container property to the row on medium screens */
-    wrapMd?: WRAP;
-    /** Applies the `flex-wrap` container property to the row on large screens */
-    wrapLg?: WRAP;
-    /** Applies the `flex-wrap` container property to the row on extra-large screens */
-    wrapXl?: WRAP;
-}
+import React from 'react';
+import { IRowProps } from '../types';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */

package/dist/typings/index.d.ts

@@ -7,8 +7,5 @@
 export { Col } from './elements/Col';
 export { Grid } from './elements/Grid';
 export { Row } from './elements/Row';
-export type { IColProps } from './elements/Col';
-export type { IGridProps } from './elements/Grid';
-export type { IRowProps } from './elements/Row';
-export { ARRAY_ALIGN_ITEMS, ARRAY_ALIGN_SELF, ARRAY_DIRECTION, ARRAY_JUSTIFY_CONTENT, ARRAY_TEXT_ALIGN, ARRAY_SPACE, ARRAY_WRAP } from './utils/types';
-export type { ALIGN_ITEMS, ALIGN_SELF, DIRECTION, JUSTIFY_CONTENT, TEXT_ALIGN, GRID_NUMBER, BREAKPOINT, SPACE, WRAP } from './utils/types';
+export { ALIGN_ITEMS as ARRAY_ALIGN_ITEMS, ALIGN_SELF as ARRAY_ALIGN_SELF, DIRECTION as ARRAY_DIRECTION, JUSTIFY_CONTENT as ARRAY_JUSTIFY_CONTENT, TEXT_ALIGN as ARRAY_TEXT_ALIGN, SPACE as ARRAY_SPACE, WRAP as ARRAY_WRAP } from './types';
+export type { IColProps, IGridProps, IRowProps, AlignItems as ALIGN_ITEMS, AlignSelf as ALIGN_SELF, Direction as DIRECTION, JustifyContent as JUSTIFY_CONTENT, TextAlign as TEXT_ALIGN, GridNumber as GRID_NUMBER, Breakpoint as BREAKPOINT, Space as SPACE, Wrap as WRAP } from './types';

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

@@ -5,40 +5,12 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { ThemeProps, DefaultTheme } from 'styled-components';
-import { ALIGN_SELF, BREAKPOINT, GRID_NUMBER, SPACE, TEXT_ALIGN } from '../utils/types';
-export interface IStyledColProps extends ThemeProps<DefaultTheme> {
-    columns?: GRID_NUMBER;
-    gutters?: SPACE;
-    sizeAll?: GRID_NUMBER;
-    xs?: BREAKPOINT;
-    sm?: BREAKPOINT;
-    md?: BREAKPOINT;
-    lg?: BREAKPOINT;
-    xl?: BREAKPOINT;
-    alignSelf?: ALIGN_SELF;
-    alignSelfXs?: ALIGN_SELF;
-    alignSelfSm?: ALIGN_SELF;
-    alignSelfMd?: ALIGN_SELF;
-    alignSelfLg?: ALIGN_SELF;
-    alignSelfXl?: ALIGN_SELF;
-    textAlign?: TEXT_ALIGN;
-    textAlignXs?: TEXT_ALIGN;
-    textAlignSm?: TEXT_ALIGN;
-    textAlignMd?: TEXT_ALIGN;
-    textAlignLg?: TEXT_ALIGN;
-    textAlignXl?: TEXT_ALIGN;
-    offset?: GRID_NUMBER;
-    offsetXs?: GRID_NUMBER;
-    offsetSm?: GRID_NUMBER;
-    offsetMd?: GRID_NUMBER;
-    offsetLg?: GRID_NUMBER;
-    offsetXl?: GRID_NUMBER;
-    order?: GRID_NUMBER;
-    orderXs?: GRID_NUMBER;
-    orderSm?: GRID_NUMBER;
-    orderMd?: GRID_NUMBER;
-    orderLg?: GRID_NUMBER;
-    orderXl?: GRID_NUMBER;
-    debug?: boolean;
+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'];
 }
 export declare const StyledCol: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledColProps, never>;
+export {};

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

@@ -5,9 +5,8 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { ThemeProps, DefaultTheme } from 'styled-components';
-import { SPACE } from '../utils/types';
-export interface IStyledGridProps extends ThemeProps<DefaultTheme> {
-    gutters?: SPACE;
-    debug?: boolean;
+import { IGridProps } from '../types';
+interface IStyledGridProps extends Omit<IGridProps, 'columns'>, ThemeProps<DefaultTheme> {
 }
 export declare const StyledGrid: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledGridProps, never>;
+export {};

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

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

package/dist/typings/types/index.d.ts

@@ -0,0 +1,154 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import { HTMLAttributes } from 'react';
+export declare const ALIGN_ITEMS: readonly ["start", "end", "center", "baseline", "stretch"];
+export declare const ALIGN_SELF: readonly ["auto", "start", "end", "center", "baseline", "stretch"];
+export declare const DIRECTION: readonly ["row", "row-reverse", "column", "column-reverse"];
+export declare const JUSTIFY_CONTENT: readonly ["start", "end", "center", "between", "around"];
+export declare const TEXT_ALIGN: readonly ["start", "end", "center", "justify"];
+export declare const SPACE: readonly [false, "xxs", "xs", "sm", "md", "lg", "xl", "xxl"];
+export declare const WRAP: readonly ["nowrap", "wrap", "wrap-reverse"];
+export declare type AlignItems = typeof ALIGN_ITEMS[number];
+export declare type AlignSelf = typeof ALIGN_SELF[number];
+export declare type Direction = typeof DIRECTION[number];
+export declare type JustifyContent = typeof JUSTIFY_CONTENT[number];
+export declare type TextAlign = typeof TEXT_ALIGN[number];
+export declare type GridNumber = number | string;
+export declare type Breakpoint = number | string | boolean;
+export declare type Space = typeof SPACE[number];
+export declare type Wrap = typeof WRAP[number];
+export interface IColProps extends HTMLAttributes<HTMLDivElement> {
+    /** Sets the total number of grid `columns` that the column spans on all screen sizes */
+    size?: number | string;
+    /** Defines the column size on extra-small screens.
+     *  See [breakpoints](/components/theme-object#default_theme).
+     */
+    xs?: number | string | boolean;
+    /** Defines the column size on small screens*/
+    sm?: number | string | boolean;
+    /** Defines the column size on medium screens */
+    md?: number | string | boolean;
+    /** Defines the column size on large screens */
+    lg?: number | string | boolean;
+    /** Defines the column size on extra-large screens */
+    xl?: number | string | boolean;
+    /**
+     * Applies the `align-self` flex item property, overriding `Row alignItems`
+     * vertical alignment on all screen sizes
+     */
+    alignSelf?: AlignSelf;
+    /** Applies the `align-self` flex item property to the column on extra-small screens */
+    alignSelfXs?: AlignSelf;
+    /** Applies the `align-self` flex item property to the column on small screens */
+    alignSelfSm?: AlignSelf;
+    /** Applies the `align-self` flex item property to the column on medium screens */
+    alignSelfMd?: AlignSelf;
+    /** Applies the `align-self` flex item property to the column on large screens */
+    alignSelfLg?: AlignSelf;
+    /** Applies the `align-self` flex item property to the column on extra-large screens */
+    alignSelfXl?: AlignSelf;
+    /**
+     * Applies the RTL-aware `text-align` property to the column on all screen sizes
+     */
+    textAlign?: TextAlign;
+    /** Applies the `text-align` property to the column on extra-small screens */
+    textAlignXs?: TextAlign;
+    /** Applies the `text-align` property to the column on small screens */
+    textAlignSm?: TextAlign;
+    /** Applies the `text-align` property to the column on medium screens */
+    textAlignMd?: TextAlign;
+    /** Applies the `text-align` property to the column on large screens */
+    textAlignLg?: TextAlign;
+    /** Applies the `text-align` property to the column on extra-large screens */
+    textAlignXl?: TextAlign;
+    /**
+     * Offsets the column relative to the total number of `columns` in the
+     * grid on all screen sizes
+     */
+    offset?: number | string;
+    /** Applies offset to the column on extra-small screens */
+    offsetXs?: number | string;
+    /** Applies offset to the column on small screens */
+    offsetSm?: number | string;
+    /** Applies offset to the column on medium screens */
+    offsetMd?: number | string;
+    /** Applies offset to the column on large screens */
+    offsetLg?: number | string;
+    /** Applies offset to the column on extra-large screens */
+    offsetXl?: number | string;
+    /**
+     * Applies the `order` flex item property to the column on all screen sizes. Note that
+     * order modification can introduce accessibility problems by
+     * confusing tab ordering. Rely on semantic DOM ordering whenever possible.
+     */
+    order?: number | string;
+    /** Sets the `order` flex item property of the column on extra-small screens */
+    orderXs?: number | string;
+    /** Sets the `order` flex item property of the column on small screens */
+    orderSm?: number | string;
+    /** Sets the `order` flex item property of the column on medium screens */
+    orderMd?: number | string;
+    /** Sets the `order` flex item property of the column on large screens */
+    orderLg?: number | string;
+    /** Sets the `order` flex item property of the column on extra-large screens */
+    orderXl?: number | string;
+}
+export interface IGridProps extends HTMLAttributes<HTMLDivElement> {
+    /** Defines the number of individual columns that the grid contains */
+    columns?: number | string;
+    /** Specifies the grid column gutter width. The value `false` collapses the gutters */
+    gutters?: Space;
+    /** Highlights the columns for layout debugging */
+    debug?: boolean;
+}
+export interface IRowProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Applies the `align-items` flex container property to the row.
+     * This affects vertical `Col` alignment on all screen sizes.
+     */
+    alignItems?: AlignItems;
+    /** Applies the `align-items` flex container property to the row on extra-small screens */
+    alignItemsXs?: AlignItems;
+    /** Applies the `align-items` flex container property to the row on small screens */
+    alignItemsSm?: AlignItems;
+    /** Applies the `align-items` flex container property to the row on medium screens */
+    alignItemsMd?: AlignItems;
+    /** Applies the `align-items` flex container property to the row on large screens */
+    alignItemsLg?: AlignItems;
+    /** Applies the `align-items` flex container property to the row on extra-large screens */
+    alignItemsXl?: AlignItems;
+    /**
+     * Applies the `justify-content` flex container property to the row.
+     * This affects horizontal `Col` alignment on all screen sizes.
+     */
+    justifyContent?: JustifyContent;
+    /** Applies the `justify-content` flex container property to the row on extra-small screens */
+    justifyContentXs?: JustifyContent;
+    /** Applies the `justify-content` flex container property to the row on small screens */
+    justifyContentSm?: JustifyContent;
+    /** Applies the `justify-content` flex container property to the row on medium screens */
+    justifyContentMd?: JustifyContent;
+    /** Applies the `justify-content` flex container property to the row on large screens */
+    justifyContentLg?: JustifyContent;
+    /** Applies the `justify-content` flex container property to the row on extra-large screens */
+    justifyContentXl?: JustifyContent;
+    /**
+     * Applies the `flex-wrap` container property to the row. This affects `Col` wrapping on
+     * all screen sizes.
+     */
+    wrap?: Wrap;
+    /** Applies the `flex-wrap` container property to the row on extra-small screens */
+    wrapXs?: Wrap;
+    /** Applies the `flex-wrap` container property to the row on small screens */
+    wrapSm?: Wrap;
+    /** Applies the `flex-wrap` container property to the row on medium screens */
+    wrapMd?: Wrap;
+    /** Applies the `flex-wrap` container property to the row on large screens */
+    wrapLg?: Wrap;
+    /** Applies the `flex-wrap` container property to the row on extra-large screens */
+    wrapXl?: Wrap;
+}

package/dist/typings/utils/useGridContext.d.ts

@@ -5,10 +5,10 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 /// <reference types="react" />
-import { GRID_NUMBER, SPACE } from './types';
+import { GridNumber, Space } from '../types';
 interface IGridContext {
-    columns?: GRID_NUMBER;
-    gutters?: SPACE;
+    columns?: GridNumber;
+    gutters?: Space;
     debug?: boolean;
 }
 export declare const GridContext: import("react").Context<IGridContext>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "8.49.2",
+  "version": "8.50.0",
   "description": "Components relating to layout grids in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -31,7 +31,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.49.2"
+    "@zendeskgarden/react-theming": "^8.50.0"
   },
   "keywords": [
     "components",
@@ -43,5 +43,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "fd7769285a2f4bc1169c63f4db57a85a6e793027"
+  "gitHead": "d5b66e1980faf0fd40818c9e74801dfa1c3550a0"
 }

package/dist/typings/utils/types.d.ts

@@ -1,22 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-export declare type ALIGN_ITEMS = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
-export declare const ARRAY_ALIGN_ITEMS: ALIGN_ITEMS[];
-export declare type ALIGN_SELF = 'auto' | ALIGN_ITEMS;
-export declare const ARRAY_ALIGN_SELF: ALIGN_SELF[];
-export declare type DIRECTION = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-export declare const ARRAY_DIRECTION: DIRECTION[];
-export declare type JUSTIFY_CONTENT = 'start' | 'end' | 'center' | 'between' | 'around';
-export declare const ARRAY_JUSTIFY_CONTENT: JUSTIFY_CONTENT[];
-export declare type TEXT_ALIGN = 'start' | 'end' | 'center' | 'justify';
-export declare const ARRAY_TEXT_ALIGN: TEXT_ALIGN[];
-export declare type GRID_NUMBER = number | string;
-export declare type BREAKPOINT = GRID_NUMBER | boolean;
-export declare type SPACE = false | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-export declare const ARRAY_SPACE: SPACE[];
-export declare type WRAP = 'nowrap' | 'wrap' | 'wrap-reverse';
-export declare const ARRAY_WRAP: WRAP[];