@workday/canvas-kit-react 7.0.0-alpha.0-next.3 → 7.0.0-alpha.0-next.7

package/ts3.5/dist/es6/common/lib/utils/components.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { Model } from './models';
 /**
  * Adds the `as` to the style interface to support `as` in styled components
- * This type and usage should be removed with Emotion 11
  */
 export declare type StyledType = {
     as?: React.ElementType;
@@ -88,7 +87,7 @@ export declare type Component<P> = {
 };
 interface RefForwardingComponent<T, P = {}> {
     (props: React.PropsWithChildren<P> & {
-        as?: React.ReactElement<any>;
+        as?: React.ElementType;
     }, 
     /**
      * A ref to be forwarded. Pass it along to the root element. If no element was passed, this
@@ -175,8 +174,8 @@ export declare const createHook: <M extends Model<any, any>, PO extends {}, PI e
 } : {});
 export declare const subModelHook: <M extends Model<any, any>, SM extends Model<any, any>, O extends {}>(fn: (model: M) => SM, hook: <P extends {}, R>(model: SM, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => O & P & (R extends HTMLOrSVGElement ? {
     ref: React.Ref<R>;
-} : {})) => <P_1 extends {}, R_1>(model: M, elemProps?: P_1 | undefined, ref?: ((instance: R_1 | null) => void) | React.RefObject<R_1> | null | undefined) => O & P_1 & (R_1 extends HTMLOrSVGElement ? {
-    ref: React.Ref<R_1>;
+} : {})) => <P_2 extends {}, R_2>(model: M, elemProps?: P_2 | undefined, ref?: ((instance: R_2 | null) => void) | React.RefObject<R_2> | null | undefined) => O & P_2 & (R_2 extends HTMLOrSVGElement ? {
+    ref: React.Ref<R_2>;
 } : {});
 export declare type BehaviorHook<M extends Model<any, any>, O extends {}> = {
     bivarianceHack<P extends {}, R>(model: M, elemProps?: P, ref?: React.Ref<R>): O & P & (R extends HTMLOrSVGElement ? {

package/ts3.5/dist/es6/common/lib/utils/getTranslateFromOrigin.d.ts

@@ -1,3 +1,4 @@
+import { CanvasSpaceValues } from '@workday/canvas-kit-react/tokens';
 import { TransformOrigin } from '../types';
 /**
  * Gets the x and y distance values needed to translate from a given transform origin to 0,0
@@ -5,7 +6,7 @@ import { TransformOrigin } from '../types';
  * @param {string} distance The distance to translate (as a canvas spacing value).
  * @returns {Object} An object with the x and y distance values needed to translate.
  */
-export declare const getTranslateFromOrigin: (transformOrigin: TransformOrigin, distance: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px") => {
+export declare const getTranslateFromOrigin: (transformOrigin: TransformOrigin, distance: CanvasSpaceValues) => {
     x: number;
     y: number;
 };

package/ts3.5/dist/es6/common/lib/utils/index.d.ts

@@ -10,6 +10,7 @@ export * from './useMount';
 export * from './components';
 export * from './models';
 export * from './elements';
+export * from './useConstant';
 export * from './useIsFullscreen';
 export * from './useWindowSize';
 export * from './useResizeObserver';

package/ts3.5/dist/es6/common/lib/utils/useMount.d.ts

@@ -2,10 +2,10 @@
  * Alias to `useEffect` with the intention to only run on mount/unmount.
  * Avoids the React lint errors and encodes intent.
  */
-export declare const useMount: (callback: () => void | (() => void)) => void;
+export declare const useMount: (callback: () => (() => void) | void) => void;
 /**
  * Alias to `useLayoutEffect` with the intention to only run on mount/unmount
  * Avoids the React lint errors and encodes intent.
  */
-export declare const useMountLayout: (callback: () => void | (() => void)) => void;
+export declare const useMountLayout: (callback: () => (() => void) | void) => void;
 //# sourceMappingURL=useMount.d.ts.map

package/ts3.5/dist/es6/dialog/lib/Dialog.d.ts

@@ -15,7 +15,7 @@ export interface DialogProps extends PopupModelConfig {
     model?: PopupModel;
 }
 export declare const Dialog: import("../../common").Component<DialogProps> & {
-    Body: import("../../common").ElementComponent<"div", import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderShorthandStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderColorStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderRadiusStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLineStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderWidthStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLogicalStyleProps & import("@workday/canvas-kit-labs-react").ColorStyleProps & import("@workday/canvas-kit-labs-react").DepthStyleProps & import("@workday/canvas-kit-labs-react").FlexItemStyleProps & import("@workday/canvas-kit-labs-react").LayoutStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionLogicalProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceLogicalProps>;
+    Body: 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("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps>;
     Card: import("../../common").ElementComponent<"div", import("./DialogCard").DialogCardProps>;
     CloseIcon: import("../../common").ElementComponent<"button", import("../../popup/lib/PopupCloseIcon").PopupCloseIconProps>;
     Target: import("../../common").ElementComponent<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, import("../../popup/lib/PopupTarget").PopupTargetProps>;

package/ts3.5/dist/es6/dialog/lib/hooks/useDialogCard.d.ts

@@ -1,10 +1,4 @@
-/// <reference types="@emotion/core" />
-export declare const useDialogCard: <P extends {}, R>(model: import("../../../common").Model<import("../../../popup").PopupState, import("../../../popup").PopupEvents>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
-    role: string;
-    'aria-labelledby': string;
-} & {
-    id: string;
-} & P & (R extends HTMLOrSVGElement ? {
+export declare const useDialogCard: <P extends {}, R>(model: import("../../../common").Model<import("../../../popup").PopupState, import("../../../popup").PopupEvents>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
     ref: import("react").Ref<R>;
 } : {});
 //# sourceMappingURL=useDialogCard.d.ts.map

package/ts3.5/dist/es6/dialog/lib/hooks/useDialogPopper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@emotion/core" />
 import { CSSProperties } from 'react';
 export declare const useDialogPopper: <P extends {}, R>(model: import("../../../common").Model<import("../../../popup").PopupState, import("../../../popup").PopupEvents>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
     'aria-owns': string;

package/ts3.5/dist/es6/disclosure/lib/useDisclosureModel.d.ts

@@ -58,5 +58,5 @@ export declare type BaseDisclosureModelConfig = {
     initialVisibility?: DisclosureState['visibility'];
 };
 export declare type DisclosureModelConfig = BaseDisclosureModelConfig & Partial<ToModelConfig<DisclosureState, DisclosureEvents, typeof disclosureEventMap>>;
-export declare const useDisclosureModel: (config?: DisclosureModelConfig) => Model<DisclosureState, DisclosureEvents>;
+export declare const useDisclosureModel: (config?: DisclosureModelConfig) => DisclosureModel;
 //# sourceMappingURL=useDisclosureModel.d.ts.map

package/ts3.5/dist/es6/icon/lib/AccentIcon.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { CanvasAccentIcon } from '@workday/design-assets-types';
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/styled';
 import { IconProps } from './Icon';
 export interface AccentIconStyles {
     /**

package/ts3.5/dist/es6/icon/lib/AppletIcon.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BrandingColor } from '@workday/canvas-kit-react/tokens';
 import { CanvasAppletIcon } from '@workday/design-assets-types';
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/styled';
 import { IconProps } from './Icon';
 export interface AppletIconStyles {
     /**

package/ts3.5/dist/es6/icon/lib/Graphic.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { CanvasGraphic } from '@workday/design-assets-types';
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/styled';
 import { SvgProps } from './Svg';
 export interface GraphicStyles {
     /**

package/ts3.5/dist/es6/icon/lib/Svg.d.ts

@@ -1,4 +1,4 @@
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/styled';
 import * as React from 'react';
 import { CanvasIcon, CanvasIconTypes } from '@workday/design-assets-types';
 export interface SvgProps extends React.HTMLAttributes<HTMLSpanElement> {

package/ts3.5/dist/es6/icon/lib/SystemIcon.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/styled';
 import { IconProps } from './Icon';
 export interface SystemIconStyles {
     /**

package/ts3.5/dist/es6/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/ts3.5/dist/es6/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 { FlexStyleProps } from './lib/utils/flex';
+export { StackSpacing, StackDirection, StackStyleProps } from './lib/utils/stack';
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,31 @@
+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;
+};
+/**
+ * `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/ts3.5/dist/es6/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/ts3.5/dist/es6/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/ts3.5/dist/es6/layout/lib/utils/border.d.ts

@@ -0,0 +1,103 @@
+import { CanvasBorderRadiusKeys, CanvasColor } from '@workday/canvas-kit-react/tokens';
+import { PartialEmotionCanvasTheme } from '@workday/canvas-kit-react/common';
+import { PropertyBorder } from './types';
+/** style props to set the border properties */
+export declare type BorderShorthandStyleProps = {
+    /** sets `border` property */
+    border?: string;
+    /** sets `border-top` property */
+    borderTop?: string;
+    /** sets `border-right` property (no bidirectional support) */
+    borderRight?: string;
+    /** sets `border-bottom` property */
+    borderBottom?: string;
+    /** sets `border-left` property (no bidirectional support) */
+    borderLeft?: string;
+};
+/** style props to set the border color properties */
+export declare type BorderColorStyleProps = {
+    /** sets `border-color` property */
+    borderColor?: CanvasColor | (string & {});
+    /** sets `border-top-color` property */
+    borderTopColor?: CanvasColor | (string & {});
+    /** sets `border-right-color` property (no bidirectional support) */
+    borderRightColor?: CanvasColor | (string & {});
+    /** sets `border-bottom-color` property */
+    borderBottomColor?: CanvasColor | (string & {});
+    /** sets `border-left-color` property (no bidirectional support) */
+    borderLeftColor?: CanvasColor | (string & {});
+};
+/** style props to set the border radius properties */
+export declare type BorderRadiusStyleProps = {
+    /** sets `border-radius` property */
+    borderRadius?: CanvasBorderRadiusKeys | number | (string & {});
+    /** sets `border-top-left-radius` property */
+    borderTopLeftRadius?: CanvasBorderRadiusKeys | number | (string & {});
+    /** sets `border-top-right-radius` property */
+    borderTopRightRadius?: CanvasBorderRadiusKeys | number | (string & {});
+    /** sets `border-bottom-left-radius` property */
+    borderBottomLeftRadius?: CanvasBorderRadiusKeys | number | (string & {});
+    /** sets `border-bottom-right-radius` property */
+    borderBottomRightRadius?: CanvasBorderRadiusKeys | number | (string & {});
+};
+/** style props to set the border style properties */
+export declare type BorderLineStyleProps = {
+    /** sets `border-style` property */
+    borderStyle?: PropertyBorder;
+    /** sets `border-top-style` property */
+    borderTopStyle?: PropertyBorder;
+    /** sets `border-right-style` property (no bidirectional support) */
+    borderRightStyle?: PropertyBorder;
+    /** sets `border-bottom-style` property */
+    borderBottomStyle?: PropertyBorder;
+    /** sets `border-left-style` property (no bidirectional support) */
+    borderLeftStyle?: PropertyBorder;
+};
+/** style props to set the border width properties */
+export declare type BorderWidthStyleProps = {
+    /** sets `border-width` property */
+    borderWidth?: string | number;
+    /** sets `border-top-width` property */
+    borderTopWidth?: string | number;
+    /** sets `border-right-width` property (no bidirectional support) */
+    borderRightWidth?: string | number;
+    /** sets `border-bottom-width` property */
+    borderBottomWidth?: string | number;
+    /** sets `border-left-width` property (no bidirectional support) */
+    borderLeftWidth?: string | number;
+};
+export declare type BorderLogicalStyleProps = {
+    /** sets `border-left` property (bidirectional support) */
+    borderInlineStart?: string;
+    /** sets `border-left-color` property (bidirectional support) */
+    borderInlineStartColor?: CanvasColor | (string & {});
+    /** sets `border-left-style` property (bidirectional support) */
+    borderInlineStartStyle?: PropertyBorder;
+    /** sets `border-left-width` property (bidirectional support) */
+    borderInlineStartWidth?: string | number;
+    /** sets `border-right` property (bidirectional support) */
+    borderInlineEnd?: string;
+    /** sets `border-right-color` property (bidirectional support) */
+    borderInlineEndColor?: CanvasColor | (string & {});
+    /** sets `border-right-style` property (bidirectional support) */
+    borderInlineEndStyle?: PropertyBorder;
+    /** sets `border-right-width` property (bidirectional support) */
+    borderInlineEndWidth?: string | number;
+};
+/** a collection style props for border properties */
+export declare type BorderStyleProps = BorderShorthandStyleProps & BorderColorStyleProps & BorderRadiusStyleProps & BorderLineStyleProps & BorderWidthStyleProps & BorderLogicalStyleProps;
+/**
+ * A style prop function that takes components props and returns border styles. Some props, such as borderRadius and borderColor, are connected to our design tokens.
+ * If no `BorderStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `border` with low-level, styled components
+ * const BoxExample = () => (
+ *   <Box border={`solid 1px #333333 ${colors.blackPepper400}`}>Hello, border styles!</Box>
+ * );
+ *
+ */
+export declare function border<P extends BorderStyleProps & {
+    theme?: PartialEmotionCanvasTheme;
+}>(props: P): {};
+//# sourceMappingURL=border.d.ts.map

package/ts3.5/dist/es6/layout/lib/utils/color.d.ts

@@ -0,0 +1,26 @@
+import { colors as colorTokens, CanvasColor } from '@workday/canvas-kit-react/tokens';
+export declare type ColorTokens = typeof colorTokens;
+/** style props to for color properties */
+export declare type ColorStyleProps = {
+    /** sets `background` property */
+    background?: CanvasColor | (string & {});
+    /** sets `background-color` property */
+    backgroundColor?: CanvasColor | (string & {});
+    /** sets `background-image` property */
+    backgroundImage?: string;
+    /** sets `color` property */
+    color?: CanvasColor | (string & {});
+};
+/**
+ * A style prop function that takes components props and returns color styles from canvas token values.
+ * If no `ColorStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `color` with low-level, styled components
+ * const BoxExample = () => (
+ *   <Box backgroundColor="blueberry500" color="frenchVanilla100">Hello, colors!</Box>
+ * );
+ *
+ */
+export declare function color<P extends ColorStyleProps>(props: P): {};
+//# sourceMappingURL=color.d.ts.map

package/ts3.5/dist/es6/layout/lib/utils/depth.d.ts

@@ -0,0 +1,22 @@
+import { depth as depthTokens } from '@workday/canvas-kit-react/tokens';
+export declare type DepthTokens = typeof depthTokens;
+export declare type DepthTokenKeys = keyof DepthTokens;
+export declare type DepthTokenValues = DepthTokens[keyof DepthTokens];
+/** style props to for depth styles */
+export declare type DepthStyleProps = {
+    /** sets depth styles (box-shadow & border) */
+    depth?: DepthTokenKeys;
+};
+/**
+ * A style prop function that takes components props and returns depth styles from canvas token values.
+ * If no `DepthStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll mostly likely use `depth` with low-level, styled components
+ * const BoxExample = () => (
+ *   <Box depth={3}>Hello, box shadows!</Box>
+ * );
+ *
+ */
+export declare function depth<P extends DepthStyleProps>(props: P): DepthTokenValues;
+//# sourceMappingURL=depth.d.ts.map

package/ts3.5/dist/es6/layout/lib/utils/flex.d.ts

@@ -0,0 +1,36 @@
+import { PropertyAlignItems, PropertyAlignContent, PropertyJustifyItems, PropertyJustifyContent, PropertyFlexWrap, PropertyFlexDirection } from './types';
+/** style props to for flexbox container properties */
+export declare type FlexStyleProps = {
+    /** sets `align-items` property */
+    alignItems?: PropertyAlignItems;
+    /** sets `align-content` property */
+    alignContent?: PropertyAlignContent;
+    /**
+     * sets `display` property
+     * @default 'flex'
+     * */
+    display?: 'flex' | 'inline-flex';
+    /** sets `justify-items` property */
+    justifyItems?: PropertyJustifyItems;
+    /** sets `justify-content` property */
+    justifyContent?: PropertyJustifyContent;
+    /** sets `flex-wrap` property */
+    flexWrap?: PropertyFlexWrap;
+    /** sets `flex-direction` property */
+    flexDirection?: PropertyFlexDirection;
+};
+/**
+ * A style prop function that takes component props and returns flexbox styles.
+ * If no `FlexStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `flex` with low-level, styled components
+ * const FlexExample = () => (
+ *   <Flex justifyContent="center" alignItems="center">
+ *     Hello, flex!
+ *   </Flex>
+ * );
+ *
+ */
+export declare function flex<P extends FlexStyleProps>(props: P): {};
+//# sourceMappingURL=flex.d.ts.map

package/ts3.5/dist/es6/layout/lib/utils/flexItem.d.ts

@@ -0,0 +1,33 @@
+import { PropertyJustifySelf, PropertyAlignSelf, PropertyOrder } from './types';
+/** style props to for flexbox item properties */
+export declare type FlexItemStyleProps = {
+    /** sets `flex` property */
+    flex?: number | string;
+    /** sets `flex-grow` property */
+    flexGrow?: number | string;
+    /** sets `flex-shrink` property */
+    flexShrink?: number | string;
+    /** sets `flex-basis` property */
+    flexBasis?: number | string;
+    /** sets `justify-self` property */
+    justifySelf?: PropertyJustifySelf;
+    /** sets `align-self` property */
+    alignSelf?: PropertyAlignSelf;
+    /** sets `order` property */
+    order?: PropertyOrder;
+};
+/**
+ * A style prop function that takes component props and returns flexbox item styles.
+ * If no `FlexItemStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `flexItem` with low-level, styled components
+ * const FlexItemExample = () => (
+ *   <Box flex={1} flexBasis="auto" alignSelf={center}>
+ *     Hello, flex item!
+ *   </Box>
+ * );
+ *
+ */
+export declare function flexItem<P extends FlexItemStyleProps>(props: P): {};
+//# sourceMappingURL=flexItem.d.ts.map

package/ts3.5/dist/es6/layout/lib/utils/getValidChildren.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare function getValidChildren(children: React.ReactNode): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>[];
+//# sourceMappingURL=getValidChildren.d.ts.map

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

@@ -0,0 +1,43 @@
+import { PropertyDisplay, PropertyListStyle, PropertyOverflow, PropertyOverflowX, PropertyOverflowY, PropertyVerticalAlign } from './types';
+/** style props to for layout properties */
+export declare type LayoutStyleProps = {
+    /** sets `display` property */
+    display?: PropertyDisplay;
+    /** sets `height` property */
+    height?: number | string;
+    /** sets `list-style property */
+    listStyle?: PropertyListStyle;
+    /** sets `max-height` property */
+    maxHeight?: number | string;
+    /** sets `max-width` property */
+    maxWidth?: number | string;
+    /** sets `min-height` property */
+    minHeight?: number | string;
+    /** sets `min-width` property */
+    minWidth?: number | string;
+    /** sets `overflow` property */
+    overflow?: PropertyOverflow;
+    /** sets `overflow-x` property */
+    overflowX?: PropertyOverflowX;
+    /** sets `overflow-y` property */
+    overflowY?: PropertyOverflowY;
+    /** sets `vertical-align` property */
+    verticalAlign?: PropertyVerticalAlign;
+    /** sets `width` property */
+    width?: number | string;
+};
+/**
+ * A style prop function that takes components props and returns layout styles.
+ * If no `LayoutStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `layout` with low-level, styled components
+ * const BoxExample = () => (
+ *   <Box display="inline-block" height="50%">
+ *     Hello, positions!
+ *   </Box>
+ * );
+ *
+ */
+export declare function layout<P extends LayoutStyleProps>(props: P): {};
+//# sourceMappingURL=layout.d.ts.map

package/ts3.5/dist/es6/layout/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/utils/position.d.ts

@@ -0,0 +1,41 @@
+import { PartialEmotionCanvasTheme } from '@workday/canvas-kit-react/common';
+import { PropertyPosition, PropertyZIndex } from './types';
+/** style props to for standard position properties */
+export declare type PositionStandardProps = {
+    /** sets `position` property  */
+    position?: PropertyPosition;
+    /** sets `zIndex` property  */
+    zIndex?: PropertyZIndex;
+    /** sets `top` property  */
+    top?: number | string;
+    /** sets `right` property (no bidirectional support) */
+    right?: number | string;
+    /** sets `bottom` property  */
+    bottom?: number | string;
+    /** sets `left` property (no bidirectional support)  */
+    left?: number | string;
+};
+export declare type PositionLogicalProps = {
+    /** sets `left` property (bidirectional support)  */
+    insetInlineStart?: number | string;
+    /** sets `right` property (bidirectional support) */
+    insetInlineEnd?: number | string;
+};
+export declare type PositionStyleProps = PositionStandardProps & PositionLogicalProps;
+/**
+ * A style prop function that takes components props and returns position styles.
+ * If no `PositionProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `position` with low-level, styled components
+ * const BoxExample = () => (
+ *   <Box position="absolute" top="50%">
+ *     Hello, positions!
+ *   </Box>
+ * );
+ *
+ */
+export declare function position<P extends PositionStyleProps & {
+    theme?: PartialEmotionCanvasTheme;
+}>(props: P): {};
+//# sourceMappingURL=position.d.ts.map