@workday/canvas-kit-react 6.3.6 → 7.0.0-alpha.0-next.4

package/dist/es6/status-indicator/lib/StatusIndicator.d.ts

@@ -33,6 +33,11 @@ export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanEleme
      * @default StatusIndicatorEmphasis.High
      */
     emphasis?: StatusIndicatorEmphasis;
+    /**
+     * The maxWidth of the container before it truncates
+     * @default 200
+     */
+    maxWidth?: number;
     /**
      * The text of the StatusIndicator.
      */

package/dist/es6/status-indicator/lib/StatusIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAe,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAoC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAGlG,oBAAY,mBAAmB;IAC7B,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,WAAW,gBAAgB;CAC5B;AAED,oBAAY,uBAAuB;IACjC,IAAI,SAAS;IACb,GAAG,QAAQ;CACZ;AAED,MAAM,WAAW,2BAA4B,SAAQ,YAAY;IAC/D,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE;SACP,UAAU,IAAI,mBAAmB,GAAG;aAClC,cAAc,IAAI,uBAAuB,CAAC,CAAC,EAAE,aAAa;SAC5D;KACF,CAAC;CACH;AAED,eAAO,MAAM,qBAAqB,EAAE,2BA4EnC,CAAC;AAEF,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACjF;;OAEG;IACH,IAAI,EAAE,mBAAmB,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAkBD,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;IAChF,OAAc,IAAI,6BAAuB;IACzC,OAAc,QAAQ,iCAA2B;IAE1C,MAAM;CAmBd"}
+{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAe,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAoC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAGlG,oBAAY,mBAAmB;IAC7B,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,WAAW,gBAAgB;CAC5B;AAED,oBAAY,uBAAuB;IACjC,IAAI,SAAS;IACb,GAAG,QAAQ;CACZ;AAED,MAAM,WAAW,2BAA4B,SAAQ,YAAY;IAC/D,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE;SACP,UAAU,IAAI,mBAAmB,GAAG;aAClC,cAAc,IAAI,uBAAuB,CAAC,CAAC,EAAE,aAAa;SAC5D;KACF,CAAC;CACH;AAED,eAAO,MAAM,qBAAqB,EAAE,2BA2EnC,CAAC;AAEF,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACjF;;OAEG;IACH,IAAI,EAAE,mBAAmB,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAkBD,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;IAChF,OAAc,IAAI,6BAAuB;IACzC,OAAc,QAAQ,iCAA2B;IAE1C,MAAM;CA0Bd"}

package/dist/es6/status-indicator/lib/StatusIndicator.js

@@ -53,7 +53,7 @@ export var StatusIndicatorEmphasis;
 })(StatusIndicatorEmphasis || (StatusIndicatorEmphasis = {}));
 export var statusIndicatorStyles = {
     classname: 'status-indicator',
-    styles: __assign(__assign({}, type.levels.subtext.medium), { display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', maxWidth: 150, height: space.s, padding: "1px " + space.xxxs, borderRadius: borderRadius.s, boxSizing: 'border-box' }),
+    styles: __assign(__assign({}, type.levels.subtext.medium), { display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', height: space.s, padding: "1px " + space.xxxs, borderRadius: borderRadius.s, boxSizing: 'border-box' }),
     variants: {
         gray: {
             high: {
@@ -119,8 +119,8 @@ export var statusIndicatorStyles = {
     },
 };
 var Container = styled('span')(statusIndicatorStyles.styles, function (_a) {
-    var type = _a.type, emphasis = _a.emphasis;
-    return (__assign({}, statusIndicatorStyles.variants[type][emphasis]));
+    var type = _a.type, emphasis = _a.emphasis, maxWidth = _a.maxWidth;
+    return (__assign(__assign({}, statusIndicatorStyles.variants[type][emphasis]), { maxWidth: maxWidth }));
 });
 var StatusLabel = styled('span')({
     fontWeight: 'bold',
@@ -136,9 +136,9 @@ var StatusIndicator = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     StatusIndicator.prototype.render = function () {
-        var _a = this.props, _b = _a.emphasis, emphasis = _b === void 0 ? StatusIndicatorEmphasis.High : _b, type = _a.type, icon = _a.icon, label = _a.label, elemProps = __rest(_a, ["emphasis", "type", "icon", "label"]);
+        var _a = this.props, _b = _a.emphasis, emphasis = _b === void 0 ? StatusIndicatorEmphasis.High : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? 200 : _c, type = _a.type, icon = _a.icon, label = _a.label, elemProps = __rest(_a, ["emphasis", "maxWidth", "type", "icon", "label"]);
         var variant = statusIndicatorStyles.variants[type][emphasis];
-        return (React.createElement(Container, __assign({ type: type, emphasis: emphasis }, elemProps),
+        return (React.createElement(Container, __assign({ type: type, emphasis: emphasis, maxWidth: maxWidth }, elemProps),
             icon && (React.createElement(SystemIcon, { colorHover: variant.color, color: variant.color, icon: icon, size: 14, style: { paddingRight: space.xxxs } })),
             React.createElement(StatusLabel, null, label)));
     };

package/dist/es6/tabs/lib/TabsItem.d.ts

@@ -72,7 +72,7 @@ export interface TabsItemProps extends ExtractProps<typeof Box, never>, Partial<
      */
     hasIcon?: boolean;
 }
-export declare const StyledTabItem: import("@emotion/styled-base").StyledComponent<import("../../common").PropsWithAs<import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderShorthandStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderColorStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderRadiusStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLineStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderWidthStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLogicalStyleProps & import("@workday/canvas-kit-labs-react/common").ColorStyleProps & import("@workday/canvas-kit-labs-react/common").DepthStyleProps & import("@workday/canvas-kit-labs-react/common").FlexItemStyleProps & import("@workday/canvas-kit-labs-react/common").LayoutStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionLogicalProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceLogicalProps, "button">, StyledType & {
+export declare const StyledTabItem: import("@emotion/styled-base").StyledComponent<import("../../common").PropsWithAs<import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderShorthandStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderColorStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderRadiusStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLineStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderWidthStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLogicalStyleProps & import("@workday/canvas-kit-labs-react/common").ColorStyleProps & import("@workday/canvas-kit-labs-react/common").DepthStyleProps & import("@workday/canvas-kit-labs-react/common").FlexItemStyleProps & import("@workday/canvas-kit-labs-react/common").LayoutStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionLogicalProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceLogicalProps, "button">, StyledType & {
     hasIcon?: boolean | undefined;
 } & Pick<TabsItemProps, "spacing">, import("../../common").EmotionCanvasTheme>;
 export declare const TabsItem: import("../../common").ElementComponent<"button", TabsItemProps> & {

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":"AAIA,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,EAAS,MAAM,kCAAkC,CAAC;AAGvF,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;AA0CD,eAAO,MAAM,KAAK,4DAyChB,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,4DA6ChB,CAAC"}

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

@@ -20,8 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
+import * as React from 'react';
 import { Popup } from '@workday/canvas-kit-react/popup';
 import { space, colors, type } from '@workday/canvas-kit-react/tokens';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
@@ -40,10 +39,7 @@ var ToastSystemIcon = styled(SystemIcon)({
     alignSelf: 'start',
 });
 var _a = type.levels.subtext.large, color = _a.color, subTextLargeStyles = __rest(_a, ["color"]);
-var actionButtonStyles = __assign(__assign({}, subTextLargeStyles), { display: 'block', backgroundColor: 'transparent', border: 'none', marginTop: space.xxxs });
-var ActionButton = function (props) {
-    return jsx(Hyperlink, __assign({ as: "button", css: actionButtonStyles }, props));
-};
+var StyledActionButton = styled(Hyperlink)(__assign(__assign({}, subTextLargeStyles), { display: 'block', backgroundColor: 'transparent', border: 'none', marginTop: space.xxxs }));
 var Message = styled('div')({
     wordBreak: 'break-word',
     wordWrap: 'break-word',
@@ -55,13 +51,13 @@ 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 (jsx(Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, padding: "s", role: isInteractive ? 'dialog' : 'status', "aria-live": isInteractive ? 'off' : 'polite', "aria-atomic": !isInteractive }, elemProps),
-            onClose && jsx(Popup.CloseIcon, { "aria-label": "Close", onClick: onClose, size: "small" }),
-            jsx(Popup.Body, null,
-                jsx(ToastContentContainer, { onClose: onClose },
-                    icon && jsx(ToastSystemIcon, { color: iconColor, colorHover: iconColor, icon: icon }),
-                    jsx(Message, null,
+        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),
+            onClose && React.createElement(Popup.CloseIcon, { "aria-label": "Close", onClick: onClose, size: "small" }),
+            React.createElement(Popup.Body, null,
+                React.createElement(ToastContentContainer, { onClose: onClose },
+                    icon && React.createElement(ToastSystemIcon, { color: iconColor, colorHover: iconColor, icon: icon }),
+                    React.createElement(Message, null,
                         children,
-                        onActionClick && jsx(ActionButton, { onClick: onActionClick }, actionText))))));
+                        onActionClick && (React.createElement(StyledActionButton, { as: "button", onClick: onActionClick }, actionText)))))));
     },
 });

package/icon/lib/Svg.tsx

@@ -1,8 +1,8 @@
-/** @jsx jsx */
-import {CSSObject, jsx, ClassNames} from '@emotion/core';
+import {CSSObject} from '@emotion/core';
 import * as React from 'react';
 import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {validateIconType} from './utils';
+import {styled} from '@workday/canvas-kit-react/common';
 
 export interface SvgProps extends React.HTMLAttributes<HTMLSpanElement> {
   src: CanvasIcon;
@@ -16,9 +16,18 @@ export interface SvgProps extends React.HTMLAttributes<HTMLSpanElement> {
   shouldMirror?: boolean;
 }
 
+const StyledIconSpan = styled('span')<Pick<SvgProps, 'shouldMirror' | 'styles'>>(
+  ({shouldMirror, styles}) => ({
+    display: 'inline-block',
+    '> svg': {display: 'block'},
+    transform: shouldMirror ? 'scaleX(-1)' : undefined,
+    ...styles,
+  })
+);
+
 export default class Svg extends React.Component<SvgProps> {
   public render() {
-    const {src, styles, type, iconRef, shouldMirror, ...elemProps} = this.props;
+    const {src, type, iconRef, ...elemProps} = this.props;
 
     // Validation for JS
     try {
@@ -29,25 +38,7 @@ export default class Svg extends React.Component<SvgProps> {
     }
 
     return (
-      <ClassNames>
-        {({css, cx}) => (
-          <span
-            {...elemProps}
-            dangerouslySetInnerHTML={{__html: src.svg}}
-            // Need to combine iconStyle with the className prop, otherwise we'll clobber it
-            // (we'll need to do something like this for each HTML <span> prop we explicitly set in this component)
-            className={cx(
-              css(styles, {
-                display: 'inline-block',
-                '& svg': {display: 'block'},
-                transform: shouldMirror ? 'scaleX(-1)' : undefined,
-              }),
-              elemProps.className
-            )}
-            ref={iconRef}
-          />
-        )}
-      </ClassNames>
+      <StyledIconSpan {...elemProps} dangerouslySetInnerHTML={{__html: src.svg}} ref={iconRef} />
     );
   }
 }

package/modal/lib/Modal.tsx

@@ -6,6 +6,7 @@ import {ModalOverlay} from './ModalOverlay';
 import {ModalCard} from './ModalCard';
 import {useModalModel} from './hooks';
 import {ModalHeading} from './ModalHeading';
+import {ModalOverflowOverlay} from './ModalOverflowOverlay';
 
 export interface ModalProps extends ExtractProps<typeof Dialog, never> {
   /** The contents of the Modal. Can be `Modal` subcomponents or any valid elements. */
@@ -27,6 +28,7 @@ export const Modal = createComponent()({
     Target: Popup.Target,
     Heading: ModalHeading,
     Overlay: ModalOverlay,
+    OverflowOverlay: ModalOverflowOverlay,
     CloseButton: Popup.CloseButton,
   },
 });

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} {...props}>
+      <Popup.Card as={Element} width={440} borderWidth={0} margin="xl" {...props}>
         {children}
       </Popup.Card>
     );

package/modal/lib/ModalOverflowOverlay.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import {createComponent, ExtractProps, StyledType} from '@workday/canvas-kit-react/common';
+
+import {ModalOverlay} from './ModalOverlay';
+import styled from '@emotion/styled';
+
+const StyledOverlay = styled(ModalOverlay)<StyledType>({
+  '& > div': {maxHeight: 'inherit'}, // reset maxHeight of centering div
+});
+
+export const ModalOverflowOverlay = createComponent('div')({
+  displayName: 'Modal.OverflowOverlay',
+  Component: (
+    {children, model, ...elemProps}: ExtractProps<typeof ModalOverlay, never>,
+    ref,
+    Element
+  ) => {
+    return (
+      <StyledOverlay as={Element} ref={ref} overflow="auto" {...elemProps}>
+        {children}
+      </StyledOverlay>
+    );
+  },
+});

package/modal/lib/ModalOverlay.tsx

@@ -12,8 +12,9 @@ import {
 import {PopupModel, PopupModelContext, usePopupStack} from '@workday/canvas-kit-react/popup';
 import {keyframes} from '@emotion/core';
 import styled from '@emotion/styled';
+import {Box, BoxProps} from '@workday/canvas-kit-labs-react/common';
 
-export interface ModalOverlayProps {
+export interface ModalOverlayProps extends BoxProps {
   model?: PopupModel;
   children: React.ReactNode;
 }
@@ -27,7 +28,7 @@ const fadeIn = keyframes`
   }
 `;
 
-const Container = styled('div')<StyledType>({
+const Container = styled(Box)<StyledType>({
   position: 'fixed',
   top: 0,
   left: 0,
@@ -47,13 +48,20 @@ const Container = styled('div')<StyledType>({
 // the Modal. The centering container forces a "center" pixel calculation by making sure the width
 // is always an even number
 const CenteringContainer = styled('div')({
-  height: '100vh',
+  maxHeight: '100vh',
   display: 'flex',
   position: 'absolute',
   left: 0,
   top: 0,
   alignItems: 'center',
   justifyContent: 'center',
+
+  // IE11 fix for setting min-height in a flex container
+  ':before': {
+    display: 'block',
+    content: "''",
+    height: '100vh',
+  },
 });
 
 export const ModalOverlay = createComponent('div')({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "6.3.6",
+  "version": "7.0.0-alpha.0-next.4+bdd1ec94",
   "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": "^10.0.27",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^6.3.6",
-    "@workday/canvas-kit-popup-stack": "^6.3.6",
-    "@workday/canvas-kit-preview-react": "^6.3.6",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.0-next.4+bdd1ec94",
+    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.0-next.4+bdd1ec94",
+    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.4+bdd1ec94",
     "@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": "3322ef6ba113940373412840edd14d35a7a3093c"
+  "gitHead": "bdd1ec9493a5a2dc4d67e4cc33adcba13efee4b7"
 }

package/pagination/lib/Pagination/AdditionalDetails.tsx

@@ -1,11 +1,9 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx, css} from '@emotion/core';
-import {type, typeColors} from '@workday/canvas-kit-react/tokens';
-import {accessibleHide} from '@workday/canvas-kit-react/common';
+import {type, typeColors, space} from '@workday/canvas-kit-react/tokens';
+import {accessibleHide, styled, StyledType} from '@workday/canvas-kit-react/common';
 
 import {PaginationModel} from './types';
-import {Flex, FlexProps} from './common/Flex';
+import {Flex, FlexProps} from '@workday/canvas-kit-labs-react/layout';
 import {useLiveRegion} from './common/useLiveRegion';
 
 export interface AdditionalDetailsProps extends FlexProps {
@@ -15,30 +13,38 @@ export interface AdditionalDetailsProps extends FlexProps {
   shouldHideDetails?: boolean;
 }
 
-// Ideally, these styles would be applied directly to a Text component
-const textStyles = css({
-  ...type.levels.subtext.medium,
-  color: typeColors.hint,
+const StyledAdditionalDetails = styled(Flex)<
+  StyledType & Pick<AdditionalDetailsProps, 'shouldHideDetails'>
+>(({shouldHideDetails}) => {
+  const styles = {
+    ...type.levels.subtext.medium,
+    color: typeColors.hint,
+  };
+  if (shouldHideDetails) {
+    return {
+      ...styles,
+      ...accessibleHide,
+      marginTop: space.zero,
+    };
+  } else {
+    return {
+      ...styles,
+      marginTop: space.xs,
+    };
+  }
 });
 
 export const AdditionalDetails = ({
   model,
   children,
   shouldAnnounceToScreenReader,
-  shouldHideDetails = false,
   ...elemProps
 }: AdditionalDetailsProps) => {
   const liveRegionProps = useLiveRegion({shouldAnnounceToScreenReader});
-  const detailStyles = css([textStyles, shouldHideDetails ? accessibleHide : null]);
 
   return (
-    <Flex
-      mt={shouldHideDetails ? 'zero' : 'xs'}
-      css={detailStyles}
-      {...liveRegionProps}
-      {...elemProps}
-    >
+    <StyledAdditionalDetails {...liveRegionProps} {...elemProps}>
       {typeof children === 'function' ? children(model) : children}
-    </Flex>
+    </StyledAdditionalDetails>
   );
 };

package/pagination/lib/Pagination/Controls.tsx

@@ -8,7 +8,7 @@ import {
 } from '@workday/canvas-system-icons-web';
 
 import {PaginationModel} from './types';
-import {HStack} from './common/Stack';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
 import {useRTL} from './common/utils/useRTL';
 
 export type ControlButtonProps = IconButtonProps &

package/pagination/lib/Pagination/GoTo/Form.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import {HStack, HStackProps} from '../common/Stack';
-import {Spacing} from '../common/utils/space';
+import {HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-labs-react/layout';
 import {useRTL} from '../common/utils/useRTL';
 
 export type GoToFormProps = React.FormHTMLAttributes<HTMLFormElement> &
   Omit<HStackProps, 'spacing'> & {
-    spacing?: Spacing;
+    spacing?: StackSpacing;
   };
 
 export const GoToForm = ({children, onSubmit, spacing = 'xxs', ...elemProps}: GoToFormProps) => {
@@ -15,8 +14,8 @@ export const GoToForm = ({children, onSubmit, spacing = 'xxs', ...elemProps}: Go
       as="form"
       alignItems="center"
       spacing={spacing}
-      pl={shouldUseRTL ? 'xxs' : undefined}
-      pr={shouldUseRTL ? 'xxs' : undefined}
+      paddingLeft={shouldUseRTL ? 'xxs' : undefined}
+      paddingRight={shouldUseRTL ? 'xxs' : undefined}
       onSubmit={onSubmit}
       {...elemProps}
     >

package/pagination/lib/Pagination/GoTo/Label.tsx

@@ -1,9 +1,8 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx, css, Interpolation} from '@emotion/core';
 import {type, typeColors} from '@workday/canvas-kit-react/tokens';
 
 import {PaginationModel} from '../types';
+import {StyledType, styled} from '@workday/canvas-kit-react/common';
 
 export interface GoToLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
   model: PaginationModel;
@@ -13,16 +12,16 @@ export interface GoToLabelProps extends React.LabelHTMLAttributes<HTMLLabelEleme
   children?: (model: PaginationModel) => React.ReactNode | React.ReactNode;
 }
 
-const labelStyles = css({
+const StyledLabel = styled('label')<StyledType>({
   ...type.levels.subtext.medium,
   color: typeColors.hint,
   whiteSpace: 'nowrap',
 });
 
-export const GoToLabel = ({css: cssProp, model, children, ...elemProps}: GoToLabelProps) => {
+export const GoToLabel = ({model, children, ...elemProps}: GoToLabelProps) => {
   return (
-    <label css={[labelStyles, cssProp as Interpolation<undefined>]} {...elemProps}>
+    <StyledLabel {...elemProps}>
       {typeof children === 'function' ? children(model) : children}
-    </label>
+    </StyledLabel>
   );
 };

package/pagination/lib/Pagination/Nav.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Flex, FlexProps} from './common/Flex';
+import {Flex, FlexProps} from '@workday/canvas-kit-labs-react/layout';
 
 export interface PaginationNavProps extends Omit<FlexProps, 'as'> {
   'aria-label': string;
@@ -11,7 +11,7 @@ export const PaginationNav = ({'aria-label': ariaLabel, ...elemProps}: Paginatio
       as="nav"
       aria-label={ariaLabel}
       display="inline-flex"
-      direction="column"
+      flexDirection="column"
       alignItems="center"
       {...elemProps}
     />

package/pagination/lib/Pagination/PageList.tsx

@@ -1,25 +1,27 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx, css} from '@emotion/core';
 
 import {PaginationModel} from './types';
-import {List, ListItem, ListItemProps, ListProps} from './common/List';
-import {useStack} from './common/Stack';
-import {useRTL} from './common/utils/useRTL';
+import {ListItem, ListItemProps} from './common/List';
+import {HStack, HStackProps} from '@workday/canvas-kit-labs-react/layout';
 
-export interface PageListProps extends Omit<ListProps, 'as'> {
+export interface PageListProps extends Omit<HStackProps, 'as' | 'spacing'> {
   model: PaginationModel;
   children?: (model: PaginationModel) => React.ReactNode[] | React.ReactNode;
 }
 
 export const PageList = ({model, children, ...elemProps}: PageListProps) => {
-  const {shouldUseRTL} = useRTL();
-  const stackStyles = useStack({direction: 'row', spacing: 'xxxs', shouldUseRTL});
-
   return (
-    <List as="ol" role="list" css={css(stackStyles)} {...elemProps}>
+    <HStack
+      margin="zero"
+      as="ol"
+      role="list"
+      paddingLeft="zero"
+      paddingRight="zero"
+      spacing="xxxs"
+      {...elemProps}
+    >
       {typeof children === 'function' ? children(model) : children}
-    </List>
+    </HStack>
   );
 };
 

package/pagination/lib/Pagination/common/List.tsx

@@ -1,39 +1,41 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx, css} from '@emotion/core';
 
-import {Flex, FlexProps} from './Flex';
+import {Flex, FlexProps} from '@workday/canvas-kit-labs-react/layout';
+import {StyledType, styled, createComponent} from '@workday/canvas-kit-react/common';
 
-export interface ListProps extends FlexProps, React.OlHTMLAttributes<HTMLElement> {
-  as: 'ol' | 'ul';
-}
+export interface ListProps extends FlexProps {}
 
-const listStyles = css({
+const StyledList = styled(Flex.as('ul'))<StyledType & FlexProps>({
   listStyle: 'none',
 });
 
-export const List = React.forwardRef<HTMLOListElement | HTMLUListElement, ListProps>(
-  ({as, children, ...elemProps}, ref) => {
+export const List = createComponent('ul')({
+  displayName: 'List',
+  Component: ({children, ...elemProps}: ListProps, ref, Element) => {
     return (
-      <Flex as={as} m="zero" p="zero" css={listStyles} ref={ref} {...elemProps}>
+      <StyledList
+        as={Element}
+        marginY="zero"
+        marginX="zero"
+        padding="zero"
+        ref={ref}
+        {...elemProps}
+      >
         {children}
-      </Flex>
+      </StyledList>
     );
-  }
-);
-
-List.displayName = 'List';
+  },
+});
 
-export type ListItemProps = Omit<FlexProps, 'as'>;
+export interface ListItemProps extends FlexProps {}
 
-export const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(
-  ({children, ...elemProps}, ref) => {
+export const ListItem = createComponent('li')({
+  displayName: 'ListItem',
+  Component: ({children, ...elemProps}: ListItemProps, ref, Element) => {
     return (
-      <Flex as="li" ref={ref} {...elemProps}>
+      <Flex as={Element} ref={ref} {...elemProps}>
         {children}
       </Flex>
     );
-  }
-);
-
-ListItem.displayName = 'ListItem';
+  },
+});

package/popup/lib/Popup.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import {Card} from '@workday/canvas-kit-react/card';
 import {createComponent, useDefaultModel} from '@workday/canvas-kit-react/common';
 
 import {PopupModel, usePopupModel, PopupModelContext} from './hooks';
@@ -10,6 +9,7 @@ import {PopupPopper} from './PopupPopper';
 import {PopupHeading} from './PopupHeading';
 import {PopupCloseIcon} from './PopupCloseIcon';
 import {PopupCloseButton} from './PopupCloseButton';
+import {PopupBody} from './PopupBody';
 
 export interface PopupProps {
   /**
@@ -30,7 +30,7 @@ export const Popup = createComponent()({
   },
   subComponents: {
     Heading: PopupHeading,
-    Body: Card.Body,
+    Body: PopupBody,
     Card: PopupCard,
     CloseIcon: PopupCloseIcon,
     Target: PopupTarget,

package/popup/lib/PopupBody.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Card} from '@workday/canvas-kit-react/card';
+
+export const PopupBody = createComponent('div')({
+  displayName: 'Popup.Body',
+  Component: (props: ExtractProps<typeof Card.Body, never>, ref) => {
+    return <Card.Body overflowY="auto" {...props} />;
+  },
+});