@workday/canvas-kit-react 7.0.0-alpha.0-next.5 → 7.0.0-alpha.78-next.6

package/dist/commonjs/icon/lib/SystemIconCircle.js

@@ -1,17 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -100,19 +87,14 @@ var Container = styled_1.default('div', {
         height: size,
     });
 });
-var SystemIconCircle = /** @class */ (function (_super) {
-    __extends(SystemIconCircle, _super);
-    function SystemIconCircle() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SystemIconCircle.prototype.render = function () {
-        var _a = this.props, _b = _a.background, background = _b === void 0 ? tokens_1.colors.soap200 : _b, _c = _a.size, size = _c === void 0 ? SystemIconCircleSize.l : _c, icon = _a.icon, iconRef = _a.iconRef, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["background", "size", "icon", "iconRef", "shouldMirror"]);
+var SystemIconCircle = common_1.createComponent('span')({
+    displayName: 'SystemIconCircle',
+    Component: function (_a, ref, Element) {
+        var _b = _a.background, background = _b === void 0 ? tokens_1.colors.soap200 : _b, _c = _a.size, size = _c === void 0 ? SystemIconCircleSize.l : _c, icon = _a.icon, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["background", "size", "icon", "shouldMirror"]);
         var iconColor = common_1.pickForegroundColor(background, 'rgba(0,0,0,0.65)', tokens_1.colors.frenchVanilla100);
         var iconSize = size * 0.625;
         return (React.createElement(Container, __assign({ background: background, size: size }, elemProps),
-            React.createElement(SystemIcon_1.default, { icon: icon, color: iconColor, colorHover: iconColor, size: iconSize, iconRef: iconRef, shouldMirror: shouldMirror })));
-    };
-    SystemIconCircle.Size = SystemIconCircleSize;
-    return SystemIconCircle;
-}(React.Component));
+            React.createElement(SystemIcon_1.default, { icon: icon, color: iconColor, colorHover: iconColor, as: Element, size: iconSize, ref: ref, shouldMirror: shouldMirror })));
+    },
+});
 exports.default = SystemIconCircle;

package/dist/commonjs/index.d.ts

@@ -7,7 +7,6 @@ export * from './card';
 export * from './checkbox';
 export * from './color-picker';
 export * from './common';
-export * from './cookie-banner';
 export * from './dialog';
 export * from './disclosure';
 export * from './form-field';
@@ -15,7 +14,6 @@ export * from './icon';
 export * from './layout';
 export * from './loading-animation';
 export * from './modal';
-export * from './page-header';
 export * from './pagination';
 export * from './popup';
 export * from './radio';

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,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,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,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,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,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,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,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"}

package/dist/commonjs/index.js

@@ -19,7 +19,6 @@ __exportStar(require("./card"), exports);
 __exportStar(require("./checkbox"), exports);
 __exportStar(require("./color-picker"), exports);
 __exportStar(require("./common"), exports);
-__exportStar(require("./cookie-banner"), exports);
 __exportStar(require("./dialog"), exports);
 __exportStar(require("./disclosure"), exports);
 __exportStar(require("./form-field"), exports);
@@ -27,7 +26,6 @@ __exportStar(require("./icon"), exports);
 __exportStar(require("./layout"), exports);
 __exportStar(require("./loading-animation"), exports);
 __exportStar(require("./modal"), exports);
-__exportStar(require("./page-header"), exports);
 __exportStar(require("./pagination"), exports);
 __exportStar(require("./popup"), exports);
 __exportStar(require("./radio"), exports);

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

@@ -1,6 +1,16 @@
 import Layout from './lib/Layout';
 import Column from './lib/Column';
-export default Layout;
 export { Layout, Column };
-export * from './lib/Layout';
+export * from './lib/Box';
+export * from './lib/utils/border';
+export * from './lib/utils/color';
+export { DepthStyleProps } from './lib/utils/depth';
+export * from './lib/utils/flexItem';
+export * from './lib/utils/layout';
+export * from './lib/utils/position';
+export { SpaceStyleProps } from './lib/utils/space';
+export * from './lib/Flex';
+export * from './lib/Stack';
+export type { FlexStyleProps } from './lib/utils/flex';
+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,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,eAAe,MAAM,CAAC;AACtB,OAAO,EAAC,MAAM,EAAE,MAAM,EAAC,CAAC;AACxB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,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"}

