@workday/canvas-kit-react 8.1.1 → 8.1.3

package/action-bar/lib/ActionBarList.tsx

@@ -4,6 +4,7 @@ import {commonColors, colors, space} from '@workday/canvas-kit-react/tokens';
 import {
   createSubcomponent,
   ExtractProps,
+  getCanvasTheme,
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
@@ -36,14 +37,17 @@ export interface ActionBarListProps<T = any>
   overflowButton?: React.ReactNode;
 }
 
-const ResponsiveHStack = styled(HStack)<ActionBarListProps & StyledType>(({theme}) => ({
-  [theme.canvas.breakpoints.down('s')]: {
-    padding: space.s,
-    '> *': {
-      flex: 1,
+const ResponsiveHStack = styled(HStack)<ActionBarListProps & StyledType>(({theme}) => {
+  const canvasTheme = getCanvasTheme(theme);
+  return {
+    [canvasTheme.breakpoints.down('s')]: {
+      padding: space.s,
+      '> *': {
+        flex: 1,
+      },
     },
-  },
-}));
+  };
+});
 
 export const useActionBarList = useOverflowListMeasure;
 

package/button/lib/TertiaryButton.tsx

@@ -20,7 +20,7 @@ export interface TertiaryButtonProps extends Themeable, BaseButtonProps {
    */
   variant?: 'inverse' | undefined;
   /**
-   * There are three button sizes: `extraSmall`, `small`, and `medium`.
+   * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
    * If no size is provided, it will default to `medium`.
    *
    * @default 'medium'

package/common/lib/theming/getCanvasTheme.ts

@@ -0,0 +1,40 @@
+import {CanvasTheme} from '@workday/canvas-kit-react/common';
+import {Theme, useTheme} from '@emotion/react';
+import {getObjectProxy} from './getObjectProxy';
+import {defaultCanvasTheme} from './theme';
+
+/**
+ * Use this function when you have access to `theme` in styled components.
+ * This function ensures that a theme is defined via a proxy and allows access to properties on the theme object.
+ * @param theme Any partial or full theme object.
+ * @returns a theme object if it is defined, otherwise it will fall back on using defaultCanvasTheme
+ * @example
+ * const ResponsiveContainer = styled('div')(({theme}) => {
+ * const canvas = getCanvasTheme(theme);
+ *  return {
+ *    maxHeight: '100vh',
+ *    display: 'flex',
+ *    position: 'absolute',
+ *    left: 0,
+ *    top: 0,
+ *    justifyContent: 'center',
+ *    alignItems: 'center',
+ *    height: '100vh',
+ *    [canvas.breakpoints.down('s')]: {
+ *      alignItems: 'end',
+ *    },
+ *  };
+ *});
+ */
+export function getCanvasTheme(theme: any = {}): CanvasTheme {
+  // prettier-ignore
+  //@ts-ignore
+  const windowTheme = typeof window !== 'undefined' && window.workday && window.workday.canvas && window.workday.canvas.theme;
+  return getObjectProxy(theme.canvas || windowTheme || {}, defaultCanvasTheme);
+}
+
+export function useCanvasTheme(themeOverride?: Theme) {
+  const theme = useTheme();
+
+  return getCanvasTheme(themeOverride || theme);
+}

package/common/lib/theming/getObjectProxy.ts

@@ -0,0 +1,24 @@
+/**
+ * The functions gets a new object proxy. This is used for theme to ensure regardless of a partial theme object
+ * there will be a fallback theme object so that properties aren't undefined regardless of the `target` object.
+ * This function will also handle nested properties.
+ * @param target Any custom theme object
+ * @param fallback A fallback theme object
+ */
+/* eslint-disable compat/compat  */ // TODO: Revisit eslint rules that are no longer needed now that we don't support IE11
+export function getObjectProxy<T extends {}>(target: unknown, fallback: T): T {
+  return new Proxy(target as any, {
+    get(target, prop: keyof T) {
+      if (typeof fallback[prop] === 'object' && typeof target[prop] === 'object') {
+        return getObjectProxy(target[prop] || {}, fallback[prop]);
+      } else if (target[prop] !== undefined) {
+        return target[prop];
+      } else {
+        return fallback[prop];
+      }
+    },
+    ownKeys(target) {
+      return Object.keys(fallback);
+    },
+  }) as T;
+}

package/common/lib/theming/index.ts

@@ -5,3 +5,5 @@ export {default as styled, StyleRewriteFn} from './styled';
 export * from './theme';
 export * from './useTheme';
 export * from './useIsRTL';
+export * from './getCanvasTheme';
+export * from './getObjectProxy';

package/dist/commonjs/action-bar/lib/ActionBarList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AAMxD,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,CACzC,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACrE;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAWD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAAyB,CAAC;AAEvD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBxB,CAAC"}
+{"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AAMxD,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,CACzC,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACrE;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAcD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAAyB,CAAC;AAEvD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBxB,CAAC"}

package/dist/commonjs/action-bar/lib/ActionBarList.js

@@ -51,14 +51,15 @@ var useActionBarModel_1 = require("./useActionBarModel");
 var ResponsiveHStack = common_1.styled(layout_1.HStack)(function (_a) {
     var _b;
     var theme = _a.theme;
-    return (_b = {},
-        _b[theme.canvas.breakpoints.down('s')] = {
+    var canvasTheme = common_1.getCanvasTheme(theme);
+    return _b = {},
+        _b[canvasTheme.breakpoints.down('s')] = {
             padding: tokens_1.space.s,
             '> *': {
                 flex: 1,
             },
         },
-        _b);
+        _b;
 });
 exports.useActionBarList = collection_1.useOverflowListMeasure;
 exports.ActionBarList = common_1.createSubcomponent('div')({

package/dist/commonjs/button/lib/TertiaryButton.d.ts

@@ -10,7 +10,7 @@ export interface TertiaryButtonProps extends Themeable, BaseButtonProps {
      */
     variant?: 'inverse' | undefined;
     /**
-     * There are three button sizes: `extraSmall`, `small`, and `medium`.
+     * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
      * If no size is provided, it will default to `medium`.
      *
      * @default 'medium'

package/dist/commonjs/common/lib/theming/getCanvasTheme.d.ts

@@ -0,0 +1,28 @@
+import { CanvasTheme } from '@workday/canvas-kit-react/common';
+import { Theme } from '@emotion/react';
+/**
+ * Use this function when you have access to `theme` in styled components.
+ * This function ensures that a theme is defined via a proxy and allows access to properties on the theme object.
+ * @param theme Any partial or full theme object.
+ * @returns a theme object if it is defined, otherwise it will fall back on using defaultCanvasTheme
+ * @example
+ * const ResponsiveContainer = styled('div')(({theme}) => {
+ * const canvas = getCanvasTheme(theme);
+ *  return {
+ *    maxHeight: '100vh',
+ *    display: 'flex',
+ *    position: 'absolute',
+ *    left: 0,
+ *    top: 0,
+ *    justifyContent: 'center',
+ *    alignItems: 'center',
+ *    height: '100vh',
+ *    [canvas.breakpoints.down('s')]: {
+ *      alignItems: 'end',
+ *    },
+ *  };
+ *});
+ */
+export declare function getCanvasTheme(theme?: any): CanvasTheme;
+export declare function useCanvasTheme(themeOverride?: Theme): CanvasTheme;
+//# sourceMappingURL=getCanvasTheme.d.ts.map

package/dist/commonjs/common/lib/theming/getCanvasTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCanvasTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/getCanvasTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAC,KAAK,EAAW,MAAM,gBAAgB,CAAC;AAI/C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,cAAc,CAAC,KAAK,GAAE,GAAQ,GAAG,WAAW,CAK3D;AAED,wBAAgB,cAAc,CAAC,aAAa,CAAC,EAAE,KAAK,eAInD"}

package/dist/commonjs/common/lib/theming/getCanvasTheme.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCanvasTheme = exports.getCanvasTheme = void 0;
+var react_1 = require("@emotion/react");
+var getObjectProxy_1 = require("./getObjectProxy");
+var theme_1 = require("./theme");
+/**
+ * Use this function when you have access to `theme` in styled components.
+ * This function ensures that a theme is defined via a proxy and allows access to properties on the theme object.
+ * @param theme Any partial or full theme object.
+ * @returns a theme object if it is defined, otherwise it will fall back on using defaultCanvasTheme
+ * @example
+ * const ResponsiveContainer = styled('div')(({theme}) => {
+ * const canvas = getCanvasTheme(theme);
+ *  return {
+ *    maxHeight: '100vh',
+ *    display: 'flex',
+ *    position: 'absolute',
+ *    left: 0,
+ *    top: 0,
+ *    justifyContent: 'center',
+ *    alignItems: 'center',
+ *    height: '100vh',
+ *    [canvas.breakpoints.down('s')]: {
+ *      alignItems: 'end',
+ *    },
+ *  };
+ *});
+ */
+function getCanvasTheme(theme) {
+    if (theme === void 0) { theme = {}; }
+    // prettier-ignore
+    //@ts-ignore
+    var windowTheme = typeof window !== 'undefined' && window.workday && window.workday.canvas && window.workday.canvas.theme;
+    return getObjectProxy_1.getObjectProxy(theme.canvas || windowTheme || {}, theme_1.defaultCanvasTheme);
+}
+exports.getCanvasTheme = getCanvasTheme;
+function useCanvasTheme(themeOverride) {
+    var theme = react_1.useTheme();
+    return getCanvasTheme(themeOverride || theme);
+}
+exports.useCanvasTheme = useCanvasTheme;

package/dist/commonjs/common/lib/theming/getObjectProxy.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The functions gets a new object proxy. This is used for theme to ensure regardless of a partial theme object
+ * there will be a fallback theme object so that properties aren't undefined regardless of the `target` object.
+ * This function will also handle nested properties.
+ * @param target Any custom theme object
+ * @param fallback A fallback theme object
+ */
+export declare function getObjectProxy<T extends {}>(target: unknown, fallback: T): T;
+//# sourceMappingURL=getObjectProxy.d.ts.map

package/dist/commonjs/common/lib/theming/getObjectProxy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getObjectProxy.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/getObjectProxy.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,wBAAgB,cAAc,CAAC,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,GAAG,CAAC,CAe5E"}

package/dist/commonjs/common/lib/theming/getObjectProxy.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getObjectProxy = void 0;
+/**
+ * The functions gets a new object proxy. This is used for theme to ensure regardless of a partial theme object
+ * there will be a fallback theme object so that properties aren't undefined regardless of the `target` object.
+ * This function will also handle nested properties.
+ * @param target Any custom theme object
+ * @param fallback A fallback theme object
+ */
+/* eslint-disable compat/compat  */ // TODO: Revisit eslint rules that are no longer needed now that we don't support IE11
+function getObjectProxy(target, fallback) {
+    return new Proxy(target, {
+        get: function (target, prop) {
+            if (typeof fallback[prop] === 'object' && typeof target[prop] === 'object') {
+                return getObjectProxy(target[prop] || {}, fallback[prop]);
+            }
+            else if (target[prop] !== undefined) {
+                return target[prop];
+            }
+            else {
+                return fallback[prop];
+            }
+        },
+        ownKeys: function (target) {
+            return Object.keys(fallback);
+        },
+    });
+}
+exports.getObjectProxy = getObjectProxy;

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

@@ -5,4 +5,6 @@ export { default as styled, StyleRewriteFn } from './styled';
 export * from './theme';
 export * from './useTheme';
 export * from './useIsRTL';
+export * from './getCanvasTheme';
+export * from './getObjectProxy';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,OAAO,IAAI,MAAM,EAAE,cAAc,EAAC,MAAM,UAAU,CAAC;AAC3D,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,OAAO,IAAI,MAAM,EAAE,cAAc,EAAC,MAAM,UAAU,CAAC;AAC3D,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}

package/dist/commonjs/common/lib/theming/index.js

@@ -23,3 +23,5 @@ Object.defineProperty(exports, "styled", { enumerable: true, get: function () {
 __exportStar(require("./theme"), exports);
 __exportStar(require("./useTheme"), exports);
 __exportStar(require("./useIsRTL"), exports);
+__exportStar(require("./getCanvasTheme"), exports);
+__exportStar(require("./getObjectProxy"), exports);

package/dist/commonjs/modal/lib/ModalCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalCard.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAItD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;CAAG;AAWjF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAMpB,CAAC"}
+{"version":3,"file":"ModalCard.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAItD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;CAAG;AAcjF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAMpB,CAAC"}

package/dist/commonjs/modal/lib/ModalCard.js

@@ -39,15 +39,16 @@ var hooks_1 = require("./hooks");
 var ResponsiveModalCard = common_1.styled(popup_1.Popup.Card)(function (_a) {
     var _b;
     var theme = _a.theme;
-    return (_b = {
+    var canvasTheme = common_1.getCanvasTheme(theme);
+    return _b = {
             margin: tokens_1.space.xl
         },
-        _b[theme.canvas.breakpoints.down('s')] = {
+        _b[canvasTheme.breakpoints.down('s')] = {
             margin: tokens_1.space.s,
             padding: tokens_1.space.xxs,
             borderRadius: tokens_1.space.m,
         },
-        _b);
+        _b;
 });
 exports.ModalCard = common_1.createSubcomponent('div')({
     displayName: 'Modal.Card',

package/dist/commonjs/modal/lib/ModalHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeading.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAKtD,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC;CAAG;AAQvF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAMvB,CAAC"}
+{"version":3,"file":"ModalHeading.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAKtD,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC;CAAG;AAWvF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAMvB,CAAC"}

package/dist/commonjs/modal/lib/ModalHeading.js

@@ -39,11 +39,12 @@ var hooks_1 = require("./hooks");
 var ResponsiveModalHeading = common_1.styled(popup_1.Popup.Heading)(function (_a) {
     var _b;
     var theme = _a.theme;
-    return (_b = {},
-        _b[theme.canvas.breakpoints.down('s')] = {
+    var canvasTheme = common_1.getCanvasTheme(theme);
+    return _b = {},
+        _b[canvasTheme.breakpoints.down('s')] = {
             marginBottom: tokens_1.space.zero,
         },
-        _b);
+        _b;
 });
 exports.ModalHeading = common_1.createSubcomponent('h2')({
     displayName: 'Modal.Heading',

package/dist/commonjs/modal/lib/ModalOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalOverlay.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAG/D,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;CAAG;AA4CtD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAOvB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;OAQ1B,CAAC"}
+{"version":3,"file":"ModalOverlay.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAG/D,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;CAAG;AA+CtD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAOvB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;OAQ1B,CAAC"}

package/dist/commonjs/modal/lib/ModalOverlay.js

@@ -49,7 +49,8 @@ var Container = styled_1.default(layout_1.Box)({
 var ResponsiveContainer = styled_1.default('div')(function (_a) {
     var _b;
     var theme = _a.theme;
-    return (_b = {
+    var canvasTheme = common_1.getCanvasTheme(theme);
+    return _b = {
             maxHeight: '100vh',
             display: 'flex',
             position: 'absolute',
@@ -59,10 +60,10 @@ var ResponsiveContainer = styled_1.default('div')(function (_a) {
             alignItems: 'center',
             height: '100vh'
         },
-        _b[theme.canvas.breakpoints.down('s')] = {
+        _b[canvasTheme.breakpoints.down('s')] = {
             alignItems: 'end',
         },
-        _b);
+        _b;
 });
 exports.ModalOverlay = common_1.createSubcomponent('div')({
     displayName: 'Modal.Overlay',

package/dist/es6/action-bar/lib/ActionBarList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AAMxD,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,CACzC,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACrE;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAWD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAAyB,CAAC;AAEvD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBxB,CAAC"}
+{"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AAMxD,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,CACzC,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACrE;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAcD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAAyB,CAAC;AAEvD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBxB,CAAC"}

package/dist/es6/action-bar/lib/ActionBarList.js

@@ -22,21 +22,22 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { commonColors, colors, space } from '@workday/canvas-kit-react/tokens';
-import { createSubcomponent, styled, } from '@workday/canvas-kit-react/common';
+import { createSubcomponent, getCanvasTheme, styled, } from '@workday/canvas-kit-react/common';
 import { HStack } from '@workday/canvas-kit-react/layout';
 import { useOverflowListMeasure, useListRenderItems } from '@workday/canvas-kit-react/collection';
 import { useActionBarModel } from './useActionBarModel';
 var ResponsiveHStack = styled(HStack)(function (_a) {
     var _b;
     var theme = _a.theme;
-    return (_b = {},
-        _b[theme.canvas.breakpoints.down('s')] = {
+    var canvasTheme = getCanvasTheme(theme);
+    return _b = {},
+        _b[canvasTheme.breakpoints.down('s')] = {
             padding: space.s,
             '> *': {
                 flex: 1,
             },
         },
-        _b);
+        _b;
 });
 export var useActionBarList = useOverflowListMeasure;
 export var ActionBarList = createSubcomponent('div')({

package/dist/es6/button/lib/TertiaryButton.d.ts

@@ -10,7 +10,7 @@ export interface TertiaryButtonProps extends Themeable, BaseButtonProps {
      */
     variant?: 'inverse' | undefined;
     /**
-     * There are three button sizes: `extraSmall`, `small`, and `medium`.
+     * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
      * If no size is provided, it will default to `medium`.
      *
      * @default 'medium'

package/dist/es6/common/lib/theming/getCanvasTheme.d.ts

@@ -0,0 +1,28 @@
+import { CanvasTheme } from '@workday/canvas-kit-react/common';
+import { Theme } from '@emotion/react';
+/**
+ * Use this function when you have access to `theme` in styled components.
+ * This function ensures that a theme is defined via a proxy and allows access to properties on the theme object.
+ * @param theme Any partial or full theme object.
+ * @returns a theme object if it is defined, otherwise it will fall back on using defaultCanvasTheme
+ * @example
+ * const ResponsiveContainer = styled('div')(({theme}) => {
+ * const canvas = getCanvasTheme(theme);
+ *  return {
+ *    maxHeight: '100vh',
+ *    display: 'flex',
+ *    position: 'absolute',
+ *    left: 0,
+ *    top: 0,
+ *    justifyContent: 'center',
+ *    alignItems: 'center',
+ *    height: '100vh',
+ *    [canvas.breakpoints.down('s')]: {
+ *      alignItems: 'end',
+ *    },
+ *  };
+ *});
+ */
+export declare function getCanvasTheme(theme?: any): CanvasTheme;
+export declare function useCanvasTheme(themeOverride?: Theme): CanvasTheme;
+//# sourceMappingURL=getCanvasTheme.d.ts.map

package/dist/es6/common/lib/theming/getCanvasTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCanvasTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/getCanvasTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAC,KAAK,EAAW,MAAM,gBAAgB,CAAC;AAI/C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,cAAc,CAAC,KAAK,GAAE,GAAQ,GAAG,WAAW,CAK3D;AAED,wBAAgB,cAAc,CAAC,aAAa,CAAC,EAAE,KAAK,eAInD"}

package/dist/es6/common/lib/theming/getCanvasTheme.js

@@ -0,0 +1,37 @@
+import { useTheme } from '@emotion/react';
+import { getObjectProxy } from './getObjectProxy';
+import { defaultCanvasTheme } from './theme';
+/**
+ * Use this function when you have access to `theme` in styled components.
+ * This function ensures that a theme is defined via a proxy and allows access to properties on the theme object.
+ * @param theme Any partial or full theme object.
+ * @returns a theme object if it is defined, otherwise it will fall back on using defaultCanvasTheme
+ * @example
+ * const ResponsiveContainer = styled('div')(({theme}) => {
+ * const canvas = getCanvasTheme(theme);
+ *  return {
+ *    maxHeight: '100vh',
+ *    display: 'flex',
+ *    position: 'absolute',
+ *    left: 0,
+ *    top: 0,
+ *    justifyContent: 'center',
+ *    alignItems: 'center',
+ *    height: '100vh',
+ *    [canvas.breakpoints.down('s')]: {
+ *      alignItems: 'end',
+ *    },
+ *  };
+ *});
+ */
+export function getCanvasTheme(theme) {
+    if (theme === void 0) { theme = {}; }
+    // prettier-ignore
+    //@ts-ignore
+    var windowTheme = typeof window !== 'undefined' && window.workday && window.workday.canvas && window.workday.canvas.theme;
+    return getObjectProxy(theme.canvas || windowTheme || {}, defaultCanvasTheme);
+}
+export function useCanvasTheme(themeOverride) {
+    var theme = useTheme();
+    return getCanvasTheme(themeOverride || theme);
+}

package/dist/es6/common/lib/theming/getObjectProxy.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The functions gets a new object proxy. This is used for theme to ensure regardless of a partial theme object
+ * there will be a fallback theme object so that properties aren't undefined regardless of the `target` object.
+ * This function will also handle nested properties.
+ * @param target Any custom theme object
+ * @param fallback A fallback theme object
+ */
+export declare function getObjectProxy<T extends {}>(target: unknown, fallback: T): T;
+//# sourceMappingURL=getObjectProxy.d.ts.map

package/dist/es6/common/lib/theming/getObjectProxy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getObjectProxy.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/getObjectProxy.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,wBAAgB,cAAc,CAAC,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,GAAG,CAAC,CAe5E"}

package/dist/es6/common/lib/theming/getObjectProxy.js

@@ -0,0 +1,26 @@
+/**
+ * The functions gets a new object proxy. This is used for theme to ensure regardless of a partial theme object
+ * there will be a fallback theme object so that properties aren't undefined regardless of the `target` object.
+ * This function will also handle nested properties.
+ * @param target Any custom theme object
+ * @param fallback A fallback theme object
+ */
+/* eslint-disable compat/compat  */ // TODO: Revisit eslint rules that are no longer needed now that we don't support IE11
+export function getObjectProxy(target, fallback) {
+    return new Proxy(target, {
+        get: function (target, prop) {
+            if (typeof fallback[prop] === 'object' && typeof target[prop] === 'object') {
+                return getObjectProxy(target[prop] || {}, fallback[prop]);
+            }
+            else if (target[prop] !== undefined) {
+                return target[prop];
+            }
+            else {
+                return fallback[prop];
+            }
+        },
+        ownKeys: function (target) {
+            return Object.keys(fallback);
+        },
+    });
+}

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

@@ -5,4 +5,6 @@ export { default as styled, StyleRewriteFn } from './styled';
 export * from './theme';
 export * from './useTheme';
 export * from './useIsRTL';
+export * from './getCanvasTheme';
+export * from './getObjectProxy';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,OAAO,IAAI,MAAM,EAAE,cAAc,EAAC,MAAM,UAAU,CAAC;AAC3D,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,OAAO,IAAI,MAAM,EAAE,cAAc,EAAC,MAAM,UAAU,CAAC;AAC3D,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}

package/dist/es6/common/lib/theming/index.js

@@ -5,3 +5,5 @@ export { default as styled } from './styled';
 export * from './theme';
 export * from './useTheme';
 export * from './useIsRTL';
+export * from './getCanvasTheme';
+export * from './getObjectProxy';

package/dist/es6/modal/lib/ModalCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalCard.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAItD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;CAAG;AAWjF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAMpB,CAAC"}
+{"version":3,"file":"ModalCard.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAItD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;CAAG;AAcjF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAMpB,CAAC"}

package/dist/es6/modal/lib/ModalCard.js

@@ -10,22 +10,23 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import * as React from 'react';
-import { createSubcomponent, styled, } from '@workday/canvas-kit-react/common';
+import { createSubcomponent, styled, getCanvasTheme, } from '@workday/canvas-kit-react/common';
 import { space } from '@workday/canvas-kit-react/tokens';
 import { Popup } from '@workday/canvas-kit-react/popup';
 import { useModalCard, useModalModel } from './hooks';
 var ResponsiveModalCard = styled(Popup.Card)(function (_a) {
     var _b;
     var theme = _a.theme;
-    return (_b = {
+    var canvasTheme = getCanvasTheme(theme);
+    return _b = {
             margin: space.xl
         },
-        _b[theme.canvas.breakpoints.down('s')] = {
+        _b[canvasTheme.breakpoints.down('s')] = {
             margin: space.s,
             padding: space.xxs,
             borderRadius: space.m,
         },
-        _b);
+        _b;
 });
 export var ModalCard = createSubcomponent('div')({
     displayName: 'Modal.Card',

package/dist/es6/modal/lib/ModalHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeading.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAKtD,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC;CAAG;AAQvF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAMvB,CAAC"}
+{"version":3,"file":"ModalHeading.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAKtD,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC;CAAG;AAWvF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAMvB,CAAC"}

package/dist/es6/modal/lib/ModalHeading.js

@@ -10,18 +10,19 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import * as React from 'react';
-import { createSubcomponent, styled, } from '@workday/canvas-kit-react/common';
+import { createSubcomponent, getCanvasTheme, styled, } from '@workday/canvas-kit-react/common';
 import { Popup } from '@workday/canvas-kit-react/popup';
 import { space } from '@workday/canvas-kit-react/tokens';
 import { useModalHeading, useModalModel } from './hooks';
 var ResponsiveModalHeading = styled(Popup.Heading)(function (_a) {
     var _b;
     var theme = _a.theme;
-    return (_b = {},
-        _b[theme.canvas.breakpoints.down('s')] = {
+    var canvasTheme = getCanvasTheme(theme);
+    return _b = {},
+        _b[canvasTheme.breakpoints.down('s')] = {
             marginBottom: space.zero,
         },
-        _b);
+        _b;
 });
 export var ModalHeading = createSubcomponent('h2')({
     displayName: 'Modal.Heading',

package/dist/es6/modal/lib/ModalOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalOverlay.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAG/D,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;CAAG;AA4CtD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAOvB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;OAQ1B,CAAC"}
+{"version":3,"file":"ModalOverlay.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAG/D,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;CAAG;AA+CtD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAOvB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;OAQ1B,CAAC"}

package/dist/es6/modal/lib/ModalOverlay.js

@@ -15,7 +15,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { createSubcomponent, createElemPropsHook, useWindowSize, useForkRef, } from '@workday/canvas-kit-react/common';
+import { createSubcomponent, createElemPropsHook, useWindowSize, useForkRef, getCanvasTheme, } from '@workday/canvas-kit-react/common';
 import { usePopupModel, usePopupStack } from '@workday/canvas-kit-react/popup';
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -43,7 +43,8 @@ var Container = styled(Box)({
 var ResponsiveContainer = styled('div')(function (_a) {
     var _b;
     var theme = _a.theme;
-    return (_b = {
+    var canvasTheme = getCanvasTheme(theme);
+    return _b = {
             maxHeight: '100vh',
             display: 'flex',
             position: 'absolute',
@@ -53,10 +54,10 @@ var ResponsiveContainer = styled('div')(function (_a) {
             alignItems: 'center',
             height: '100vh'
         },
-        _b[theme.canvas.breakpoints.down('s')] = {
+        _b[canvasTheme.breakpoints.down('s')] = {
             alignItems: 'end',
         },
-        _b);
+        _b;
 });
 export var ModalOverlay = createSubcomponent('div')({
     displayName: 'Modal.Overlay',

package/modal/lib/ModalCard.tsx

@@ -5,6 +5,7 @@ import {
   ExtractProps,
   StyledType,
   styled,
+  getCanvasTheme,
 } from '@workday/canvas-kit-react/common';
 import {space} from '@workday/canvas-kit-react/tokens';
 import {Popup} from '@workday/canvas-kit-react/popup';
@@ -13,14 +14,17 @@ import {useModalCard, useModalModel} from './hooks';
 
 export interface ModalCardProps extends ExtractProps<typeof Popup.Card, never> {}
 
-const ResponsiveModalCard = styled(Popup.Card)<ModalCardProps & StyledType>(({theme}) => ({
-  margin: space.xl,
-  [theme.canvas.breakpoints.down('s')]: {
-    margin: space.s, // 16px all around margin on smaller screen sizes
-    padding: space.xxs, // brings total padding between edge and content to 16px
-    borderRadius: space.m, // 24px border radius on smaller devices.
-  },
-}));
+const ResponsiveModalCard = styled(Popup.Card)<ModalCardProps & StyledType>(({theme}) => {
+  const canvasTheme = getCanvasTheme(theme);
+  return {
+    margin: space.xl,
+    [canvasTheme.breakpoints.down('s')]: {
+      margin: space.s, // 16px all around margin on smaller screen sizes
+      padding: space.xxs, // brings total padding between edge and content to 16px
+      borderRadius: space.m, // 24px border radius on smaller devices.
+    },
+  };
+});
 
 export const ModalCard = createSubcomponent('div')({
   displayName: 'Modal.Card',

package/modal/lib/ModalHeading.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import {
   createSubcomponent,
   ExtractProps,
+  getCanvasTheme,
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
@@ -13,11 +14,14 @@ import {useModalHeading, useModalModel} from './hooks';
 
 export interface ModalHeadingProps extends ExtractProps<typeof Popup.Heading, never> {}
 
-const ResponsiveModalHeading = styled(Popup.Heading)<ModalHeadingProps & StyledType>(({theme}) => ({
-  [theme.canvas.breakpoints.down('s')]: {
-    marginBottom: space.zero,
-  },
-}));
+const ResponsiveModalHeading = styled(Popup.Heading)<ModalHeadingProps & StyledType>(({theme}) => {
+  const canvasTheme = getCanvasTheme(theme);
+  return {
+    [canvasTheme.breakpoints.down('s')]: {
+      marginBottom: space.zero,
+    },
+  };
+});
 
 export const ModalHeading = createSubcomponent('h2')({
   displayName: 'Modal.Heading',

package/modal/lib/ModalOverlay.tsx

@@ -7,6 +7,7 @@ import {
   StyledType,
   useWindowSize,
   useForkRef,
+  getCanvasTheme,
 } from '@workday/canvas-kit-react/common';
 import {usePopupModel, usePopupStack} from '@workday/canvas-kit-react/popup';
 import {keyframes} from '@emotion/react';
@@ -44,19 +45,22 @@ const Container = styled(Box)<StyledType>({
 // positioning, but seems to when using flexbox centering. This messes up Popper calculations inside
 // the Modal. The centering container forces a "center" pixel calculation by making sure the width
 // is always an even number
-const ResponsiveContainer = styled('div')(({theme}) => ({
-  maxHeight: '100vh',
-  display: 'flex',
-  position: 'absolute',
-  left: 0,
-  top: 0,
-  justifyContent: 'center',
-  alignItems: 'center',
-  height: '100vh',
-  [theme.canvas.breakpoints.down('s')]: {
-    alignItems: 'end',
-  },
-}));
+const ResponsiveContainer = styled('div')(({theme}) => {
+  const canvasTheme = getCanvasTheme(theme);
+  return {
+    maxHeight: '100vh',
+    display: 'flex',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100vh',
+    [canvasTheme.breakpoints.down('s')]: {
+      alignItems: 'end',
+    },
+  };
+});
 
 export const ModalOverlay = createSubcomponent('div')({
   displayName: 'Modal.Overlay',

package/package.json

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