@workday/canvas-kit-react 8.0.0-alpha.145-next.1 → 8.0.0-alpha.150-next.2

package/checkbox/index.ts

@@ -1,2 +1 @@
-
 export * from './lib/Checkbox';

package/color-picker/index.ts

@@ -1,4 +1,3 @@
-
 export * from './lib/ColorInput';
 export * from './lib/ColorPreview';
 export * from './lib/parts/ColorSwatch';

package/dist/commonjs/checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../checkbox/index.ts"],"names":[],"mappings":"AACA,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../checkbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/commonjs/color-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../color-picker/index.ts"],"names":[],"mappings":"AACA,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../color-picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}

package/dist/commonjs/form-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../form-field/index.ts"],"names":[],"mappings":"AACA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../form-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}

package/dist/commonjs/layout/index.d.ts

@@ -10,7 +10,9 @@ export * from './lib/utils/layout';
 export * from './lib/utils/position';
 export { SpaceStyleProps } from './lib/utils/space';
 export * from './lib/Flex';
+export * from './lib/Grid';
 export * from './lib/Stack';
 export type { FlexStyleProps } from './lib/utils/flex';
+export type { GridStyleProps } from './lib/utils/grid';
 export type { StackSpacing, StackDirection, StackStyleProps } from './lib/utils/stack';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AACpC,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAC,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AACpC,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAC,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/commonjs/layout/index.js

@@ -22,4 +22,5 @@ __exportStar(require("./lib/utils/flexItem"), exports);
 __exportStar(require("./lib/utils/layout"), exports);
 __exportStar(require("./lib/utils/position"), exports);
 __exportStar(require("./lib/Flex"), exports);
+__exportStar(require("./lib/Grid"), exports);
 __exportStar(require("./lib/Stack"), exports);

package/dist/commonjs/layout/lib/Grid.d.ts

@@ -0,0 +1,52 @@
+import { BoxProps } from './Box';
+import { GridStyleProps } from './utils/grid';
+import { GridItemStyleProps } from './utils/gridItem';
+export declare type GridProps = BoxProps & GridStyleProps;
+export declare type GridItemProps = BoxProps & GridItemStyleProps;
+/**
+ * `Grid` is a two-dimensional layout system for the web. It lets you lay content out in rows and columns.
+ * It is highly flexible, and can be used on its own or to build other components.
+ *
+ * @example
+ * ```
+ * import { Grid } from '@workday/canvas-kit-react/layout';
+ * `Grid` is built on top of `Box` and has access to all `BoxProps`.
+ *
+ * interface CardProps extends GridProps {
+ *   // card-specific props
+ * }
+ *
+ * // `Card`'s default values are set using `GridProps`
+ * const Card = (props: CardProps) => (
+ *   <Grid gridAutoFlow="row" alignItems="start" depth={1} space="m" {...props}>
+ *     <h1>Hello, Card!</h1>
+ *     <p>This card uses grid to set its layout.</p>
+ *   </Grid>
+ * );
+ *```
+ */
+export declare const Grid: import("../../common").ElementComponent<"div", import("..").BorderShorthandStyleProps & import("..").BorderColorStyleProps & import("..").BorderRadiusStyleProps & import("..").BorderLineStyleProps & import("..").BorderWidthStyleProps & import("..").BorderLogicalStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").LayoutStyleProps & import("./utils/other").OtherStyleProps & import("..").PositionStandardProps & import("..").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps & GridStyleProps> & {
+    /**
+     * `<Grid.Item />` is the child specific sub-component to `<Grid/>`. `<Grid.Item />` gets child specific props, whereas `<Grid./>` gets parent container props.
+     *
+     * @example
+     * ```
+     * import { Grid } from '@workday/canvas-kit-react/layout';
+     * `Grid` is built on top of `Box` so `<Grid.Item />` gets all `BoxProps` as well.
+     *
+     * interface CardProps extends GridItemStyleProps {
+     *   // card-specific props
+     * }
+     *
+     * // `Card`'s default values are set using `GridItemStyleProps`
+     * const Card = (props: CardProps) => (
+     *   <Grid.Item gridRowStart="1" gridArea="Card" {...props}>
+     *     <h1>Hello, Card!</h1>
+     *     <p>This card uses grid child specific props to set its layout.</p>
+     *   </Grid.Item>
+     * );
+     *```
+     */
+    Item: import("../../common").ElementComponent<"div", import("..").BorderShorthandStyleProps & import("..").BorderColorStyleProps & import("..").BorderRadiusStyleProps & import("..").BorderLineStyleProps & import("..").BorderWidthStyleProps & import("..").BorderLogicalStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").LayoutStyleProps & import("./utils/other").OtherStyleProps & import("..").PositionStandardProps & import("..").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps & GridItemStyleProps>;
+};
+//# sourceMappingURL=Grid.d.ts.map

package/dist/commonjs/layout/lib/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Grid.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAClD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAE9D,oBAAY,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;AAClD,oBAAY,aAAa,GAAG,QAAQ,GAAG,kBAAkB,CAAC;AAsB1D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,IAAI;IAUb;;;;;;;;;;;;;;;;;;;;OAoBG;;CAIL,CAAC"}

package/dist/commonjs/layout/lib/Grid.js