package/dist/commonjs/layout/index.js

@@ -18,5 +18,11 @@ var Layout_1 = __importDefault(require("./lib/Layout"));
 exports.Layout = Layout_1.default;
 var Column_1 = __importDefault(require("./lib/Column"));
 exports.Column = Column_1.default;
-exports.default = Layout_1.default;
-__exportStar(require("./lib/Layout"), exports);
+__exportStar(require("./lib/Box"), exports);
+__exportStar(require("./lib/utils/border"), exports);
+__exportStar(require("./lib/utils/color"), exports);
+__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/Stack"), exports);

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

@@ -0,0 +1,48 @@
+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 & {
+    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,
+ *  {
+ *    fontWeight: 400,
+ *  }
+ * )
+ *
+ * ....
+ *
+ * <StyledHeader color='red'>Hello World</StyledHeader>
+ */
+export declare const boxStyleFn: <P extends BoxProps>(props: P) => {};
+/**
+ * `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.
+ *
+ * @example
+ * import { Box, BoxProps } from '@workday/canvas-kit-react/layout';
+ *
+ * interface CardProps extends BoxProps {
+ *   // card-specific props
+ * }
+ *
+ * // `Card`'s default values are set using `BoxProps`
+ * const Card = (props: CardProps) => (
+ *   <Box depth={2} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
+ * );
+ *
+ */
+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>;
+//# sourceMappingURL=Box.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,139 @@
+"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.Box = exports.boxStyleFn = 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"));
+var common_1 = require("@workday/canvas-kit-react/common");
+// style props
+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 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 shouldForwardProp = function (prop) {
+    return is_prop_valid_1.default(prop) && !omittedProps.includes(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,
+ *  {
+ *    fontWeight: 400,
+ *  }
+ * )
+ *
+ * ....
+ *
+ * <StyledHeader color='red'>Hello World</StyledHeader>
+ */
+var boxStyleFn = function (props) {
+    return [
+        {
+            boxSizing: 'border-box',
+        },
+        border_1.border,
+        color_1.color,
+        depth_1.depth,
+        flexItem_1.flexItem,
+        layout_1.layout,
+        position_1.position,
+        space_1.space,
+    ].reduce(function (result, style) {
+        // @ts-ignore
+        var temp = typeof style === 'function' ? style(props) : style;
+        // eslint-disable-next-line guard-for-in
+        for (var key in temp) {
+            // @ts-ignore
+            result[key] = temp[key];
+        }
+        return result;
+    }, {});
+};
+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);
+// 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);
+/**
+ * `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.
+ *
+ * @example
+ * import { Box, BoxProps } from '@workday/canvas-kit-react/layout';
+ *
+ * interface CardProps extends BoxProps {
+ *   // card-specific props
+ * }
+ *
+ * // `Card`'s default values are set using `BoxProps`
+ * const Card = (props: CardProps) => (
+ *   <Box depth={2} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
+ * );
+ *
+ */
+exports.Box = common_1.createComponent('div')({
+    displayName: 'Box',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        var BoxComponent = common_1.useConstant(function () {
+            return typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent;
+        });
+        return (React.createElement(BoxComponent, __assign({ as: Element, ref: ref }, elemProps), children));
+    },
+});

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

