@workday/canvas-kit-react 8.0.0 → 8.0.1

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 default 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,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;IACvD,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,6 +57,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+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"));
@@ -91,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.default = 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

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;AAElD,oBAAY,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,cAAc,CAAC;AACnE,oBAAY,aAAa,GAAG,QAAQ,CAAC;AAoBrC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,IAAI;IAUb;;;;;;;;;;;;;;;;;;;;OAoBG;;CAIL,CAAC"}

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

@@ -0,0 +1,115 @@
+"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 StyledGrid = styled_1.default(Box_1.Box)({
+    display: 'grid',
+}, grid_1.grid);
+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(Box_1.Box, __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.
+ * `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>
+ * );
+ *```
+ */
+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/Layout.d.ts

@@ -1,29 +1,45 @@
 import * as React from 'react';
-import Column, { ColumnProps } from './Column';
-export interface LayoutProps {
+import { DeprecatedColumn, DeprecatedColumnProps } from './Column';
+/**
+ * ### Deprecated Layout 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 DeprecatedLayoutProps {
     /**
-     * The children of the Layout (cannot be empty).
+     * The children of the DeprecatedLayout (cannot be empty).
      */
-    children: React.ReactElement<ColumnProps>[] | React.ReactNode;
+    children: React.ReactElement<DeprecatedColumnProps>[] | React.ReactNode;
     /**
-     * The spacing of the Layout children.
+     * The spacing of the DeprecatedLayout children.
      */
     spacing?: number;
     /**
-     * The padding of the Layout's outside container.
+     * The padding of the DeprecatedLayout's outside container.
      * @default 12
      */
     gutter?: number | string;
     /**
-     * If true, set the max width of the Layout container to `1280px`.
+     * If true, set the max width of the DeprecatedLayout container to `1280px`.
      * @default false
      */
     capWidth?: boolean;
 }
-declare class Layout extends React.Component<LayoutProps> {
-    static Column: typeof Column;
+/**
+ * ### Deprecated Layout
+ *
+ * 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 declare class DeprecatedLayout extends React.Component<DeprecatedLayoutProps> {
+    componentDidMount(): void;
+    static Column: typeof DeprecatedColumn;
     private renderChild;
     render(): JSX.Element;
 }
-export default Layout;
 //# sourceMappingURL=Layout.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,MAAM,EAAE,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AAI7C,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;IAC9D;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkCD,cAAM,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;IAC/C,OAAc,MAAM,gBAAU;IAE9B,OAAO,CAAC,WAAW,CAgBjB;IAEK,MAAM;CAed;AAID,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,gBAAgB,EAAE,qBAAqB,EAAC,MAAM,UAAU,CAAC;AAIjE;;;;;;;GAOG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,qBAAqB,CAAC,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;IACxE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkCD;;;;;;;GAOG;AACH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,qBAAqB,CAAC;IAC1E,iBAAiB;IASjB,OAAc,MAAM,0BAAoB;IAExC,OAAO,CAAC,WAAW,CAgBjB;IAEK,MAAM;CAed"}

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

@@ -57,10 +57,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeprecatedLayout = void 0;
 var React = __importStar(require("react"));
 var styled_1 = __importDefault(require("@emotion/styled"));
-var Column_1 = __importDefault(require("./Column"));
-var tokens_1 = __importStar(require("@workday/canvas-kit-react/tokens"));
+var Column_1 = require("./Column");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 var LayoutStyles = {
     classname: 'layout',
@@ -88,15 +89,23 @@ var LayoutContainer = styled_1.default('div', {
         margin: '0 auto',
     };
 });
-var Layout = /** @class */ (function (_super) {
-    __extends(Layout, _super);
-    function Layout() {
+/**
+ * ### Deprecated Layout
+ *
+ * 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.
+ */
+var DeprecatedLayout = /** @class */ (function (_super) {
+    __extends(DeprecatedLayout, _super);
+    function DeprecatedLayout() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.renderChild = function (child, spacing) {
             if (!React.isValidElement(child)) {
                 return;
             }
-            if (child.type === Column_1.default) {
+            if (child.type === Column_1.DeprecatedColumn) {
                 var childProps = child.props;
                 if (childProps.spacing || childProps.spacing === 0) {
                     return child;
@@ -107,13 +116,16 @@ var Layout = /** @class */ (function (_super) {
         };
         return _this;
     }
-    Layout.prototype.render = function () {
+    DeprecatedLayout.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      ");
+    };
+    DeprecatedLayout.prototype.render = function () {
         var _this = this;
-        var _a = this.props, _b = _a.gutter, gutter = _b === void 0 ? tokens_1.default.space.xs : _b, _c = _a.spacing, spacing = _c === void 0 ? tokens_1.spaceNumbers.xs : _c, children = _a.children, capWidth = _a.capWidth, elemProps = __rest(_a, ["gutter", "spacing", "children", "capWidth"]);
+        var _a = this.props, _b = _a.gutter, gutter = _b === void 0 ? tokens_1.canvas.space.xs : _b, _c = _a.spacing, spacing = _c === void 0 ? tokens_1.spaceNumbers.xs : _c, children = _a.children, capWidth = _a.capWidth, elemProps = __rest(_a, ["gutter", "spacing", "children", "capWidth"]);
         return (React.createElement(LayoutContainer, __assign({ spacing: spacing, gutter: gutter, capWidth: capWidth }, elemProps), React.Children.map(children, function (child) { return _this.renderChild(child, spacing); })));
     };
-    Layout.Column = Column_1.default;
-    return Layout;
+    DeprecatedLayout.Column = Column_1.DeprecatedColumn;
+    return DeprecatedLayout;
 }(React.Component));
-Layout.Column = Column_1.default;
-exports.default = Layout;
+exports.DeprecatedLayout = DeprecatedLayout;
+DeprecatedLayout.Column = Column_1.DeprecatedColumn;

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

@@ -1,8 +1,8 @@
 import { FlexProps } from './Flex';
 import { StackStyleProps } from './utils/stack';
 export declare type StackProps = FlexProps & StackStyleProps;
-export declare const Stack: 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 & import("..").FlexStyleProps & StackStyleProps> & {
-    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>;
+export declare const Stack: import("../../common").ElementComponent<"div", StackProps> & {
+    Item: import("../../common").ElementComponent<"div", import("..").CommonStyleProps>;
 };
 export interface HStackProps extends StackProps {
     /**
@@ -12,7 +12,7 @@ export interface HStackProps extends StackProps {
     flexDirection?: 'row' | 'row-reverse';
 }
 export declare const HStack: import("../../common").ElementComponent<"div", HStackProps> & {
-    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>;
+    Item: import("../../common").ElementComponent<"div", import("..").CommonStyleProps>;
 };
 export interface VStackProps extends StackProps {
     /**
@@ -22,6 +22,6 @@ export interface VStackProps extends StackProps {
     flexDirection?: 'column' | 'column-reverse';
 }
 export declare const VStack: import("../../common").ElementComponent<"div", VStackProps> & {
-    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>;
+    Item: import("../../common").ElementComponent<"div", import("..").CommonStyleProps>;
 };
 //# sourceMappingURL=Stack.d.ts.map

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/background.d.ts

@@ -0,0 +1,44 @@
+import { Property } from 'csstype';
+import { StyleFnConfig } from './buildStyleFns';
+import { SystemPropValues } from './systemProps';
+/** style props to set CSS background properties */
+export declare type BackgroundStyleProps = {
+    /**
+     * - sets [CSS background property](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
+     * - system tokens: `color`
+     * */
+    background?: SystemPropValues['color'];
+    /** sets [CSS background-attachment property](https://developer.mozilla.org/en-US/docs/Web/CSS/) */
+    backgroundAttachment?: Property.BackgroundAttachment;
+    /**
+     * - sets [CSS background-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
+     * - system tokens: `color`
+     * */
+    backgroundColor?: SystemPropValues['color'];
+    /** sets [CSS background-image property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) */
+    backgroundImage?: Property.BackgroundImage;
+    /** sets [CSS background-position property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) */
+    backgroundPosition?: Property.BackgroundPosition;
+    /** sets [CSS background-repeat property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) */
+    backgroundRepeat?: Property.BackgroundRepeat;
+    /** sets [CSS background-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) */
+    backgroundSize?: Property.BackgroundSize;
+};
+export declare const backgroundStyleFnConfigs: StyleFnConfig[];
+export declare const backgroundFns: import("./buildStyleFns").StyleFns;
+/**
+ * A style prop function that takes component props and returns border styles.
+ * Some props, such as background and backgroundColor, are connected to our design tokens.
+ * If no `BackgroundStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * ```tsx
+ * const BackgroundExample = () => (
+ *   <Box backgroundColor="blueberry500">
+ *     Hello, background styles!
+ *   </Box>
+ * );
+ *```
+ */
+export declare const background: (props: BackgroundStyleProps) => {};
+//# sourceMappingURL=background.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/background.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAkC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAE/C,mDAAmD;AACnD,oBAAY,oBAAoB,GAAG;IACjC;;;SAGK;IACL,UAAU,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvC,mGAAmG;IACnG,oBAAoB,CAAC,EAAE,QAAQ,CAAC,oBAAoB,CAAC;IACrD;;;SAGK;IACL,eAAe,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC5C,8GAA8G;IAC9G,eAAe,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC;IAC3C,oHAAoH;IACpH,kBAAkB,CAAC,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IACjD,gHAAgH;IAChH,gBAAgB,CAAC,EAAE,QAAQ,CAAC,gBAAgB,CAAC;IAC7C,4GAA4G;IAC5G,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,aAAa,EAoCnD,CAAC;AAEF,eAAO,MAAM,aAAa,oCAA0C,CAAC;AACrE;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,qCAAwD,CAAC"}