@workday/canvas-kit-react 8.0.0 → 8.0.1

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

@@ -1,53 +1,31 @@
-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);
-};
-import { colors as colorTokens } from '@workday/canvas-kit-react/tokens';
-var getBackground = function (value) { return ({
-    background: colorTokens[value] || value,
-}); };
-var getBackgroundColor = function (value) { return ({
-    backgroundColor: colorTokens[value] || value,
-}); };
-var getBackgroundImage = function (value) { return ({
-    backgroundImage: value,
-}); };
-var getColor = function (value) { return ({
-    color: colorTokens[value] || value,
-}); };
-var colorProps = {
-    background: getBackground,
-    backgroundColor: getBackgroundColor,
-    backgroundImage: getBackgroundImage,
-    color: getColor,
-};
+import { buildStyleFns, buildStylePropFn } from './buildStyleFns';
+export var colorStyleFnConfigs = [
+    {
+        name: 'backgroundColor',
+        properties: ['backgroundColor'],
+        system: 'color',
+    },
+    {
+        name: 'color',
+        properties: ['color'],
+        system: 'color',
+    },
+    {
+        name: 'opacity',
+        properties: ['opacity'],
+        system: 'none',
+    },
+];
+export var colorFns = buildStyleFns(colorStyleFnConfigs);
 /**
- * A style prop function that takes components props and returns color styles from canvas token values.
+ * A style prop function that takes component 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
+ * ```tsx
  * const BoxExample = () => (
- *   <Box backgroundColor="blueberry500" color="frenchVanilla100">Hello, colors!</Box>
+ *   <Box color="frenchVanilla100" opacity={0.6}>Hello, colors!</Box>
  * );
- *
+ * ```
  */
-export 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;
-}
+export var color = buildStylePropFn(colorFns);

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

@@ -1,22 +1,28 @@
-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];
+import { Property } from 'csstype';
+import { StyleFnConfig } from './buildStyleFns';
+import { SystemPropValues } from './systemProps';
 /** style props to for depth styles */
 export declare type DepthStyleProps = {
-    /** sets depth styles (box-shadow & border) */
-    depth?: DepthTokenKeys;
+    /** sets [CSS box-shadow styles](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) */
+    boxShadow?: Property.BoxShadow;
+    /**
+     * - sets [CSS box-shadow styles](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)
+     * - system tokens: `depth`
+     * */
+    depth?: SystemPropValues['depth'];
 };
+export declare const depthStyleFnConfigs: StyleFnConfig[];
+export declare const depthStyleFns: import("./buildStyleFns").StyleFns;
 /**
- * A style prop function that takes components props and returns depth styles from canvas token values.
+ * A style prop function that takes component 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 = () => (
+ * ```tsx
+ * const DepthExample = () => (
  *   <Box depth={3}>Hello, box shadows!</Box>
  * );
- *
+ * ```
  */
-export declare function depth<P extends DepthStyleProps>(props: P): DepthTokenValues;
+export declare const depth: (props: DepthStyleProps) => {};
 //# sourceMappingURL=depth.d.ts.map

package/dist/es6/layout/lib/utils/depth.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"depth.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/depth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACjC,OAAO,EAAkC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAE/C,sCAAsC;AACtC,oBAAY,eAAe,GAAG;IAC5B,gGAAgG;IAChG,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B;;;SAGK;IACL,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,aAAa,EAW9C,CAAC;AAEF,eAAO,MAAM,aAAa,oCAAqC,CAAC;AAChE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK,gCAAmD,CAAC"}

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

@@ -1,25 +1,26 @@
-import { depth as depthTokens } from '@workday/canvas-kit-react/tokens';
-var depthProps = {
-    depth: function (token) { return depthTokens[token]; },
-};
+import { buildStyleFns, buildStylePropFn } from './buildStyleFns';
+export var depthStyleFnConfigs = [
+    {
+        name: 'boxShadow',
+        properties: ['boxShadow'],
+        system: 'none',
+    },
+    {
+        name: 'depth',
+        properties: ['boxShadow'],
+        system: 'depth',
+    },
+];
+export var depthStyleFns = buildStyleFns(depthStyleFnConfigs);
 /**
- * A style prop function that takes components props and returns depth styles from canvas token values.
+ * A style prop function that takes component 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 = () => (
+ * ```tsx
+ * const DepthExample = () => (
  *   <Box depth={3}>Hello, box shadows!</Box>
  * );
- *
+ * ```
  */
-export function depth(props) {
-    for (var key in props) {
-        if (key in depthProps) {
-            var token = props[key];
-            var depthFn = depthProps[key];
-            return depthFn(token);
-        }
-    }
-    return {};
-}
+export var depth = buildStylePropFn(depthStyleFns);

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

