@workday/canvas-kit-react 7.0.0-alpha.78-next.6 → 7.0.0-alpha.81-next.9

package/dist/es6/tokens/lib/depth.d.ts

@@ -1,23 +1,23 @@
 export declare type CanvasDepth = {
     /**
-     * ### Depth Inset
-     * 	Used for inset containers
+     * ### Depth None
+     * 	Used for removing existing depth
      *
      * @example
      * ```ts
      * import { depth } from '@workday/canvas-kit-react/tokens';
      *
-     * const insetCardStyles = {
-     *   ...depth.inset,
+     * const noDepthCardStyles = {
+     *   ...depth.none,
      * };
      * ```
      */
-    inset: {
-        boxShadow: 'inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)';
+    none: {
+        boxShadow: 'none';
     };
     /**
      * ### Depth 1
-     * Used for minimal offset
+     * Used for minimal offset and Cards
      *
      * @example
      * ```ts
@@ -29,11 +29,11 @@ export declare type CanvasDepth = {
      * ```
      */
     1: {
-        boxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.08)';
+        boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.16)';
     };
     /**
      * ### Depth 2
-     * Used for Cards, Popups, and Menus — our most common depth
+     * Used for Top navigation, Bottom navigation
      *
      * @example
      * ```ts
@@ -45,11 +45,11 @@ export declare type CanvasDepth = {
      * ```
      */
     2: {
-        boxShadow: '0px 4px 8px 0 rgba(0, 0, 0, 0.1)';
+        boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.2), 0px 4px 16px rgba(0, 0, 0, 0.16)';
     };
     /**
      * ### Depth 3
-     * Used for interactive Cards on hover
+     * Used for FABs, Menus
      *
      * @example
      * ```ts
@@ -61,11 +61,11 @@ export declare type CanvasDepth = {
      * ```
      */
     3: {
-        boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
+        boxShadow: '0px 3px 12px rgba(0, 0, 0, 0.2), 0px 6px 24px rgba(0, 0, 0, 0.16)';
     };
     /**
      * ### Depth 4
-     * Used for Cards on white backgrounds — adds border styles for more contrast
+     *
      *
      * @example
      * ```ts
@@ -77,8 +77,39 @@ export declare type CanvasDepth = {
      * ```
      */
     4: {
-        border: '1px solid rgba(218, 226, 230, 1)';
-        boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
+        boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.16)';
+    };
+    /**
+     * ### Depth 5
+     * Used for Popups, Toast Messages, Dialogs, Side Panels without opacity overlay behavior
+     *
+     * @example
+     * ```ts
+     * import { depth } from '@workday/canvas-kit-react/tokens';
+     *
+     * const cardStyles = {
+     *   ...depth[5],
+     * };
+     * ```
+     */
+    5: {
+        boxShadow: '0px 5px 20px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.16)';
+    };
+    /**
+     * ### Depth 6
+     * Used for components with opacity overlay behavior such as Modal or Side Panels
+     *
+     * @example
+     * ```ts
+     * import { depth } from '@workday/canvas-kit-react/tokens';
+     *
+     * const cardStyles = {
+     *   ...depth[6],
+     * };
+     * ```
+     */
+    6: {
+        boxShadow: '0px 6px 24px rgba(0, 0, 0, 0.2), 0px 12px 48px rgba(0, 0, 0, 0.16)';
     };
 };
 declare type ValueOf<T> = T[keyof T];
@@ -88,8 +119,8 @@ export declare type CanvasDepthValues = ValueOf<CanvasDepth>;
  *
  * Depth is the relative distance between surfaces in the z-axis.
  * It provides delineation, focus, and priority with shadows and layering.
