@workday/canvas-kit-react 8.0.0-alpha.246-next.16 → 8.0.0-alpha.250-next.19

package/common/index.ts

@@ -7,3 +7,4 @@ export * from './lib/utils';
 export * from './lib/CanvasProvider';
 export * from './lib/InputProvider';
 export * from './lib/EllipsisText';
+export * from './lib/responsive/useResponsiveContainerStyles';

package/common/lib/responsive/useResponsiveContainerStyles.ts

@@ -0,0 +1,128 @@
+import { useTheme, breakpointKeys, CanvasBreakpoints } from "@workday/canvas-kit-react/common";
+import type {AllStyleProps} from "@workday/canvas-kit-react/layout";
+import {isWithinBreakpoint} from '../utils/isWithinBreakpoint'
+
+export type BreakpointKeys = typeof breakpointKeys[number];
+
+type ResponsiveCSSObject<T> = {
+  [P in keyof T]: Partial<Record<BreakpointKeys, AllStyleProps>> &
+    AllStyleProps;
+};
+type CSSObject<T> = {
+  [P in keyof T]: AllStyleProps;
+};
+
+// Takes in CanvasBreakpoint keys and returns current breakpoint key. Current breakpoint key is determined by the `width` of the container
+
+const getSize = (width: number, breakpoints: CanvasBreakpoints) => {
+  const ranges: {[key: string ]: [number, number?]} = {
+    'zero': [0, breakpoints.s],
+    's': [breakpoints.s, breakpoints.m],
+    'm': [breakpoints.m, breakpoints.l],
+    'l': [breakpoints.l, breakpoints.xl],
+    'xl': [breakpoints.xl]
+  };
+  return breakpointKeys.find((size: BreakpointKeys) => isWithinBreakpoint(width, ...ranges[size])) || 'zero';
+}
+
+// Returns responsive style objects that are within the current CanvasBreakpoint size
+
+function getStyles<T>(key: BreakpointKeys, styles: ResponsiveCSSObject<T>) {
+  const responsiveStyles = {} as CSSObject<T>;
+  const breakpointSize = breakpointKeys.indexOf(key);
+  for (let i = 0; i <= breakpointSize; i++) {
+    const breakpointName = breakpointKeys[i];
+    // property is key of the style object
+    Object.keys(styles).forEach((property) => {
+      const { zero, s, m, l, xl, ...base } = styles[property as keyof T];
+      const currentBreakpointStyles =
+        styles[property as keyof T][breakpointName] ?? {};
+      const previousBreakpointStyles = responsiveStyles[property as keyof T] ?? {};
+      responsiveStyles[property as keyof T] = {
+        ...base,
+        ...previousBreakpointStyles,
+        ...currentBreakpointStyles
+      };
+    });
+  }
+  return responsiveStyles;
+}
+
+/**
+ * useResponsiveContainerStyles
+ *
+ * ---
+ *
+ * This hook allows you to create container-based responsive styles with objects.
+ * It accepts two or three arguments: the responsive style object, the container width, and (optionally) the theme object.
+ * Each style object accepts five breakpoint keys: "zero", "s", "m", "l", and "xl".
+ * The sizes will act like `min-width`. For example, if you want to apply styles from `medium` and up, then you would write those styles under `m`.
+ *
+ * @example
+ * ```tsx
+import {Flex, Box} from '@workday/canvas-kit-react/layout';
+import {
+  useResponsiveStyles,
+} from '@workday/canvas-kit-react/common';
+
+const ref = React.useRef(null);
+const [containerWidth, setContainerWidth] = React.useState(0);
+
+useResizeObserver({
+  ref: ref,
+  onResize: data => {
+    setWidth(data.width || 0);
+  },
+});
+
+const containerResponsiveStyles = useResponsiveStyles(
+  {
+    flex: {
+      flexDirection: 'column',
+      padding: 'm',
+      depth: 1,
+      borderRadius: 'l',
+      zero: {
+        backgroundColor: 'Red',
+      },
+      s: {
+        backgroundColor: 'Orange',
+      },
+      m: {
+        backgroundColor: 'Yellow',
+      },
+      l: {
+        backgroundColor: 'Green',
+      },
+      xl: {
+        backgroundColor: 'Blue',
+      },
+    },
+    box: {
+      padding: 's',
+    },
+  },
+  containerWidth
+);
+
+return (
+    <Box ref={ref}>
+      <Flex {...containerResponsiveStyles.flex}>
+        <Box {...containerResponsiveStyles.box}>Hello World</Box>
+      </Flex>
+    </Box>
+);
+```
+ */
+
+export function useResponsiveContainerStyles<T extends ResponsiveCSSObject<T>>(
+  styles: ResponsiveCSSObject<T>,
+  width: number,
+  theme = {}
+) {
+  const canvasTheme = useTheme(theme);
+  const breakpoints = canvasTheme.canvas.breakpoints.values;
+
+  const size = getSize(width, breakpoints);
+  return getStyles(size, styles);
+}

