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

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

@@ -0,0 +1,99 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VStack = exports.HStack = exports.Stack = void 0;
+var React = __importStar(require("react"));
+var styled_1 = __importDefault(require("@emotion/styled"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var layout_1 = require("@workday/canvas-kit-react/layout");
+var Flex_1 = require("./Flex");
+var getValidChildren_1 = require("./utils/getValidChildren");
+var stack_1 = require("./utils/stack");
+var StackItem = common_1.createComponent('div')({
+    displayName: 'Stack.Item',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(layout_1.Box, __assign({ as: Element, ref: ref, display: "inline-block", flex: "0 0 auto", minWidth: 0 }, elemProps), children));
+    },
+});
+// prevent `spacing` prop from being passed through to the HTML element
+var shouldForwardProp = function (prop) {
+    return prop !== 'spacing';
+};
+var StyledStack = styled_1.default(Flex_1.Flex, { shouldForwardProp: shouldForwardProp })(stack_1.stack);
+exports.Stack = common_1.createComponent('div')({
+    displayName: 'Stack',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, _b = _a.shouldWrapChildren, shouldWrapChildren = _b === void 0 ? false : _b, elemProps = __rest(_a, ["children", "shouldWrapChildren"]);
+        var validChildren = getValidChildren_1.getValidChildren(children);
+        return (React.createElement(StyledStack, __assign({ as: Element, ref: ref, flexDirection: "row" }, elemProps), shouldWrapChildren
+            ? validChildren.map(function (child) { return React.createElement(StackItem, null, child); })
+            : validChildren));
+    },
+    subComponents: {
+        Item: StackItem,
+    },
+});
+exports.HStack = common_1.createComponent('div')({
+    displayName: 'HStack',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(exports.Stack, __assign({ as: Element, ref: ref, flexDirection: "row" }, elemProps), children));
+    },
+    subComponents: {
+        Item: StackItem,
+    },
+});
+exports.VStack = common_1.createComponent('div')({
+    displayName: 'VStack',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(exports.Stack, __assign({ as: Element, ref: ref, flexDirection: "column" }, elemProps), children));
+    },
+    subComponents: {
+        Item: StackItem,
+    },
+});

package/dist/commonjs/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/dist/commonjs/layout/lib/utils/border.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/border.ts"],"names":[],"mappings":"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"}

package/dist/commonjs/layout/lib/utils/border.js

