@workday/canvas-kit-react 8.0.0-alpha.208-next.1 → 8.0.0-alpha.222-next.6

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

@@ -1,39 +1,56 @@
 "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',
-};
+exports.flexItem = exports.flexItemStyleFns = exports.flexItemStyleFnConfigs = void 0;
+var buildStyleFns_1 = require("./buildStyleFns");
+exports.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',
+    },
+];
+exports.flexItemStyleFns = buildStyleFns_1.buildStyleFns(exports.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>
  * );
- *
+ * ```
  */
-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;
+exports.flexItem = buildStyleFns_1.buildStylePropFn(exports.flexItemStyleFns);

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

@@ -1,67 +1,72 @@
 import { Property } from 'csstype';
-import { CanvasSpaceKeys } from '@workday/canvas-kit-react/tokens';
-export declare type GridSpacePropsValues = CanvasSpaceKeys | number | (string & {});
-/** style props to for grid container properties */
+import { StyleFnConfig } from './buildStyleFns';
+import { SystemPropValues } from './systemProps';
+/** style props to for CSS grid container properties */
 export declare type GridStyleProps = {
-    /** sets `align-items` property */
+    /** sets [CSS align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) */
     alignItems?: Property.AlignItems;
-    /** sets `align-content` property */
+    /** sets [CSS align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) */
     alignContent?: Property.AlignContent;
     /**
-     * sets `display` property
-     * @default 'grid'
+     * - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
+     * - @default 'grid'
      * */
     display?: 'grid' | 'inline-grid';
-    /** sets `justify-items` property */
+    /** sets [CSS justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) */
     justifyItems?: Property.JustifyItems;
-    /** sets `justify-content` property */
+    /** sets [CSS justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */
     justifyContent?: Property.JustifyContent;
-    /** sets `grid-template` property */
+    /** sets [CSS grid-template property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template) */
     gridTemplate?: Property.GridTemplate;
-    /** sets `grid-template-area` property */
+    /** sets [CSS grid-template-areas property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) */
     gridTemplateAreas?: Property.GridTemplateAreas;
-    /** sets `grid-template-columns` property */
+    /** sets [CSS grid-template-columns property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) */
     gridTemplateColumns?: Property.GridTemplateColumns;
-    /** sets `grid-template-rows` property */
+    /** sets [CSS grid-template-rows property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) */
     gridTemplateRows?: Property.GridTemplateRows;
-    /** sets `column-gap` property */
-    gridColumnGap?: Property.GridColumnGap | GridSpacePropsValues;
-    /** sets `row-gap` property */
-    gridRowGap?: Property.GridRowGap | GridSpacePropsValues;
-    /** sets `gap` property */
-    gridGap?: Property.GridGap | GridSpacePropsValues;
-    /** sets `place-items` property */
+    /**
+     * - 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 `grid-auto-columns` property */
+    /** sets [CSS grid-auto-columns property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns) */
     gridAutoColumns?: Property.GridAutoColumns;
-    /** sets `grid-auto-rows` property */
+    /** sets [CSS grid-auto-rows property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows) */
     gridAutoRows?: Property.GridAutoRows;
-    /** sets `grid-area` property */
+    /** sets [CSS grid-area property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) */
     gridArea?: Property.GridArea;
-    /** sets `grid-auto-flow` property */
+    /** sets [CSS grid-auto-flow property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) */
     gridAutoFlow?: Property.GridAutoFlow;
-    /** sets `grid` property */
+    /** sets [CSS grid property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) */
     grid?: Property.Grid;
 };
-export declare type gridSpaceProps = {
-    /** sets `gap` property */
-    gridGap?: Property.GridGap | GridSpacePropsValues;
-};
-export declare type SpaceStyleProps = gridSpaceProps & GridStyleProps;
+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` (`zero`, `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`).
- * Values: `zero: 0px`, `xxxs: 4px`, `xxs: 8px`, `xs: 12px`, `s: 16px`, `m: 24px`, `l: 32px`, `xl: 40px`, `xxl: 64px`, `xxxl: 80px`.
+ * Space tokens are available for gridGap, gridRowGap, gridColumnGap props.
  *
  * @example
