@workday/canvas-kit-labs-react 6.3.6 → 7.0.0-alpha.0-next.4

package/common/README.md

@@ -31,6 +31,7 @@ together.
 ### Usage
 
 ```tsx
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import {jsx} from '@emotion/core';
 import {ComponentStyles, useThemeRTL} from '@workday/canvas-kit-labs-react/common';
@@ -67,19 +68,23 @@ export const HelloWorld = ({backgroundImagePath}) => {
 
 ## useThemedRing
 
-This is a way to automatically add themed colors to your inputs. This is helpful when showing alerts to users. It supports `error`, `alert`, and `success` states. It will try and use the corresponding `main` colors from your `CanvasThemePalette` unless they do not meet accessibility contrast, in which case the outer ring will use the `darkest` color. This hook will also show a `focusOutline` ring when the input is focused.
-Note: You should not rely on these colors alone to differentiate alerts, but use them in combination with icons or hint text.
+This is a way to automatically add themed colors to your inputs. This is helpful when showing alerts
+to users. It supports `error`, `alert`, and `success` states. It will try and use the corresponding
+`main` colors from your `CanvasThemePalette` unless they do not meet accessibility contrast, in
+which case the outer ring will use the `darkest` color. This hook will also show a `focusOutline`
+ring when the input is focused. Note: You should not rely on these colors alone to differentiate
+alerts, but use them in combination with icons or hint text.
 
 ### Usage
 
 ```tsx
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import {jsx} from '@emotion/core';
 import React from 'react';
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
 