@@ -0,0 +1,153 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.border = void 0;
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var common_1 = require("@workday/canvas-kit-react/common");
+// border logical prop handlers
+var borderInlineStart = function (isRTL) { return (isRTL ? 'borderRight' : 'borderLeft'); };
+var borderInlineEnd = function (isRTL) { return (isRTL ? 'borderLeft' : 'borderRight'); };
+var borderInlineStartColor = function (isRTL) { return (isRTL ? 'borderRightColor' : 'borderLeftColor'); };
+var borderInlineEndColor = function (isRTL) { return (isRTL ? 'borderLeftColor' : 'borderRightColor'); };
+var borderInlineStartStyle = function (isRTL) { return (isRTL ? 'borderRightStyle' : 'borderLeftStyle'); };
+var borderInlineEndStyle = function (isRTL) { return (isRTL ? 'borderLeftStyle' : 'borderRightStyle'); };
+var borderInlineStartWidth = function (isRTL) { return (isRTL ? 'borderRightWidth' : 'borderLeftWidth'); };
+var borderInlineEndWidth = function (isRTL) { return (isRTL ? 'borderLeftWidth' : 'borderRightWidth'); };
+var borderShorthandProps = {
+    border: 'border',
+    borderTop: 'borderTop',
+    borderRight: 'borderRight',
+    borderBottom: 'borderBottom',
+    borderLeft: 'borderLeft',
+    borderInlineStart: borderInlineStart,
+    borderInlineEnd: borderInlineEnd,
+};
+var borderColors = {
+    borderColor: 'borderColor',
+    borderTopColor: 'borderTopColor',
+    borderRightColor: 'borderRightColor',
+    borderBottomColor: 'borderBottomColor',
+    borderLeftColor: 'borderLeftColor',
+    borderInlineStartColor: borderInlineStartColor,
+    borderInlineEndColor: borderInlineEndColor,
+};
+var borderRadii = {
+    borderRadius: 'borderRadius',
+    borderTopLeftRadius: 'borderTopLeftRadius',
+    borderTopRightRadius: 'borderTopRightRadius',
+    borderBottomLeftRadius: 'borderBottomLeftRadius',
+    borderBottomRightRadius: 'borderBottomRightRadius',
+};
+var borderStyles = {
+    borderStyle: 'borderStyle',
+    borderTopStyle: 'borderTopStyle',
+    borderRightStyle: 'borderRightStyle',
+    borderBottomStyle: 'borderBottomStyle',
+    borderLeftStyle: 'borderLeftStyle',
+    borderInlineStartStyle: borderInlineStartStyle,
+    borderInlineEndStyle: borderInlineEndStyle,
+};
+var borderWidths = {
+    borderWidth: 'borderWidth',
+    borderTopWidth: 'borderTopWidth',
+    borderRightWidth: 'borderRightWidth',
+    borderBottomWidth: 'borderBottomWidth',
+    borderLeftWidth: 'borderLeftWidth',
+    borderInlineStartWidth: borderInlineStartWidth,
+    borderInlineEndWidth: borderInlineEndWidth,
+};
+/**
+ * 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>
+ * );
+ *
+ */
+function border(props) {
+    // border will always be used within the context of a component, but eslint doesn't know that
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var canvas = common_1.useTheme(props.theme).canvas;
+    var isRTL = canvas.direction === common_1.ContentDirection.RTL;
+    var styles = {};
+    for (var key in props) {
+        if (props.hasOwnProperty(key)) {
+            if (key in borderShorthandProps) {
+                var value = props[key];
+                var attr = void 0;
+                if (key === 'borderInlineStart') {
+                    attr = borderInlineStart(isRTL);
+                }
+                else if (key === 'borderInlineEnd') {
+                    attr = borderInlineEnd(isRTL);
+                }
+                else {
+                    attr = borderShorthandProps[key];
+                }
+                // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+                styles[attr] = value;
+                continue;
+            }
+            if (key in borderColors) {
+                var propValue = props[key];
+                var value = tokens_1.colors[propValue] || propValue;
+                var attr = void 0;
+                if (key === 'borderInlineStartColor') {
+                    attr = borderInlineStartColor(isRTL);
+                }
+                else if (key === 'borderInlineEndColor') {
+                    attr = borderInlineEndColor(isRTL);
+                }
+                else {
+                    attr = borderColors[key];
+                }
+                // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+                styles[attr] = value;
+                continue;
+            }
+            if (key in borderRadii) {
+                var propValue = props[key];
+                var value = tokens_1.borderRadius[propValue] || propValue;
+                var attr = borderRadii[key];
+                // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+                styles[attr] = value;
+                continue;
+            }
+            if (key in borderStyles) {
+                var value = props[key];
+                var attr = void 0;
+                if (key === 'borderInlineStartStyle') {
+                    attr = borderInlineStartStyle(isRTL);
+                }
+                else if (key === 'borderInlineEndStyle') {
+                    attr = borderInlineEndStyle(isRTL);
+                }
+                else {
+                    attr = borderStyles[key];
+                }
+                // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+                styles[attr] = value;
+                continue;
+            }
+            if (key in borderWidths) {
+                var value = props[key];
+                var attr = void 0;
+                if (key === 'borderInlineStartWidth') {
+                    attr = borderInlineStartWidth(isRTL);
+                }
+                else if (key === 'borderInlineEndWidth') {
+                    attr = borderInlineEndWidth(isRTL);
+                }
+                else {
+                    attr = borderWidths[key];
+                }
+                // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+                styles[attr] = value;
+            }
+        }
+    }
+    return styles;
+}
+exports.border = border;

package/dist/commonjs/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/dist/commonjs/layout/lib/utils/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/color.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,IAAI,WAAW,EAAE,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAEpF,oBAAY,WAAW,GAAG,OAAO,WAAW,CAAC;AAE7C,0CAA0C;AAC1C,oBAAY,eAAe,GAAG;IAC5B,iCAAiC;IACjC,UAAU,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACzC,uCAAuC;IACvC,eAAe,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC9C,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACrC,CAAC;AAyBF;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC,MAWxD"}

package/dist/commonjs/layout/lib/utils/color.js