@@ -0,0 +1,26 @@
+import { BoxProps } from '@workday/canvas-kit-react/layout';
+import { FlexStyleProps } from './utils/flex';
+export declare type FlexProps = BoxProps & 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
+ * import { Flex, FlexProps } from '@workday/canvas-kit-react/layout';
+ *
+ * interface CardProps extends FlexProps {
+ *   // card-specific props
+ * }
+ *
+ * // `Card`'s default values are set using `FlexProps`
+ * const Card = (props: CardProps) => (
+ *   <Flex flexDirection="column" alignItems="flex-start" depth={2} space="m" {...props}>
+ *     <h1>Hello, Card!</h1>
+ *     <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>;
+//# sourceMappingURL=Flex.d.ts.map

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

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

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

@@ -0,0 +1,83 @@
+"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.Flex = void 0;
+var React = __importStar(require("react"));
+var styled_1 = __importDefault(require("@emotion/styled"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var layout_1 = require("@workday/canvas-kit-react/layout");
+var flex_1 = require("./utils/flex");
+var StyledFlex = styled_1.default(layout_1.Box)({
+    display: 'flex',
+}, flex_1.flex);
+/**
+ * `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
+ * import { Flex, FlexProps } from '@workday/canvas-kit-react/layout';
+ *
+ * interface CardProps extends FlexProps {
+ *   // card-specific props
+ * }
+ *
+ * // `Card`'s default values are set using `FlexProps`
+ * const Card = (props: CardProps) => (
+ *   <Flex flexDirection="column" alignItems="flex-start" depth={2} space="m" {...props}>
+ *     <h1>Hello, Card!</h1>
+ *     <p>This card uses flexbox to set its layout.</p>
+ *   </Flex>
+ * );
+ *
+ */
+exports.Flex = common_1.createComponent('div')({
+    displayName: 'Flex',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(StyledFlex, __assign({ as: Element, ref: ref }, elemProps), children));
+    },
+});

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

@@ -0,0 +1,27 @@
+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 interface HStackProps extends StackProps {
+    /**
+     * sets the direction for the stack
+     * @default "row"
+     * */
+    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>;
+};
+export interface VStackProps extends StackProps {
+    /**
+     * sets the direction for the stack
+     * @default "column"
+     * */
+    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>;
+};
+//# sourceMappingURL=Stack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Stack.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;AA2BrD,eAAO,MAAM,KAAK;;CAehB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C;;;SAGK;IACL,aAAa,CAAC,EAAE,KAAK,GAAG,aAAa,CAAC;CACvC;AAED,eAAO,MAAM,MAAM;;CAYjB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C;;;SAGK;IACL,aAAa,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC;CAC7C;AAED,eAAO,MAAM,MAAM;;CAYjB,CAAC"}

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

@@ -0,0 +1,99 @@
+"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.VStack = exports.HStack = exports.Stack = void 0;
+var React = __importStar(require("react"));
+var styled_1 = __importDefault(require("@emotion/styled"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var layout_1 = require("@workday/canvas-kit-react/layout");
+var Flex_1 = require("./Flex");
+var getValidChildren_1 = require("./utils/getValidChildren");
+var stack_1 = require("./utils/stack");
+var StackItem = common_1.createComponent('div')({
+    displayName: 'Stack.Item',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(layout_1.Box, __assign({ as: Element, ref: ref, display: "inline-block", flex: "0 0 auto", minWidth: 0 }, elemProps), children));
+    },
+});
+// prevent `spacing` prop from being passed through to the HTML element
+var shouldForwardProp = function (prop) {
+    return prop !== 'spacing';
+};
+var StyledStack = styled_1.default(Flex_1.Flex, { shouldForwardProp: shouldForwardProp })(stack_1.stack);
+exports.Stack = common_1.createComponent('div')({
+    displayName: 'Stack',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, _b = _a.shouldWrapChildren, shouldWrapChildren = _b === void 0 ? false : _b, elemProps = __rest(_a, ["children", "shouldWrapChildren"]);
+        var validChildren = getValidChildren_1.getValidChildren(children);
+        return (React.createElement(StyledStack, __assign({ as: Element, ref: ref, flexDirection: "row" }, elemProps), shouldWrapChildren
+            ? validChildren.map(function (child) { return React.createElement(StackItem, null, child); })
+            : validChildren));
+    },
+    subComponents: {
+        Item: StackItem,
+    },
+});
+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));
+    },
+    subComponents: {
+        Item: StackItem,
+    },
+});
+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));
+    },
+    subComponents: {
+        Item: StackItem,
+    },
+});