package/common/lib/utils/isWithinBreakpoint.ts

@@ -0,0 +1,6 @@
+/**
+ * This function determines whether or not a container's width is within two values.
+ */
+export const isWithinBreakpoint = (width: number, min: number, max?: number) => {
+  return width >= min && (!max || (max && width <= max - 0.5));
+};

package/dist/commonjs/common/index.d.ts

@@ -7,4 +7,5 @@ export * from './lib/utils';
 export * from './lib/CanvasProvider';
 export * from './lib/InputProvider';
 export * from './lib/EllipsisText';
+export * from './lib/responsive/useResponsiveContainerStyles';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/common/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+CAA+C,CAAC"}

package/dist/commonjs/common/index.js

@@ -19,3 +19,4 @@ __exportStar(require("./lib/utils"), exports);
 __exportStar(require("./lib/CanvasProvider"), exports);
 __exportStar(require("./lib/InputProvider"), exports);
 __exportStar(require("./lib/EllipsisText"), exports);
+__exportStar(require("./lib/responsive/useResponsiveContainerStyles"), exports);

package/dist/commonjs/common/lib/responsive/useResponsiveContainerStyles.d.ts

@@ -0,0 +1,78 @@
+import { breakpointKeys } from "@workday/canvas-kit-react/common";
+import type { AllStyleProps } from "@workday/canvas-kit-react/layout";
+export declare type BreakpointKeys = typeof breakpointKeys[number];
+declare type ResponsiveCSSObject<T> = {
+    [P in keyof T]: Partial<Record<BreakpointKeys, AllStyleProps>> & AllStyleProps;
+};
+declare type CSSObject<T> = {
+    [P in keyof T]: AllStyleProps;
+};
+/**
+ * useResponsiveContainerStyles
+ *
+ * ---
+ *
+ * This hook allows you to create container-based responsive styles with objects.
+ * It accepts two or three arguments: the responsive style object, the container width, and (optionally) the theme object.
+ * Each style object accepts five breakpoint keys: "zero", "s", "m", "l", and "xl".
+ * The sizes will act like `min-width`. For example, if you want to apply styles from `medium` and up, then you would write those styles under `m`.
+ *
+ * @example
+ * ```tsx
+import {Flex, Box} from '@workday/canvas-kit-react/layout';
+import {
+  useResponsiveStyles,
+} from '@workday/canvas-kit-react/common';
+
+const ref = React.useRef(null);
+const [containerWidth, setContainerWidth] = React.useState(0);
+
+useResizeObserver({
+  ref: ref,
+  onResize: data => {
+    setWidth(data.width || 0);
+  },
+});
+
+const containerResponsiveStyles = useResponsiveStyles(
+  {
+    flex: {
+      flexDirection: 'column',
+      padding: 'm',
+      depth: 1,
+      borderRadius: 'l',
+      zero: {
+        backgroundColor: 'Red',
+      },
+      s: {
+        backgroundColor: 'Orange',
+      },
+      m: {
+        backgroundColor: 'Yellow',
+      },
+      l: {
+        backgroundColor: 'Green',
+      },
+      xl: {
+        backgroundColor: 'Blue',
+      },
+    },
+    box: {
+      padding: 's',
+    },
+  },
+  containerWidth
+);
+
+return (
+    <Box ref={ref}>
+      <Flex {...containerResponsiveStyles.flex}>
+        <Box {...containerResponsiveStyles.box}>Hello World</Box>
+      </Flex>
+    </Box>
+);
+```
+ */
+export declare function useResponsiveContainerStyles<T extends ResponsiveCSSObject<T>>(styles: ResponsiveCSSObject<T>, width: number, theme?: {}): CSSObject<T>;
+export {};
+//# sourceMappingURL=useResponsiveContainerStyles.d.ts.map

package/dist/commonjs/common/lib/responsive/useResponsiveContainerStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveContainerStyles.d.ts","sourceRoot":"","sources":["../../../../../common/lib/responsive/useResponsiveContainerStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAqB,MAAM,kCAAkC,CAAC;AAC/F,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAGpE,oBAAY,cAAc,GAAG,OAAO,cAAc,CAAC,MAAM,CAAC,CAAC;AAE3D,aAAK,mBAAmB,CAAC,CAAC,IAAI;KAC3B,CAAC,IAAI,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC,GAC5D,aAAa;CAChB,CAAC;AACF,aAAK,SAAS,CAAC,CAAC,IAAI;KACjB,CAAC,IAAI,MAAM,CAAC,GAAG,aAAa;CAC9B,CAAC;AAsCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AAEH,wBAAgB,4BAA4B,CAAC,CAAC,SAAS,mBAAmB,CAAC,CAAC,CAAC,EAC3E,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAC9B,KAAK,EAAE,MAAM,EACb,KAAK,KAAK,gBAOX"}