- * There are five depth levels, `inset`, `1`, `2`, `3`, and `4`.
- * Most levels only apply box-shadow styles, but `depth[4]` also applies border styles.
+ * There are seven depth levels, `none`, `1`, `2`, `3`, `4`, `5` and `6`.
+ * `none` is a special value to remove depth styles. All other levels only apply box-shadow styles.
  *
  * @example
  * ```tsx

package/dist/es6/tokens/lib/depth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"depth.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/depth.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW,GAAG;IACxB;;;;;;;;;;;;OAYG;IACH,KAAK,EAAE;QACL,SAAS,EAAE,6CAA6C,CAAC;KAC1D,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,mCAAmC,CAAC;KAChD,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,kCAAkC,CAAC;KAC/C,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,oCAAoC,CAAC;KACjD,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,MAAM,EAAE,kCAAkC,CAAC;QAC3C,SAAS,EAAE,oCAAoC,CAAC;KACjD,CAAC;CACH,CAAC;AAEF,aAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B,oBAAY,iBAAiB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,KAAK,EAAE,WAiBnB,CAAC"}
+{"version":3,"file":"depth.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/depth.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW,GAAG;IACxB;;;;;;;;;;;;OAYG;IACH,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,iEAAiE,CAAC;KAC9E,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,kEAAkE,CAAC;KAC/E,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,mEAAmE,CAAC;KAChF,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,mEAAmE,CAAC;KAChF,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,oEAAoE,CAAC;KACjF,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,oEAAoE,CAAC;KACjF,CAAC;CACH,CAAC;AAEF,aAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B,oBAAY,iBAAiB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,KAAK,EAAE,WAsBnB,CAAC"}

package/dist/es6/tokens/lib/depth.js

@@ -3,8 +3,8 @@
  *
  * Depth is the relative distance between surfaces in the z-axis.
  * It provides delineation, focus, and priority with shadows and layering.
- * There are five depth levels, `inset`, `1`, `2`, `3`, and `4`.
- * Most levels only apply box-shadow styles, but `depth[4]` also applies border styles.
+ * There are seven depth levels, `none`, `1`, `2`, `3`, `4`, `5` and `6`.
+ * `none` is a special value to remove depth styles. All other levels only apply box-shadow styles.
  *
  * @example
  * ```tsx
@@ -21,20 +21,25 @@
  *
  */
 export var depth = {
-    inset: {
-        boxShadow: 'inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)',
+    none: {
+        boxShadow: 'none',
     },
     1: {
-        boxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.08)',
+        boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.16)',
     },
     2: {
-        boxShadow: '0px 4px 8px 0 rgba(0, 0, 0, 0.1)',
+        boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.2), 0px 4px 16px rgba(0, 0, 0, 0.16)',
     },
     3: {
-        boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)',
+        boxShadow: '0px 3px 12px rgba(0, 0, 0, 0.2), 0px 6px 24px rgba(0, 0, 0, 0.16)',
     },
     4: {
-        border: '1px solid rgba(218, 226, 230, 1)',
-        boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)',
+        boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.16)',
+    },
+    5: {
+        boxShadow: '0px 5px 20px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.16)',
+    },
+    6: {
+        boxShadow: '0px 6px 24px rgba(0, 0, 0, 0.2), 0px 12px 48px rgba(0, 0, 0, 0.16)',
     },
 };

package/layout/lib/Box.tsx