-
 export const MyInput = ({handleChange}) => {
   const [value, setValue] = React.useState('invalid@email');
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -95,4 +100,5 @@ export const MyInput = ({handleChange}) => {
       <TextInput.Hint>Please enter a valid email.</TextInput.Hint>
     </TextInput>
   );
-}
+};
+```

package/common/lib/Box.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 import isPropValid from '@emotion/is-prop-valid';
-import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
+import {createComponent, StyledType, useConstant} from '@workday/canvas-kit-react/common';
 
 // style props
 import {border, BorderStyleProps} from './utils/border';
@@ -9,6 +9,7 @@ import {color, ColorStyleProps} from './utils/color';
 import {depth, DepthStyleProps} from './utils/depth';
 import {flexItem, FlexItemStyleProps} from './utils/flexItem';
 import {layout, LayoutStyleProps} from './utils/layout';
+import {other, OtherStyleProps} from './utils/other';
 import {position, PositionStyleProps} from './utils/position';
 import {space, SpaceStyleProps} from './utils/space';
 
@@ -17,6 +18,7 @@ export type BoxProps = BorderStyleProps &
   DepthStyleProps &
   FlexItemStyleProps &
   LayoutStyleProps &
+  OtherStyleProps &
   PositionStyleProps &
   SpaceStyleProps & {
     children?: React.ReactNode;
@@ -28,7 +30,8 @@ const shouldForwardProp = (prop: string) => {
   return isPropValid(prop) && !omittedProps.includes(prop);
 };
 
-const StyledBox = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
+// Meant to be used with elements. The `shouldForwardProps` will remove all style props
+const StyledBoxElement = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
   {
     boxSizing: 'border-box',
   },
@@ -41,6 +44,21 @@ const StyledBox = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
   space
 );
 
+// Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
+const StyledBoxComponent = styled('div')<StyledType & BoxProps>(
+  {
+    boxSizing: 'border-box',
+  },
+  border,
+  color,
+  depth,
+  flexItem,
+  layout,
+  other,
+  position,
+  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.
@@ -61,10 +79,14 @@ const StyledBox = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
 export const Box = createComponent('div')({
   displayName: 'Box',
   Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
+    const BoxComponent = useConstant(() =>
+      typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent
+    );
+
     return (
-      <StyledBox as={Element} ref={ref} {...elemProps}>
+      <BoxComponent as={Element} ref={ref} {...elemProps}>
         {children}
-      </StyledBox>
+      </BoxComponent>
     );
   },
 });

package/common/lib/utils/other.ts

@@ -0,0 +1,20 @@
+export type OtherStyleProps = {
+  animation?: string;
+};
+
+const otherProps = {
+  animation: (value: string) => {
+    return {animation: value};
+  },
+};
+
+export function other<P extends OtherStyleProps>(props: P) {
+  for (const key in props) {
+    if (key in otherProps) {
+      const value = props[key as keyof OtherStyleProps] as keyof OtherStyleProps;
+      const styleFn = otherProps[key as keyof OtherStyleProps];
+      return styleFn(value);
+    }
+  }
+  return {};
+}

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

@@ -4,9 +4,10 @@ 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 & PositionStyleProps & SpaceStyleProps & {
+export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & OtherStyleProps & PositionStyleProps & SpaceStyleProps & {
     children?: React.ReactNode;
 };
 /**
@@ -26,5 +27,5 @@ export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStylePr
  * );
  *
  */
-export declare const Box: import("@workday/canvas-kit-react/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 & import("./utils/position").PositionStandardProps & import("./utils/position").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps>;
+export declare const Box: import("@workday/canvas-kit-react/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/common/lib/Box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../common/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,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,kBAAkB,GAClB,eAAe,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAqBJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,ynBASd,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../common/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;AAqCJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,2oBAad,CAAC"}

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

@@ -42,15 +42,21 @@ 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);
 };
-var StyledBox = styled_1.default('div', { shouldForwardProp: shouldForwardProp })({
+// 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.
@@ -72,6 +78,9 @@ exports.Box = common_1.createComponent('div')({
     displayName: 'Box',
     Component: function (_a, ref, Element) {
         var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(StyledBox, __assign({ as: Element, ref: ref }, elemProps), 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/common/lib/utils/other.d.ts

@@ -0,0 +1,5 @@
+export declare type OtherStyleProps = {
+    animation?: string;
+};
+export declare function other<P extends OtherStyleProps>(props: P): {};
+//# sourceMappingURL=other.d.ts.map

package/dist/commonjs/common/lib/utils/other.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"other.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/other.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAQF,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC,MASxD"}

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var otherProps = {
+    animation: function (value) {
+        return { animation: value };
+    },
+};
+function other(props) {
+    for (var key in props) {
+        if (key in otherProps) {
+            var value = props[key];
+            var styleFn = otherProps[key];
+            return styleFn(value);
+        }
+    }
+    return {};
+}
+exports.other = other;

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

@@ -22,5 +22,5 @@ export declare type FlexProps = BoxProps & FlexStyleProps;
  * );
  *
  */
-export declare const Flex: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & FlexStyleProps>;
+export declare const Flex: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & FlexStyleProps>;
 //# 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,uCAAuC,CAAC;AAEpE,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;AASlD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,IAAI,43BASf,CAAC"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Flex.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,uCAAuC,CAAC;AAEpE,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;AASlD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,IAAI,q7BASf,CAAC"}

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

@@ -1,27 +1,27 @@
 import { FlexProps } from './Flex';
 import { StackStyleProps } from './utils/stack';
 export declare type StackProps = FlexProps & StackStyleProps;
-export declare const Stack: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & import("..").FlexStyleProps & StackStyleProps> & {
-    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
+export declare const Stack: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & import("..").FlexStyleProps & StackStyleProps> & {
+    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
 };
-export declare type HStackProps = Omit<StackProps, 'flexDirection'> & {
+export interface HStackProps extends StackProps {
     /**
      * sets the direction for the stack
      * @default "row"
      * */
     flexDirection?: 'row' | 'row-reverse';
-};
+}
 export declare const HStack: import("@workday/canvas-kit-react/common").ElementComponent<"div", HStackProps> & {
-    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
+    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
 };
-export declare type VStackProps = Omit<StackProps, 'flexDirection'> & {
+export interface VStackProps extends StackProps {
     /**
      * sets the direction for the stack
      * @default "column"
      * */
     flexDirection?: 'column' | 'column-reverse';
-};
+}
 export declare const VStack: import("@workday/canvas-kit-react/common").ElementComponent<"div", VStackProps> & {
-    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
+    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
 };
 //# sourceMappingURL=Stack.d.ts.map

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

@@ -1 +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;;CA+BhB,CAAC;AAEH,oBAAY,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC,GAAG;IAC5D;;;SAGK;IACL,aAAa,CAAC,EAAE,KAAK,GAAG,aAAa,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,MAAM;;CAYjB,CAAC;AAEH,oBAAY,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC,GAAG;IAC5D;;;SAGK;IACL,aAAa,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,MAAM;;CAYjB,CAAC"}
+{"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

@@ -54,9 +54,9 @@ var StyledStack = styled_1.default(Flex_1.Flex, { shouldForwardProp: shouldForwa
 exports.Stack = common_1.createComponent('div')({
     displayName: 'Stack',
     Component: function (_a, ref, Element) {
-        var children = _a.children, _b = _a.flexDirection, flexDirection = _b === void 0 ? 'row' : _b, spacing = _a.spacing, _c = _a.shouldWrapChildren, shouldWrapChildren = _c === void 0 ? false : _c, elemProps = __rest(_a, ["children", "flexDirection", "spacing", "shouldWrapChildren"]);
+        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: flexDirection, spacing: spacing }, elemProps), shouldWrapChildren
+        return (React.createElement(StyledStack, __assign({ as: Element, ref: ref, flexDirection: "row" }, elemProps), shouldWrapChildren
             ? validChildren.map(function (child) { return React.createElement(StackItem, null, child); })
             : validChildren));
     },
@@ -67,8 +67,8 @@ exports.Stack = common_1.createComponent('div')({
 exports.HStack = common_1.createComponent('div')({
     displayName: 'HStack',
     Component: function (_a, ref, Element) {
-        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));
+        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,
@@ -77,8 +77,8 @@ exports.HStack = common_1.createComponent('div')({
 exports.VStack = common_1.createComponent('div')({
     displayName: 'VStack',
     Component: function (_a, ref, Element) {
-        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));
+        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,

package/dist/es6/common/lib/Box.d.ts

@@ -4,9 +4,10 @@ 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 & PositionStyleProps & SpaceStyleProps & {
+export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & OtherStyleProps & PositionStyleProps & SpaceStyleProps & {
     children?: React.ReactNode;
 };
 /**
@@ -26,5 +27,5 @@ export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStylePr
  * );
  *
  */
-export declare const Box: import("@workday/canvas-kit-react/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 & import("./utils/position").PositionStandardProps & import("./utils/position").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps>;
+export declare const Box: import("@workday/canvas-kit-react/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/es6/common/lib/Box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../common/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,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,kBAAkB,GAClB,eAAe,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAqBJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,ynBASd,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../common/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;AAqCJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,2oBAad,CAAC"}

package/dist/es6/common/lib/Box.js

@@ -23,22 +23,28 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled from '@emotion/styled';
 import isPropValid from '@emotion/is-prop-valid';
-import { createComponent } from '@workday/canvas-kit-react/common';
+import { createComponent, useConstant } from '@workday/canvas-kit-react/common';
 // style props
 import { border } from './utils/border';
 import { color } from './utils/color';
 import { depth } from './utils/depth';
 import { flexItem } from './utils/flexItem';
 import { layout } from './utils/layout';
+import { other } from './utils/other';
 import { position } from './utils/position';
 import { space } from './utils/space';
 var omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border', 'background'];
 var shouldForwardProp = function (prop) {
     return isPropValid(prop) && !omittedProps.includes(prop);
 };
-var StyledBox = styled('div', { shouldForwardProp: shouldForwardProp })({
+// Meant to be used with elements. The `shouldForwardProps` will remove all style props
+var StyledBoxElement = styled('div', { shouldForwardProp: shouldForwardProp })({
     boxSizing: 'border-box',
 }, border, color, depth, flexItem, layout, position, space);
+// Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
+var StyledBoxComponent = styled('div')({
+    boxSizing: 'border-box',
+}, border, color, depth, flexItem, layout, other, position, 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.
@@ -60,6 +66,9 @@ export var Box = createComponent('div')({
     displayName: 'Box',
     Component: function (_a, ref, Element) {
         var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(StyledBox, __assign({ as: Element, ref: ref }, elemProps), children));
+        var BoxComponent = useConstant(function () {
+            return typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent;
+        });
+        return (React.createElement(BoxComponent, __assign({ as: Element, ref: ref }, elemProps), children));
     },
 });

package/dist/es6/common/lib/utils/other.d.ts

@@ -0,0 +1,5 @@
+export declare type OtherStyleProps = {
+    animation?: string;
+};
+export declare function other<P extends OtherStyleProps>(props: P): {};
+//# sourceMappingURL=other.d.ts.map

package/dist/es6/common/lib/utils/other.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"other.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/other.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAQF,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC,MASxD"}

package/dist/es6/common/lib/utils/other.js

@@ -0,0 +1,15 @@
+var otherProps = {
+    animation: function (value) {
+        return { animation: value };
+    },
+};
+export function other(props) {
+    for (var key in props) {
+        if (key in otherProps) {
+            var value = props[key];
+            var styleFn = otherProps[key];
+            return styleFn(value);
+        }
+    }
+    return {};
+}

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

@@ -22,5 +22,5 @@ export declare type FlexProps = BoxProps & FlexStyleProps;
  * );
  *
  */
-export declare const Flex: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & FlexStyleProps>;
+export declare const Flex: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & FlexStyleProps>;
 //# sourceMappingURL=Flex.d.ts.map

package/dist/es6/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,uCAAuC,CAAC;AAEpE,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;AASlD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,IAAI,43BASf,CAAC"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Flex.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,uCAAuC,CAAC;AAEpE,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;AASlD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,IAAI,q7BASf,CAAC"}

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

@@ -1,27 +1,27 @@
 import { FlexProps } from './Flex';
 import { StackStyleProps } from './utils/stack';
 export declare type StackProps = FlexProps & StackStyleProps;
-export declare const Stack: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & import("..").FlexStyleProps & StackStyleProps> & {
-    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
+export declare const Stack: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & import("..").FlexStyleProps & StackStyleProps> & {
+    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
 };
-export declare type HStackProps = Omit<StackProps, 'flexDirection'> & {
+export interface HStackProps extends StackProps {
     /**
      * sets the direction for the stack
      * @default "row"
      * */
     flexDirection?: 'row' | 'row-reverse';
-};
+}
 export declare const HStack: import("@workday/canvas-kit-react/common").ElementComponent<"div", HStackProps> & {
-    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
+    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
 };
-export declare type VStackProps = Omit<StackProps, 'flexDirection'> & {
+export interface VStackProps extends StackProps {
     /**
      * sets the direction for the stack
      * @default "column"
      * */
     flexDirection?: 'column' | 'column-reverse';
-};
+}
 export declare const VStack: import("@workday/canvas-kit-react/common").ElementComponent<"div", VStackProps> & {
-    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
+    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
 };
 //# sourceMappingURL=Stack.d.ts.map

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

@@ -1 +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;;CA+BhB,CAAC;AAEH,oBAAY,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC,GAAG;IAC5D;;;SAGK;IACL,aAAa,CAAC,EAAE,KAAK,GAAG,aAAa,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,MAAM;;CAYjB,CAAC;AAEH,oBAAY,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC,GAAG;IAC5D;;;SAGK;IACL,aAAa,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,MAAM;;CAYjB,CAAC"}
+{"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/es6/layout/lib/Stack.js

@@ -42,9 +42,9 @@ var StyledStack = styled(Flex, { shouldForwardProp: shouldForwardProp })(stack);
 export var Stack = createComponent('div')({
     displayName: 'Stack',
     Component: function (_a, ref, Element) {
-        var children = _a.children, _b = _a.flexDirection, flexDirection = _b === void 0 ? 'row' : _b, spacing = _a.spacing, _c = _a.shouldWrapChildren, shouldWrapChildren = _c === void 0 ? false : _c, elemProps = __rest(_a, ["children", "flexDirection", "spacing", "shouldWrapChildren"]);
+        var children = _a.children, _b = _a.shouldWrapChildren, shouldWrapChildren = _b === void 0 ? false : _b, elemProps = __rest(_a, ["children", "shouldWrapChildren"]);
         var validChildren = getValidChildren(children);
-        return (React.createElement(StyledStack, __assign({ as: Element, ref: ref, flexDirection: flexDirection, spacing: spacing }, elemProps), shouldWrapChildren
+        return (React.createElement(StyledStack, __assign({ as: Element, ref: ref, flexDirection: "row" }, elemProps), shouldWrapChildren
             ? validChildren.map(function (child) { return React.createElement(StackItem, null, child); })
             : validChildren));
     },
@@ -55,8 +55,8 @@ export var Stack = createComponent('div')({
 export var HStack = createComponent('div')({
     displayName: 'HStack',
     Component: function (_a, ref, Element) {
-        var children = _a.children, _b = _a.flexDirection, flexDirection = _b === void 0 ? 'row' : _b, elemProps = __rest(_a, ["children", "flexDirection"]);
-        return (React.createElement(Stack, __assign({ as: Element, ref: ref, flexDirection: flexDirection }, elemProps), children));
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(Stack, __assign({ as: Element, ref: ref, flexDirection: "row" }, elemProps), children));
     },
     subComponents: {
         Item: StackItem,
@@ -65,8 +65,8 @@ export var HStack = createComponent('div')({
 export var VStack = createComponent('div')({
     displayName: 'VStack',
     Component: function (_a, ref, Element) {
-        var children = _a.children, _b = _a.flexDirection, flexDirection = _b === void 0 ? 'column' : _b, elemProps = __rest(_a, ["children", "flexDirection"]);
-        return (React.createElement(Stack, __assign({ as: Element, ref: ref, flexDirection: flexDirection }, elemProps), children));
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(Stack, __assign({ as: Element, ref: ref, flexDirection: "column" }, elemProps), children));
     },
     subComponents: {
         Item: StackItem,

package/layout/lib/Stack.tsx

@@ -35,26 +35,10 @@ const StyledStack = styled(Flex, {shouldForwardProp})<StyledType & StackProps>(s
 
 export const Stack = createComponent('div')({
   displayName: 'Stack',
-  Component: (
-    {
-      children,
-      flexDirection = 'row',
-      spacing,
-      shouldWrapChildren = false,
-      ...elemProps
-    }: StackProps,
-    ref,
-    Element
-  ) => {
+  Component: ({children, shouldWrapChildren = false, ...elemProps}: StackProps, ref, Element) => {
     const validChildren = getValidChildren(children);
     return (
-      <StyledStack
-        as={Element}
-        ref={ref}
-        flexDirection={flexDirection}
-        spacing={spacing}
-        {...elemProps}
-      >
+      <StyledStack as={Element} ref={ref} flexDirection="row" {...elemProps}>
         {shouldWrapChildren
           ? validChildren.map(child => <StackItem>{child}</StackItem>)
           : validChildren}
@@ -66,19 +50,19 @@ export const Stack = createComponent('div')({
   },
 });
 
-export type HStackProps = Omit<StackProps, 'flexDirection'> & {
+export interface HStackProps extends StackProps {
   /**
    * sets the direction for the stack
    * @default "row"
    * */
   flexDirection?: 'row' | 'row-reverse';
-};
+}
 
 export const HStack = createComponent('div')({
   displayName: 'HStack',
-  Component: ({children, flexDirection = 'row', ...elemProps}: HStackProps, ref, Element) => {
+  Component: ({children, ...elemProps}: HStackProps, ref, Element) => {
     return (
-      <Stack as={Element} ref={ref} flexDirection={flexDirection} {...elemProps}>
+      <Stack as={Element} ref={ref} flexDirection="row" {...elemProps}>
         {children}
       </Stack>
     );
@@ -88,19 +72,19 @@ export const HStack = createComponent('div')({
   },
 });
 
-export type VStackProps = Omit<StackProps, 'flexDirection'> & {
+export interface VStackProps extends StackProps {
   /**
    * sets the direction for the stack
    * @default "column"
    * */
   flexDirection?: 'column' | 'column-reverse';
-};
+}
 
 export const VStack = createComponent('div')({
   displayName: 'VStack',
-  Component: ({children, flexDirection = 'column', ...elemProps}: VStackProps, ref, Element) => {
+  Component: ({children, ...elemProps}: VStackProps, ref, Element) => {
     return (
-      <Stack as={Element} ref={ref} flexDirection={flexDirection} {...elemProps}>
+      <Stack as={Element} ref={ref} flexDirection="column" {...elemProps}>
         {children}
       </Stack>
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react",
-  "version": "6.3.6",
+  "version": "7.0.0-alpha.0-next.4+bdd1ec94",
   "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -55,8 +55,8 @@
     "@emotion/core": "^10.0.28",
     "@emotion/is-prop-valid": "^0.8.2",
     "@emotion/styled": "^10.0.27",
-    "@workday/canvas-kit-preview-react": "^6.3.6",
-    "@workday/canvas-kit-react": "^6.3.6",
+    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.4+bdd1ec94",
+    "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.4+bdd1ec94",
     "@workday/canvas-system-icons-web": "1.0.41",
     "chroma-js": "^2.1.0",
     "csstype": "^2.6.17",
@@ -66,5 +66,5 @@
   "devDependencies": {
     "@types/lodash.flatten": "^4.4.6"
   },
-  "gitHead": "3322ef6ba113940373412840edd14d35a7a3093c"
+  "gitHead": "bdd1ec9493a5a2dc4d67e4cc33adcba13efee4b7"
 }

package/ts3.5/dist/commonjs/common/lib/Box.d.ts

@@ -4,9 +4,10 @@ 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 & PositionStyleProps & SpaceStyleProps & {
+export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & OtherStyleProps & PositionStyleProps & SpaceStyleProps & {
     children?: React.ReactNode;
 };
 /**
@@ -26,5 +27,5 @@ export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStylePr
  * );
  *
  */
-export declare const Box: import("@workday/canvas-kit-react/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 & import("./utils/position").PositionStandardProps & import("./utils/position").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps>;
+export declare const Box: import("@workday/canvas-kit-react/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/ts3.5/dist/commonjs/common/lib/utils/other.d.ts

@@ -0,0 +1,5 @@
+export declare type OtherStyleProps = {
+    animation?: string;
+};
+export declare function other<P extends OtherStyleProps>(props: P): {};
+//# sourceMappingURL=other.d.ts.map

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

@@ -22,5 +22,5 @@ export declare type FlexProps = BoxProps & FlexStyleProps;
  * );
  *
  */
-export declare const Flex: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & FlexStyleProps>;
+export declare const Flex: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & FlexStyleProps>;
 //# sourceMappingURL=Flex.d.ts.map

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

@@ -1,27 +1,27 @@
 import { FlexProps } from './Flex';
 import { StackStyleProps } from './utils/stack';
 export declare type StackProps = FlexProps & StackStyleProps;
-export declare const Stack: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & import("..").FlexStyleProps & StackStyleProps> & {
-    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
+export declare const Stack: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & import("..").FlexStyleProps & StackStyleProps> & {
+    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
 };
-export declare type HStackProps = Pick<StackProps, Exclude<keyof StackProps, 'flexDirection'>> & {
+export interface HStackProps extends StackProps {
     /**
      * sets the direction for the stack
      * @default "row"
      * */
     flexDirection?: 'row' | 'row-reverse';
-};
+}
 export declare const HStack: import("@workday/canvas-kit-react/common").ElementComponent<"div", HStackProps> & {
-    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
+    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
 };
-export declare type VStackProps = Pick<StackProps, Exclude<keyof StackProps, 'flexDirection'>> & {
+export interface VStackProps extends StackProps {
     /**
      * sets the direction for the stack
      * @default "column"
      * */
     flexDirection?: 'column' | 'column-reverse';
-};
+}
 export declare const VStack: import("@workday/canvas-kit-react/common").ElementComponent<"div", VStackProps> & {
-    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
+    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
 };
 //# sourceMappingURL=Stack.d.ts.map

package/ts3.5/dist/es6/common/lib/Box.d.ts

@@ -4,9 +4,10 @@ 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 & PositionStyleProps & SpaceStyleProps & {
+export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & OtherStyleProps & PositionStyleProps & SpaceStyleProps & {
     children?: React.ReactNode;
 };
 /**
@@ -26,5 +27,5 @@ export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStylePr
  * );
  *
  */
-export declare const Box: import("@workday/canvas-kit-react/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 & import("./utils/position").PositionStandardProps & import("./utils/position").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps>;
+export declare const Box: import("@workday/canvas-kit-react/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/ts3.5/dist/es6/common/lib/utils/other.d.ts

@@ -0,0 +1,5 @@
+export declare type OtherStyleProps = {
+    animation?: string;
+};
+export declare function other<P extends OtherStyleProps>(props: P): {};
+//# sourceMappingURL=other.d.ts.map

package/ts3.5/dist/es6/layout/lib/Flex.d.ts

@@ -22,5 +22,5 @@ export declare type FlexProps = BoxProps & FlexStyleProps;
  * );
  *
  */
-export declare const Flex: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & FlexStyleProps>;
+export declare const Flex: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & FlexStyleProps>;
 //# sourceMappingURL=Flex.d.ts.map

package/ts3.5/dist/es6/layout/lib/Stack.d.ts

@@ -1,27 +1,27 @@
 import { FlexProps } from './Flex';
 import { StackStyleProps } from './utils/stack';
 export declare type StackProps = FlexProps & StackStyleProps;
-export declare const Stack: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & import("..").FlexStyleProps & StackStyleProps> & {
-    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
+export declare const Stack: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & import("..").FlexStyleProps & StackStyleProps> & {
+    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
 };
-export declare type HStackProps = Pick<StackProps, Exclude<keyof StackProps, 'flexDirection'>> & {
+export interface HStackProps extends StackProps {
     /**
      * sets the direction for the stack
      * @default "row"
      * */
     flexDirection?: 'row' | 'row-reverse';
-};
+}
 export declare const HStack: import("@workday/canvas-kit-react/common").ElementComponent<"div", HStackProps> & {
-    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
+    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
 };
-export declare type VStackProps = Pick<StackProps, Exclude<keyof StackProps, 'flexDirection'>> & {
+export interface VStackProps extends StackProps {
     /**
      * sets the direction for the stack
      * @default "column"
      * */
     flexDirection?: 'column' | 'column-reverse';
-};
+}
 export declare const VStack: import("@workday/canvas-kit-react/common").ElementComponent<"div", VStackProps> & {
-    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
+    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
 };
 //# sourceMappingURL=Stack.d.ts.map