@workday/canvas-kit-react 8.0.0-alpha.208-next.1 → 8.0.0-alpha.216-next.4

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

@@ -1,74 +1,58 @@
-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 { ContentDirection, useTheme, } from '@workday/canvas-kit-react/common';
-var getInsetInlineStartStyle = function (value, isRTL) {
-    var _a;
-    if (isRTL === void 0) { isRTL = false; }
-    var attr = isRTL ? 'right' : 'left';
-    return _a = {}, _a[attr] = value, _a;
-};
-var getInsetInlineEndStyle = function (value, isRTL) {
-    var _a;
-    if (isRTL === void 0) { isRTL = false; }
-    var attr = isRTL ? 'left' : 'right';
-    return _a = {}, _a[attr] = value, _a;
-};
-var standardPositionProps = {
-    position: 'position',
-    zIndex: 'zIndex',
-    top: 'top',
-    right: 'right',
-    bottom: 'bottom',
-    left: 'left',
-};
-var logicalPositionProps = {
-    insetInlineStart: getInsetInlineStartStyle,
-    insetInlineEnd: getInsetInlineEndStyle,
-};
+import { buildStyleFns, buildStylePropFn } from './buildStyleFns';
+export var positionStyleFnConfigs = [
+    {
+        name: 'position',
+        properties: ['position'],
+        system: 'none',
+    },
+    {
+        name: 'zIndex',
+        properties: ['zIndex'],
+        system: 'none',
+    },
+    {
+        name: 'top',
+        properties: ['top'],
+        system: 'none',
+    },
+    {
+        name: 'right',
+        properties: ['right'],
+        system: 'none',
+    },
+    {
+        name: 'bottom',
+        properties: ['bottom'],
+        system: 'none',
+    },
+    {
+        name: 'left',
+        properties: ['left'],
+        system: 'none',
+    },
+    {
+        name: 'insetInlineStart',
+        properties: ['insetInlineStart'],
+        system: 'none',
+    },
+    {
+        name: 'insetInlineEnd',
+        properties: ['insetInlineEnd'],
+        system: 'none',
+    },
+];
+export var positionStyleFns = buildStyleFns(positionStyleFnConfigs);
 /**
- * A style prop function that takes components props and returns position styles.
+ * A style prop function that takes component 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 function position(props) {
-    // position 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 = useTheme(props.theme).canvas;
-    var styles = {};
-    for (var key in props) {
-        if (key in props) {
-            if (key in standardPositionProps) {
-                var value = props[key];
-                var attr = standardPositionProps[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 logicalPositionProps) {
-                var value = props[key];
-                var styleFn = logicalPositionProps[key];
-                var isRTL = canvas.direction === ContentDirection.RTL;
-                var style = styleFn(value, isRTL);
-                styles = __assign(__assign({}, styles), style);
-            }
-        }
-    }
-    return styles;
-}
+export var position = buildStylePropFn(positionStyleFns);

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

@@ -1,64 +1,120 @@
-import { PartialEmotionCanvasTheme } from '@workday/canvas-kit-react/common';
-import { CanvasSpaceKeys } from '@workday/canvas-kit-react/tokens';
-declare type SpacePropValues = CanvasSpaceKeys | number | (string & {});
-/** These props automatically adjust for bidirectionality (LTR & RTL) */
-export declare type SpaceLogicalProps = {
-    /** sets margin-left property (bidirectional support) */
-    marginInlineStart?: SpacePropValues;
-    /** sets margin-right property (bidirectional support) */
-    marginInlineEnd?: SpacePropValues;
-    /** sets padding-left property (bidirectional support) */
-    paddingInlineStart?: SpacePropValues;
-    /** sets padding-right property (bidirectional support) */
-    paddingInlineEnd?: SpacePropValues;
+import { StyleFnConfig } from './buildStyleFns';
+import { SystemPropValues } from './systemProps';
+/** style props to for CSS space properties */
+export declare type SpaceStyleProps = {
+    /**
+     * - sets [CSS margin-inline-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start)
+     * - bidirectional support
+     * - system tokens: `space`
+     * */
+    marginInlineStart?: SystemPropValues['space'];
+    /**
+     * - sets [CSS margin-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end)
+     * - bidirectional support
+     * - system tokens: `space`
+     * */
+    marginInlineEnd?: SystemPropValues['space'];
+    /**
+     * - sets [CSS padding-inline-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start)
+     * - bidirectional support
+     * - system tokens: `space`
+     * */
+    paddingInlineStart?: SystemPropValues['space'];
+    /**
+     * - sets [CSS padding-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end)
+     * - bidirectional support
+     * - system tokens: `space`
+     * */
+    paddingInlineEnd?: SystemPropValues['space'];
+    /**
+     * - sets [CSS margin property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)
+     * - system tokens: `space`
+     * */
+    margin?: SystemPropValues['space'];
+    /**
+     * - sets [CSS margin-left](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) and [margin-right properties](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right)
+     * - system tokens: `space`
+     * */
+    marginX?: SystemPropValues['space'];
+    /**
+     * - sets [CSS margin-top](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) and [margin-bottom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom)
+     * - system tokens: `space`
+     * */
+    marginY?: SystemPropValues['space'];
+    /**
+     * - sets [CSS margin-top property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top)
+     * - system tokens: `space`
+     * */
+    marginTop?: SystemPropValues['space'];
+    /**
+     * - sets [CSS margin-right property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right)
+     * - no bidirectional support
+     * - system tokens: `space`
+     * */
+    marginRight?: SystemPropValues['space'];
+    /**
+     * - sets [CSS margin-bottom property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom)
+     * - system tokens: `space`
+     * */
+    marginBottom?: SystemPropValues['space'];
+    /**
+     * - sets [CSS margin-left property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left)
+     * - no bidirectional support
+     * - system tokens: `space`
+     * */
+    marginLeft?: SystemPropValues['space'];
+    /**
+     * - sets [CSS padding property](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)
+     * - system tokens: `space`
+     * */
+    padding?: SystemPropValues['space'];
+    /**
+     * - sets [CSS padding-left]((https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) and [padding-right properties](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right)
+     * - system tokens: `space`
+     * */
+    paddingX?: SystemPropValues['space'];
+    /**
+     * - sets [CSS padding-top](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) and [padding-bottom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom)
+     * - system tokens: `space`
+     * */
+    paddingY?: SystemPropValues['space'];
+    /**
+     * - sets [CSS padding-top property](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top)
+     * - system tokens: `space`
+     * */
+    paddingTop?: SystemPropValues['space'];
+    /**
+     * - sets [CSS padding-right property](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right)
+     * - no bidirectional support
+     * - system tokens: `space`
+     * */
+    paddingRight?: SystemPropValues['space'];
+    /**
+     * - sets [CSS padding-bottom](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)
+     * - system tokens: `space`
+     * */
+    paddingBottom?: SystemPropValues['space'];
+    /**
+     * - sets [CSS padding-left property](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left)
+     * - no bidirectional support
+     * - system tokens: `space`
+     * */
+    paddingLeft?: SystemPropValues['space'];
 };
-/** These props do not adjust for bidirectionality (LTR & RTL) */
-export declare type SpaceStandardProps = {
-    /** sets margin property */
-    margin?: SpacePropValues;
-    /** sets margin-left and margin-right properties */
-    marginX?: SpacePropValues;
-    /** sets margin-top and margin-bottom properties */
-    marginY?: SpacePropValues;
-    /** sets margin-top property */
-    marginTop?: SpacePropValues;
-    /** sets margin-right property (no bidirectional support) */
-    marginRight?: SpacePropValues;
-    /** sets margin-bottom property */
-    marginBottom?: SpacePropValues;
-    /** sets margin-left property (no bidirectional support) */
-    marginLeft?: SpacePropValues;
-    /** sets padding property */
-    padding?: SpacePropValues;
-    /** sets padding-left and margin-right properties */
-    paddingX?: SpacePropValues;
-    /** sets padding-top and padding-bottom properties */
-    paddingY?: SpacePropValues;
-    /** sets padding-top property */
-    paddingTop?: SpacePropValues;
-    /** sets padding-right property (no bidirectional support) */
-    paddingRight?: SpacePropValues;
-    /** sets padding-bottom */
-    paddingBottom?: SpacePropValues;
-    /** sets padding-left property (no bidirectional support) */
-    paddingLeft?: SpacePropValues;
-};
-export declare type SpaceStyleProps = SpaceStandardProps & SpaceLogicalProps;
+export declare const spaceStyleFnConfigs: StyleFnConfig[];
+export declare const spaceStyleFns: import("./buildStyleFns").StyleFns;
 /**
  * A style prop function that takes component props and returns space styles.
  * If no `SpaceStyleProps` are found, it returns an empty object.
  *
  * @example
- * // You'll most likely use `space` with low-level, styled components
+ * ```tsx
  * const BoxExample = () => (
  *   <Box padding="xs" margin="m">
  *     Hello, space!
  *   </Box>
  * );
- *
+ * ```
  */
-export declare function space<P extends SpaceStyleProps & {
-    theme?: PartialEmotionCanvasTheme;
-}>(props: P): {};
-export {};
+export declare const space: (props: SpaceStyleProps) => {};
 //# sourceMappingURL=space.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"space.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/space.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,yBAAyB,EAE1B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAoC,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAEpG,aAAK,eAAe,GAAG,eAAe,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEhE,wEAAwE;AACxE,oBAAY,iBAAiB,GAAG;IAC9B,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC,yDAAyD;IACzD,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,yDAAyD;IACzD,kBAAkB,CAAC,EAAE,eAAe,CAAC;IACrC,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,eAAe,CAAC;CACpC,CAAC;AAEF,iEAAiE;AACjE,oBAAY,kBAAkB,GAAG;IAC/B,2BAA2B;IAC3B,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,mDAAmD;IACnD,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,mDAAmD;IACnD,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,4DAA4D;IAC5D,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,kCAAkC;IAClC,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,2DAA2D;IAC3D,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,4BAA4B;IAC5B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,oDAAoD;IACpD,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,gCAAgC;IAChC,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,6DAA6D;IAC7D,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,0BAA0B;IAC1B,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,4DAA4D;IAC5D,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B,CAAC;AAEF,oBAAY,eAAe,GAAG,kBAAkB,GAAG,iBAAiB,CAAC;AAoHrE;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,GAAG;IAAC,KAAK,CAAC,EAAE,yBAAyB,CAAA;CAAC,EAAE,KAAK,EAAE,CAAC,MAwB9F"}
+{"version":3,"file":"space.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/space.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAE/C,8CAA8C;AAC9C,oBAAY,eAAe,GAAG;IAC5B;;;;SAIK;IACL,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC9C;;;;SAIK;IACL,eAAe,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC5C;;;;SAIK;IACL,kBAAkB,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC/C;;;;SAIK;IACL,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC7C;;;SAGK;IACL,MAAM,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACnC;;;SAGK;IACL,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACpC;;;SAGK;IACL,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACpC;;;SAGK;IACL,SAAS,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACtC;;;;SAIK;IACL,WAAW,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACxC;;;SAGK;IACL,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACzC;;;;SAIK;IACL,UAAU,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvC;;;SAGK;IACL,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACpC;;;SAGK;IACL,QAAQ,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrC;;;SAGK;IACL,QAAQ,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrC;;;SAGK;IACL,UAAU,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvC;;;;SAIK;IACL,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACzC;;;SAGK;IACL,aAAa,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC1C;;;;SAIK;IACL,WAAW,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,aAAa,EA2F9C,CAAC;AAEF,eAAO,MAAM,aAAa,oCAAqC,CAAC;AAChE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,KAAK,gCAAmD,CAAC"}

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

@@ -1,157 +1,108 @@
-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 { ContentDirection, useTheme, } from '@workday/canvas-kit-react/common';
-import { space as spaceTokens } from '@workday/canvas-kit-react/tokens';
-var margin = function (value) {
-    return { margin: spaceTokens[value] || value };
-};
-var marginX = function (value) {
-    return {
-        marginLeft: spaceTokens[value] || value,
-        marginRight: spaceTokens[value] || value,
-    };
-};
-var marginY = function (value) {
-    return {
-        marginTop: spaceTokens[value] || value,
-        marginBottom: spaceTokens[value] || value,
-    };
-};
-var marginTop = function (value) {
-    return {
-        marginTop: spaceTokens[value] || value,
-    };
-};
-var marginRight = function (value, isRTL) {
-    var _a;
-    if (isRTL === void 0) { isRTL = false; }
-    var attr = isRTL ? 'marginLeft' : 'marginRight';
-    return _a = {},
-        _a[attr] = spaceTokens[value] || value,
-        _a;
-};
-var marginBottom = function (value) {
-    return {
-        marginBottom: spaceTokens[value] || value,
-    };
-};
-var marginLeft = function (value, isRTL) {
-    var _a;
-    if (isRTL === void 0) { isRTL = false; }
-    var attr = isRTL ? 'marginRight' : 'marginLeft';
-    return _a = {},
-        _a[attr] = spaceTokens[value] || value,
-        _a;
-};
-var padding = function (value) {
-    return {
-        padding: spaceTokens[value] || value,
-    };
-};
-var paddingX = function (value) {
-    return {
-        paddingLeft: spaceTokens[value] || value,
-        paddingRight: spaceTokens[value] || value,
-    };
-};
-var paddingY = function (value) {
-    return {
-        paddingTop: spaceTokens[value] || value,
-        paddingBottom: spaceTokens[value] || value,
-    };
-};
-var paddingTop = function (value) {
-    return {
-        paddingTop: spaceTokens[value] || value,
-    };
-};
-var paddingRight = function (value, isRTL) {
-    var _a;
-    if (isRTL === void 0) { isRTL = false; }
-    var attr = isRTL ? 'paddingLeft' : 'paddingRight';
-    return _a = {},
-        _a[attr] = spaceTokens[value] || value,
-        _a;
-};
-var paddingBottom = function (value) {
-    return {
-        paddingBottom: spaceTokens[value] || value,
-    };
-};
-var paddingLeft = function (value, isRTL) {
-    var _a;
-    if (isRTL === void 0) { isRTL = false; }
-    var attr = isRTL ? 'paddingRight' : 'paddingLeft';
-    return _a = {},
-        _a[attr] = spaceTokens[value] || value,
-        _a;
-};
-var logicalSpaceStyleProps = {
-    marginInlineStart: marginLeft,
-    marginInlineEnd: marginRight,
-    paddingInlineStart: paddingLeft,
-    paddingInlineEnd: paddingRight,
-};
-var standardSpaceStyleProps = {
-    margin: margin,
-    marginX: marginX,
-    marginY: marginY,
-    marginTop: marginTop,
-    marginRight: marginRight,
-    marginBottom: marginBottom,
-    marginLeft: marginLeft,
-    padding: padding,
-    paddingX: paddingX,
-    paddingY: paddingY,
-    paddingTop: paddingTop,
-    paddingRight: paddingRight,
-    paddingBottom: paddingBottom,
-    paddingLeft: paddingLeft,
-};
+import { buildStyleFns, buildStylePropFn } from './buildStyleFns';
+export var spaceStyleFnConfigs = [
+    {
+        name: 'marginInlineStart',
+        properties: ['marginInlineStart'],
+        system: 'space',
+    },
+    {
+        name: 'marginInlineEnd',
+        properties: ['marginInlineEnd'],
+        system: 'space',
+    },
+    {
+        name: 'paddingInlineStart',
+        properties: ['paddingInlineStart'],
+        system: 'space',
+    },
+    {
+        name: 'paddingInlineEnd',
+        properties: ['paddingInlineEnd'],
+        system: 'space',
+    },
+    {
+        name: 'margin',
+        properties: ['margin'],
+        system: 'space',
+    },
+    {
+        name: 'marginX',
+        properties: ['marginLeft', 'marginRight'],
+        system: 'space',
+    },
+    {
+        name: 'marginY',
+        properties: ['marginTop', 'marginBottom'],
+        system: 'space',
+    },
+    {
+        name: 'marginTop',
+        properties: ['marginTop'],
+        system: 'space',
+    },
+    {
+        name: 'marginRight',
+        properties: ['marginRight'],
+        system: 'space',
+    },
+    {
+        name: 'marginBottom',
+        properties: ['marginBottom'],
+        system: 'space',
+    },
+    {
+        name: 'marginLeft',
+        properties: ['marginLeft'],
+        system: 'space',
+    },
+    {
+        name: 'padding',
+        properties: ['padding'],
+        system: 'space',
+    },
+    {
+        name: 'paddingX',
+        properties: ['paddingLeft', 'paddingRight'],
+        system: 'space',
+    },
+    {
+        name: 'paddingY',
+        properties: ['paddingTop', 'paddingBottom'],
+        system: 'space',
+    },
+    {
+        name: 'paddingTop',
+        properties: ['paddingTop'],
+        system: 'space',
+    },
+    {
+        name: 'paddingRight',
+        properties: ['paddingRight'],
+        system: 'space',
+    },
+    {
+        name: 'paddingBottom',
+        properties: ['paddingBottom'],
+        system: 'space',
+    },
+    {
+        name: 'paddingLeft',
+        properties: ['paddingLeft'],
+        system: 'space',
+    },
+];
+export var spaceStyleFns = buildStyleFns(spaceStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns space styles.
  * If no `SpaceStyleProps` are found, it returns an empty object.
  *
  * @example
- * // You'll most likely use `space` with low-level, styled components
+ * ```tsx
  * const BoxExample = () => (
  *   <Box padding="xs" margin="m">
  *     Hello, space!
  *   </Box>
  * );
- *
+ * ```
  */
-export function space(props) {
-    // space 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 = useTheme(props.theme).canvas;
-    var styles = {};
-    for (var key in props) {
-        if (props.hasOwnProperty(key)) {
-            if (key in standardSpaceStyleProps) {
-                var value = props[key];
-                var spaceFn = standardSpaceStyleProps[key];
-                var style = spaceFn(value);
-                styles = __assign(__assign({}, styles), style);
-                continue;
-            }
-            if (key in logicalSpaceStyleProps) {
-                var value = props[key];
-                var spaceFn = logicalSpaceStyleProps[key];
-                var isRTL = canvas.direction === ContentDirection.RTL;
-                var style = spaceFn(value, isRTL);
-                styles = __assign(__assign({}, styles), style);
-            }
-        }
-    }
-    return styles;
-}
+export var space = buildStylePropFn(spaceStyleFns);

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

@@ -1,8 +1,7 @@
-import { PartialEmotionCanvasTheme } from '@workday/canvas-kit-react/common';
-import { CanvasSpaceKeys } from '@workday/canvas-kit-react/tokens';
+import { SystemPropValues } from './systemProps';
 export declare type StackDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
 declare const selector = "& > *:not(style) ~ *:not(style)";
-export declare type StackSpacing = CanvasSpaceKeys | number | (string & {});
+export declare type StackSpacing = SystemPropValues['space'];
 export declare type StackStyleProps = {
     /** sets space values between child elements (bidirectional support) */
     spacing: StackSpacing;
@@ -17,9 +16,7 @@ export declare type StackStyleProps = {
      * */
     shouldWrapChildren?: boolean;
 };
-export declare function stack<P extends StackStyleProps & {
-    theme?: PartialEmotionCanvasTheme;
-}>(props: P): {
+export declare function stack<P extends StackStyleProps>(props: P): {
     "& > *:not(style) ~ *:not(style)": {};
 };
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,yBAAyB,EAE1B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAuB,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAEvF,oBAAY,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;AAEjF,QAAA,MAAM,QAAQ,oCAAoC,CAAC;AAEnD,oBAAY,YAAY,GAAG,eAAe,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEpE,oBAAY,eAAe,GAAG;IAC5B,uEAAuE;IACvE,OAAO,EAAE,YAAY,CAAC;IACtB;;;SAGK;IACL,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B;;;SAGK;IACL,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AA+BF,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,GAAG;IAAC,KAAK,CAAC,EAAE,yBAAyB,CAAA;CAAC,EAAE,KAAK,EAAE,CAAC;;EAoB9F"}
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/stack.ts"],"names":[],"mappings":"AACA,OAAO,EAAyB,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEvE,oBAAY,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;AAEjF,QAAA,MAAM,QAAQ,oCAAoC,CAAC;AAEnD,oBAAY,YAAY,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAErD,oBAAY,eAAe,GAAG;IAC5B,uEAAuE;IACvE,OAAO,EAAE,YAAY,CAAC;IACtB;;;SAGK;IACL,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B;;;SAGK;IACL,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAMF,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC;;EAuBxD"}

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

@@ -1,49 +1,23 @@
-import { ContentDirection, useTheme, } from '@workday/canvas-kit-react/common';
 import { space as spaceTokens } from '@workday/canvas-kit-react/tokens';
 var selector = '& > *:not(style) ~ *:not(style)';
-var column = function (value) { return ({
-    marginTop: spaceTokens[value] || value,
-}); };
-var columnReverse = function (value) { return ({
-    marginBottom: spaceTokens[value] || value,
-}); };
-var row = function (value, isRTL) {
-    var _a;
-    if (isRTL === void 0) { isRTL = false; }
-    var attr = isRTL ? 'marginRight' : 'marginLeft';
-    return _a = {},
-        _a[attr] = spaceTokens[value] || value,
-        _a;
-};
-var rowReverse = function (value, isRTL) {
-    var _a;
-    if (isRTL === void 0) { isRTL = false; }
-    var attr = isRTL ? 'marginLeft' : 'marginRight';
-    return _a = {},
-        _a[attr] = spaceTokens[value] || value,
-        _a;
-};
-var stackDirectionProps = {
-    column: column,
-    'column-reverse': columnReverse,
-    row: row,
-    'row-reverse': rowReverse,
+var getSpace = function (value) {
+    return spaceTokens[value] || value;
 };
 export function stack(props) {
     var _a;
-    var styles = {};
     var _b = props.flexDirection, flexDirection = _b === void 0 ? 'row' : _b, spacing = props.spacing;
-    if (flexDirection === 'column' || flexDirection === 'column-reverse') {
-        var stackFn = stackDirectionProps[flexDirection];
-        styles = stackFn(spacing);
+    var styles = {};
+    if (flexDirection === 'column') {
+        styles = { marginTop: getSpace(spacing) };
+    }
+    if (flexDirection === 'column-reverse') {
+        styles = { marginBottom: getSpace(spacing) };
+    }
+    if (flexDirection === 'row') {
+        styles = { marginInlineStart: getSpace(spacing) };
     }
-    if (flexDirection === 'row' || flexDirection === 'row-reverse') {
-        // stack 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 = useTheme(props.theme).canvas;
-        var stackFn = stackDirectionProps[flexDirection];
-        var isRTL = canvas.direction === ContentDirection.RTL;
-        styles = stackFn(spacing, isRTL);
+    if (flexDirection === 'row-reverse') {
+        styles = { marginInlineEnd: getSpace(spacing) };
     }
     return _a = {},
         _a[selector] = styles,