@workday/canvas-kit-react 9.0.0-alpha.344-next.3 → 9.0.0-alpha.350-next.4

package/common/lib/styles/focusRing.ts

@@ -1,7 +1,6 @@
 import {keyframes, Theme, CSSObject} from '@emotion/react';
 import {canvas} from '@workday/canvas-kit-react/tokens';
 import {defaultCanvasTheme} from '../theming/index';
-import memoize from 'lodash/memoize';
 
 interface FocusRingOptions {
   width?: number;
@@ -16,7 +15,6 @@ interface FocusRingOptions {
   inset?: 'inner' | 'outer';
   innerColor?: string;
   outerColor?: string;
-  memoize?: boolean;
 }
 
 function calculateFocusRing({
@@ -62,8 +60,6 @@ function calculateFocusRing({
   return {boxShadow};
 }
 
-export const memoizedFocusRing = memoize(calculateFocusRing, (...args) => JSON.stringify(args));
-
 /**
  * A utility to create a canvas style focus ring around your widget.
  * By default, this mixin will create a 2px focus ring tightly wrapped
@@ -96,7 +92,6 @@ export function focusRing(options: FocusRingOptions = {}, theme?: Theme): CSSObj
     outerColor = theme && theme.canvas
       ? theme.canvas.palette.common.focusOutline
       : defaultCanvasTheme.palette.common.focusOutline,
-    memoize = true,
     inset,
   } = options;
 
@@ -109,9 +104,5 @@ export function focusRing(options: FocusRingOptions = {}, theme?: Theme): CSSObj
     inset,
   };
 
-  if (memoize) {
-    return memoizedFocusRing(args);
-  }
-
   return calculateFocusRing(args);
 }

package/common/lib/theming/createCanvasTheme.ts

@@ -1,7 +1,4 @@
 import chroma from 'chroma-js';
-import merge from 'lodash/merge';
-import memoize from 'lodash/memoize';
-import findKey from 'lodash/findKey';
 import colors from '@workday/canvas-colors-web';
 import {defaultCanvasTheme} from './theme';
 import {
@@ -14,40 +11,43 @@ import {
 import {CanvasColor} from '@workday/canvas-kit-react/tokens';
 import {pickForegroundColor} from '../utils';
 
-export enum ColorDirection {
-  Darken,
-  Brighten,
-}
-
-export function shiftColor(hexColor: string, direction: ColorDirection) {
-  const canvasColor = findKey(colors, color => color === hexColor);
+// Should these be exported?
+import { deepMerge } from '../utils/deepMerge';
+import { memoize } from '../utils/memoize';
 
-  const darken = direction === ColorDirection.Darken;
+export const shiftColor = memoize(
+  (hexColor: string, amount = 100) => {
+    const canvasColor = Object.keys(colors).find(color => colors[color] === hexColor);
 
-  if (canvasColor) {
-    const colorRegex = /([a-zAz]*)(\d{3})/g;
-    const match = colorRegex.exec(canvasColor);
+    if (canvasColor) {
+      const colorRegex = /([a-zAz]*)(\d{3})/g;
+      const match = colorRegex.exec(canvasColor);
 
-    if (match) {
-      const baseColor = match[1];
-      const shadeNumber = parseInt(match[2], 10);
+      if (match) {
+        const baseColor = match[1];
+        const shadeNumber = parseInt(match[2], 10);
 
-      const newShade = darken ? shadeNumber + 100 : shadeNumber - 100;
+        const newShade = shadeNumber + amount;
 
-      if (newShade >= 100 && newShade <= 600) {
-        return colors[(baseColor + newShade) as CanvasColor];
+        if (newShade >= 100 && newShade <= 600) {
+          return colors[(baseColor + newShade) as CanvasColor];
+        }
       }
     }
-  }
 
-  try {
-    const newColor = darken ? chroma(hexColor).darken() : chroma(hexColor).brighten();
-    return newColor.hex();
-  } catch (e) {
-    console.warn(`Invalid color '${hexColor}' used in theme`);
-    return hexColor;
-  }
-}
+    try {
+      const newColor =
+        amount > 0
+          ? chroma(hexColor).darken(amount / 100)
+          : chroma(hexColor).brighten(-amount / 100);
+      return newColor.hex();
+    } catch (e) {
+      console.warn(`Invalid color '${hexColor}' used in theme`);
+      return hexColor;
+    }
+  },
+  (color, value) => `${color}.${value}`
+);
 
 function fillPalette(
   defaultPalette: CanvasThemePalette,
@@ -59,21 +59,13 @@ function fillPalette(
 
   const main = palette.main || defaultPalette.main;
   const dark =
-    palette.dark ||
-    (palette.main && shiftColor(palette.main, ColorDirection.Darken)) ||
-    defaultPalette.dark;
+    palette.dark || (palette.main && shiftColor(palette.main, 100)) || defaultPalette.dark;
   const darkest =
-    palette.darkest ||
-    (palette.main && shiftColor(dark, ColorDirection.Darken)) ||
-    defaultPalette.darkest;
+    palette.darkest || (palette.main && shiftColor(palette.main, 200)) || defaultPalette.darkest;
   const light =
-    palette.light ||
-    (palette.main && shiftColor(palette.main, ColorDirection.Brighten)) ||
-    defaultPalette.light;
+    palette.light || (palette.main && shiftColor(palette.main, -100)) || defaultPalette.light;
   const lightest =
-    palette.lightest ||
-    (palette.main && shiftColor(light, ColorDirection.Brighten)) ||
-    defaultPalette.lightest;
+    palette.lightest || (palette.main && shiftColor(palette.main, -200)) || defaultPalette.lightest;
   const contrast = palette.contrast || pickForegroundColor(main) || defaultPalette.contrast;
 
   return {
@@ -103,7 +95,12 @@ function calculateCanvasTheme(partialTheme: PartialCanvasTheme): CanvasTheme {
     direction: direction === ContentDirection.RTL ? direction : ContentDirection.LTR,
   };
 
-  return merge({}, defaultCanvasTheme, mergeable, extraFields) as CanvasTheme;
+  return deepMerge(deepMerge({}, defaultCanvasTheme), {...mergeable, ...extraFields});
 }
 
+/**
+ * Creates a full {@link CanvasTheme} from any partial theme by deeply merging with the
+ * `defaultCanvasTheme` object. The function is memoized, but it is best to run this function
+ * only once and save the result.
+ */
 export const createCanvasTheme = memoize(calculateCanvasTheme, (...args) => JSON.stringify(args));

package/common/lib/theming/getObjectProxy.ts

@@ -1,25 +1,37 @@
+/**
+ * For custom themes that do not overwrite every default.
+ */
+export type RecursivePartial<T> = {
+  [P in keyof T]?: RecursivePartial<T[P]>;
+};
+
 /**
  * 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
+ * @param target A partial object with up to the same shape as the `fallback` object
+ * @param fallback A fallback object. If a property to be accessed from the proxy is not available on the target object, the fallback object will be used
  */
-/* eslint-disable compat/compat  */
-export function getObjectProxy<T extends {}>(target: unknown, fallback: T): T {
-  return new Proxy(target as any, {
-    get(target, p: string) {
-      const prop = p as keyof T; // keep Typescript happy - the `get` signature cannot contain `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;
+export function getObjectProxy<T extends {}>(
+  target: RecursivePartial<T> | undefined,
+  fallback: T
+): T {
+  if (target) {
+    return new Proxy(target, {
+      get<T>(target: T, prop: string | symbol, receiver: any) {
+        if (typeof (fallback as any)[prop] === 'object') {
+          return getObjectProxy(target[prop as keyof T], (fallback as any)[prop]);
+        }
+        const targetProp = target[prop as keyof T];
+        if (targetProp !== undefined) {
+          return targetProp;
+        }
+        return Reflect.get(fallback, prop, receiver);
+      },
+      ownKeys() {
+        return Reflect.ownKeys(fallback);
+      },
+    }) as T;
+  }
+  return fallback;
 }

package/common/lib/theming/useTheme.ts

@@ -1,4 +1,3 @@
-import get from 'lodash/get';
 import {useTheme as useEmotionTheme} from '@emotion/react';
 import {
   defaultCanvasTheme,
@@ -45,7 +44,7 @@ export function useTheme(theme?: PartialEmotionCanvasTheme): EmotionCanvasTheme
     // Context not supported or invalid (probably called from within a class component)
   }
 
-  const windowTheme = typeof window !== 'undefined' && get(window, 'window.workday.canvas.theme');
+  const windowTheme = typeof window !== 'undefined' && (window as any)?.workday?.canvas?.theme;
   if (windowTheme) {
     return getFilledTheme({canvas: windowTheme});
   }

package/common/lib/utils/deepMerge.ts

@@ -0,0 +1,21 @@
+const isObject = (obj: any): boolean => obj && typeof obj === 'object';
+export function deepMerge<T, S>(target: T, source: S): T & S {
+  if (!isObject(target) || !isObject(source)) {
+    return source as T & S;
+  }
+
+  Object.keys(source).forEach(key => {
+    const targetValue = target[key as keyof T];
+    const sourceValue = source[key as keyof S];
+
+    if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
+      (target as any)[key] = targetValue.concat(sourceValue);
+    } else if (isObject(targetValue) && isObject(sourceValue)) {
+      (target as any)[key] = deepMerge(Object.assign({}, targetValue), sourceValue);
+    } else {
+      (target as any)[key] = sourceValue;
+    }
+  });
+
+  return target as T & S;
+}

package/common/lib/utils/memoize.ts

@@ -0,0 +1,23 @@
+/**
+ * Simple memoize function. It takes a function and a resolver function to generate a
+ * cache key
+ */
+export function memoize<T extends (...args: any) => any>(
+  func: T,
+  resolver: (...args: Parameters<T>) => string
+): T {
+  const cache = new Map<string, ReturnType<T>>();
+
+  return function(...args: Parameters<T>): ReturnType<T> {
+    const key = resolver(...args);
+
+    if (cache.has(key)) {
+      return cache.get(key)!;
+    }
+
+    const result = func(...args);
+    cache.set(key, result);
+
+    return result;
+  } as T;
+}

package/dist/commonjs/common/lib/styles/focusRing.d.ts

@@ -12,10 +12,7 @@ interface FocusRingOptions {
     inset?: 'inner' | 'outer';
     innerColor?: string;
     outerColor?: string;
-    memoize?: boolean;
 }
-declare function calculateFocusRing({ width, separation, animate, inset, innerColor, outerColor, }: Required<Omit<FocusRingOptions, 'memoize' | 'inset'>> & Pick<FocusRingOptions, 'inset'>): CSSObject;
-export declare const memoizedFocusRing: typeof calculateFocusRing & import("lodash").MemoizedFunction;
 /**
  * A utility to create a canvas style focus ring around your widget.
  * By default, this mixin will create a 2px focus ring tightly wrapped

package/dist/commonjs/common/lib/styles/focusRing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAK3D,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,UAAU,EACV,OAAO,EACP,KAAK,EACL,UAAU,EACV,UAAU,GACX,EAAE,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,OAAO,CAAC,CAAC,GACtD,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG,SAAS,CAiC5C;AAED,eAAO,MAAM,iBAAiB,+DAAiE,CAAC;AAEhG;;;;;;;;;;;;;;GAcG;AAEH;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CA2BlF"}
+{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI3D,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA6CD;;;;;;;;;;;;;;GAcG;AAEH;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAsBlF"}

package/dist/commonjs/common/lib/styles/focusRing.js

@@ -1,13 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.focusRing = exports.memoizedFocusRing = void 0;
+exports.focusRing = void 0;
 var react_1 = require("@emotion/react");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var index_1 = require("../theming/index");
-var memoize_1 = __importDefault(require("lodash/memoize"));
 function calculateFocusRing(_a) {
     var width = _a.width, separation = _a.separation, animate = _a.animate, inset = _a.inset, innerColor = _a.innerColor, outerColor = _a.outerColor;
     var boxShadow, innerWidth, outerWidth;
@@ -37,13 +33,6 @@ function calculateFocusRing(_a) {
     }
     return { boxShadow: boxShadow };
 }
-exports.memoizedFocusRing = memoize_1.default(calculateFocusRing, function () {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-    }
-    return JSON.stringify(args);
-});
 /**
  * A utility to create a canvas style focus ring around your widget.
  * By default, this mixin will create a 2px focus ring tightly wrapped
@@ -70,7 +59,7 @@ function focusRing(options, theme) {
     if (options === void 0) { options = {}; }
     var _a = options.width, width = _a === void 0 ? 2 : _a, _b = options.separation, separation = _b === void 0 ? 0 : _b, _c = options.animate, animate = _c === void 0 ? true : _c, _d = options.innerColor, innerColor = _d === void 0 ? tokens_1.canvas.colors.frenchVanilla100 : _d, _e = options.outerColor, outerColor = _e === void 0 ? theme && theme.canvas
         ? theme.canvas.palette.common.focusOutline
-        : index_1.defaultCanvasTheme.palette.common.focusOutline : _e, _f = options.memoize, memoize = _f === void 0 ? true : _f, inset = options.inset;
+        : index_1.defaultCanvasTheme.palette.common.focusOutline : _e, inset = options.inset;
     var args = {
         width: width,
         separation: separation,
@@ -79,9 +68,6 @@ function focusRing(options, theme) {
         animate: animate,
         inset: inset,
     };
-    if (memoize) {
-        return exports.memoizedFocusRing(args);
-    }
     return calculateFocusRing(args);
 }
 exports.focusRing = focusRing;

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

@@ -1,10 +1,11 @@
 import { CanvasTheme, PartialCanvasTheme } from './types';
-export declare enum ColorDirection {
-    Darken = 0,
-    Brighten = 1
-}
-export declare function shiftColor(hexColor: string, direction: ColorDirection): string;
+export declare const shiftColor: (hexColor: string, amount?: any) => string;
 declare function calculateCanvasTheme(partialTheme: PartialCanvasTheme): CanvasTheme;
-export declare const createCanvasTheme: typeof calculateCanvasTheme & import("lodash").MemoizedFunction;
+/**
+ * Creates a full {@link CanvasTheme} from any partial theme by deeply merging with the
+ * `defaultCanvasTheme` object. The function is memoized, but it is best to run this function
+ * only once and save the result.
+ */
+export declare const createCanvasTheme: typeof calculateCanvasTheme;
 export {};
 //# sourceMappingURL=createCanvasTheme.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"createCanvasTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/createCanvasTheme.ts"],"names":[],"mappings":"AAMA,OAAO,EACL,WAAW,EACX,kBAAkB,EAInB,MAAM,SAAS,CAAC;AAIjB,oBAAY,cAAc;IACxB,MAAM,IAAA;IACN,QAAQ,IAAA;CACT;AAED,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,UA4BrE;AAuCD,iBAAS,oBAAoB,CAAC,YAAY,EAAE,kBAAkB,GAAG,WAAW,CAkB3E;AAED,eAAO,MAAM,iBAAiB,iEAAmE,CAAC"}
+{"version":3,"file":"createCanvasTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/createCanvasTheme.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,EACX,kBAAkB,EAInB,MAAM,SAAS,CAAC;AAQjB,eAAO,MAAM,UAAU,aACV,MAAM,yBA+BlB,CAAC;AA+BF,iBAAS,oBAAoB,CAAC,YAAY,EAAE,kBAAkB,GAAG,WAAW,CAkB3E;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,6BAAmE,CAAC"}

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

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -14,62 +25,50 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createCanvasTheme = exports.shiftColor = exports.ColorDirection = void 0;
+exports.createCanvasTheme = exports.shiftColor = void 0;
 var chroma_js_1 = __importDefault(require("chroma-js"));
-var merge_1 = __importDefault(require("lodash/merge"));
-var memoize_1 = __importDefault(require("lodash/memoize"));
-var findKey_1 = __importDefault(require("lodash/findKey"));
 var canvas_colors_web_1 = __importDefault(require("@workday/canvas-colors-web"));
 var theme_1 = require("./theme");
 var types_1 = require("./types");
 var utils_1 = require("../utils");
-var ColorDirection;
-(function (ColorDirection) {
-    ColorDirection[ColorDirection["Darken"] = 0] = "Darken";
-    ColorDirection[ColorDirection["Brighten"] = 1] = "Brighten";
-})(ColorDirection = exports.ColorDirection || (exports.ColorDirection = {}));
-function shiftColor(hexColor, direction) {
-    var canvasColor = findKey_1.default(canvas_colors_web_1.default, function (color) { return color === hexColor; });
-    var darken = direction === ColorDirection.Darken;
+// Should these be exported?
+var deepMerge_1 = require("../utils/deepMerge");
+var memoize_1 = require("../utils/memoize");
+exports.shiftColor = memoize_1.memoize(function (hexColor, amount) {
+    if (amount === void 0) { amount = 100; }
+    var canvasColor = Object.keys(canvas_colors_web_1.default).find(function (color) { return canvas_colors_web_1.default[color] === hexColor; });
     if (canvasColor) {
         var colorRegex = /([a-zAz]*)(\d{3})/g;
         var match = colorRegex.exec(canvasColor);
         if (match) {
             var baseColor = match[1];
             var shadeNumber = parseInt(match[2], 10);
-            var newShade = darken ? shadeNumber + 100 : shadeNumber - 100;
+            var newShade = shadeNumber + amount;
             if (newShade >= 100 && newShade <= 600) {
                 return canvas_colors_web_1.default[(baseColor + newShade)];
             }
         }
     }
     try {
-        var newColor = darken ? chroma_js_1.default(hexColor).darken() : chroma_js_1.default(hexColor).brighten();
+        var newColor = amount > 0
+            ? chroma_js_1.default(hexColor).darken(amount / 100)
+            : chroma_js_1.default(hexColor).brighten(-amount / 100);
         return newColor.hex();
     }
     catch (e) {
         console.warn("Invalid color '" + hexColor + "' used in theme");
         return hexColor;
     }
-}
-exports.shiftColor = shiftColor;
+}, function (color, value) { return color + "." + value; });
 function fillPalette(defaultPalette, palette) {
     if (!palette) {
         return {};
     }
     var main = palette.main || defaultPalette.main;
-    var dark = palette.dark ||
-        (palette.main && shiftColor(palette.main, ColorDirection.Darken)) ||
-        defaultPalette.dark;
-    var darkest = palette.darkest ||
-        (palette.main && shiftColor(dark, ColorDirection.Darken)) ||
-        defaultPalette.darkest;
-    var light = palette.light ||
-        (palette.main && shiftColor(palette.main, ColorDirection.Brighten)) ||
-        defaultPalette.light;
-    var lightest = palette.lightest ||
-        (palette.main && shiftColor(light, ColorDirection.Brighten)) ||
-        defaultPalette.lightest;
+    var dark = palette.dark || (palette.main && exports.shiftColor(palette.main, 100)) || defaultPalette.dark;
+    var darkest = palette.darkest || (palette.main && exports.shiftColor(palette.main, 200)) || defaultPalette.darkest;
+    var light = palette.light || (palette.main && exports.shiftColor(palette.main, -100)) || defaultPalette.light;
+    var lightest = palette.lightest || (palette.main && exports.shiftColor(palette.main, -200)) || defaultPalette.lightest;
     var contrast = palette.contrast || utils_1.pickForegroundColor(main) || defaultPalette.contrast;
     return {
         lightest: lightest,
@@ -95,9 +94,14 @@ function calculateCanvasTheme(partialTheme) {
         breakpoints: breakpoints,
         direction: direction === types_1.ContentDirection.RTL ? direction : types_1.ContentDirection.LTR,
     };
-    return merge_1.default({}, theme_1.defaultCanvasTheme, mergeable, extraFields);
+    return deepMerge_1.deepMerge(deepMerge_1.deepMerge({}, theme_1.defaultCanvasTheme), __assign(__assign({}, mergeable), extraFields));
 }
-exports.createCanvasTheme = memoize_1.default(calculateCanvasTheme, function () {
+/**
+ * Creates a full {@link CanvasTheme} from any partial theme by deeply merging with the
+ * `defaultCanvasTheme` object. The function is memoized, but it is best to run this function
+ * only once and save the result.
+ */
+exports.createCanvasTheme = memoize_1.memoize(calculateCanvasTheme, function () {
     var args = [];
     for (var _i = 0; _i < arguments.length; _i++) {
         args[_i] = arguments[_i];

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

@@ -1,9 +1,15 @@
+/**
+ * For custom themes that do not overwrite every default.
+ */
+export declare type RecursivePartial<T> = {
+    [P in keyof T]?: RecursivePartial<T[P]>;
+};
 /**
  * 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
+ * @param target A partial object with up to the same shape as the `fallback` object
+ * @param fallback A fallback object. If a property to be accessed from the proxy is not available on the target object, the fallback object will be used
  */
-export declare function getObjectProxy<T extends {}>(target: unknown, fallback: T): T;
+export declare function getObjectProxy<T extends {}>(target: RecursivePartial<T> | undefined, fallback: T): T;
 //# sourceMappingURL=getObjectProxy.d.ts.map

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

@@ -1 +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,CAgB5E"}
+{"version":3,"file":"getObjectProxy.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/getObjectProxy.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,oBAAY,gBAAgB,CAAC,CAAC,IAAI;KAC/B,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACxC,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,EAAE,EACzC,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,EACvC,QAAQ,EAAE,CAAC,GACV,CAAC,CAmBH"}

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

@@ -5,27 +5,27 @@ 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
+ * @param target A partial object with up to the same shape as the `fallback` object
+ * @param fallback A fallback object. If a property to be accessed from the proxy is not available on the target object, the fallback object will be used
  */
-/* eslint-disable compat/compat  */
 function getObjectProxy(target, fallback) {
-    return new Proxy(target, {
-        get: function (target, p) {
-            var prop = p; // keep Typescript happy - the `get` signature cannot contain `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: function (target) {
-            return Object.keys(fallback);
-        },
-    });
+    if (target) {
+        return new Proxy(target, {
+            get: function (target, prop, receiver) {
+                if (typeof fallback[prop] === 'object') {
+                    return getObjectProxy(target[prop], fallback[prop]);
+                }
+                var targetProp = target[prop];
+                if (targetProp !== undefined) {
+                    return targetProp;
+                }
+                return Reflect.get(fallback, prop, receiver);
+            },
+            ownKeys: function () {
+                return Reflect.ownKeys(fallback);
+            },
+        });
+    }
+    return fallback;
 }
 exports.getObjectProxy = getObjectProxy;

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

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useTheme.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,kBAAkB,EAClB,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AAOjB;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,yBAAyB,GAAG,kBAAkB,CAqB9E"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,kBAAkB,EAClB,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AAOjB;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,yBAAyB,GAAG,kBAAkB,CAqB9E"}

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

@@ -10,12 +10,8 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTheme = void 0;
-var get_1 = __importDefault(require("lodash/get"));
 var react_1 = require("@emotion/react");
 var index_1 = require("./index");
 var getFilledTheme = function (theme) { return (__assign(__assign({}, theme), { canvas: index_1.createCanvasTheme(theme.canvas) })); };
@@ -38,6 +34,7 @@ var getFilledTheme = function (theme) { return (__assign(__assign({}, theme), {
  * Tracked on https://github.com/emotion-js/emotion/issues/1193.
  */
 function useTheme(theme) {
+    var _a, _b, _c;
     if (theme && theme.canvas) {
         return getFilledTheme(theme);
     }
@@ -51,7 +48,7 @@ function useTheme(theme) {
     catch (e) {
         // Context not supported or invalid (probably called from within a class component)
     }
-    var windowTheme = typeof window !== 'undefined' && get_1.default(window, 'window.workday.canvas.theme');
+    var windowTheme = typeof window !== 'undefined' && ((_c = (_b = (_a = window) === null || _a === void 0 ? void 0 : _a.workday) === null || _b === void 0 ? void 0 : _b.canvas) === null || _c === void 0 ? void 0 : _c.theme);
     if (windowTheme) {
         return getFilledTheme({ canvas: windowTheme });
     }

package/dist/commonjs/common/lib/utils/deepMerge.d.ts

@@ -0,0 +1,2 @@
+export declare function deepMerge<T, S>(target: T, source: S): T & S;
+//# sourceMappingURL=deepMerge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"deepMerge.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/deepMerge.ts"],"names":[],"mappings":"AACA,wBAAgB,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAmB3D"}

package/dist/commonjs/common/lib/utils/deepMerge.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deepMerge = void 0;
+var isObject = function (obj) { return obj && typeof obj === 'object'; };
+function deepMerge(target, source) {
+    if (!isObject(target) || !isObject(source)) {
+        return source;
+    }
+    Object.keys(source).forEach(function (key) {
+        var targetValue = target[key];
+        var sourceValue = source[key];
+        if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
+            target[key] = targetValue.concat(sourceValue);
+        }
+        else if (isObject(targetValue) && isObject(sourceValue)) {
+            target[key] = deepMerge(Object.assign({}, targetValue), sourceValue);
+        }
+        else {
+            target[key] = sourceValue;
+        }
+    });
+    return target;
+}
+exports.deepMerge = deepMerge;

package/dist/commonjs/common/lib/utils/memoize.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Simple memoize function. It takes a function and a resolver function to generate a
+ * cache key
+ */
+export declare function memoize<T extends (...args: any) => any>(func: T, resolver: (...args: Parameters<T>) => string): T;
+//# sourceMappingURL=memoize.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"memoize.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/memoize.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,KAAK,GAAG,EACrD,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,MAAM,GAC3C,CAAC,CAeH"}