@@ -112,7 +112,7 @@ const StyledBoxComponent = styled('div')<StyledType & BoxProps>(
  *
  * // `Card`'s default values are set using `BoxProps`
  * const Card = (props: CardProps) => (
- *   <Box depth={2} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
+ *   <Box depth={1} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
  * );
  *
  */

package/layout/lib/Flex.tsx

@@ -28,7 +28,7 @@ const StyledFlex = styled(Box)<StyledType & FlexProps>(
  *
  * // `Card`'s default values are set using `FlexProps`
  * const Card = (props: CardProps) => (
- *   <Flex flexDirection="column" alignItems="flex-start" depth={2} space="m" {...props}>
+ *   <Flex flexDirection="column" alignItems="flex-start" depth={1} space="m" {...props}>
  *     <h1>Hello, Card!</h1>
  *     <p>This card uses flexbox to set its layout.</p>
  *   </Flex>

package/modal/lib/ModalCard.tsx

@@ -14,7 +14,7 @@ export const ModalCard = createComponent('div')({
 
     const props = useModalCard(localModel, elemProps, ref);
     return (
-      <Popup.Card as={Element} width={440} borderWidth={0} margin="xl" {...props}>
+      <Popup.Card as={Element} width={440} borderWidth={0} margin="xl" depth={6} {...props}>
         {children}
       </Popup.Card>
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "7.0.0-alpha.78-next.6+400ffc0b",
+  "version": "7.0.0-alpha.81-next.9+5f4eca7e",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -57,9 +57,9 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.78-next.6+400ffc0b",
-    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.78-next.6+400ffc0b",
-    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.78-next.6+400ffc0b",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.81-next.9+5f4eca7e",
+    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.81-next.9+5f4eca7e",
+    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.81-next.9+5f4eca7e",
     "@workday/canvas-system-icons-web": "1.0.41",
     "@workday/design-assets-types": "^0.2.4",
     "chroma-js": "^2.1.0",
@@ -77,5 +77,5 @@
     "@workday/canvas-accent-icons-web": "^1.0.0",
     "@workday/canvas-applet-icons-web": "^0.17.50"
   },
-  "gitHead": "400ffc0b29c2762180758d9b7c1bdc0562cb01e4"
+  "gitHead": "5f4eca7e47351f920cb283c1a1fa16b9ef76b6e5"
 }

package/popup/lib/Popper.tsx

@@ -22,14 +22,6 @@ export interface PopperProps {
    * `anchorElement`.
    */
   children: ((props: {placement: Placement}) => React.ReactNode) | React.ReactNode;
-  /**
-   * The element that contains the portal children when `portal` is true. It is best to not define
-   * this unless you know what you're doing. Popper works with a PopupStack and in order for
-   * z-indexes to work correctly, all Popups on your page should live on the same root element
-   * otherwise you risk running into rendering issues:
-   * https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
-   */
-  containerElement?: Element | null;
   /**
    * When provided, this optional callback will be used to determine positioning for the Popper element
    * instead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need
@@ -62,7 +54,7 @@ export interface PopperProps {
    */
   popperOptions?: Partial<PopperOptions>;
   /**
-   * If true, attach the Popper to the `containerElement`. If false, render the Popper within the
+   * If false, render the Popper within the
    * DOM hierarchy of its parent. A non-portal Popper will constrained by the parent container
    * overflows. If you set this to `false`, you may experience issues where you content gets cut off
    * by scrollbars or `overflow: hidden`
@@ -113,7 +105,6 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
       onPlacementChange,
       children,
       portal,
-      containerElement,
       popperInstanceRef,
     }: PopperProps,
     ref
@@ -185,7 +176,7 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
       return contents;
     }
 
-    return ReactDOM.createPortal(contents, containerElement || stackRef.current!);
+    return ReactDOM.createPortal(contents, stackRef.current!);
   }
 );
 

package/popup/lib/PopupCard.tsx

@@ -78,7 +78,7 @@ export const PopupCard = createComponent('div')({
         transformOrigin={transformOrigin}
         position="relative"
         padding="l"
-        depth={2}
+        depth={5}
         maxWidth={`calc(100vw - ${space.l})`}
         spacing={0}
         flexDirection="column"

package/toast/lib/Toast.tsx

@@ -92,6 +92,7 @@ export const Toast = createComponent('div')({
         as={Element}
         width={toastWidth}
         padding="s"
+        depth={5}
         role={isInteractive ? 'dialog' : 'status'}
         aria-live={isInteractive ? 'off' : 'polite'}
         aria-atomic={!isInteractive}

package/tokens/README.md

@@ -174,16 +174,19 @@ const buttonSyles = {
 
 ## Depth
 
-Depth is the relative distance between surfaces in the z-axis. It provides delineation, focus, and priority with shadows and layering. There are five depth levels, `inset`, `1`, `2`, `3`, and `4`. Most levels only apply box-shadow styles, but `depth[4]` also applies border styles.
+Depth is the relative distance between surfaces in the z-axis. It provides delineation, focus, and
+priority with shadows and layering. There are seven depth levels, `none`, `1`, `2`, `3`, `4`, `5`
+and `6`. `none` is a special value to remove depth styles. All other levels only apply box-shadow
+styles.
 
 ### Usage
 
 ```tsx
-import { depth } from '@workday/canvas-kit-react/tokens';
+import {depth} from '@workday/canvas-kit-react/tokens';
 
 const CustomCard = () => {
-  return <div css={depth[2]}>A standard-depth card</div>;
-}
+  return <div css={depth[1]}>A standard-depth card</div>;
+};
 ```
 
 ## Type
@@ -211,8 +214,8 @@ To use the Canvas Kit font
 
 Canvas Kit v5 introduced `rem` units (instead of `px`) to our type tokens. This update follows the
 guidance [from the WCAG spec](https://www.w3.org/TR/WCAG21/#resize-text) and provides better support
-for users who change their browser's default font size. If you'd like to learn more about `rem` and relative units, you can
-review this
+for users who change their browser's default font size. If you'd like to learn more about `rem` and
+relative units, you can review this
 [documentation](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#ems_and_rems).
 
 > **Note:** We are using `16px` as our base font-size for these values. This is a browser standard
@@ -299,8 +302,8 @@ _Intended for standard body text_
 
 _Intended for small subtext content or in tight spaces_
 
-| Size     | Properties                                            |
-| -------- | ----------------------------------------------------- |
+| Size     | Properties                                                   |
+| -------- | ------------------------------------------------------------ |
 | `large`  | fontSize: `14px` (`0.875rem`), fontWeight: `regular` (`400`) |
 | `medium` | fontSize: `12px` (`0.75rem`), fontWeight: `regular` (`400`)  |
 | `small`  | fontSize: `10px` (`0.625rem`), fontWeight: `regular` (`400`) |

package/tokens/lib/depth.ts

@@ -1,23 +1,23 @@
 export type CanvasDepth = {
   /**
-   * ### Depth Inset
-   * 	Used for inset containers
+   * ### Depth None
+   * 	Used for removing existing depth
    *
    * @example
    * ```ts
    * import { depth } from '@workday/canvas-kit-react/tokens';
    *
-   * const insetCardStyles = {
-   *   ...depth.inset,
+   * const noDepthCardStyles = {
+   *   ...depth.none,
    * };
    * ```
    */
-  inset: {
-    boxShadow: 'inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)';
+  none: {
+    boxShadow: 'none';
   };
   /**
    * ### Depth 1
-   * Used for minimal offset
+   * Used for minimal offset and Cards
    *
    * @example
    * ```ts
@@ -29,11 +29,11 @@ export type CanvasDepth = {
    * ```
    */
   1: {
-    boxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.08)';
+    boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.16)';
   };
   /**
    * ### Depth 2
-   * Used for Cards, Popups, and Menus — our most common depth
+   * Used for Top navigation, Bottom navigation
    *
    * @example
    * ```ts
@@ -45,11 +45,11 @@ export type CanvasDepth = {
    * ```
    */
   2: {
-    boxShadow: '0px 4px 8px 0 rgba(0, 0, 0, 0.1)';
+    boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.2), 0px 4px 16px rgba(0, 0, 0, 0.16)';
   };
   /**
    * ### Depth 3
-   * Used for interactive Cards on hover
+   * Used for FABs, Menus
    *
    * @example
    * ```ts
@@ -61,11 +61,11 @@ export type CanvasDepth = {
    * ```
    */
   3: {
-    boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
+    boxShadow: '0px 3px 12px rgba(0, 0, 0, 0.2), 0px 6px 24px rgba(0, 0, 0, 0.16)';
   };
   /**
    * ### Depth 4
-   * Used for Cards on white backgrounds — adds border styles for more contrast
+   *
    *
    * @example
    * ```ts
@@ -77,8 +77,39 @@ export type CanvasDepth = {
    * ```
    */
   4: {
-    border: '1px solid rgba(218, 226, 230, 1)';
-    boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
+    boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.16)';
+  };
+  /**
+   * ### Depth 5
+   * Used for Popups, Toast Messages, Dialogs, Side Panels without opacity overlay behavior
+   *
+   * @example
+   * ```ts
+   * import { depth } from '@workday/canvas-kit-react/tokens';
+   *
+   * const cardStyles = {
+   *   ...depth[5],
+   * };
+   * ```
+   */
+  5: {
+    boxShadow: '0px 5px 20px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.16)';
+  };
+  /**
+   * ### Depth 6
+   * Used for components with opacity overlay behavior such as Modal or Side Panels
+   *
+   * @example
+   * ```ts
+   * import { depth } from '@workday/canvas-kit-react/tokens';
+   *
+   * const cardStyles = {
+   *   ...depth[6],
+   * };
+   * ```
+   */
+  6: {
+    boxShadow: '0px 6px 24px rgba(0, 0, 0, 0.2), 0px 12px 48px rgba(0, 0, 0, 0.16)';
   };
 };
 
@@ -90,8 +121,8 @@ export type CanvasDepthValues = ValueOf<CanvasDepth>;
  *
  * Depth is the relative distance between surfaces in the z-axis.
  * It provides delineation, focus, and priority with shadows and layering.
- * There are five depth levels, `inset`, `1`, `2`, `3`, and `4`.
- * Most levels only apply box-shadow styles, but `depth[4]` also applies border styles.
+ * There are seven depth levels, `none`, `1`, `2`, `3`, `4`, `5` and `6`.
+ * `none` is a special value to remove depth styles. All other levels only apply box-shadow styles.
  *
  * @example
  * ```tsx
@@ -108,20 +139,25 @@ export type CanvasDepthValues = ValueOf<CanvasDepth>;
  *
  */
 export const depth: CanvasDepth = {
-  inset: {
-    boxShadow: 'inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)',
+  none: {
+    boxShadow: 'none',
   },
   1: {
-    boxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.08)',
+    boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.16)',
   },
   2: {
-    boxShadow: '0px 4px 8px 0 rgba(0, 0, 0, 0.1)',
+    boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.2), 0px 4px 16px rgba(0, 0, 0, 0.16)',
   },
   3: {
-    boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)',
+    boxShadow: '0px 3px 12px rgba(0, 0, 0, 0.2), 0px 6px 24px rgba(0, 0, 0, 0.16)',
   },
   4: {
-    border: '1px solid rgba(218, 226, 230, 1)',
-    boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)',
+    boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.16)',
+  },
+  5: {
+    boxShadow: '0px 5px 20px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.16)',
+  },
+  6: {
+    boxShadow: '0px 6px 24px rgba(0, 0, 0, 0.2), 0px 12px 48px rgba(0, 0, 0, 0.16)',
   },
 };

package/ts3.5/dist/commonjs/layout/lib/Box.d.ts

@@ -40,7 +40,7 @@ export declare const boxStyleFn: <P extends BoxProps>(props: P) => {};
  *
  * // `Card`'s default values are set using `BoxProps`
  * const Card = (props: CardProps) => (
- *   <Box depth={2} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
+ *   <Box depth={1} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
  * );
  *
  */

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

@@ -15,7 +15,7 @@ export declare type FlexProps = BoxProps & FlexStyleProps;
  *
  * // `Card`'s default values are set using `FlexProps`
  * const Card = (props: CardProps) => (
- *   <Flex flexDirection="column" alignItems="flex-start" depth={2} space="m" {...props}>
+ *   <Flex flexDirection="column" alignItems="flex-start" depth={1} space="m" {...props}>
  *     <h1>Hello, Card!</h1>
  *     <p>This card uses flexbox to set its layout.</p>
  *   </Flex>

package/ts3.5/dist/commonjs/popup/lib/Popper.d.ts

@@ -18,14 +18,6 @@ export interface PopperProps {
     children: ((props: {
         placement: Placement;
     }) => React.ReactNode) | React.ReactNode;
-    /**
-     * The element that contains the portal children when `portal` is true. It is best to not define
-     * this unless you know what you're doing. Popper works with a PopupStack and in order for
-     * z-indexes to work correctly, all Popups on your page should live on the same root element
-     * otherwise you risk running into rendering issues:
-     * https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
-     */
-    containerElement?: Element | null;
     /**
      * When provided, this optional callback will be used to determine positioning for the Popper element
      * instead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need
@@ -58,7 +50,7 @@ export interface PopperProps {
      */
     popperOptions?: Partial<PopperOptions>;
     /**
-     * If true, attach the Popper to the `containerElement`. If false, render the Popper within the
+     * If false, render the Popper within the
      * DOM hierarchy of its parent. A non-portal Popper will constrained by the parent container
      * overflows. If you set this to `false`, you may experience issues where you content gets cut off
      * by scrollbars or `overflow: hidden`