@@ -1,36 +1,55 @@
-import { PropertyAlignItems, PropertyAlignContent, PropertyJustifyItems, PropertyJustifyContent, PropertyFlexWrap, PropertyFlexDirection } from './types';
-/** style props to for flexbox container properties */
+import { Property, Globals } from 'csstype';
+import { StyleFnConfig } from './buildStyleFns';
+import { SystemPropValues } from './systemProps';
+/** style props to for CSS flexbox container properties */
 export declare type FlexStyleProps = {
-    /** sets `align-items` property */
-    alignItems?: PropertyAlignItems;
-    /** sets `align-content` property */
-    alignContent?: PropertyAlignContent;
+    /** sets [CSS align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) */
+    alignItems?: Property.AlignItems;
+    /** sets [CSS align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) */
+    alignContent?: Property.AlignContent;
     /**
-     * sets `display` property
-     * @default 'flex'
+     * - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
+     * - @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;
+    display?: 'flex' | 'inline-flex' | 'none' | Globals | (string & {});
+    /** sets [CSS justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) */
+    justifyItems?: Property.JustifyItems;
+    /** sets [CSS justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */
+    justifyContent?: Property.JustifyContent;
+    /** sets [CSS flex-wrap property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) */
+    flexWrap?: Property.FlexWrap;
+    /** sets [CSS flex-direction property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) */
+    flexDirection?: Property.FlexDirection;
+    /**
+     * - sets [CSS gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
+     * - system tokens: `space`
+     * */
+    gap?: SystemPropValues['space'];
+    /**
+     * - sets [CSS column-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)
+     * - system tokens: `space`
+     * */
+    columnGap?: SystemPropValues['space'];
+    /**
+     * - sets [CSS row-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)
+     * - system tokens: `space`
+     * */
+    rowGap?: SystemPropValues['space'];
 };
+export declare const flexStyleFnConfigs: StyleFnConfig[];
+export declare const flexStyleFns: import("./buildStyleFns").StyleFns;
 /**
  * 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
+ * ```tsx
  * const FlexExample = () => (
  *   <Flex justifyContent="center" alignItems="center">
  *     Hello, flex!
  *   </Flex>
  * );
- *
+ * ```
  */
-export declare function flex<P extends FlexStyleProps>(props: P): {};
+export declare const flex: (props: FlexStyleProps) => {};
 //# sourceMappingURL=flex.d.ts.map

package/dist/es6/layout/lib/utils/flex.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/flex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAE,OAAO,EAAC,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAkC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAE/C,0DAA0D;AAC1D,oBAAY,cAAc,GAAG;IAC3B,oGAAoG;IACpG,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,wGAAwG;IACxG,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC;;;SAGK;IACL,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACpE,wGAAwG;IACxG,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,4GAA4G;IAC5G,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC;IACzC,gGAAgG;IAChG,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B,0GAA0G;IAC1G,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC;;;SAGK;IACL,GAAG,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAChC;;;SAGK;IACL,SAAS,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACtC;;;SAGK;IACL,MAAM,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,aAAa,EAmD7C,CAAC;AAEF,eAAO,MAAM,YAAY,oCAAoC,CAAC;AAC9D;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,IAAI,+BAAiD,CAAC"}

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

@@ -1,34 +1,68 @@
-var flexProps = {
-    alignContent: 'alignContent',
-    alignItems: 'alignItems',
-    display: 'display',
-    flexDirection: 'flexDirection',
-    flexWrap: 'flexWrap',
-    justifyContent: 'justifyContent',
-    justifyItems: 'justifyItems',
-};
+import { buildStyleFns, buildStylePropFn } from './buildStyleFns';
+export var flexStyleFnConfigs = [
+    {
+        name: 'alignContent',
+        properties: ['alignContent'],
+        system: 'none',
+    },
+    {
+        name: 'alignItems',
+        properties: ['alignItems'],
+        system: 'none',
+    },
+    {
+        name: 'display',
+        properties: ['display'],
+        system: 'none',
+    },
+    {
+        name: 'flexDirection',
+        properties: ['flexDirection'],
+        system: 'none',
+    },
+    {
+        name: 'flexWrap',
+        properties: ['flexWrap'],
+        system: 'none',
+    },
+    {
+        name: 'justifyContent',
+        properties: ['justifyContent'],
+        system: 'none',
+    },
+    {
+        name: 'justifyItems',
+        properties: ['justifyItems'],
+        system: 'none',
+    },
+    {
+        name: 'gap',
+        properties: ['gap'],
+        system: 'space',
+    },
+    {
+        name: 'columnGap',
+        properties: ['columnGap'],
+        system: 'space',
+    },
+    {
+        name: 'rowGap',
+        properties: ['rowGap'],
+        system: 'space',
+    },
+];
+export var flexStyleFns = buildStyleFns(flexStyleFnConfigs);
 /**
  * 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
+ * ```tsx
  * const FlexExample = () => (
  *   <Flex justifyContent="center" alignItems="center">
  *     Hello, flex!
  *   </Flex>
  * );
- *
+ * ```
  */