- * // You'll most likely use `grid` with low-level, styled components
+ * ```tsx
  * const GridExample = () => (
  *   <Grid gridAutoFlow="row" justifyContent="center" alignItems="center">
  *     Hello, Grid!
  *   </Grid>
  * );
- *
+ * ```
  */
-export declare function grid<P extends SpaceStyleProps>(props: P): {};
+export declare const grid: (props: GridStyleProps) => {};
 //# sourceMappingURL=grid.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACjC,OAAO,EAAoC,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAEpG,oBAAY,oBAAoB,GAAG,eAAe,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAE5E,mDAAmD;AACnD,oBAAY,cAAc,GAAG;IAC3B,kCAAkC;IAClC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,oCAAoC;IACpC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC;;;SAGK;IACL,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IACjC,oCAAoC;IACpC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,sCAAsC;IACtC,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC;IAGzC,oCAAoC;IACpC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC;IAC/C,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC;IACnD,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,gBAAgB,CAAC;IAC7C,iCAAiC;IACjC,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,GAAG,oBAAoB,CAAC;IAC9D,8BAA8B;IAC9B,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,GAAG,oBAAoB,CAAC;IACxD,0BAA0B;IAC1B,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,oBAAoB,CAAC;IAClD,kCAAkC;IAClC,cAAc,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACrC,wCAAwC;IACxC,eAAe,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC;IAC3C,qCAAqC;IACrC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B,qCAAqC;IACrC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,2BAA2B;IAC3B,IAAI,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC;CACtB,CAAC;AAEF,oBAAY,cAAc,GAAG;IAC3B,0BAA0B;IAC1B,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,oBAAoB,CAAC;CACnD,CAAC;AAkBF,oBAAY,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;AAuB9D;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC,MAmBvD"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,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,CAAC;IACjC,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"}

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

@@ -1,85 +1,112 @@
 "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.grid = void 0;
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var gridGap = function (value) {
-    return { gridGap: tokens_1.space[value] || value };
-};
-var gridRowGap = function (value) {
-    return { gridRowGap: tokens_1.space[value] || value };
-};
-var gridColumnGap = function (value) {
-    return { gridColumnGap: tokens_1.space[value] || value };
-};
-var gridSpaceStyleProps = {
-    gridGap: gridGap,
-    gridRowGap: gridRowGap,
-    gridColumnGap: gridColumnGap,
-};
-var gridProps = {
-    alignContent: 'alignContent',
-    alignItems: 'alignItems',
-    display: 'display',
-    justifyContent: 'justifyContent',
-    justifyItems: 'justifyItems',
-    gridTemplateAreas: 'gridTemplateAreas',
-    gridTemplate: 'gridTemplate',
-    gridTemplateColumns: 'gridTemplateColumns',
-    gridTemplateRows: 'gridTemplateRows',
-    gridColumnGap: 'gridColumnGap',
-    gridRowGap: 'gridRowGap',
-    gridGap: 'gridGap',
-    gridPlaceItems: 'gridPlaceItems',
-    gridAutoColumns: 'gridAutoColumns',
-    gridAutoRows: 'gridAutoRows',
-    gridAutoFlow: 'gridAutoFlow',
-    gridArea: 'gridArea',
-    grid: 'grid',
-};
+exports.grid = exports.gridStyleFns = exports.gridStyleFnConfigs = void 0;
+var buildStyleFns_1 = require("./buildStyleFns");
+exports.gridStyleFnConfigs = [
+    {
+        name: 'gridGap',
+        properties: ['gridGap'],
+        system: 'space',
+    },
+    {
+        name: 'gridRowGap',
+        properties: ['gridRowGap'],
+        system: 'space',
+    },
+    {
+        name: 'gridColumnGap',
+        properties: ['gridColumnGap'],
+        system: 'space',
+    },
+    {
+        name: 'alignContent',
+        properties: ['alignContent'],
+        system: 'none',
+    },
+    {
+        name: 'alignItems',
+        properties: ['alignItems'],
+        system: 'none',
+    },
+    {
+        name: 'display',
+        properties: ['display'],
+        system: 'none',
+    },
+    {
+        name: 'justifyContent',
+        properties: ['justifyContent'],
+        system: 'none',
+    },
+    {
+        name: 'justifyItems',
+        properties: ['justifyItems'],
+        system: 'none',
+    },
+    {
+        name: 'gridTemplateAreas',
+        properties: ['gridTemplateAreas'],
+        system: 'none',
+    },
+    {
+        name: 'gridTemplate',
+        properties: ['gridTemplate'],
+        system: 'none',
+    },
+    {
+        name: 'gridTemplateColumns',
+        properties: ['gridTemplateColumns'],
+        system: 'none',
+    },
+    {
+        name: 'gridTemplateRows',
+        properties: ['gridTemplateRows'],
+        system: 'none',
+    },
+    {
+        name: 'gridPlaceItems',
+        properties: ['gridPlaceItems'],
+        system: 'none',
+    },
+    {
+        name: 'gridAutoColumns',
+        properties: ['gridAutoColumns'],
+        system: 'none',
+    },
+    {
+        name: 'gridAutoRows',
+        properties: ['gridAutoRows'],
+        system: 'none',
+    },
+    {
+        name: 'gridAutoFlow',
+        properties: ['gridAutoFlow'],
+        system: 'none',
+    },
+    {
+        name: 'gridArea',
+        properties: ['gridArea'],
+        system: 'none',
+    },
+    {
+        name: 'grid',
+        properties: ['grid'],
+        system: 'none',
+    },
+];
+exports.gridStyleFns = buildStyleFns_1.buildStyleFns(exports.gridStyleFnConfigs);
 /**
  * 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` (`zero`, `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`).
- * Values: `zero: 0px`, `xxxs: 4px`, `xxs: 8px`, `xs: 12px`, `s: 16px`, `m: 24px`, `l: 32px`, `xl: 40px`, `xxl: 64px`, `xxxl: 80px`.
+ * Space tokens are available for gridGap, gridRowGap, gridColumnGap props.
  *
  * @example
- * // You'll most likely use `grid` with low-level, styled components
+ * ```tsx
  * const GridExample = () => (
  *   <Grid gridAutoFlow="row" justifyContent="center" alignItems="center">
  *     Hello, Grid!
  *   </Grid>
  * );
- *
+ * ```
  */