@@ -0,0 +1,117 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Grid = void 0;
+var React = __importStar(require("react"));
+var styled_1 = __importDefault(require("@emotion/styled"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var Box_1 = require("./Box");
+var grid_1 = require("./utils/grid");
+var gridItem_1 = require("./utils/gridItem");
+var StyledGrid = styled_1.default(Box_1.Box)({
+    display: 'grid',
+}, grid_1.grid);
+var StyledGridItem = styled_1.default(Box_1.Box)(gridItem_1.gridItem);
+var GridItem = common_1.createComponent('div')({
+    displayName: 'Grid.Item',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(StyledGridItem, __assign({ as: Element, ref: ref }, elemProps), children));
+    },
+});
+/**
+ * `Grid` is a two-dimensional layout system for the web. It lets you lay content out in rows and columns.
+ * It is highly flexible, and can be used on its own or to build other components.
+ *
+ * @example
+ * ```
+ * import { Grid } from '@workday/canvas-kit-react/layout';
+ * `Grid` is built on top of `Box` and has access to all `BoxProps`.
+ *
+ * interface CardProps extends GridProps {
+ *   // card-specific props
+ * }
+ *
+ * // `Card`'s default values are set using `GridProps`
+ * const Card = (props: CardProps) => (
+ *   <Grid gridAutoFlow="row" alignItems="start" depth={1} space="m" {...props}>
+ *     <h1>Hello, Card!</h1>
+ *     <p>This card uses grid to set its layout.</p>
+ *   </Grid>
+ * );
+ *```
+ */
+exports.Grid = common_1.createComponent('div')({
+    displayName: 'Grid',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(StyledGrid, __assign({ as: Element, ref: ref }, elemProps), children));
+    },
+    subComponents: {
+        /**
+         * `<Grid.Item />` is the child specific sub-component to `<Grid/>`. `<Grid.Item />` gets child specific props, whereas `<Grid./>` gets parent container props.
+         *
+         * @example
+         * ```
+         * import { Grid } from '@workday/canvas-kit-react/layout';
+         * `Grid` is built on top of `Box` so `<Grid.Item />` gets all `BoxProps` as well.
+         *
+         * interface CardProps extends GridItemStyleProps {
+         *   // card-specific props
+         * }
+         *
+         * // `Card`'s default values are set using `GridItemStyleProps`
+         * const Card = (props: CardProps) => (
+         *   <Grid.Item gridRowStart="1" gridArea="Card" {...props}>
+         *     <h1>Hello, Card!</h1>
+         *     <p>This card uses grid child specific props to set its layout.</p>
+         *   </Grid.Item>
+         * );
+         *```
+         */
+        Item: GridItem,
+    },
+});

package/dist/commonjs/layout/lib/Stack.js