package/dist/commonjs/common/lib/responsive/useResponsiveContainerStyles.js

@@ -0,0 +1,139 @@
+"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 __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 __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResponsiveContainerStyles = void 0;
+var common_1 = require("@workday/canvas-kit-react/common");
+var isWithinBreakpoint_1 = require("../utils/isWithinBreakpoint");
+// Takes in CanvasBreakpoint keys and returns current breakpoint key. Current breakpoint key is determined by the `width` of the container
+var getSize = function (width, breakpoints) {
+    var ranges = {
+        'zero': [0, breakpoints.s],
+        's': [breakpoints.s, breakpoints.m],
+        'm': [breakpoints.m, breakpoints.l],
+        'l': [breakpoints.l, breakpoints.xl],
+        'xl': [breakpoints.xl]
+    };
+    return common_1.breakpointKeys.find(function (size) { return isWithinBreakpoint_1.isWithinBreakpoint.apply(void 0, __spreadArrays([width], ranges[size])); }) || 'zero';
+};
+// Returns responsive style objects that are within the current CanvasBreakpoint size
+function getStyles(key, styles) {
+    var responsiveStyles = {};
+    var breakpointSize = common_1.breakpointKeys.indexOf(key);
+    var _loop_1 = function (i) {
+        var breakpointName = common_1.breakpointKeys[i];
+        // property is key of the style object
+        Object.keys(styles).forEach(function (property) {
+            var _a, _b;
+            var _c = styles[property], zero = _c.zero, s = _c.s, m = _c.m, l = _c.l, xl = _c.xl, base = __rest(_c, ["zero", "s", "m", "l", "xl"]);
+            var currentBreakpointStyles = (_a = styles[property][breakpointName]) !== null && _a !== void 0 ? _a : {};
+            var previousBreakpointStyles = (_b = responsiveStyles[property]) !== null && _b !== void 0 ? _b : {};
+            responsiveStyles[property] = __assign(__assign(__assign({}, base), previousBreakpointStyles), currentBreakpointStyles);
+        });
+    };
+    for (var i = 0; i <= breakpointSize; i++) {
+        _loop_1(i);
+    }
+    return responsiveStyles;
+}
+/**
+ * useResponsiveContainerStyles
+ *
+ * ---
+ *
+ * This hook allows you to create container-based responsive styles with objects.
+ * It accepts two or three arguments: the responsive style object, the container width, and (optionally) the theme object.
+ * Each style object accepts five breakpoint keys: "zero", "s", "m", "l", and "xl".
+ * The sizes will act like `min-width`. For example, if you want to apply styles from `medium` and up, then you would write those styles under `m`.
+ *
+ * @example
+ * ```tsx
+import {Flex, Box} from '@workday/canvas-kit-react/layout';
+import {
+  useResponsiveStyles,
+} from '@workday/canvas-kit-react/common';
+
+const ref = React.useRef(null);
+const [containerWidth, setContainerWidth] = React.useState(0);
+
+useResizeObserver({
+  ref: ref,
+  onResize: data => {
+    setWidth(data.width || 0);
+  },
+});
+
+const containerResponsiveStyles = useResponsiveStyles(
+  {
+    flex: {
+      flexDirection: 'column',
+      padding: 'm',
+      depth: 1,
+      borderRadius: 'l',
+      zero: {
+        backgroundColor: 'Red',
+      },
+      s: {
+        backgroundColor: 'Orange',
+      },
+      m: {
+        backgroundColor: 'Yellow',
+      },
+      l: {
+        backgroundColor: 'Green',
+      },
+      xl: {
+        backgroundColor: 'Blue',
+      },
+    },
+    box: {
+      padding: 's',
+    },
+  },
+  containerWidth
+);
+
+return (
+    <Box ref={ref}>
+      <Flex {...containerResponsiveStyles.flex}>
+        <Box {...containerResponsiveStyles.box}>Hello World</Box>
+      </Flex>
+    </Box>
+);
+```
+ */
+function useResponsiveContainerStyles(styles, width, theme) {
+    if (theme === void 0) { theme = {}; }
+    var canvasTheme = common_1.useTheme(theme);
+    var breakpoints = canvasTheme.canvas.breakpoints.values;
+    var size = getSize(width, breakpoints);
+    return getStyles(size, styles);
+}
+exports.useResponsiveContainerStyles = useResponsiveContainerStyles;

