@workday/canvas-kit-react 7.0.0-alpha.129-next.3 → 7.0.0-alpha.256-next.2

package/dist/commonjs/common/lib/utils/models.js

@@ -51,6 +51,8 @@ var react_1 = __importDefault(require("react"));
  *     onOpen: 'open'
  *   }
  * })
+ *
+ * @deprecated `createModelHook` uses Template Literal Types to create event map types
  */
 var createEventMap = function () { return function (config) {
     // Instruct Typescript that all valid guards and callbacks exist
@@ -78,6 +80,7 @@ var keys = function (input) { return Object.keys(input); };
  *     }
  *   }
  * })
+ * @deprecated Use `createModelHook` instead
  */
 var useEventMap = function (eventMap, state, config, events) {
     // use refs so we can memoize the returned `events` object

package/dist/commonjs/common/lib/utils/useModalityType.js

@@ -14,23 +14,23 @@ var react_1 = __importDefault(require("react"));
 //   a. if localStorage isn't primed, use clientWidth of the browsers
 //   b. if < 768, default to 'touch'
 //   c. else default to 'mouse'
-var localStorageValue = 'mouse'; //((typeof localStorage !== 'undefined'
-//   ? localStorage.getItem('modality')
-//   : '') ||
-//   (typeof document !== 'undefined'
-//     ? document.documentElement.clientWidth < 768
-//       ? 'touch'
-//       : ''
-//     : '') ||
-//   'mouse') as Modality;
+var localStorageValue = ((typeof localStorage !== 'undefined'
+    ? localStorage.getItem('modality')
+    : '') ||
+    (typeof document !== 'undefined'
+        ? document.documentElement.clientWidth < 768
+            ? 'touch'
+            : ''
+        : '') ||
+    'mouse');
 // Update the `localStorageValue`, but conditionally update localStorage only if the value has
 // changed. This prevents too many calls to `localStorage` which can be costly on spinning disk
 // drives
 var updateLocalStorage = function (value) {
-    // if (localStorageValue !== value) {
-    //   localStorage.setItem('modality', value);
-    // }
-    // localStorageValue = value;
+    if (localStorageValue !== value) {
+        localStorage.setItem('modality', value);
+    }
+    localStorageValue = value;
 };
 /**
  * Uses heuristics to determine if the user is on a touch device, uses a pen, or a mouse. This hook

package/dist/commonjs/dialog/lib/Dialog.d.ts

@@ -88,7 +88,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
 }> & {
-    Body: import("../../common").ElementComponentM<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & React.HTMLAttributes<HTMLDivElement>, {
+    Body: import("../../common").ElementComponentM<"div", import("../..").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").GridItemStyleProps & import("../..").LayoutStyleProps & import("../..").OtherStyleProps & import("../..").PositionStyleProps & import("../..").SpaceStyleProps & import("../..").TextStyleProps & React.HTMLAttributes<HTMLDivElement>, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;

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/form-field/lib/Hint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Hint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/Hint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,SAAS,EAAU,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAG9E,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACtF;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAmBD,cAAM,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;IAC3C,MAAM,CAAC,SAAS,mBAAa;IAEtB,MAAM;CAqBd;AAID,OAAO,EAAC,IAAI,EAAC,CAAC"}
+{"version":3,"file":"Hint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/Hint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,SAAS,EAAE,SAAS,EAAS,MAAM,kCAAkC,CAAC;AAI9E,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACtF;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAMD,cAAM,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;IAC3C,MAAM,CAAC,SAAS,mBAAa;IAEtB,MAAM;CAsBd;AAID,OAAO,EAAC,IAAI,EAAC,CAAC"}

package/dist/commonjs/form-field/lib/Hint.js

@@ -47,16 +47,8 @@ exports.Hint = void 0;
 var React = __importStar(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var Label = common_1.styled('span')(tokens_1.type.levels.subtext.medium, {
-    fontWeight: tokens_1.type.properties.fontWeights.medium,
-}, function (_a) {
-    var error = _a.error, theme = _a.theme;
-    return error === common_1.ErrorType.Error && { color: theme.canvas.palette.error.main };
-});
-var Message = common_1.styled('p')(tokens_1.type.levels.subtext.medium, {
-    margin: tokens_1.space.xxs + " 0 0",
-    width: '100%',
-}, function (_a) {
+var text_1 = require("@workday/canvas-kit-react/text");
+var Message = common_1.styled(text_1.Subtext)(function (_a) {
     var error = _a.error, theme = _a.theme;
     return error === common_1.ErrorType.Error && { color: theme.canvas.palette.error.main };
 });
@@ -77,10 +69,10 @@ var Hint = /** @class */ (function (_super) {
                 break;
             default:
         }
-        return (React.createElement(Message, __assign({}, this.props),
-            typeof error !== 'undefined' && hintLabel && React.createElement(Label, { error: error },
+        return (React.createElement(Message, __assign({ size: "medium", margin: tokens_1.space.xxs + " 0 0", width: "100%" }, this.props),
+            typeof error !== 'undefined' && hintLabel && (React.createElement(text_1.Text, { fontWeight: "medium" },
                 hintLabel,
-                ": "),
+                ": ")),
             children));
     };
     Hint.ErrorType = common_1.ErrorType;

package/dist/commonjs/form-field/lib/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,sBAAsB,EAAE,8BAA8B,EAAC,MAAM,SAAS,CAAC;AAE/E,MAAM,WAAW,UAAW,SAAQ,8BAA8B;IAChE;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAuDD,cAAM,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACtE,MAAM,CAAC,QAAQ,gCAA0B;IAElC,MAAM;CA8Bd;AAID,OAAO,EAAC,KAAK,EAAC,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,sBAAsB,EAAE,8BAA8B,EAAC,MAAM,SAAS,CAAC;AAE/E,MAAM,WAAW,UAAW,SAAQ,8BAA8B;IAChE;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAsDD,cAAM,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACtE,MAAM,CAAC,QAAQ,gCAA0B;IAElC,MAAM;CA8Bd;AAID,OAAO,EAAC,KAAK,EAAC,CAAC"}

package/dist/commonjs/form-field/lib/Label.js

@@ -96,8 +96,6 @@ var RequiredAstrisk = common_1.styled('abbr')({
     textDecoration: 'unset',
 });
 // Used inside the fieldset component instead of a label for accessible radio groups.
-// Extra `width: 100%` style is to help IE11 wrap text properly in a top-positioned
-// FormField's legend element.
 var LegendComponent = common_1.styled('legend').apply(void 0, __spreadArrays(labelStyles, [function (_a) {
         var labelPosition = _a.labelPosition;
         if (labelPosition === Label.Position.Top) {

package/dist/commonjs/icon/lib/SystemIcon.d.ts

@@ -39,7 +39,7 @@ export interface SystemIconStyles {
      */
     fillHover?: string;
 }
-export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src' | 'color' | 'type' | 'background'> {
+export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src' | 'color' | 'fill' | 'type' | 'background'> {
     /**
      * The icon to display from `@workday/canvas-system-icons-web`.
      */

package/dist/commonjs/icon/lib/SystemIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SystemIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAGvC,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAAC;IAC1D;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAEH,eAAO,MAAM,UAAU,kEA4CrB,CAAC"}
+{"version":3,"file":"SystemIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAGvC,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC;IACnE;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAEH,eAAO,MAAM,UAAU,kEA4CrB,CAAC"}

package/dist/commonjs/index.d.ts

@@ -2,6 +2,7 @@ export * from './action-bar';
 export * from './avatar';
 export * from './badge';
 export * from './banner';
+export * from './breadcrumbs';
 export * from './button';
 export * from './card';
 export * from './checkbox';
@@ -13,7 +14,7 @@ export * from './disclosure';
 export * from './form-field';
 export * from './icon';
 export * from './layout';
-export * from './loading-animation';
+export * from './loading-dots';
 export * from './menu';
 export * from './modal';
 export * from './pagination';
@@ -27,6 +28,8 @@ export * from './status-indicator';
 export * from './switch';
 export * from './table';
 export * from './tabs';
+export * from './testing';
+export * from './text';
 export * from './text-area';
 export * from './text-input';
 export * from './toast';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}

package/dist/commonjs/index.js

@@ -14,6 +14,7 @@ __exportStar(require("./action-bar"), exports);
 __exportStar(require("./avatar"), exports);
 __exportStar(require("./badge"), exports);
 __exportStar(require("./banner"), exports);
+__exportStar(require("./breadcrumbs"), exports);
 __exportStar(require("./button"), exports);
 __exportStar(require("./card"), exports);
 __exportStar(require("./checkbox"), exports);
@@ -25,7 +26,7 @@ __exportStar(require("./disclosure"), exports);
 __exportStar(require("./form-field"), exports);
 __exportStar(require("./icon"), exports);
 __exportStar(require("./layout"), exports);
-__exportStar(require("./loading-animation"), exports);
+__exportStar(require("./loading-dots"), exports);
 __exportStar(require("./menu"), exports);
 __exportStar(require("./modal"), exports);
 __exportStar(require("./pagination"), exports);
@@ -39,6 +40,8 @@ __exportStar(require("./status-indicator"), exports);
 __exportStar(require("./switch"), exports);
 __exportStar(require("./table"), exports);
 __exportStar(require("./tabs"), exports);
+__exportStar(require("./testing"), exports);
+__exportStar(require("./text"), exports);
 __exportStar(require("./text-area"), exports);
 __exportStar(require("./text-input"), exports);
 __exportStar(require("./toast"), exports);

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

@@ -1,16 +1,26 @@
-import { Layout } from './lib/Layout';
-import { Column } from './lib/Column';
-export { Layout, Column };
+import { DeprecatedLayout } from './lib/Layout';
+import { DeprecatedColumn } from './lib/Column';
+export { DeprecatedLayout, DeprecatedColumn };
 export * from './lib/Box';
+export * from './lib/utils/background';
 export * from './lib/utils/border';
 export * from './lib/utils/color';
-export { DepthStyleProps } from './lib/utils/depth';
+export { DepthStyleProps, depthStyleFnConfigs } from './lib/utils/depth';
+export * from './lib/utils/flex';
 export * from './lib/utils/flexItem';
+export * from './lib/utils/grid';
+export * from './lib/utils/gridItem';
 export * from './lib/utils/layout';
+export * from './lib/utils/other';
 export * from './lib/utils/position';
-export { SpaceStyleProps } from './lib/utils/space';
+export { SpaceStyleProps, spaceStyleFnConfigs } from './lib/utils/space';
+export { AllStyleProps, CommonStyleProps } from './lib/utils/styleProps';
+export * from './lib/utils/text';
 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 { GridItemStyleProps, gridItemStyleFnConfigs } from './lib/utils/gridItem';
 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,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAC,CAAC;AAC7C,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACvE,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAC,aAAa,EAAE,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACvE,cAAc,kBAAkB,CAAC;AACjC,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,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACvF,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/commonjs/layout/index.js

@@ -10,16 +10,27 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Column = exports.Layout = void 0;
+exports.spaceStyleFnConfigs = exports.depthStyleFnConfigs = exports.DeprecatedColumn = exports.DeprecatedLayout = void 0;
 var Layout_1 = require("./lib/Layout");
-Object.defineProperty(exports, "Layout", { enumerable: true, get: function () { return Layout_1.Layout; } });
+Object.defineProperty(exports, "DeprecatedLayout", { enumerable: true, get: function () { return Layout_1.DeprecatedLayout; } });
 var Column_1 = require("./lib/Column");
-Object.defineProperty(exports, "Column", { enumerable: true, get: function () { return Column_1.Column; } });
+Object.defineProperty(exports, "DeprecatedColumn", { enumerable: true, get: function () { return Column_1.DeprecatedColumn; } });
 __exportStar(require("./lib/Box"), exports);
+__exportStar(require("./lib/utils/background"), exports);
 __exportStar(require("./lib/utils/border"), exports);
 __exportStar(require("./lib/utils/color"), exports);
+var depth_1 = require("./lib/utils/depth");
+Object.defineProperty(exports, "depthStyleFnConfigs", { enumerable: true, get: function () { return depth_1.depthStyleFnConfigs; } });
+__exportStar(require("./lib/utils/flex"), exports);
 __exportStar(require("./lib/utils/flexItem"), exports);
+__exportStar(require("./lib/utils/grid"), exports);
+__exportStar(require("./lib/utils/gridItem"), exports);
 __exportStar(require("./lib/utils/layout"), exports);
+__exportStar(require("./lib/utils/other"), exports);
 __exportStar(require("./lib/utils/position"), exports);
+var space_1 = require("./lib/utils/space");
+Object.defineProperty(exports, "spaceStyleFnConfigs", { enumerable: true, get: function () { return space_1.spaceStyleFnConfigs; } });
+__exportStar(require("./lib/utils/text"), exports);
 __exportStar(require("./lib/Flex"), exports);
+__exportStar(require("./lib/Grid"), exports);
 __exportStar(require("./lib/Stack"), exports);

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

@@ -1,19 +1,30 @@
 import * as React from 'react';
-import { BorderStyleProps } from './utils/border';
-import { ColorStyleProps } from './utils/color';
-import { DepthStyleProps } from './utils/depth';
-import { FlexItemStyleProps } from './utils/flexItem';
-import { LayoutStyleProps } from './utils/layout';
-import { OtherStyleProps } from './utils/other';
-import { PositionStyleProps } from './utils/position';
-import { SpaceStyleProps } from './utils/space';
-export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & OtherStyleProps & PositionStyleProps & SpaceStyleProps & {
+import { CommonStyleProps } from './utils/styleProps';
+/**
+ * Box Props
+ * ---
+ * Common style props + children
+ *
+ * - background
+ * - border
+ * - color
+ * - depth
+ * - flexItem
+ * - gridItem
+ * - layout
+ * - other
+ * - position
+ * - space
+ * - text
+ */
+export declare type BoxProps = CommonStyleProps & {
     children?: React.ReactNode;
 };
 /**
  * A function that allows us to call Box styles on an element and reduce the amount of elements in the React Dom tree.
  * Instead of using the `as` in a styled function, you can just call this instead to pass those props to the styled element
  * @example
+ * ```
  * import { boxStyleFn } from '@workday/canvas-kit-react/layout';
  * const StyledHeader = styled('h1')(
  *  boxStyleFn,
@@ -22,9 +33,10 @@ export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStylePr
  *  }
  * )
  *
- * ....
+ * ...
  *
  * <StyledHeader color='red'>Hello World</StyledHeader>
+ * ```
  */
 export declare const boxStyleFn: <P extends BoxProps>(props: P) => {};
 /**
@@ -44,5 +56,5 @@ export declare const boxStyleFn: <P extends BoxProps>(props: P) => {};
  * );
  *
  */
-export declare const Box: import("../../common").ElementComponent<"div", import("./utils/border").BorderShorthandStyleProps & import("./utils/border").BorderColorStyleProps & import("./utils/border").BorderRadiusStyleProps & import("./utils/border").BorderLineStyleProps & import("./utils/border").BorderWidthStyleProps & import("./utils/border").BorderLogicalStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & OtherStyleProps & import("./utils/position").PositionStandardProps & import("./utils/position").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps>;
+export declare const Box: import("../../common").ElementComponent<"div", CommonStyleProps>;
 //# sourceMappingURL=Box.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,QAAQ,GAAG,gBAAgB,GACrC,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,gBAAgB,GAChB,eAAe,GACf,kBAAkB,GAClB,eAAe,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAQJ;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,sCAsBtB,CAAC;AA+BF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,unBAad,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AAEpD;;;;;;;;;;;;;;;;GAgBG;AACH,oBAAY,QAAQ,GAAG,gBAAgB,GAAG;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA6BF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,UAAU,sCA0BtB,CAAC;AAQF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,kEAad,CAAC"}

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

@@ -50,15 +50,39 @@ var styled_1 = __importDefault(require("@emotion/styled"));
 var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 var common_1 = require("@workday/canvas-kit-react/common");
 // style props
+var background_1 = require("./utils/background");
 var border_1 = require("./utils/border");
 var color_1 = require("./utils/color");
 var depth_1 = require("./utils/depth");
 var flexItem_1 = require("./utils/flexItem");
+var gridItem_1 = require("./utils/gridItem");
 var layout_1 = require("./utils/layout");
 var other_1 = require("./utils/other");
 var position_1 = require("./utils/position");
 var space_1 = require("./utils/space");
-var omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border', 'background'];
+var text_1 = require("./utils/text");
+var omittedProps = [
+    'display',
+    'color',
+    'height',
+    'overflow',
+    'width',
+    'border',
+    'background',
+    'fontSize',
+    'fontWeight',
+    'fontFamily',
+    'letterSpacing',
+    'lineHeight',
+    'textAlign',
+    'opacity',
+    'textDecoration',
+    'textOverflow',
+    'textTransform',
+    'textShadow',
+    'whiteSpace',
+    'wordBreak',
+];
 var shouldForwardProp = function (prop) {
     return is_prop_valid_1.default(prop) && !omittedProps.includes(prop);
 };
@@ -66,6 +90,7 @@ var shouldForwardProp = function (prop) {
  * A function that allows us to call Box styles on an element and reduce the amount of elements in the React Dom tree.
  * Instead of using the `as` in a styled function, you can just call this instead to pass those props to the styled element
  * @example
+ * ```
  * import { boxStyleFn } from '@workday/canvas-kit-react/layout';
  * const StyledHeader = styled('h1')(
  *  boxStyleFn,
@@ -74,22 +99,27 @@ var shouldForwardProp = function (prop) {
  *  }
  * )
  *
- * ....
+ * ...
  *
  * <StyledHeader color='red'>Hello World</StyledHeader>
+ * ```
  */
 var boxStyleFn = function (props) {
     return [
         {
             boxSizing: 'border-box',
         },
+        background_1.background,
         border_1.border,
         color_1.color,
         depth_1.depth,
         flexItem_1.flexItem,
+        gridItem_1.gridItem,
         layout_1.layout,
+        other_1.other,
         position_1.position,
         space_1.space,
+        text_1.text,
     ].reduce(function (result, style) {
         // @ts-ignore
         var temp = typeof style === 'function' ? style(props) : style;
@@ -103,13 +133,9 @@ var boxStyleFn = function (props) {
 };
 exports.boxStyleFn = boxStyleFn;
 // Meant to be used with elements. The `shouldForwardProps` will remove all style props
-var StyledBoxElement = styled_1.default('div', { shouldForwardProp: shouldForwardProp })({
-    boxSizing: 'border-box',
-}, border_1.border, color_1.color, depth_1.depth, flexItem_1.flexItem, layout_1.layout, position_1.position, space_1.space);
+var StyledBoxElement = styled_1.default('div', { shouldForwardProp: shouldForwardProp })(exports.boxStyleFn);
 // Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
-var StyledBoxComponent = styled_1.default('div')({
-    boxSizing: 'border-box',
-}, border_1.border, color_1.color, depth_1.depth, flexItem_1.flexItem, layout_1.layout, other_1.other, position_1.position, space_1.space);
+var StyledBoxComponent = styled_1.default('div')(exports.boxStyleFn);
 /**
  * `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
  * It is highly flexible, and its primary purpose is to build other components.

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

@@ -1,11 +1,19 @@
 import * as React from 'react';
-export interface ColumnProps {
+/**
+ * ### Deprecated Layout Column Props
+ *
+ * As of Canvas Kit v8, Layout is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+export interface DeprecatedColumnProps {
     /**
-     * The children of the Column (cannot be empty).
+     * The children of the DeprecatedColumn (cannot be empty).
      */
     children?: React.ReactNode;
     /**
-     * The left and right padding of the Column (inherits from Layout prop).
+     * The left and right padding of the DeprecatedColumn (inherits from Layout prop).
      * @default 12
      */
     spacing?: number;
@@ -18,7 +26,8 @@ export interface ColumnProps {
      */
     width?: number | string;
 }
-export declare class Column extends React.Component<ColumnProps> {
+export declare class DeprecatedColumn extends React.Component<DeprecatedColumnProps> {
+    componentDidMount(): void;
     render(): JSX.Element;
 }
 //# sourceMappingURL=Column.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Column.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC3D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAsCD,qBAAa,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;IAC/C,MAAM;CASd"}
+{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Column.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;GAOG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC3D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAsCD,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,qBAAqB,CAAC;IAC1E,iBAAiB;IASV,MAAM;CASd"}

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

@@ -57,7 +57,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Column = void 0;
+exports.DeprecatedColumn = void 0;
 var React = __importStar(require("react"));
 var styled_1 = __importDefault(require("@emotion/styled"));
 var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
@@ -92,15 +92,18 @@ var ColumnContainer = styled_1.default('div', {
     }
     return { flex: 1 };
 });
-var Column = /** @class */ (function (_super) {
-    __extends(Column, _super);
-    function Column() {
+var DeprecatedColumn = /** @class */ (function (_super) {
+    __extends(DeprecatedColumn, _super);
+    function DeprecatedColumn() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    Column.prototype.render = function () {
+    DeprecatedColumn.prototype.componentDidMount = function () {
+        console.warn("This component is being deprecated and will be removed in Canvas Kit V9.\n\n      For more information, please see the V8 upgrade guide:\n\n      https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page\n      ");
+    };
+    DeprecatedColumn.prototype.render = function () {
         var _a = this.props, children = _a.children, spacing = _a.spacing, columns = _a.columns, width = _a.width, elemProps = __rest(_a, ["children", "spacing", "columns", "width"]);
         return (React.createElement(ColumnContainer, __assign({ spacing: spacing, columns: columns, width: width }, elemProps), children));
     };
-    return Column;
+    return DeprecatedColumn;
 }(React.Component));
-exports.Column = Column;
+exports.DeprecatedColumn = DeprecatedColumn;

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

@@ -1,12 +1,13 @@
 import { BoxProps } from './Box';
 import { FlexStyleProps } from './utils/flex';
-export declare type FlexProps = BoxProps & FlexStyleProps;
+export declare type FlexProps = Omit<BoxProps, 'display'> & FlexStyleProps;
 /**
  * `Flex` is a low-level layout component that provides a common, ergonomic API for applying CSS flexbox styles.
  * It is highly flexible, and can be used on its own or to build other components.
  * `Flex` is built on top of `Box` and has access to all `BoxProps`.
  *
  * @example
+ * ```tsx
  * import { Flex, FlexProps } from '@workday/canvas-kit-react/layout';
  *
  * interface CardProps extends FlexProps {
@@ -20,7 +21,9 @@ export declare type FlexProps = BoxProps & FlexStyleProps;
  *     <p>This card uses flexbox to set its layout.</p>
  *   </Flex>
  * );
- *
+ * ```
  */
-export declare const Flex: 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 & FlexStyleProps>;
+export declare const Flex: import("../../common").ElementComponent<"div", FlexProps> & {
+    Item: import("../../common").ElementComponent<"div", import("..").CommonStyleProps>;
+};
 //# sourceMappingURL=Flex.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Flex.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;AASlD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,IAAI,gnBASf,CAAC"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Flex.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,cAAc,CAAC;AASnE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,IAAI;;CAYf,CAAC"}

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

@@ -59,6 +59,7 @@ var StyledFlex = styled_1.default(Box_1.Box)({
  * `Flex` is built on top of `Box` and has access to all `BoxProps`.
  *
  * @example
+ * ```tsx
  * import { Flex, FlexProps } from '@workday/canvas-kit-react/layout';
  *
  * interface CardProps extends FlexProps {
@@ -72,7 +73,7 @@ var StyledFlex = styled_1.default(Box_1.Box)({
  *     <p>This card uses flexbox to set its layout.</p>
  *   </Flex>
  * );
- *
+ * ```
  */
 exports.Flex = common_1.createComponent('div')({
     displayName: 'Flex',
@@ -80,4 +81,7 @@ exports.Flex = common_1.createComponent('div')({
         var children = _a.children, elemProps = __rest(_a, ["children"]);
         return (React.createElement(StyledFlex, __assign({ as: Element, ref: ref }, elemProps), children));
     },
+    subComponents: {
+        Item: Box_1.Box,
+    },
 });

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

@@ -0,0 +1,51 @@
+import { BoxProps } from './Box';
+import { GridStyleProps } from './utils/grid';
+export declare type GridProps = Omit<BoxProps, 'display'> & GridStyleProps;
+export declare type GridItemProps = BoxProps;
+/**
+ * `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.
+ * `Grid` is built on top of `Box` and has access to all `BoxProps`.
+ *
+ * @example
+ * ```tsx
+ * import { Grid } from '@workday/canvas-kit-react/layout';
+ *
+ * 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", GridProps> & {
+    /**
+     * `<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("..").CommonStyleProps>;
+};
+//# sourceMappingURL=Grid.d.ts.map