@@ -80,8 +80,8 @@ exports.Stack = common_1.createComponent('div')({
 exports.HStack = common_1.createComponent('div')({
     displayName: 'HStack',
     Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(exports.Stack, __assign({ as: Element, ref: ref, flexDirection: "row" }, elemProps), children));
+        var children = _a.children, _b = _a.flexDirection, flexDirection = _b === void 0 ? 'row' : _b, elemProps = __rest(_a, ["children", "flexDirection"]);
+        return (React.createElement(exports.Stack, __assign({ as: Element, ref: ref, flexDirection: flexDirection }, elemProps), children));
     },
     subComponents: {
         Item: StackItem,
@@ -90,8 +90,8 @@ exports.HStack = common_1.createComponent('div')({
 exports.VStack = common_1.createComponent('div')({
     displayName: 'VStack',
     Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(exports.Stack, __assign({ as: Element, ref: ref, flexDirection: "column" }, elemProps), children));
+        var children = _a.children, _b = _a.flexDirection, flexDirection = _b === void 0 ? 'column' : _b, elemProps = __rest(_a, ["children", "flexDirection"]);
+        return (React.createElement(exports.Stack, __assign({ as: Element, ref: ref, flexDirection: flexDirection }, elemProps), children));
     },
     subComponents: {
         Item: StackItem,

package/dist/commonjs/layout/lib/utils/grid.d.ts

@@ -0,0 +1,58 @@
+import { Property } from 'csstype';
+/** style props to for grid container properties */
+export declare type GridStyleProps = {
+    /** sets `align-items` property */
+    alignItems?: Property.AlignItems;
+    /** sets `align-content` property */
+    alignContent?: Property.AlignContent;
+    /**
+     * sets `display` property
+     * @default 'grid'
+     * */
+    display?: 'grid' | 'inline-grid';
+    /** sets `justify-items` property */
+    justifyItems?: Property.JustifyItems;
+    /** sets `justify-content` property */
+    justifyContent?: Property.JustifyContent;
+    /** sets `grid-template` property */
+    gridTemplate?: Property.GridTemplate;
+    /** sets `grid-template-area` property */
+    gridTemplateAreas?: Property.GridTemplateAreas;
+    /** sets `grid-template-columns` property */
+    gridTemplateColumns?: Property.GridTemplateColumns;
+    /** sets `grid-template-rows` property */
+    gridTemplateRows?: Property.GridTemplateRows;
+    /** sets `gap` property */
+    gridGap?: Property.GridGap;
+    /** sets `column-gap` property */
+    gridColumnGap?: Property.GridColumnGap;
+    /** sets `row-gap` property */
+    gridRowGap?: Property.GridRowGap;
+    /** sets `place-items` property */
+    gridPlaceItems?: Property.PlaceItems;
+    /** sets `grid-auto-columns` property */
+    gridAutoColumns?: Property.GridAutoColumns;
+    /** sets `grid-auto-rows` property */
+    gridAutoRows?: Property.GridAutoRows;
+    /** sets `grid-area` property */
+    gridArea?: Property.GridArea;
+    /** sets `grid-auto-flow` property */
+    gridAutoFlow?: Property.GridAutoFlow;
+    /** sets `grid` property */
+    grid?: Property.Grid;
+};
+/**
+ * A style prop function that takes component props and returns grid styles.
+ * If no `GridStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `grid` with low-level, styled components
+ * const GridExample = () => (
+ *   <Grid gridAutoFlow="row" justifyContent="center" alignItems="center">
+ *     Hello, Grid!
+ *   </Grid>
+ * );
+ *
+ */
+export declare function grid<P extends GridStyleProps>(props: P): {};
+//# sourceMappingURL=grid.d.ts.map

package/dist/commonjs/layout/lib/utils/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,mDAAmD;AACnD,oBAAY,cAAc,GAAG;IAC3B,kCAAkC;IAClC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,oCAAoC;IACpC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC;;;SAGK;IACL,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IACjC,oCAAoC;IACpC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,sCAAsC;IACtC,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC;IAGzC,oCAAoC;IACpC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC;IAC/C,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC;IACnD,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,gBAAgB,CAAC;IAC7C,0BAA0B;IAC1B,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC3B,iCAAiC;IACjC,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC,8BAA8B;IAC9B,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,kCAAkC;IAClC,cAAc,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACrC,wCAAwC;IACxC,eAAe,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC;IAC3C,qCAAqC;IACrC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B,qCAAqC;IACrC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,2BAA2B;IAC3B,IAAI,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC;CACtB,CAAC;AAuBF;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EAAE,KAAK,EAAE,CAAC,MAWtD"}

package/dist/commonjs/layout/lib/utils/grid.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.grid = void 0;
+var gridProps = {
+    alignContent: 'alignContent',
+    alignItems: 'alignItems',
+    display: 'display',
+    justifyContent: 'justifyContent',
+    justifyItems: 'justifyItems',
+    gridTemplateAreas: 'gridTemplateAreas',
+    gridTemplate: 'gridTemplate',
+    gridTemplateColumns: 'gridTemplateColumns',
+    gridTemplateRows: 'gridTemplateRows',
+    gridGap: 'gridGap',
+    gridColumnGap: 'gridColumnGap',
+    gridRowGap: 'gridRowGap',
+    gridPlaceItems: 'gridPlaceItems',
+    gridAutoColumns: 'gridAutoColumns',
+    gridAutoRows: 'gridAutoRows',
+    gridAutoFlow: 'gridAutoFlow',
+    gridArea: 'gridArea',
+    grid: 'grid',
+};
+/**
+ * A style prop function that takes component props and returns grid styles.
+ * If no `GridStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `grid` with low-level, styled components
+ * const GridExample = () => (
+ *   <Grid gridAutoFlow="row" justifyContent="center" alignItems="center">
+ *     Hello, Grid!
+ *   </Grid>
+ * );
+ *
+ */
+function grid(props) {
+    var styles = {};
+    for (var key in props) {
+        if (key in gridProps) {
+            var attr = gridProps[key];
+            var value = props[key];
+            // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+            styles[attr] = value;
+        }
+    }
+    return styles;
+}
+exports.grid = grid;

package/dist/commonjs/layout/lib/utils/gridItem.d.ts

@@ -0,0 +1,39 @@
+import { Property } from 'csstype';
+/** style props to for grid item properties */
+export declare type GridItemStyleProps = {
+    /** sets `grid-column-start` property */
+    gridColumnStart?: Property.GridColumnStart;
+    /** sets `grid-column-end` property */
+    gridColumnEnd?: Property.GridColumnEnd;
+    /** sets `grid-row-start` property */
+    gridRowStart?: Property.GridRowStart;
+    /** sets `grid-row-end` property */
+    gridRowEnd?: Property.GridRowEnd;
+    /** sets `grid-column` property */
+    gridColumn?: Property.GridColumn;
+    /** sets `grid-row` property */
+    gridRow?: Property.GridRow;
+    /** sets `grid-area` property */
+    gridArea?: Property.GridArea;
+    /** sets `justify-self` property */
+    justifySelf?: Property.JustifySelf;
+    /** sets `align-self` property */
+    alignSelf?: Property.AlignSelf;
+    /** sets `place-self` property */
+    placeSelf?: Property.PlaceSelf;
+};
+/**
+ * A style prop function that takes component props and returns grid styles.
+ * If no `GridItemStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `grid item` with low-level, styled components
+ * const GridItemExample = () => (
+ *   <Grid.Item gridRowStart="1" justifySelf="center" gridArea="Card">
+ *     Hello, Grid Item!
+ *   </Grid.Item>
+ * );
+ *
+ */
+export declare function gridItem<P extends GridItemStyleProps>(props: P): {};
+//# sourceMappingURL=gridItem.d.ts.map

package/dist/commonjs/layout/lib/utils/gridItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridItem.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/gridItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,8CAA8C;AAC9C,oBAAY,kBAAkB,GAAG;IAE/B,wCAAwC;IACxC,eAAe,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC;IAC3C,sCAAsC;IACtC,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC,qCAAqC;IACrC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,mCAAmC;IACnC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,kCAAkC;IAClC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,+BAA+B;IAC/B,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC3B,gCAAgC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B,mCAAmC;IACnC,WAAW,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;IACnC,iCAAiC;IACjC,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B,iCAAiC;IACjC,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC,CAAC;AAiBF;;;;;;;;;;;;GAYG;AAEH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,kBAAkB,EAAE,KAAK,EAAE,CAAC,MAW9D"}

package/dist/commonjs/layout/lib/utils/gridItem.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gridItem = void 0;
+/** style props to for grid item properties */
+var gridItemProps = {
+    //Child Props
+    gridColumnStart: 'gridColumnStart',
+    gridColumnEnd: 'gridColumnEnd',
+    gridRowStart: 'gridRowStart',
+    gridRowEnd: 'gridRowEnd',
+    gridColumn: 'gridColumn',
+    gridRow: 'gridRow',
+    gridArea: 'gridArea',
+    justifySelf: 'justifySelf',
+    alignSelf: 'alignSelf',
+    placeSelf: 'placeSelf',
+};
+/**
+ * A style prop function that takes component props and returns grid styles.
+ * If no `GridItemStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `grid item` with low-level, styled components
+ * const GridItemExample = () => (
+ *   <Grid.Item gridRowStart="1" justifySelf="center" gridArea="Card">
+ *     Hello, Grid Item!
+ *   </Grid.Item>
+ * );
+ *
+ */
+function gridItem(props) {
+    var styles = {};
+    for (var key in props) {
+        if (key in gridItemProps) {
+            var attr = gridItemProps[key];
+            var value = props[key];
+            // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+            styles[attr] = value;
+        }
+    }
+    return styles;
+}
+exports.gridItem = gridItem;

package/dist/commonjs/text-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../text-input/index.ts"],"names":[],"mappings":"AACA,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../text-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC"}

package/dist/es6/checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../checkbox/index.ts"],"names":[],"mappings":"AACA,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../checkbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/es6/color-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../color-picker/index.ts"],"names":[],"mappings":"AACA,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../color-picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}

package/dist/es6/form-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../form-field/index.ts"],"names":[],"mappings":"AACA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../form-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}

package/dist/es6/layout/index.d.ts

@@ -10,7 +10,9 @@ export * from './lib/utils/layout';
 export * from './lib/utils/position';
 export { SpaceStyleProps } from './lib/utils/space';
 export * from './lib/Flex';
+export * from './lib/Grid';
 export * from './lib/Stack';
 export type { FlexStyleProps } from './lib/utils/flex';
+export type { GridStyleProps } from './lib/utils/grid';
 export type { StackSpacing, StackDirection, StackStyleProps } from './lib/utils/stack';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AACpC,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAC,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AACpC,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAC,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/es6/layout/index.js

@@ -8,4 +8,5 @@ export * from './lib/utils/flexItem';
 export * from './lib/utils/layout';
 export * from './lib/utils/position';
 export * from './lib/Flex';
+export * from './lib/Grid';
 export * from './lib/Stack';

package/dist/es6/layout/lib/Grid.d.ts

@@ -0,0 +1,52 @@
+import { BoxProps } from './Box';
+import { GridStyleProps } from './utils/grid';
+import { GridItemStyleProps } from './utils/gridItem';
+export declare type GridProps = BoxProps & GridStyleProps;
+export declare type GridItemProps = BoxProps & GridItemStyleProps;
+/**
+ * `Grid` is a two-dimensional layout system for the web. It lets you lay content out in rows and columns.
+ * It is highly flexible, and can be used on its own or to build other components.
+ *
+ * @example
+ * ```
+ * import { Grid } from '@workday/canvas-kit-react/layout';
+ * `Grid` is built on top of `Box` and has access to all `BoxProps`.
+ *
+ * interface CardProps extends GridProps {
+ *   // card-specific props
+ * }
+ *
+ * // `Card`'s default values are set using `GridProps`
+ * const Card = (props: CardProps) => (
+ *   <Grid gridAutoFlow="row" alignItems="start" depth={1} space="m" {...props}>
+ *     <h1>Hello, Card!</h1>
+ *     <p>This card uses grid to set its layout.</p>
+ *   </Grid>
+ * );
+ *```
+ */
+export declare const Grid: import("../../common").ElementComponent<"div", import("..").BorderShorthandStyleProps & import("..").BorderColorStyleProps & import("..").BorderRadiusStyleProps & import("..").BorderLineStyleProps & import("..").BorderWidthStyleProps & import("..").BorderLogicalStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").LayoutStyleProps & import("./utils/other").OtherStyleProps & import("..").PositionStandardProps & import("..").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps & GridStyleProps> & {
+    /**
+     * `<Grid.Item />` is the child specific sub-component to `<Grid/>`. `<Grid.Item />` gets child specific props, whereas `<Grid./>` gets parent container props.
+     *
+     * @example
+     * ```
+     * import { Grid } from '@workday/canvas-kit-react/layout';
+     * `Grid` is built on top of `Box` so `<Grid.Item />` gets all `BoxProps` as well.
+     *
+     * interface CardProps extends GridItemStyleProps {
+     *   // card-specific props
+     * }
+     *
+     * // `Card`'s default values are set using `GridItemStyleProps`
+     * const Card = (props: CardProps) => (
+     *   <Grid.Item gridRowStart="1" gridArea="Card" {...props}>
+     *     <h1>Hello, Card!</h1>
+     *     <p>This card uses grid child specific props to set its layout.</p>
+     *   </Grid.Item>
+     * );
+     *```
+     */
+    Item: import("../../common").ElementComponent<"div", import("..").BorderShorthandStyleProps & import("..").BorderColorStyleProps & import("..").BorderRadiusStyleProps & import("..").BorderLineStyleProps & import("..").BorderWidthStyleProps & import("..").BorderLogicalStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").LayoutStyleProps & import("./utils/other").OtherStyleProps & import("..").PositionStandardProps & import("..").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps & GridItemStyleProps>;
+};
+//# sourceMappingURL=Grid.d.ts.map

package/dist/es6/layout/lib/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Grid.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAClD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAE9D,oBAAY,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;AAClD,oBAAY,aAAa,GAAG,QAAQ,GAAG,kBAAkB,CAAC;AAsB1D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,IAAI;IAUb;;;;;;;;;;;;;;;;;;;;OAoBG;;CAIL,CAAC"}

package/dist/es6/layout/lib/Grid.js

@@ -0,0 +1,92 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from '@emotion/styled';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { Box } from './Box';
+import { grid } from './utils/grid';
+import { gridItem } from './utils/gridItem';
+var StyledGrid = styled(Box)({
+    display: 'grid',
+}, grid);
+var StyledGridItem = styled(Box)(gridItem);
+var GridItem = createComponent('div')({
+    displayName: 'Grid.Item',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(StyledGridItem, __assign({ as: Element, ref: ref }, elemProps), children));
+    },
+});
+/**
+ * `Grid` is a two-dimensional layout system for the web. It lets you lay content out in rows and columns.
+ * It is highly flexible, and can be used on its own or to build other components.
+ *
+ * @example
+ * ```
+ * import { Grid } from '@workday/canvas-kit-react/layout';
+ * `Grid` is built on top of `Box` and has access to all `BoxProps`.
+ *
+ * interface CardProps extends GridProps {
+ *   // card-specific props
+ * }
+ *
+ * // `Card`'s default values are set using `GridProps`
+ * const Card = (props: CardProps) => (
+ *   <Grid gridAutoFlow="row" alignItems="start" depth={1} space="m" {...props}>
+ *     <h1>Hello, Card!</h1>
+ *     <p>This card uses grid to set its layout.</p>
+ *   </Grid>
+ * );
+ *```
+ */
+export var Grid = createComponent('div')({
+    displayName: 'Grid',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(StyledGrid, __assign({ as: Element, ref: ref }, elemProps), children));
+    },
+    subComponents: {
+        /**
+         * `<Grid.Item />` is the child specific sub-component to `<Grid/>`. `<Grid.Item />` gets child specific props, whereas `<Grid./>` gets parent container props.
+         *
+         * @example
+         * ```
+         * import { Grid } from '@workday/canvas-kit-react/layout';
+         * `Grid` is built on top of `Box` so `<Grid.Item />` gets all `BoxProps` as well.
+         *
+         * interface CardProps extends GridItemStyleProps {
+         *   // card-specific props
+         * }
+         *
+         * // `Card`'s default values are set using `GridItemStyleProps`
+         * const Card = (props: CardProps) => (
+         *   <Grid.Item gridRowStart="1" gridArea="Card" {...props}>
+         *     <h1>Hello, Card!</h1>
+         *     <p>This card uses grid child specific props to set its layout.</p>
+         *   </Grid.Item>
+         * );
+         *```
+         */
+        Item: GridItem,
+    },
+});