package/dist/commonjs/common/lib/utils/isWithinBreakpoint.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This function determines whether or not a container's width is within two values.
+ */
+export declare const isWithinBreakpoint: (width: number, min: number, max?: number | undefined) => boolean | 0;
+//# sourceMappingURL=isWithinBreakpoint.d.ts.map

package/dist/commonjs/common/lib/utils/isWithinBreakpoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isWithinBreakpoint.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/isWithinBreakpoint.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,kBAAkB,UAAW,MAAM,OAAO,MAAM,0CAE5D,CAAC"}

package/dist/commonjs/common/lib/utils/isWithinBreakpoint.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isWithinBreakpoint = void 0;
+/**
+ * This function determines whether or not a container's width is within two values.
+ */
+var isWithinBreakpoint = function (width, min, max) {
+    return width >= min && (!max || (max && width <= max - 0.5));
+};
+exports.isWithinBreakpoint = isWithinBreakpoint;

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

@@ -1,6 +1,6 @@
 import { BoxProps } from './Box';
 import { FlexStyleProps } from './utils/flex';
-export declare type FlexProps = BoxProps & FlexStyleProps;
+export declare type FlexProps = Omit<BoxProps, 'display'> & FlexStyleProps;
 /**
  * `Flex` is a low-level layout component that provides a common, ergonomic API for applying CSS flexbox styles.
  * It is highly flexible, and can be used on its own or to build other components.
@@ -23,7 +23,7 @@ export declare type FlexProps = BoxProps & FlexStyleProps;
  * );
  * ```
  */
-export declare const Flex: import("../../common").ElementComponent<"div", import("..").BackgroundStyleProps & import("./utils/border/color").BorderColorStyleProps & import("./utils/border/lineStyle").BorderLineStyleProps & import("./utils/border/radius").BorderRadiusStyleProps & import("./utils/border/shorthand").BorderShorthandStyleProps & import("./utils/border/width").BorderWidthStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").GridItemStyleProps & import("..").LayoutStyleProps & import("..").OtherStyleProps & import("..").PositionStyleProps & import("..").SpaceStyleProps & import("..").TextStyleProps & FlexStyleProps> & {
+export declare const Flex: import("../../common").ElementComponent<"div", FlexProps> & {
     Item: import("../../common").ElementComponent<"div", import("..").CommonStyleProps>;
 };
 //# sourceMappingURL=Flex.d.ts.map

package/dist/commonjs/layout/lib/Flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Flex.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;AASlD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,IAAI;;CAYf,CAAC"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Flex.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,cAAc,CAAC;AASnE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,IAAI;;CAYf,CAAC"}

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

@@ -1,6 +1,6 @@
 import { BoxProps } from './Box';
 import { GridStyleProps } from './utils/grid';
-export declare type GridProps = BoxProps & GridStyleProps;
+export declare type GridProps = Omit<BoxProps, 'display'> & GridStyleProps;
 export declare type GridItemProps = BoxProps;
 /**
  * `Grid` is a two-dimensional layout system for the web. It lets you lay content out in rows and columns.
@@ -24,7 +24,7 @@ export declare type GridItemProps = BoxProps;
  * );
  *```
  */
