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

package/button/lib/BaseButton.tsx

@@ -267,8 +267,8 @@ export const getPaddingStyles = (
     case 'small':
       return icon
         ? iconPosition === 'start'
-          ? `0 20px 0 ${space.s}`
-          : `0 ${space.s} 0 20px`
+          ? `0 ${space.s} 0 ${space.xs}`
+          : `0 ${space.xs} 0 ${space.s}`
         : `0 ${space.s}`;
 
     case 'extraSmall':

package/button/lib/SecondaryButton.tsx

@@ -162,12 +162,11 @@ export const getSecondaryButtonColors = (
         focus: {
           background: colors.frenchVanilla100,
           icon: colors.blackPepper500,
-          border: colors.blackPepper400,
           label: colors.blackPepper500,
           focusRing: focusRing(
             {
-              separation: 1,
-              innerColor: colors.blackPepper400,
+              separation: 2,
+              innerColor: 'currentColor',
               outerColor: colors.frenchVanilla100,
             },
             theme

package/card/lib/Card.tsx

@@ -21,7 +21,7 @@ export const Card = createComponent('div')({
       <Box
         ref={ref}
         as={Element}
-        depth={2}
+        depth={1}
         padding="l"
         backgroundColor="frenchVanilla100"
         border={`1px solid ${colors.soap500}`}

package/dist/commonjs/button/lib/BaseButton.js

@@ -167,8 +167,8 @@ var getPaddingStyles = function (children, size, icon, iconPosition) {
         case 'small':
             return icon
                 ? iconPosition === 'start'
-                    ? "0 20px 0 " + tokens_1.space.s
-                    : "0 " + tokens_1.space.s + " 0 20px"
+                    ? "0 " + tokens_1.space.s + " 0 " + tokens_1.space.xs
+                    : "0 " + tokens_1.space.xs + " 0 " + tokens_1.space.s
                 : "0 " + tokens_1.space.s;
         case 'extraSmall':
             return icon

package/dist/commonjs/button/lib/SecondaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAGjE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,yEA+C1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,YAC1B,SAAS,GAAG,SAAS,SACvB,kBAAkB,KACxB,YAqFF,CAAC"}
+{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAGjE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,yEA+C1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,YAC1B,SAAS,GAAG,SAAS,SACvB,kBAAkB,KACxB,YAoFF,CAAC"}

package/dist/commonjs/button/lib/SecondaryButton.js

@@ -117,11 +117,10 @@ var getSecondaryButtonColors = function (variant, theme) {
                 focus: {
                     background: tokens_1.colors.frenchVanilla100,
                     icon: tokens_1.colors.blackPepper500,
-                    border: tokens_1.colors.blackPepper400,
                     label: tokens_1.colors.blackPepper500,
                     focusRing: common_1.focusRing({
-                        separation: 1,
-                        innerColor: tokens_1.colors.blackPepper400,
+                        separation: 2,
+                        innerColor: 'currentColor',
                         outerColor: tokens_1.colors.frenchVanilla100,
                     }, theme),
                 },

package/dist/commonjs/card/lib/Card.js

@@ -52,7 +52,7 @@ exports.Card = common_1.createComponent('div')({
     displayName: 'Card',
     Component: function (_a, ref, Element) {
         var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(layout_1.Box, __assign({ ref: ref, as: Element, depth: 2, padding: "l", backgroundColor: "frenchVanilla100", border: "1px solid " + tokens_1.colors.soap500, borderRadius: "l" }, elemProps), children));
+        return (React.createElement(layout_1.Box, __assign({ ref: ref, as: Element, depth: 1, padding: "l", backgroundColor: "frenchVanilla100", border: "1px solid " + tokens_1.colors.soap500, borderRadius: "l" }, elemProps), children));
     },
     subComponents: {
         Heading: CardHeading_1.CardHeading,

package/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/dist/commonjs/layout/lib/Box.js

@@ -123,7 +123,7 @@ var StyledBoxComponent = styled_1.default('div')({
  *
  * // `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/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/dist/commonjs/layout/lib/Flex.js

@@ -67,7 +67,7 @@ var StyledFlex = styled_1.default(layout_1.Box)({
  *
  * // `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/dist/commonjs/modal/lib/ModalCard.js

@@ -52,6 +52,6 @@ exports.ModalCard = common_1.createComponent('div')({
         var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
         var localModel = common_1.useModelContext(popup_1.PopupModelContext, model);
         var props = hooks_1.useModalCard(localModel, elemProps, ref);
-        return (React.createElement(popup_1.Popup.Card, __assign({ as: Element, width: 440, borderWidth: 0, margin: "xl" }, props), children));
+        return (React.createElement(popup_1.Popup.Card, __assign({ as: Element, width: 440, borderWidth: 0, margin: "xl", depth: 6 }, props), children));
     },
 });

package/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`

package/dist/commonjs/popup/lib/Popper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC;AAC3C,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAK7C,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,MAAM,oFAQlB,CAAC"}
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC;AAC3C,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAK7C,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,MAAM,oFAQlB,CAAC"}

package/dist/commonjs/popup/lib/Popper.js

@@ -77,7 +77,7 @@ var defaultPopperOptions = {};
 // Popper bails early if `open` is false and React hooks cannot be called conditionally,
 // so we're breaking out the open version into another component.
 var OpenPopper = React.forwardRef(function (_a, ref) {
-    var anchorElement = _a.anchorElement, getAnchorClientRect = _a.getAnchorClientRect, _b = _a.popperOptions, popperOptions = _b === void 0 ? defaultPopperOptions : _b, _c = _a.placement, popperPlacement = _c === void 0 ? 'bottom' : _c, onPlacementChange = _a.onPlacementChange, children = _a.children, portal = _a.portal, containerElement = _a.containerElement, popperInstanceRef = _a.popperInstanceRef;
+    var anchorElement = _a.anchorElement, getAnchorClientRect = _a.getAnchorClientRect, _b = _a.popperOptions, popperOptions = _b === void 0 ? defaultPopperOptions : _b, _c = _a.placement, popperPlacement = _c === void 0 ? 'bottom' : _c, onPlacementChange = _a.onPlacementChange, children = _a.children, portal = _a.portal, popperInstanceRef = _a.popperInstanceRef;
     var firstRender = React.useRef(true);
     var _d = common_1.useLocalRef(popperInstanceRef), localRef = _d.localRef, elementRef = _d.elementRef;
     var _e = React.useState(popperPlacement), placement = _e[0], setPlacement = _e[1];
@@ -128,7 +128,7 @@ var OpenPopper = React.forwardRef(function (_a, ref) {
     if (!portal) {
         return contents;
     }
-    return ReactDOM.createPortal(contents, containerElement || stackRef.current);
+    return ReactDOM.createPortal(contents, stackRef.current);
 });
 // Typescript threw an error about non-callable signatures. Using typeof as a 'function' returns
 // a type of `Function` which isn't descriptive enough for Typescript. We don't do any detection

package/dist/commonjs/popup/lib/PopupCard.js

@@ -85,7 +85,7 @@ exports.PopupCard = common_1.createComponent('div')({
         }, [localModel.state.placement]);
         // As is a Stack that will render an element of `Element`
         var As = common_1.useConstant(function () { return layout_1.Stack.as(Element); });
-        return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", padding: "l", depth: 2, maxWidth: "calc(100vw - " + tokens_1.space.l + ")", spacing: 0, flexDirection: "column", minHeight: 0, maxHeight: "calc(100vh - " + (elemProps.margin
+        return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", padding: "l", depth: 5, maxWidth: "calc(100vw - " + tokens_1.space.l + ")", spacing: 0, flexDirection: "column", minHeight: 0, maxHeight: "calc(100vh - " + (elemProps.margin
                 ? tokens_1.space[elemProps.margin] || elemProps.margin
                 : tokens_1.space.xl) + " * 2)", overflowY: "auto" // force IE11 to limit the flex size of the card. Without this, the body isn't allowed to overflow properly: https://github.com/philipwalton/flexbugs/issues/216#issuecomment-453053557
          }, props), children));

package/dist/commonjs/toast/lib/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAsB,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAGlF,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAkB,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAGnG,MAAM,WAAW,UAAW,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAkCD,eAAO,MAAM,KAAK,4DA6ChB,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAsB,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAGlF,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAkB,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAGnG,MAAM,WAAW,UAAW,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAkCD,eAAO,MAAM,KAAK,4DA8ChB,CAAC"}

package/dist/commonjs/toast/lib/Toast.js

@@ -73,7 +73,7 @@ exports.Toast = common_1.createComponent('div')({
         _c = _a.iconColor, // needed for TS2742 - https://github.com/microsoft/TypeScript/issues/29808
         iconColor = _c === void 0 ? tokens_1.colors.greenApple400 : _c, onClose = _a.onClose, onActionClick = _a.onActionClick, actionText = _a.actionText, children = _a.children, elemProps = __rest(_a, ["icon", "iconColor", "onClose", "onActionClick", "actionText", "children"]);
         var isInteractive = onClose || onActionClick;
-        return (React.createElement(popup_1.Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, padding: "s", role: isInteractive ? 'dialog' : 'status', "aria-live": isInteractive ? 'off' : 'polite', "aria-atomic": !isInteractive }, elemProps),
+        return (React.createElement(popup_1.Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, padding: "s", depth: 5, role: isInteractive ? 'dialog' : 'status', "aria-live": isInteractive ? 'off' : 'polite', "aria-atomic": !isInteractive }, elemProps),
             onClose && React.createElement(popup_1.Popup.CloseIcon, { "aria-label": "Close", onClick: onClose, size: "small" }),
             React.createElement(popup_1.Popup.Body, null,
                 React.createElement(ToastContentContainer, { onClose: onClose },

package/dist/commonjs/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/commonjs/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/commonjs/tokens/lib/depth.js

@@ -6,8 +6,8 @@ exports.depth = void 0;
  *
  * 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
@@ -24,20 +24,25 @@ exports.depth = void 0;
  *
  */
 exports.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/dist/es6/button/lib/BaseButton.js

@@ -144,8 +144,8 @@ export var getPaddingStyles = function (children, size, icon, iconPosition) {
         case 'small':
             return icon
                 ? iconPosition === 'start'
-                    ? "0 20px 0 " + space.s
-                    : "0 " + space.s + " 0 20px"
+                    ? "0 " + space.s + " 0 " + space.xs
+                    : "0 " + space.xs + " 0 " + space.s
                 : "0 " + space.s;
         case 'extraSmall':
             return icon

package/dist/es6/button/lib/SecondaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAGjE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,yEA+C1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,YAC1B,SAAS,GAAG,SAAS,SACvB,kBAAkB,KACxB,YAqFF,CAAC"}
+{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAGjE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,yEA+C1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,YAC1B,SAAS,GAAG,SAAS,SACvB,kBAAkB,KACxB,YAoFF,CAAC"}

package/dist/es6/button/lib/SecondaryButton.js

@@ -95,11 +95,10 @@ export var getSecondaryButtonColors = function (variant, theme) {
                 focus: {
                     background: colors.frenchVanilla100,
                     icon: colors.blackPepper500,
-                    border: colors.blackPepper400,
                     label: colors.blackPepper500,
                     focusRing: focusRing({
-                        separation: 1,
-                        innerColor: colors.blackPepper400,
+                        separation: 2,
+                        innerColor: 'currentColor',
                         outerColor: colors.frenchVanilla100,
                     }, theme),
                 },

package/dist/es6/card/lib/Card.js

@@ -30,7 +30,7 @@ export var Card = createComponent('div')({
     displayName: 'Card',
     Component: function (_a, ref, Element) {
         var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(Box, __assign({ ref: ref, as: Element, depth: 2, padding: "l", backgroundColor: "frenchVanilla100", border: "1px solid " + colors.soap500, borderRadius: "l" }, elemProps), children));
+        return (React.createElement(Box, __assign({ ref: ref, as: Element, depth: 1, padding: "l", backgroundColor: "frenchVanilla100", border: "1px solid " + colors.soap500, borderRadius: "l" }, elemProps), children));
     },
     subComponents: {
         Heading: CardHeading,

package/dist/es6/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/dist/es6/layout/lib/Box.js

@@ -97,7 +97,7 @@ var StyledBoxComponent = styled('div')({
  *
  * // `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/dist/es6/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/dist/es6/layout/lib/Flex.js

@@ -42,7 +42,7 @@ var StyledFlex = styled(Box)({
  *
  * // `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/dist/es6/modal/lib/ModalCard.js

@@ -30,6 +30,6 @@ export var ModalCard = createComponent('div')({
         var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
         var localModel = useModelContext(PopupModelContext, model);
         var props = useModalCard(localModel, elemProps, ref);
-        return (React.createElement(Popup.Card, __assign({ as: Element, width: 440, borderWidth: 0, margin: "xl" }, props), children));
+        return (React.createElement(Popup.Card, __assign({ as: Element, width: 440, borderWidth: 0, margin: "xl", depth: 6 }, props), children));
     },
 });

package/dist/es6/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`

package/dist/es6/popup/lib/Popper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC;AAC3C,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAK7C,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,MAAM,oFAQlB,CAAC"}
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC;AAC3C,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAK7C,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,MAAM,oFAQlB,CAAC"}

package/dist/es6/popup/lib/Popper.js

@@ -55,7 +55,7 @@ var defaultPopperOptions = {};
 // Popper bails early if `open` is false and React hooks cannot be called conditionally,
 // so we're breaking out the open version into another component.
 var OpenPopper = React.forwardRef(function (_a, ref) {
-    var anchorElement = _a.anchorElement, getAnchorClientRect = _a.getAnchorClientRect, _b = _a.popperOptions, popperOptions = _b === void 0 ? defaultPopperOptions : _b, _c = _a.placement, popperPlacement = _c === void 0 ? 'bottom' : _c, onPlacementChange = _a.onPlacementChange, children = _a.children, portal = _a.portal, containerElement = _a.containerElement, popperInstanceRef = _a.popperInstanceRef;
+    var anchorElement = _a.anchorElement, getAnchorClientRect = _a.getAnchorClientRect, _b = _a.popperOptions, popperOptions = _b === void 0 ? defaultPopperOptions : _b, _c = _a.placement, popperPlacement = _c === void 0 ? 'bottom' : _c, onPlacementChange = _a.onPlacementChange, children = _a.children, portal = _a.portal, popperInstanceRef = _a.popperInstanceRef;
     var firstRender = React.useRef(true);
     var _d = useLocalRef(popperInstanceRef), localRef = _d.localRef, elementRef = _d.elementRef;
     var _e = React.useState(popperPlacement), placement = _e[0], setPlacement = _e[1];
@@ -106,7 +106,7 @@ var OpenPopper = React.forwardRef(function (_a, ref) {
     if (!portal) {
         return contents;
     }
-    return ReactDOM.createPortal(contents, containerElement || stackRef.current);
+    return ReactDOM.createPortal(contents, stackRef.current);
 });
 // Typescript threw an error about non-callable signatures. Using typeof as a 'function' returns
 // a type of `Function` which isn't descriptive enough for Typescript. We don't do any detection

package/dist/es6/popup/lib/PopupCard.js

@@ -63,7 +63,7 @@ export var PopupCard = createComponent('div')({
         }, [localModel.state.placement]);
         // As is a Stack that will render an element of `Element`
         var As = useConstant(function () { return Stack.as(Element); });
-        return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", padding: "l", depth: 2, maxWidth: "calc(100vw - " + space.l + ")", spacing: 0, flexDirection: "column", minHeight: 0, maxHeight: "calc(100vh - " + (elemProps.margin
+        return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", padding: "l", depth: 5, maxWidth: "calc(100vw - " + space.l + ")", spacing: 0, flexDirection: "column", minHeight: 0, maxHeight: "calc(100vh - " + (elemProps.margin
                 ? space[elemProps.margin] || elemProps.margin
                 : space.xl) + " * 2)", overflowY: "auto" // force IE11 to limit the flex size of the card. Without this, the body isn't allowed to overflow properly: https://github.com/philipwalton/flexbugs/issues/216#issuecomment-453053557
          }, props), children));

package/dist/es6/toast/lib/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAsB,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAGlF,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAkB,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAGnG,MAAM,WAAW,UAAW,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAkCD,eAAO,MAAM,KAAK,4DA6ChB,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAsB,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAGlF,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAkB,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAGnG,MAAM,WAAW,UAAW,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAkCD,eAAO,MAAM,KAAK,4DA8ChB,CAAC"}

package/dist/es6/toast/lib/Toast.js

@@ -51,7 +51,7 @@ export var Toast = createComponent('div')({
         _c = _a.iconColor, // needed for TS2742 - https://github.com/microsoft/TypeScript/issues/29808
         iconColor = _c === void 0 ? colors.greenApple400 : _c, onClose = _a.onClose, onActionClick = _a.onActionClick, actionText = _a.actionText, children = _a.children, elemProps = __rest(_a, ["icon", "iconColor", "onClose", "onActionClick", "actionText", "children"]);
         var isInteractive = onClose || onActionClick;
-        return (React.createElement(Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, padding: "s", role: isInteractive ? 'dialog' : 'status', "aria-live": isInteractive ? 'off' : 'polite', "aria-atomic": !isInteractive }, elemProps),
+        return (React.createElement(Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, padding: "s", depth: 5, role: isInteractive ? 'dialog' : 'status', "aria-live": isInteractive ? 'off' : 'polite', "aria-atomic": !isInteractive }, elemProps),
             onClose && React.createElement(Popup.CloseIcon, { "aria-label": "Close", onClick: onClose, size: "small" }),
             React.createElement(Popup.Body, null,
                 React.createElement(ToastContentContainer, { onClose: onClose },