-export 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;
-}
+export var flex = buildStylePropFn(flexStyleFns);

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

@@ -1,33 +1,36 @@
-import { PropertyJustifySelf, PropertyAlignSelf, PropertyOrder } from './types';
-/** style props to for flexbox item properties */
+import { Property } from 'csstype';
+import { StyleFnConfig } from './buildStyleFns';
+/** style props to for CSS flex 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;
+    /** sets [CSS flex property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) */
+    flex?: Property.Flex;
+    /** sets [CSS flex-grow property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) */
+    flexGrow?: Property.FlexGrow;
+    /** sets [CSS flex-shrink property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink) */
+    flexShrink?: Property.FlexShrink;
+    /** sets [CSS flex-basis property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis) */
+    flexBasis?: Property.FlexBasis;
+    /** sets [CSS justify-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) */
+    justifySelf?: Property.JustifySelf;
+    /** sets [CSS align-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) */
+    alignSelf?: Property.AlignSelf;
+    /** sets [CSS order property](https://developer.mozilla.org/en-US/docs/Web/CSS/order) */
+    order?: Property.Order;
 };
+export declare const flexItemStyleFnConfigs: StyleFnConfig[];
+export declare const flexItemStyleFns: import("./buildStyleFns").StyleFns;
 /**
  * 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
+ * ```tsx
  * const FlexItemExample = () => (
  *   <Box flex={1} flexBasis="auto" alignSelf={center}>
  *     Hello, flex item!
  *   </Box>
  * );
- *
+ * ```
  */
-export declare function flexItem<P extends FlexItemStyleProps>(props: P): {};
+export declare const flexItem: (props: FlexItemStyleProps) => {};
 //# sourceMappingURL=flexItem.d.ts.map

package/dist/es6/layout/lib/utils/flexItem.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"flexItem.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/flexItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACjC,OAAO,EAAkC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE/E,kDAAkD;AAClD,oBAAY,kBAAkB,GAAG;IAC/B,sFAAsF;IACtF,IAAI,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC;IACrB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B,oGAAoG;IACpG,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,kGAAkG;IAClG,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B,sGAAsG;IACtG,WAAW,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;IACnC,kGAAkG;IAClG,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B,wFAAwF;IACxF,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,aAAa,EAoCjD,CAAC;AAEF,eAAO,MAAM,gBAAgB,oCAAwC,CAAC;AACtE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,mCAAyD,CAAC"}

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

@@ -1,35 +1,53 @@
-/** style props to for flexbox item properties */
-var flexItemProps = {
-    flex: 'flex',
-    flexGrow: 'flexGrow',
-    flexShrink: 'flexShrink',
-    flexBasis: 'flexBasis',
-    justifySelf: 'justifySelf',
-    alignSelf: 'alignSelf',
-    order: 'order',
-};
+import { buildStyleFns, buildStylePropFn } from './buildStyleFns';
+export var flexItemStyleFnConfigs = [
+    {
+        name: 'flex',
+        properties: ['flex'],
+        system: 'none',
+    },
+    {
+        name: 'flexGrow',
+        properties: ['flexGrow'],
+        system: 'none',
+    },
+    {
+        name: 'flexShrink',
+        properties: ['flexShrink'],
+        system: 'none',
+    },
+    {
+        name: 'flexBasis',
+        properties: ['flexBasis'],
+        system: 'none',
+    },
+    {
+        name: 'justifySelf',
+        properties: ['justifySelf'],
+        system: 'none',
+    },
+    {
+        name: 'alignSelf',
+        properties: ['alignSelf'],
+        system: 'none',
+    },
+    {
+        name: 'order',
+        properties: ['order'],
+        system: 'none',
+    },
+];
+export var flexItemStyleFns = buildStyleFns(flexItemStyleFnConfigs);
 /**
  * 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
+ * ```tsx
  * const FlexItemExample = () => (
  *   <Box flex={1} flexBasis="auto" alignSelf={center}>
  *     Hello, flex item!
  *   </Box>
  * );
- *
+ * ```
  */