package/dist/es6/layout/lib/Stack.js

@@ -55,8 +55,8 @@ export var Stack = createComponent('div')({
 export var HStack = createComponent('div')({
     displayName: 'HStack',
     Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(Stack, __assign({ as: Element, ref: ref, flexDirection: "row" }, elemProps), children));
+        var children = _a.children, _b = _a.flexDirection, flexDirection = _b === void 0 ? 'row' : _b, elemProps = __rest(_a, ["children", "flexDirection"]);
+        return (React.createElement(Stack, __assign({ as: Element, ref: ref, flexDirection: flexDirection }, elemProps), children));
     },
     subComponents: {
         Item: StackItem,
@@ -65,8 +65,8 @@ export var HStack = createComponent('div')({
 export var VStack = createComponent('div')({
     displayName: 'VStack',
     Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(Stack, __assign({ as: Element, ref: ref, flexDirection: "column" }, elemProps), children));
+        var children = _a.children, _b = _a.flexDirection, flexDirection = _b === void 0 ? 'column' : _b, elemProps = __rest(_a, ["children", "flexDirection"]);
+        return (React.createElement(Stack, __assign({ as: Element, ref: ref, flexDirection: flexDirection }, elemProps), children));
     },
     subComponents: {
         Item: StackItem,

package/dist/es6/layout/lib/utils/grid.d.ts

@@ -0,0 +1,58 @@
+import { Property } from 'csstype';
+/** style props to for grid container properties */
+export declare type GridStyleProps = {
+    /** sets `align-items` property */
+    alignItems?: Property.AlignItems;
+    /** sets `align-content` property */
+    alignContent?: Property.AlignContent;
+    /**
+     * sets `display` property
+     * @default 'grid'
+     * */
+    display?: 'grid' | 'inline-grid';
+    /** sets `justify-items` property */
+    justifyItems?: Property.JustifyItems;
+    /** sets `justify-content` property */
+    justifyContent?: Property.JustifyContent;
+    /** sets `grid-template` property */
+    gridTemplate?: Property.GridTemplate;
+    /** sets `grid-template-area` property */
+    gridTemplateAreas?: Property.GridTemplateAreas;
+    /** sets `grid-template-columns` property */
+    gridTemplateColumns?: Property.GridTemplateColumns;
+    /** sets `grid-template-rows` property */
+    gridTemplateRows?: Property.GridTemplateRows;
+    /** sets `gap` property */
+    gridGap?: Property.GridGap;
+    /** sets `column-gap` property */
+    gridColumnGap?: Property.GridColumnGap;
+    /** sets `row-gap` property */
+    gridRowGap?: Property.GridRowGap;
+    /** sets `place-items` property */
+    gridPlaceItems?: Property.PlaceItems;
+    /** sets `grid-auto-columns` property */
+    gridAutoColumns?: Property.GridAutoColumns;
+    /** sets `grid-auto-rows` property */
+    gridAutoRows?: Property.GridAutoRows;
+    /** sets `grid-area` property */
+    gridArea?: Property.GridArea;
+    /** sets `grid-auto-flow` property */
+    gridAutoFlow?: Property.GridAutoFlow;
+    /** sets `grid` property */
+    grid?: Property.Grid;
+};
+/**
+ * A style prop function that takes component props and returns grid styles.
+ * If no `GridStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `grid` with low-level, styled components
+ * const GridExample = () => (
+ *   <Grid gridAutoFlow="row" justifyContent="center" alignItems="center">
+ *     Hello, Grid!
+ *   </Grid>
+ * );
+ *
+ */
+export declare function grid<P extends GridStyleProps>(props: P): {};
+//# sourceMappingURL=grid.d.ts.map

package/dist/es6/layout/lib/utils/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,mDAAmD;AACnD,oBAAY,cAAc,GAAG;IAC3B,kCAAkC;IAClC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,oCAAoC;IACpC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC;;;SAGK;IACL,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IACjC,oCAAoC;IACpC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,sCAAsC;IACtC,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC;IAGzC,oCAAoC;IACpC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC;IAC/C,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC;IACnD,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,gBAAgB,CAAC;IAC7C,0BAA0B;IAC1B,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC3B,iCAAiC;IACjC,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC,8BAA8B;IAC9B,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,kCAAkC;IAClC,cAAc,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACrC,wCAAwC;IACxC,eAAe,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC;IAC3C,qCAAqC;IACrC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B,qCAAqC;IACrC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,2BAA2B;IAC3B,IAAI,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC;CACtB,CAAC;AAuBF;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EAAE,KAAK,EAAE,CAAC,MAWtD"}

package/dist/es6/layout/lib/utils/grid.js

@@ -0,0 +1,45 @@
+var gridProps = {
+    alignContent: 'alignContent',
+    alignItems: 'alignItems',
+    display: 'display',
+    justifyContent: 'justifyContent',
+    justifyItems: 'justifyItems',
+    gridTemplateAreas: 'gridTemplateAreas',
+    gridTemplate: 'gridTemplate',
+    gridTemplateColumns: 'gridTemplateColumns',
+    gridTemplateRows: 'gridTemplateRows',
+    gridGap: 'gridGap',
+    gridColumnGap: 'gridColumnGap',
+    gridRowGap: 'gridRowGap',
+    gridPlaceItems: 'gridPlaceItems',
+    gridAutoColumns: 'gridAutoColumns',
+    gridAutoRows: 'gridAutoRows',
+    gridAutoFlow: 'gridAutoFlow',
+    gridArea: 'gridArea',
+    grid: 'grid',
+};
+/**
+ * A style prop function that takes component props and returns grid styles.
+ * If no `GridStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `grid` with low-level, styled components
+ * const GridExample = () => (
+ *   <Grid gridAutoFlow="row" justifyContent="center" alignItems="center">
+ *     Hello, Grid!
+ *   </Grid>
+ * );
+ *
+ */
+export function grid(props) {
+    var styles = {};
+    for (var key in props) {
+        if (key in gridProps) {
+            var attr = gridProps[key];
+            var value = props[key];
+            // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+            styles[attr] = value;
+        }
+    }
+    return styles;
+}

package/dist/es6/layout/lib/utils/gridItem.d.ts

@@ -0,0 +1,39 @@
+import { Property } from 'csstype';
+/** style props to for grid item properties */
+export declare type GridItemStyleProps = {
+    /** sets `grid-column-start` property */
+    gridColumnStart?: Property.GridColumnStart;
+    /** sets `grid-column-end` property */
+    gridColumnEnd?: Property.GridColumnEnd;
+    /** sets `grid-row-start` property */
+    gridRowStart?: Property.GridRowStart;
+    /** sets `grid-row-end` property */
+    gridRowEnd?: Property.GridRowEnd;
+    /** sets `grid-column` property */
+    gridColumn?: Property.GridColumn;
+    /** sets `grid-row` property */
+    gridRow?: Property.GridRow;
+    /** sets `grid-area` property */
+    gridArea?: Property.GridArea;
+    /** sets `justify-self` property */
+    justifySelf?: Property.JustifySelf;
+    /** sets `align-self` property */
+    alignSelf?: Property.AlignSelf;
+    /** sets `place-self` property */
+    placeSelf?: Property.PlaceSelf;
+};
+/**
+ * A style prop function that takes component props and returns grid styles.
+ * If no `GridItemStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `grid item` with low-level, styled components
+ * const GridItemExample = () => (
+ *   <Grid.Item gridRowStart="1" justifySelf="center" gridArea="Card">
+ *     Hello, Grid Item!
+ *   </Grid.Item>
+ * );
+ *
+ */
+export declare function gridItem<P extends GridItemStyleProps>(props: P): {};
+//# sourceMappingURL=gridItem.d.ts.map

package/dist/es6/layout/lib/utils/gridItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridItem.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/gridItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,8CAA8C;AAC9C,oBAAY,kBAAkB,GAAG;IAE/B,wCAAwC;IACxC,eAAe,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC;IAC3C,sCAAsC;IACtC,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC,qCAAqC;IACrC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,mCAAmC;IACnC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,kCAAkC;IAClC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,+BAA+B;IAC/B,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC3B,gCAAgC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B,mCAAmC;IACnC,WAAW,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;IACnC,iCAAiC;IACjC,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B,iCAAiC;IACjC,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC,CAAC;AAiBF;;;;;;;;;;;;GAYG;AAEH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,kBAAkB,EAAE,KAAK,EAAE,CAAC,MAW9D"}

package/dist/es6/layout/lib/utils/gridItem.js

@@ -0,0 +1,39 @@
+/** style props to for grid item properties */
+var gridItemProps = {
+    //Child Props
+    gridColumnStart: 'gridColumnStart',
+    gridColumnEnd: 'gridColumnEnd',
+    gridRowStart: 'gridRowStart',
+    gridRowEnd: 'gridRowEnd',
+    gridColumn: 'gridColumn',
+    gridRow: 'gridRow',
+    gridArea: 'gridArea',
+    justifySelf: 'justifySelf',
+    alignSelf: 'alignSelf',
+    placeSelf: 'placeSelf',
+};
+/**
+ * A style prop function that takes component props and returns grid styles.
+ * If no `GridItemStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `grid item` with low-level, styled components
+ * const GridItemExample = () => (
+ *   <Grid.Item gridRowStart="1" justifySelf="center" gridArea="Card">
+ *     Hello, Grid Item!
+ *   </Grid.Item>
+ * );
+ *
+ */
+export function gridItem(props) {
+    var styles = {};
+    for (var key in props) {
+        if (key in gridItemProps) {
+            var attr = gridItemProps[key];
+            var value = props[key];
+            // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+            styles[attr] = value;
+        }
+    }
+    return styles;
+}

package/dist/es6/text-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../text-input/index.ts"],"names":[],"mappings":"AACA,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../text-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC"}

package/form-field/index.ts

@@ -1,4 +1,3 @@
-
 export * from './lib/types';
 export * from './lib/FormField';
 export * from './lib/Hint';

package/layout/index.ts

@@ -11,6 +11,8 @@ export * from './lib/utils/layout';
 export * from './lib/utils/position';
 export {SpaceStyleProps} from './lib/utils/space';
 export * from './lib/Flex';
+export * from './lib/Grid';
 export * from './lib/Stack';
 export type { FlexStyleProps } from './lib/utils/flex';
+export type { GridStyleProps } from './lib/utils/grid';
 export type { StackSpacing, StackDirection, StackStyleProps } from './lib/utils/stack';

package/layout/lib/Grid.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
+import {Box, BoxProps} from './Box';
+
+import {grid, GridStyleProps} from './utils/grid';
+import {gridItem, GridItemStyleProps} from './utils/gridItem';
+
+export type GridProps = BoxProps & GridStyleProps;
+export type GridItemProps = BoxProps & GridItemStyleProps;
+
+const StyledGrid = styled(Box)<StyledType & GridProps>(
+  {
+    display: 'grid',
+  },
+  grid
+);
+
+const StyledGridItem = styled(Box)<StyledType & GridItemProps>(gridItem);
+
+const GridItem = createComponent('div')({
+  displayName: 'Grid.Item',
+  Component: ({children, ...elemProps}: GridItemProps, ref, Element) => {
+    return (
+      <StyledGridItem as={Element} ref={ref} {...elemProps}>
+        {children}
+      </StyledGridItem>
+    );
+  },
+});
+
+/**
+ * `Grid` is a two-dimensional layout system for the web. It lets you lay content out in rows and columns.
+ * It is highly flexible, and can be used on its own or to build other components.
+ *
+ * @example
+ * ```
+ * import { Grid } from '@workday/canvas-kit-react/layout';
+ * `Grid` is built on top of `Box` and has access to all `BoxProps`.
+ *
+ * interface CardProps extends GridProps {
+ *   // card-specific props
+ * }
+ *
+ * // `Card`'s default values are set using `GridProps`
+ * const Card = (props: CardProps) => (
+ *   <Grid gridAutoFlow="row" alignItems="start" depth={1} space="m" {...props}>
+ *     <h1>Hello, Card!</h1>
+ *     <p>This card uses grid to set its layout.</p>
+ *   </Grid>
+ * );
+ *```
+ */
+export const Grid = createComponent('div')({
+  displayName: 'Grid',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <StyledGrid as={Element} ref={ref} {...elemProps}>
+        {children}
+      </StyledGrid>
+    );
+  },
+  subComponents: {
+    /**
+     * `<Grid.Item />` is the child specific sub-component to `<Grid/>`. `<Grid.Item />` gets child specific props, whereas `<Grid./>` gets parent container props.
+     *
+     * @example
+     * ```
+     * import { Grid } from '@workday/canvas-kit-react/layout';
+     * `Grid` is built on top of `Box` so `<Grid.Item />` gets all `BoxProps` as well.
+     *
+     * interface CardProps extends GridItemStyleProps {
+     *   // card-specific props
+     * }
+     *
+     * // `Card`'s default values are set using `GridItemStyleProps`
+     * const Card = (props: CardProps) => (
+     *   <Grid.Item gridRowStart="1" gridArea="Card" {...props}>
+     *     <h1>Hello, Card!</h1>
+     *     <p>This card uses grid child specific props to set its layout.</p>
+     *   </Grid.Item>
+     * );
+     *```
+     */
+
+    Item: GridItem,
+  },
+});

package/layout/lib/Stack.tsx

@@ -62,9 +62,9 @@ export interface HStackProps extends StackProps {
 
 export const HStack = createComponent('div')({
   displayName: 'HStack',
-  Component: ({children, ...elemProps}: HStackProps, ref, Element) => {
+  Component: ({children, flexDirection = 'row', ...elemProps}: HStackProps, ref, Element) => {
     return (
-      <Stack as={Element} ref={ref} flexDirection="row" {...elemProps}>
+      <Stack as={Element} ref={ref} flexDirection={flexDirection} {...elemProps}>
         {children}
       </Stack>
     );
@@ -84,9 +84,9 @@ export interface VStackProps extends StackProps {
 
 export const VStack = createComponent('div')({
   displayName: 'VStack',
-  Component: ({children, ...elemProps}: VStackProps, ref, Element) => {
+  Component: ({children, flexDirection = 'column', ...elemProps}: VStackProps, ref, Element) => {
     return (
-      <Stack as={Element} ref={ref} flexDirection="column" {...elemProps}>
+      <Stack as={Element} ref={ref} flexDirection={flexDirection} {...elemProps}>
         {children}
       </Stack>
     );

package/layout/lib/utils/grid.ts

@@ -0,0 +1,93 @@
+import {Property} from 'csstype';
+
+/** style props to for grid container properties */
+export type GridStyleProps = {
+  /** sets `align-items` property */
+  alignItems?: Property.AlignItems;
+  /** sets `align-content` property */
+  alignContent?: Property.AlignContent;
+  /**
+   * sets `display` property
+   * @default 'grid'
+   * */
+  display?: 'grid' | 'inline-grid';
+  /** sets `justify-items` property */
+  justifyItems?: Property.JustifyItems;
+  /** sets `justify-content` property */
+  justifyContent?: Property.JustifyContent;
+
+  // Container Types
+  /** sets `grid-template` property */
+  gridTemplate?: Property.GridTemplate;
+  /** sets `grid-template-area` property */
+  gridTemplateAreas?: Property.GridTemplateAreas;
+  /** sets `grid-template-columns` property */
+  gridTemplateColumns?: Property.GridTemplateColumns;
+  /** sets `grid-template-rows` property */
+  gridTemplateRows?: Property.GridTemplateRows;
+  /** sets `gap` property */
+  gridGap?: Property.GridGap;
+  /** sets `column-gap` property */
+  gridColumnGap?: Property.GridColumnGap;
+  /** sets `row-gap` property */
+  gridRowGap?: Property.GridRowGap;
+  /** sets `place-items` property */
+  gridPlaceItems?: Property.PlaceItems;
+  /** sets `grid-auto-columns` property */
+  gridAutoColumns?: Property.GridAutoColumns;
+  /** sets `grid-auto-rows` property */
+  gridAutoRows?: Property.GridAutoRows;
+  /** sets `grid-area` property */
+  gridArea?: Property.GridArea;
+  /** sets `grid-auto-flow` property */
+  gridAutoFlow?: Property.GridAutoFlow;
+  /** sets `grid` property */
+  grid?: Property.Grid;
+};
+
+const gridProps = {
+  alignContent: 'alignContent',
+  alignItems: 'alignItems',
+  display: 'display',
+  justifyContent: 'justifyContent',
+  justifyItems: 'justifyItems',
+  gridTemplateAreas: 'gridTemplateAreas',
+  gridTemplate: 'gridTemplate',
+  gridTemplateColumns: 'gridTemplateColumns',
+  gridTemplateRows: 'gridTemplateRows',
+  gridGap: 'gridGap',
+  gridColumnGap: 'gridColumnGap',
+  gridRowGap: 'gridRowGap',
+  gridPlaceItems: 'gridPlaceItems',
+  gridAutoColumns: 'gridAutoColumns',
+  gridAutoRows: 'gridAutoRows',
+  gridAutoFlow: 'gridAutoFlow',
+  gridArea: 'gridArea',
+  grid: 'grid',
+};
+
+/**
+ * A style prop function that takes component props and returns grid styles.
+ * If no `GridStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `grid` with low-level, styled components
+ * const GridExample = () => (
+ *   <Grid gridAutoFlow="row" justifyContent="center" alignItems="center">
+ *     Hello, Grid!
+ *   </Grid>
+ * );
+ *
+ */
+export function grid<P extends GridStyleProps>(props: P) {
+  const styles = {};
+  for (const key in props) {
+    if (key in gridProps) {
+      const attr = gridProps[key as keyof GridStyleProps];
+      const value = props[key];
+      // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+      styles[attr] = value;
+    }
+  }
+  return styles;
+}

package/layout/lib/utils/gridItem.ts

@@ -0,0 +1,68 @@
+import {Property} from 'csstype';
+
+/** style props to for grid item properties */
+export type GridItemStyleProps = {
+  // Child Types
+  /** sets `grid-column-start` property */
+  gridColumnStart?: Property.GridColumnStart;
+  /** sets `grid-column-end` property */
+  gridColumnEnd?: Property.GridColumnEnd;
+  /** sets `grid-row-start` property */
+  gridRowStart?: Property.GridRowStart;
+  /** sets `grid-row-end` property */
+  gridRowEnd?: Property.GridRowEnd;
+  /** sets `grid-column` property */
+  gridColumn?: Property.GridColumn;
+  /** sets `grid-row` property */
+  gridRow?: Property.GridRow;
+  /** sets `grid-area` property */
+  gridArea?: Property.GridArea;
+  /** sets `justify-self` property */
+  justifySelf?: Property.JustifySelf;
+  /** sets `align-self` property */
+  alignSelf?: Property.AlignSelf;
+  /** sets `place-self` property */
+  placeSelf?: Property.PlaceSelf;
+};
+
+/** style props to for grid item properties */
+const gridItemProps = {
+  //Child Props
+  gridColumnStart: 'gridColumnStart',
+  gridColumnEnd: 'gridColumnEnd',
+  gridRowStart: 'gridRowStart',
+  gridRowEnd: 'gridRowEnd',
+  gridColumn: 'gridColumn',
+  gridRow: 'gridRow',
+  gridArea: 'gridArea',
+  justifySelf: 'justifySelf',
+  alignSelf: 'alignSelf',
+  placeSelf: 'placeSelf',
+};
+
+/**
+ * A style prop function that takes component props and returns grid styles.
+ * If no `GridItemStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `grid item` with low-level, styled components
+ * const GridItemExample = () => (
+ *   <Grid.Item gridRowStart="1" justifySelf="center" gridArea="Card">
+ *     Hello, Grid Item!
+ *   </Grid.Item>
+ * );
+ *
+ */
+
+export function gridItem<P extends GridItemStyleProps>(props: P) {
+  const styles = {};
+  for (const key in props) {
+    if (key in gridItemProps) {
+      const attr = gridItemProps[key as keyof GridItemStyleProps];
+      const value = props[key];
+      // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+      styles[attr] = value;
+    }
+  }
+  return styles;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "8.0.0-alpha.145-next.1+6fb6abb4",
+  "version": "8.0.0-alpha.150-next.2+b0c3f340",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,9 +49,9 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^8.0.0-alpha.145-next.1+6fb6abb4",
-    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.145-next.1+6fb6abb4",
-    "@workday/canvas-kit-preview-react": "^8.0.0-alpha.145-next.1+6fb6abb4",
+    "@workday/canvas-kit-labs-react": "^8.0.0-alpha.150-next.2+b0c3f340",
+    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.150-next.2+b0c3f340",
+    "@workday/canvas-kit-preview-react": "^8.0.0-alpha.150-next.2+b0c3f340",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -70,5 +70,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "6fb6abb422ed1d9b9441caff94f3465e903213b3"
+  "gitHead": "b0c3f340ec8e06d39bed5d992b23a1b36892106f"
 }

package/text-input/index.ts

@@ -1,3 +1,2 @@
-
 export * from './lib/InputIconContainer';
 export * from './lib/TextInput';