@@ -0,0 +1,57 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.color = void 0;
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var getBackground = function (value) { return ({
+    background: tokens_1.colors[value] || value,
+}); };
+var getBackgroundColor = function (value) { return ({
+    backgroundColor: tokens_1.colors[value] || value,
+}); };
+var getBackgroundImage = function (value) { return ({
+    backgroundImage: value,
+}); };
+var getColor = function (value) { return ({
+    color: tokens_1.colors[value] || value,
+}); };
+var colorProps = {
+    background: getBackground,
+    backgroundColor: getBackgroundColor,
+    backgroundImage: getBackgroundImage,
+    color: getColor,
+};
+/**
+ * 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>
+ * );
+ *
+ */
+function color(props) {
+    var styles = {};
+    for (var key in props) {
+        if (key in colorProps) {
+            var value = props[key];
+            var colorFn = colorProps[key];
+            var style = colorFn(value);
+            styles = __assign(__assign({}, styles), style);
+        }
+    }
+    return styles;
+}
+exports.color = color;

package/dist/commonjs/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/dist/commonjs/layout/lib/utils/depth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"depth.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/depth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,IAAI,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAEtE,oBAAY,WAAW,GAAG,OAAO,WAAW,CAAC;AAC7C,oBAAY,cAAc,GAAG,MAAM,WAAW,CAAC;AAC/C,oBAAY,gBAAgB,GAAG,WAAW,CAAC,MAAM,WAAW,CAAC,CAAC;AAE9D,sCAAsC;AACtC,oBAAY,eAAe,GAAG;IAC5B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB,CAAC;AAMF;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC,GAAG,gBAAgB,CAS3E"}

package/dist/commonjs/layout/lib/utils/depth.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.depth = void 0;
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var depthProps = {
+    depth: function (token) { return tokens_1.depth[token]; },
+};
+/**
+ * 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>
+ * );
+ *
+ */
+function depth(props) {
+    for (var key in props) {
+        if (key in depthProps) {
+            var token = props[key];
+            var depthFn = depthProps[key];
+            return depthFn(token);
+        }
+    }
+    return {};
+}
+exports.depth = depth;

package/dist/commonjs/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/dist/commonjs/layout/lib/utils/flex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/flex.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,EACtB,gBAAgB,EAChB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAEjB,sDAAsD;AACtD,oBAAY,cAAc,GAAG;IAC3B,kCAAkC;IAClC,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,oCAAoC;IACpC,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC;;;SAGK;IACL,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IACjC,oCAAoC;IACpC,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,sCAAsC;IACtC,cAAc,CAAC,EAAE,sBAAsB,CAAC;IACxC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,qCAAqC;IACrC,aAAa,CAAC,EAAE,qBAAqB,CAAC;CACvC,CAAC;AAYF;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EAAE,KAAK,EAAE,CAAC,MAWtD"}

package/dist/commonjs/layout/lib/utils/flex.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flex = void 0;
+var flexProps = {
+    alignContent: 'alignContent',
+    alignItems: 'alignItems',
+    display: 'display',
+    flexDirection: 'flexDirection',
+    flexWrap: 'flexWrap',
+    justifyContent: 'justifyContent',
+    justifyItems: 'justifyItems',
+};
+/**
+ * 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>
+ * );
+ *
+ */
+function flex(props) {
+    var styles = {};
+    for (var key in props) {
+        if (key in flexProps) {
+            var attr = flexProps[key];
+            var value = props[key];
+            // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+            styles[attr] = value;
+        }
+    }
+    return styles;
+}
+exports.flex = flex;

package/dist/commonjs/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/dist/commonjs/layout/lib/utils/flexItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flexItem.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/flexItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAE,iBAAiB,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAE9E,iDAAiD;AACjD,oBAAY,kBAAkB,GAAG;IAC/B,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,mCAAmC;IACnC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,iCAAiC;IACjC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAaF;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,kBAAkB,EAAE,KAAK,EAAE,CAAC,MAW9D"}

package/dist/commonjs/layout/lib/utils/flexItem.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flexItem = void 0;
+/** style props to for flexbox item properties */
+var flexItemProps = {
+    flex: 'flex',
+    flexGrow: 'flexGrow',
+    flexShrink: 'flexShrink',
+    flexBasis: 'flexBasis',
+    justifySelf: 'justifySelf',
+    alignSelf: 'alignSelf',
+    order: 'order',
+};
+/**
+ * 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>
+ * );
+ *
+ */
+function flexItem(props) {
+    var styles = {};
+    for (var key in props) {
+        if (key in flexItemProps) {
+            var attr = flexItemProps[key];
+            var value = props[key];
+            // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+            styles[attr] = value;
+        }
+    }
+    return styles;
+}
+exports.flexItem = flexItem;