-export 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;
-}
+export var flexItem = buildStylePropFn(flexItemStyleFns);

package/dist/es6/layout/lib/utils/grid.d.ts

@@ -0,0 +1,72 @@
+import { Property, Globals } from 'csstype';
+import { StyleFnConfig } from './buildStyleFns';
+import { SystemPropValues } from './systemProps';
+/** style props to for CSS grid container properties */
+export declare type GridStyleProps = {
+    /** sets [CSS align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) */
+    alignItems?: Property.AlignItems;
+    /** sets [CSS align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) */
+    alignContent?: Property.AlignContent;
+    /**
+     * - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
+     * - @default 'grid'
+     * */
+    display?: 'grid' | 'inline-grid' | 'none' | Globals | (string & {});
+    /** sets [CSS justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) */
+    justifyItems?: Property.JustifyItems;
+    /** sets [CSS justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */
+    justifyContent?: Property.JustifyContent;
+    /** sets [CSS grid-template property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template) */
+    gridTemplate?: Property.GridTemplate;
+    /** sets [CSS grid-template-areas property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) */
+    gridTemplateAreas?: Property.GridTemplateAreas;
+    /** sets [CSS grid-template-columns property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) */
+    gridTemplateColumns?: Property.GridTemplateColumns;
+    /** sets [CSS grid-template-rows property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) */
+    gridTemplateRows?: Property.GridTemplateRows;
+    /**
+     * - sets [CSS column-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)
+     * - system tokens: `space`
+     * */
+    gridColumnGap?: Property.GridColumnGap | SystemPropValues['space'];
+    /**
+     * - sets [CSS row-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)
+     * - system tokens: `space`
+     * */
+    gridRowGap?: Property.GridRowGap | SystemPropValues['space'];
+    /**
+     * - sets [CSS grid-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap)
+     * - system tokens: `space`
+     * */
+    gridGap?: Property.GridGap | SystemPropValues['space'];
+    /** sets [CSS place-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items) */
+    gridPlaceItems?: Property.PlaceItems;
+    /** sets [CSS grid-auto-columns property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns) */
+    gridAutoColumns?: Property.GridAutoColumns;
+    /** sets [CSS grid-auto-rows property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows) */
+    gridAutoRows?: Property.GridAutoRows;
+    /** sets [CSS grid-area property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) */
+    gridArea?: Property.GridArea;
+    /** sets [CSS grid-auto-flow property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) */
+    gridAutoFlow?: Property.GridAutoFlow;
+    /** sets [CSS grid property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) */
+    grid?: Property.Grid;
+};
+export declare const gridStyleFnConfigs: StyleFnConfig[];
+export declare const gridStyleFns: import("./buildStyleFns").StyleFns;
+/**
+ * A style prop function that takes component props and returns grid styles.
+ * If no `GridStyleProps` are found, it returns an empty object.
+ * Space tokens are available for gridGap, gridRowGap, gridColumnGap props.
+ *
+ * @example
+ * ```tsx
+ * const GridExample = () => (
+ *   <Grid gridAutoFlow="row" justifyContent="center" alignItems="center">
+ *     Hello, Grid!
+ *   </Grid>
+ * );
+ * ```
+ */
+export declare const grid: (props: GridStyleProps) => {};
+//# sourceMappingURL=grid.d.ts.map

package/dist/es6/layout/lib/utils/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAE,OAAO,EAAC,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAkC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAE/C,uDAAuD;AACvD,oBAAY,cAAc,GAAG;IAC3B,oGAAoG;IACpG,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,wGAAwG;IACxG,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC;;;SAGK;IACL,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACpE,wGAAwG;IACxG,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,4GAA4G;IAC5G,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC;IACzC,wGAAwG;IACxG,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,oHAAoH;IACpH,iBAAiB,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC;IAC/C,wHAAwH;IACxH,mBAAmB,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC;IACnD,kHAAkH;IAClH,gBAAgB,CAAC,EAAE,QAAQ,CAAC,gBAAgB,CAAC;IAC7C;;;SAGK;IACL,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACnE;;;SAGK;IACL,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC7D;;;SAGK;IACL,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvD,oGAAoG;IACpG,cAAc,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACrC,gHAAgH;IAChH,eAAe,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC;IAC3C,0GAA0G;IAC1G,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,gGAAgG;IAChG,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B,0GAA0G;IAC1G,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,sFAAsF;IACtF,IAAI,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,aAAa,EA2F7C,CAAC;AAEF,eAAO,MAAM,YAAY,oCAAoC,CAAC;AAC9D;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,IAAI,+BAAiD,CAAC"}