-function grid(props) {
-    var styles = {};
-    for (var key in props) {
-        if (props.hasOwnProperty(key)) {
-            if (key in gridProps) {
-                var attr = gridProps[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;
-            }
-            if (key in gridSpaceStyleProps) {
-                var value = props[key];
-                var spaceFn = gridSpaceStyleProps[key];
-                var style = spaceFn(value);
-                styles = __assign(__assign({}, styles), style);
-            }
-        }
-    }
-    return styles;
-}
-exports.grid = grid;
+exports.grid = buildStyleFns_1.buildStylePropFn(exports.gridStyleFns);

package/dist/commonjs/layout/lib/utils/gridItem.d.ts

@@ -1,39 +1,42 @@
 import { Property } from 'csstype';
-/** style props to for grid item properties */
+import { StyleFnConfig } from './buildStyleFns';
+/** style props to for CSS grid item properties */
 export declare type GridItemStyleProps = {
-    /** sets `grid-column-start` property */
+    /** sets [CSS grid-column-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start) */
     gridColumnStart?: Property.GridColumnStart;
-    /** sets `grid-column-end` property */
+    /** sets [CSS grid-column-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end) */
     gridColumnEnd?: Property.GridColumnEnd;
-    /** sets `grid-row-start` property */
+    /** sets [CSS grid-row-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start) */
     gridRowStart?: Property.GridRowStart;
-    /** sets `grid-row-end` property */
+    /** sets [CSS grid-row-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end) */
     gridRowEnd?: Property.GridRowEnd;
-    /** sets `grid-column` property */
+    /** sets [CSS grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column) */
     gridColumn?: Property.GridColumn;
-    /** sets `grid-row` property */
+    /** sets [CSS grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row) */
     gridRow?: Property.GridRow;
-    /** sets `grid-area` property */
+    /** sets [CSS grid-area property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) */
     gridArea?: Property.GridArea;
-    /** sets `justify-self` property */
+    /** sets [CSS justify-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) */
     justifySelf?: Property.JustifySelf;
-    /** sets `align-self` property */
+    /** sets [CSS align-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) */
     alignSelf?: Property.AlignSelf;
-    /** sets `place-self` property */
+    /** sets [CSS place-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self) */
     placeSelf?: Property.PlaceSelf;
 };
+export declare const gridItemStyleFnConfigs: StyleFnConfig[];
+export declare const gridItemStyleFns: import("./buildStyleFns").StyleFns;
 /**
  * A style prop function that takes component props and returns grid styles.
  * If no `GridItemStyleProps` are found, it returns an empty object.
  *
  * @example
- * // You'll most likely use `grid item` with low-level, styled components
+ * ```tsx
  * const GridItemExample = () => (
  *   <Grid.Item gridRowStart="1" justifySelf="center" gridArea="Card">
  *     Hello, Grid Item!
  *   </Grid.Item>
  * );
- *
+ * ```
  */
-export declare function gridItem<P extends GridItemStyleProps>(props: P): {};
+export declare const gridItem: (props: GridItemStyleProps) => {};
 //# sourceMappingURL=gridItem.d.ts.map

package/dist/commonjs/layout/lib/utils/gridItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gridItem.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/gridItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,8CAA8C;AAC9C,oBAAY,kBAAkB,GAAG;IAE/B,wCAAwC;IACxC,eAAe,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC;IAC3C,sCAAsC;IACtC,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC,qCAAqC;IACrC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,mCAAmC;IACnC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,kCAAkC;IAClC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,+BAA+B;IAC/B,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC3B,gCAAgC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B,mCAAmC;IACnC,WAAW,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;IACnC,iCAAiC;IACjC,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B,iCAAiC;IACjC,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC,CAAC;AAiBF;;;;;;;;;;;;GAYG;AAEH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,kBAAkB,EAAE,KAAK,EAAE,CAAC,MAW9D"}
+{"version":3,"file":"gridItem.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/gridItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAkC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE/E,kDAAkD;AAClD,oBAAY,kBAAkB,GAAG;IAC/B,gHAAgH;IAChH,eAAe,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC;IAC3C,4GAA4G;IAC5G,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC,0GAA0G;IAC1G,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,sGAAsG;IACtG,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,oGAAoG;IACpG,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,8FAA8F;IAC9F,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC3B,gGAAgG;IAChG,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B,sGAAsG;IACtG,WAAW,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;IACnC,kGAAkG;IAClG,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B,kGAAkG;IAClG,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,aAAa,EAmDjD,CAAC;AAEF,eAAO,MAAM,gBAAgB,oCAAwC,CAAC;AACtE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,mCAAyD,CAAC"}

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

@@ -1,43 +1,71 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.gridItem = void 0;
-/** style props to for grid item properties */
-var gridItemProps = {
-    //Child Props
-    gridColumnStart: 'gridColumnStart',
-    gridColumnEnd: 'gridColumnEnd',
-    gridRowStart: 'gridRowStart',
-    gridRowEnd: 'gridRowEnd',
-    gridColumn: 'gridColumn',
-    gridRow: 'gridRow',
-    gridArea: 'gridArea',
-    justifySelf: 'justifySelf',
-    alignSelf: 'alignSelf',
-    placeSelf: 'placeSelf',
-};
+exports.gridItem = exports.gridItemStyleFns = exports.gridItemStyleFnConfigs = void 0;
+var buildStyleFns_1 = require("./buildStyleFns");
+exports.gridItemStyleFnConfigs = [
+    {
+        name: 'gridColumnStart',
+        properties: ['gridColumnStart'],
+        system: 'none',
+    },
+    {
+        name: 'gridColumnEnd',
+        properties: ['gridColumnEnd'],
+        system: 'none',
+    },
+    {
+        name: 'gridRowStart',
+        properties: ['gridRowStart'],
+        system: 'none',
+    },
+    {
+        name: 'gridRowEnd',
+        properties: ['gridRowEnd'],
+        system: 'none',
+    },
+    {
+        name: 'gridColumn',
+        properties: ['gridColumn'],
+        system: 'none',
+    },
+    {
+        name: 'gridRow',
+        properties: ['gridRow'],
+        system: 'none',
+    },
+    {
+        name: 'gridArea',
+        properties: ['gridArea'],
+        system: 'none',
+    },
+    {
+        name: 'justifySelf',
+        properties: ['justifySelf'],
+        system: 'none',
+    },
+    {
+        name: 'alignSelf',
+        properties: ['alignSelf'],
+        system: 'none',
+    },
+    {
+        name: 'placeSelf',
+        properties: ['placeSelf'],
+        system: 'none',
+    },
+];
+exports.gridItemStyleFns = buildStyleFns_1.buildStyleFns(exports.gridItemStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns grid styles.
  * If no `GridItemStyleProps` are found, it returns an empty object.
  *
  * @example
- * // You'll most likely use `grid item` with low-level, styled components
+ * ```tsx
  * const GridItemExample = () => (
  *   <Grid.Item gridRowStart="1" justifySelf="center" gridArea="Card">
  *     Hello, Grid Item!
  *   </Grid.Item>
  * );
- *
+ * ```
  */
-function gridItem(props) {
-    var styles = {};
-    for (var key in props) {
-        if (key in gridItemProps) {
-            var attr = gridItemProps[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.gridItem = gridItem;
+exports.gridItem = buildStyleFns_1.buildStylePropFn(exports.gridItemStyleFns);

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

@@ -1,43 +1,65 @@
 import { Property } from 'csstype';
-/** style props to for layout properties */
+import { StyleFnConfig } from './buildStyleFns';
+import { SystemPropValues } from './systemProps';
+/** style props to for CSS layout properties */
 export declare type LayoutStyleProps = {
-    /** sets `display` property */
+    /** sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/displaydisplay) */
     display?: Property.Display;
-    /** sets `height` property */
-    height?: number | string;
-    /** sets `list-style property */
+    /**
+     * - sets [CSS height property](https://developer.mozilla.org/en-US/docs/Web/CSS/height)
+     * - system tokens: `space`
+     * */
+    height?: SystemPropValues['space'];
+    /** sets [CSS list-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style) */
     listStyle?: Property.ListStyle;
-    /** 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 */
+    /**
+     * - sets [CSS max-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height)
+     * - system tokens: `space`
+     * */
+    maxHeight?: SystemPropValues['space'];
+    /**
+     * - sets [CSS max-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width)
+     * - system tokens: `space`
+     * */
+    maxWidth?: SystemPropValues['space'];
+    /**
+     * - sets [CSS min-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height)
+     * - system tokens: `space`
+     * */
+    minHeight?: SystemPropValues['space'];
+    /**
+     * - sets [CSS min-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width)
+     * - system tokens: `space`
+     * */
+    minWidth?: SystemPropValues['space'];
+    /** sets [CSS overflow property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) */
     overflow?: Property.Overflow;
-    /** sets `overflow-x` property */
+    /** sets [CSS overflow-x property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x) */
     overflowX?: Property.OverflowX;
-    /** sets `overflow-y` property */
+    /** sets [CSS overflow-y property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y) */
     overflowY?: Property.OverflowY;
-    /** sets `vertical-align` property */
+    /** sets [CSS vertical-align property](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) */
     verticalAlign?: Property.VerticalAlign;
-    /** sets `width` property */
-    width?: number | string;
+    /**
+     * - sets [CSS width property](https://developer.mozilla.org/en-US/docs/Web/CSS/width)
+     * - system tokens: `space`
+     * */
+    width?: SystemPropValues['space'];
 };
+export declare const layoutStyleFnConfigs: StyleFnConfig[];
+export declare const layoutStyleFns: import("./buildStyleFns").StyleFns;
 /**
- * A style prop function that takes components props and returns layout styles.
+ * A style prop function that takes component 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 = () => (
+ * ```tsx
+ * const LayoutExample = () => (
  *   <Box display="inline-block" height="50%">
- *     Hello, positions!
+ *     Hello, layout!
  *   </Box>
  * );
- *
+ * ```
  */
-export declare function layout<P extends LayoutStyleProps>(props: P): {};
+export declare const layout: (props: LayoutStyleProps) => {};
 //# sourceMappingURL=layout.d.ts.map