@workday/canvas-kit-react 8.0.0-alpha.245-next.15 → 8.0.0-alpha.247-next.17

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/common/lib/utils/models.ts

@@ -225,7 +225,7 @@ export type ModelExtras<TDefaultConfig, TRequiredConfig, TState, TEvents, TModel
   /**
    * This is only a type and not a value. If you want to
    */
-  TConfig: TDefaultConfig & TRequiredConfig;
+  TConfig: Partial<TDefaultConfig> & TRequiredConfig & ToEventConfig<TState, TEvents>;
   /**
    * The context of the model. This can be used directly, but is mostly used internally by
    * `createContainer` or `createSubcomponent` to handle model context automatically.
@@ -268,7 +268,7 @@ export type ModelExtras<TDefaultConfig, TRequiredConfig, TState, TEvents, TModel
    * ```
    */
   mergeConfig: (
-    source: TDefaultConfig & TRequiredConfig,
+    source: Partial<TDefaultConfig> & TRequiredConfig,
     target: Partial<
       TDefaultConfig & TRequiredConfig & ToEventConfig<TState, TEvents>
     >

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/common/lib/utils/models.d.ts

@@ -119,7 +119,7 @@ export declare type ModelExtras<TDefaultConfig, TRequiredConfig, TState, TEvents
     /**
      * This is only a type and not a value. If you want to
      */
-    TConfig: TDefaultConfig & TRequiredConfig;
+    TConfig: Partial<TDefaultConfig> & TRequiredConfig & ToEventConfig<TState, TEvents>;
     /**
      * The context of the model. This can be used directly, but is mostly used internally by
      * `createContainer` or `createSubcomponent` to handle model context automatically.
@@ -154,7 +154,7 @@ export declare type ModelExtras<TDefaultConfig, TRequiredConfig, TState, TEvents
      * })
      * ```
      */
-    mergeConfig: (source: TDefaultConfig & TRequiredConfig, target: Partial<TDefaultConfig & TRequiredConfig & ToEventConfig<TState, TEvents>>) => TDefaultConfig & TRequiredConfig & ToEventConfig<TState, TEvents>;
+    mergeConfig: (source: Partial<TDefaultConfig> & TRequiredConfig, target: Partial<TDefaultConfig & TRequiredConfig & ToEventConfig<TState, TEvents>>) => TDefaultConfig & TRequiredConfig & ToEventConfig<TState, TEvents>;
 };
 /**
  * Generic type for all models. It makes `defaultConfig` have optional keys and adds `getElemProps`

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

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

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"}