-export declare const Grid: import("../../common").ElementComponent<"div", import("..").BackgroundStyleProps & import("./utils/border/color").BorderColorStyleProps & import("./utils/border/lineStyle").BorderLineStyleProps & import("./utils/border/radius").BorderRadiusStyleProps & import("./utils/border/shorthand").BorderShorthandStyleProps & import("./utils/border/width").BorderWidthStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").GridItemStyleProps & import("..").LayoutStyleProps & import("..").OtherStyleProps & import("..").PositionStyleProps & import("..").SpaceStyleProps & import("..").TextStyleProps & GridStyleProps> & {
+export declare const Grid: import("../../common").ElementComponent<"div", GridProps> & {
     /**
      * `<Grid.Item />` is the child specific sub-component to `<Grid/>`. `<Grid.Item />` gets child specific props, whereas `<Grid./>` gets parent container props.
      *

package/dist/commonjs/layout/lib/Grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Grid.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;AAClD,oBAAY,aAAa,GAAG,QAAQ,CAAC;AAoBrC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,IAAI;IAUb;;;;;;;;;;;;;;;;;;;;OAoBG;;CAIL,CAAC"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Grid.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,cAAc,CAAC;AACnE,oBAAY,aAAa,GAAG,QAAQ,CAAC;AAoBrC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,IAAI;IAUb;;;;;;;;;;;;;;;;;;;;OAoBG;;CAIL,CAAC"}

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

@@ -1,7 +1,7 @@
 import { FlexProps } from './Flex';
 import { StackStyleProps } from './utils/stack';
 export declare type StackProps = FlexProps & StackStyleProps;
-export declare const Stack: import("../../common").ElementComponent<"div", import("..").BackgroundStyleProps & import("./utils/border/color").BorderColorStyleProps & import("./utils/border/lineStyle").BorderLineStyleProps & import("./utils/border/radius").BorderRadiusStyleProps & import("./utils/border/shorthand").BorderShorthandStyleProps & import("./utils/border/width").BorderWidthStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").GridItemStyleProps & import("..").LayoutStyleProps & import("..").OtherStyleProps & import("..").PositionStyleProps & import("..").SpaceStyleProps & import("..").TextStyleProps & import("..").FlexStyleProps & StackStyleProps> & {
+export declare const Stack: import("../../common").ElementComponent<"div", StackProps> & {
     Item: import("../../common").ElementComponent<"div", import("..").CommonStyleProps>;
 };
 export interface HStackProps extends StackProps {

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

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import { Property, Globals } from 'csstype';
 import { StyleFnConfig } from './buildStyleFns';
 import { SystemPropValues } from './systemProps';
 /** style props to for CSS flexbox container properties */
@@ -11,7 +11,7 @@ export declare type FlexStyleProps = {
      * - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
      * - @default 'flex'
      * */
-    display?: 'flex' | 'inline-flex';
+    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) */

package/dist/commonjs/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,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,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,CAAC;IACjC,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"}
+{"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/commonjs/layout/lib/utils/grid.d.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import { Property, Globals } from 'csstype';
 import { StyleFnConfig } from './buildStyleFns';
 import { SystemPropValues } from './systemProps';
 /** style props to for CSS grid container properties */
@@ -11,7 +11,7 @@ export declare type GridStyleProps = {
      * - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
      * - @default 'grid'
      * */
-    display?: 'grid' | 'inline-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) */

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;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"}
+{"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"}

package/dist/es6/common/index.d.ts

@@ -7,4 +7,5 @@ export * from './lib/utils';
 export * from './lib/CanvasProvider';
 export * from './lib/InputProvider';
 export * from './lib/EllipsisText';
+export * from './lib/responsive/useResponsiveContainerStyles';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/common/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+CAA+C,CAAC"}

package/dist/es6/common/index.js

@@ -7,3 +7,4 @@ export * from './lib/utils';
 export * from './lib/CanvasProvider';
 export * from './lib/InputProvider';
 export * from './lib/EllipsisText';
+export * from './lib/responsive/useResponsiveContainerStyles';

package/dist/es6/common/lib/responsive/useResponsiveContainerStyles.d.ts

@@ -0,0 +1,78 @@
+import { breakpointKeys } from "@workday/canvas-kit-react/common";
+import type { AllStyleProps } from "@workday/canvas-kit-react/layout";
+export declare type BreakpointKeys = typeof breakpointKeys[number];
+declare type ResponsiveCSSObject<T> = {
+    [P in keyof T]: Partial<Record<BreakpointKeys, AllStyleProps>> & AllStyleProps;
+};
+declare type CSSObject<T> = {
+    [P in keyof T]: AllStyleProps;
+};
+/**
+ * useResponsiveContainerStyles
+ *
+ * ---
+ *
+ * This hook allows you to create container-based responsive styles with objects.
+ * It accepts two or three arguments: the responsive style object, the container width, and (optionally) the theme object.
+ * Each style object accepts five breakpoint keys: "zero", "s", "m", "l", and "xl".
+ * The sizes will act like `min-width`. For example, if you want to apply styles from `medium` and up, then you would write those styles under `m`.
+ *
+ * @example
+ * ```tsx
+import {Flex, Box} from '@workday/canvas-kit-react/layout';
+import {
+  useResponsiveStyles,
+} from '@workday/canvas-kit-react/common';
+
+const ref = React.useRef(null);
+const [containerWidth, setContainerWidth] = React.useState(0);
+
+useResizeObserver({
+  ref: ref,
+  onResize: data => {
+    setWidth(data.width || 0);
+  },
+});
+
+const containerResponsiveStyles = useResponsiveStyles(
+  {
+    flex: {
+      flexDirection: 'column',
+      padding: 'm',
+      depth: 1,
+      borderRadius: 'l',
+      zero: {
+        backgroundColor: 'Red',
+      },
+      s: {
+        backgroundColor: 'Orange',
+      },
+      m: {
+        backgroundColor: 'Yellow',
+      },
+      l: {
+        backgroundColor: 'Green',
+      },
+      xl: {
+        backgroundColor: 'Blue',
+      },
+    },
+    box: {
+      padding: 's',
+    },
+  },
+  containerWidth
+);
+
+return (
+    <Box ref={ref}>
+      <Flex {...containerResponsiveStyles.flex}>
+        <Box {...containerResponsiveStyles.box}>Hello World</Box>
+      </Flex>
+    </Box>
+);
+```
+ */
+export declare function useResponsiveContainerStyles<T extends ResponsiveCSSObject<T>>(styles: ResponsiveCSSObject<T>, width: number, theme?: {}): CSSObject<T>;
+export {};
+//# sourceMappingURL=useResponsiveContainerStyles.d.ts.map

package/dist/es6/common/lib/responsive/useResponsiveContainerStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveContainerStyles.d.ts","sourceRoot":"","sources":["../../../../../common/lib/responsive/useResponsiveContainerStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAqB,MAAM,kCAAkC,CAAC;AAC/F,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAGpE,oBAAY,cAAc,GAAG,OAAO,cAAc,CAAC,MAAM,CAAC,CAAC;AAE3D,aAAK,mBAAmB,CAAC,CAAC,IAAI;KAC3B,CAAC,IAAI,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC,GAC5D,aAAa;CAChB,CAAC;AACF,aAAK,SAAS,CAAC,CAAC,IAAI;KACjB,CAAC,IAAI,MAAM,CAAC,GAAG,aAAa;CAC9B,CAAC;AAsCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AAEH,wBAAgB,4BAA4B,CAAC,CAAC,SAAS,mBAAmB,CAAC,CAAC,CAAC,EAC3E,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAC9B,KAAK,EAAE,MAAM,EACb,KAAK,KAAK,gBAOX"}

package/dist/es6/common/lib/responsive/useResponsiveContainerStyles.js

@@ -0,0 +1,135 @@
+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 __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 __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+import { useTheme, breakpointKeys } from "@workday/canvas-kit-react/common";
+import { isWithinBreakpoint } from '../utils/isWithinBreakpoint';
+// Takes in CanvasBreakpoint keys and returns current breakpoint key. Current breakpoint key is determined by the `width` of the container
+var getSize = function (width, breakpoints) {
+    var ranges = {
+        'zero': [0, breakpoints.s],
+        's': [breakpoints.s, breakpoints.m],
+        'm': [breakpoints.m, breakpoints.l],
+        'l': [breakpoints.l, breakpoints.xl],
+        'xl': [breakpoints.xl]
+    };
+    return breakpointKeys.find(function (size) { return isWithinBreakpoint.apply(void 0, __spreadArrays([width], ranges[size])); }) || 'zero';
+};
+// Returns responsive style objects that are within the current CanvasBreakpoint size
+function getStyles(key, styles) {
+    var responsiveStyles = {};
+    var breakpointSize = breakpointKeys.indexOf(key);
+    var _loop_1 = function (i) {
+        var breakpointName = breakpointKeys[i];
+        // property is key of the style object
+        Object.keys(styles).forEach(function (property) {
+            var _a, _b;
+            var _c = styles[property], zero = _c.zero, s = _c.s, m = _c.m, l = _c.l, xl = _c.xl, base = __rest(_c, ["zero", "s", "m", "l", "xl"]);
+            var currentBreakpointStyles = (_a = styles[property][breakpointName]) !== null && _a !== void 0 ? _a : {};
+            var previousBreakpointStyles = (_b = responsiveStyles[property]) !== null && _b !== void 0 ? _b : {};
+            responsiveStyles[property] = __assign(__assign(__assign({}, base), previousBreakpointStyles), currentBreakpointStyles);
+        });
+    };
+    for (var i = 0; i <= breakpointSize; i++) {
+        _loop_1(i);
+    }
+    return responsiveStyles;
+}
+/**
+ * useResponsiveContainerStyles
+ *
+ * ---
+ *
+ * This hook allows you to create container-based responsive styles with objects.
+ * It accepts two or three arguments: the responsive style object, the container width, and (optionally) the theme object.
+ * Each style object accepts five breakpoint keys: "zero", "s", "m", "l", and "xl".
+ * The sizes will act like `min-width`. For example, if you want to apply styles from `medium` and up, then you would write those styles under `m`.
+ *
+ * @example
+ * ```tsx
+import {Flex, Box} from '@workday/canvas-kit-react/layout';
+import {
+  useResponsiveStyles,
+} from '@workday/canvas-kit-react/common';
+
+const ref = React.useRef(null);
+const [containerWidth, setContainerWidth] = React.useState(0);
+
+useResizeObserver({
+  ref: ref,
+  onResize: data => {
+    setWidth(data.width || 0);
+  },
+});
+
+const containerResponsiveStyles = useResponsiveStyles(
+  {
+    flex: {
+      flexDirection: 'column',
+      padding: 'm',
+      depth: 1,
+      borderRadius: 'l',
+      zero: {
+        backgroundColor: 'Red',
+      },
+      s: {
+        backgroundColor: 'Orange',
+      },
+      m: {
+        backgroundColor: 'Yellow',
+      },
+      l: {
+        backgroundColor: 'Green',
+      },
+      xl: {
+        backgroundColor: 'Blue',
+      },
+    },
+    box: {
+      padding: 's',
+    },
+  },
+  containerWidth
+);
+
+return (
+    <Box ref={ref}>
+      <Flex {...containerResponsiveStyles.flex}>
+        <Box {...containerResponsiveStyles.box}>Hello World</Box>
+      </Flex>
+    </Box>
+);
+```
+ */
+export function useResponsiveContainerStyles(styles, width, theme) {
+    if (theme === void 0) { theme = {}; }
+    var canvasTheme = useTheme(theme);
+    var breakpoints = canvasTheme.canvas.breakpoints.values;
+    var size = getSize(width, breakpoints);
+    return getStyles(size, styles);
+}

package/dist/es6/common/lib/utils/isWithinBreakpoint.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This function determines whether or not a container's width is within two values.
+ */
+export declare const isWithinBreakpoint: (width: number, min: number, max?: number | undefined) => boolean | 0;
+//# sourceMappingURL=isWithinBreakpoint.d.ts.map

package/dist/es6/common/lib/utils/isWithinBreakpoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isWithinBreakpoint.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/isWithinBreakpoint.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,kBAAkB,UAAW,MAAM,OAAO,MAAM,0CAE5D,CAAC"}

package/dist/es6/common/lib/utils/isWithinBreakpoint.js

@@ -0,0 +1,6 @@
+/**
+ * This function determines whether or not a container's width is within two values.
+ */
+export var isWithinBreakpoint = function (width, min, max) {
+    return width >= min && (!max || (max && width <= max - 0.5));
+};

package/dist/es6/layout/lib/Flex.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps } from './Box';
 import { FlexStyleProps } from './utils/flex';
-export declare type FlexProps = BoxProps & FlexStyleProps;
+export declare type FlexProps = Omit<BoxProps, 'display'> & FlexStyleProps;
 /**
  * `Flex` is a low-level layout component that provides a common, ergonomic API for applying CSS flexbox styles.
  * It is highly flexible, and can be used on its own or to build other components.
@@ -23,7 +23,7 @@ export declare type FlexProps = BoxProps & FlexStyleProps;
  * );
  * ```
  */
-export declare const Flex: import("../../common").ElementComponent<"div", import("..").BackgroundStyleProps & import("./utils/border/color").BorderColorStyleProps & import("./utils/border/lineStyle").BorderLineStyleProps & import("./utils/border/radius").BorderRadiusStyleProps & import("./utils/border/shorthand").BorderShorthandStyleProps & import("./utils/border/width").BorderWidthStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").GridItemStyleProps & import("..").LayoutStyleProps & import("..").OtherStyleProps & import("..").PositionStyleProps & import("..").SpaceStyleProps & import("..").TextStyleProps & FlexStyleProps> & {
+export declare const Flex: import("../../common").ElementComponent<"div", FlexProps> & {
     Item: import("../../common").ElementComponent<"div", import("..").CommonStyleProps>;
 };
 //# sourceMappingURL=Flex.d.ts.map

package/dist/es6/layout/lib/Flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Flex.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;AASlD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,IAAI;;CAYf,CAAC"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Flex.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,cAAc,CAAC;AASnE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,IAAI;;CAYf,CAAC"}

package/dist/es6/layout/lib/Grid.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps } from './Box';
 import { GridStyleProps } from './utils/grid';
-export declare type GridProps = BoxProps & GridStyleProps;
+export declare type GridProps = Omit<BoxProps, 'display'> & GridStyleProps;
 export declare type GridItemProps = BoxProps;
 /**
  * `Grid` is a two-dimensional layout system for the web. It lets you lay content out in rows and columns.
@@ -24,7 +24,7 @@ export declare type GridItemProps = BoxProps;
  * );
  *```
  */
-export declare const Grid: import("../../common").ElementComponent<"div", import("..").BackgroundStyleProps & import("./utils/border/color").BorderColorStyleProps & import("./utils/border/lineStyle").BorderLineStyleProps & import("./utils/border/radius").BorderRadiusStyleProps & import("./utils/border/shorthand").BorderShorthandStyleProps & import("./utils/border/width").BorderWidthStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").GridItemStyleProps & import("..").LayoutStyleProps & import("..").OtherStyleProps & import("..").PositionStyleProps & import("..").SpaceStyleProps & import("..").TextStyleProps & GridStyleProps> & {
+export declare const Grid: import("../../common").ElementComponent<"div", GridProps> & {
     /**
      * `<Grid.Item />` is the child specific sub-component to `<Grid/>`. `<Grid.Item />` gets child specific props, whereas `<Grid./>` gets parent container props.
      *

package/dist/es6/layout/lib/Grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Grid.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;AAClD,oBAAY,aAAa,GAAG,QAAQ,CAAC;AAoBrC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,IAAI;IAUb;;;;;;;;;;;;;;;;;;;;OAoBG;;CAIL,CAAC"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Grid.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,cAAc,CAAC;AACnE,oBAAY,aAAa,GAAG,QAAQ,CAAC;AAoBrC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,IAAI;IAUb;;;;;;;;;;;;;;;;;;;;OAoBG;;CAIL,CAAC"}

package/dist/es6/layout/lib/Stack.d.ts

@@ -1,7 +1,7 @@
 import { FlexProps } from './Flex';
 import { StackStyleProps } from './utils/stack';
 export declare type StackProps = FlexProps & StackStyleProps;
-export declare const Stack: import("../../common").ElementComponent<"div", import("..").BackgroundStyleProps & import("./utils/border/color").BorderColorStyleProps & import("./utils/border/lineStyle").BorderLineStyleProps & import("./utils/border/radius").BorderRadiusStyleProps & import("./utils/border/shorthand").BorderShorthandStyleProps & import("./utils/border/width").BorderWidthStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").GridItemStyleProps & import("..").LayoutStyleProps & import("..").OtherStyleProps & import("..").PositionStyleProps & import("..").SpaceStyleProps & import("..").TextStyleProps & import("..").FlexStyleProps & StackStyleProps> & {
+export declare const Stack: import("../../common").ElementComponent<"div", StackProps> & {
     Item: import("../../common").ElementComponent<"div", import("..").CommonStyleProps>;
 };
 export interface HStackProps extends StackProps {

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

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import { Property, Globals } from 'csstype';
 import { StyleFnConfig } from './buildStyleFns';
 import { SystemPropValues } from './systemProps';
 /** style props to for CSS flexbox container properties */
@@ -11,7 +11,7 @@ export declare type FlexStyleProps = {
      * - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
      * - @default 'flex'
      * */
-    display?: 'flex' | 'inline-flex';
+    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) */

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,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,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,CAAC;IACjC,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"}
+{"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/grid.d.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import { Property, Globals } from 'csstype';
 import { StyleFnConfig } from './buildStyleFns';
 import { SystemPropValues } from './systemProps';
 /** style props to for CSS grid container properties */
@@ -11,7 +11,7 @@ export declare type GridStyleProps = {
      * - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
      * - @default 'grid'
      * */
-    display?: 'grid' | 'inline-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) */

package/dist/es6/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;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"}
+{"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"}

package/layout/lib/Box.tsx

@@ -21,7 +21,7 @@ import {CommonStyleProps} from './utils/styleProps';
  * Box Props
  * ---
  * Common style props + children
- * 
+ *
  * - background
  * - border
  * - color

package/layout/lib/Flex.tsx

@@ -5,7 +5,7 @@ import {Box, BoxProps} from './Box';
 
 import {flex, FlexStyleProps} from './utils/flex';
 
-export type FlexProps = BoxProps & FlexStyleProps;
+export type FlexProps = Omit<BoxProps, 'display'> & FlexStyleProps;
 
 const StyledFlex = styled(Box)<StyledType & FlexProps>(
   {

package/layout/lib/Grid.tsx

@@ -5,7 +5,7 @@ import {Box, BoxProps} from './Box';
 
 import {grid, GridStyleProps} from './utils/grid';
 
-export type GridProps = BoxProps & GridStyleProps;
+export type GridProps = Omit<BoxProps, 'display'> & GridStyleProps;
 export type GridItemProps = BoxProps;
 
 const StyledGrid = styled(Box)<StyledType & GridProps>(

package/layout/lib/utils/flex.ts

@@ -1,4 +1,4 @@
-import {Property} from 'csstype';
+import {Property, Globals} from 'csstype';
 
 import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
@@ -13,7 +13,7 @@ export type FlexStyleProps = {
    * - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
    * - @default 'flex'
    * */
-  display?: 'flex' | 'inline-flex';
+  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) */

package/layout/lib/utils/grid.ts

@@ -1,4 +1,4 @@
-import {Property} from 'csstype';
+import {Property, Globals} from 'csstype';
 
 import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
@@ -13,7 +13,7 @@ export type GridStyleProps = {
    * - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
    * - @default 'grid'
    * */
-  display?: 'grid' | 'inline-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) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "8.0.0-alpha.246-next.16+61d2c997",
+  "version": "8.0.0-alpha.250-next.19+c91bf36c",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.246-next.16+61d2c997",
+    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.250-next.19+c91bf36c",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "61d2c997ac9ac0eb4d0c96a9a10b949ead61ab08"
+  "gitHead": "c91bf36c41b82f12b0d8323da5fb1fc290e2d5b9"
 }