@workday/canvas-kit-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.384-next.3

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

@@ -6,7 +6,7 @@ export var BreakpointKey;
     BreakpointKey["l"] = "l";
     BreakpointKey["xl"] = "xl";
 })(BreakpointKey || (BreakpointKey = {}));
-export var breakpointKeys = ['zero', 's', 'm', 'l', 'xl'];
+export const breakpointKeys = ['zero', 's', 'm', 'l', 'xl'];
 /**
  * ### Theme Breakpoint Values
  *
@@ -30,14 +30,14 @@ export var breakpointKeys = ['zero', 's', 'm', 'l', 'xl'];
  * Note: Some applications may only require a subset of screen sizes and not use all breakpoints.
  *
  */
-export var breakpoints = {
+export const breakpoints = {
     zero: 0,
     s: 320,
     m: 768,
     l: 1024,
     xl: 1440,
 };
-var step = 0.5;
+const step = 0.5;
 /**
  * ### Up
  *
@@ -62,8 +62,8 @@ var step = 0.5;
  * ```
  */
 export function up(key) {
-    var value = typeof breakpoints[key] === 'number' ? breakpoints[key] : key;
-    return "@media (min-width: " + value + "px)";
+    const value = typeof breakpoints[key] === 'number' ? breakpoints[key] : key;
+    return `@media (min-width: ${value}px)`;
 }
 /**
  * ### Down
@@ -111,14 +111,14 @@ export function up(key) {
  * ```
  */
 export function down(endKey) {
-    var endIndex = breakpointKeys.indexOf(endKey) + 1;
-    var upperbound = breakpoints[breakpointKeys[endIndex]];
+    const endIndex = breakpointKeys.indexOf(endKey) + 1;
+    const upperbound = breakpoints[breakpointKeys[endIndex]];
     if (endIndex === breakpointKeys.length) {
         // xl down applies to all sizes
         return up(BreakpointKey.zero);
     }
-    var value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : 0;
-    return "@media (max-width: " + (value - step) + "px)";
+    const value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : 0;
+    return `@media (max-width: ${value - step}px)`;
 }
 /**
  * ### Between
@@ -167,12 +167,12 @@ export function down(endKey) {
  * ```
  */
 export function between(start, end) {
-    var endIndex = breakpointKeys.indexOf(end) + 1;
+    const endIndex = breakpointKeys.indexOf(end) + 1;
     if (endIndex === breakpointKeys.length) {
         return up(start);
     }
-    return ("@media (min-width: " + breakpoints[start] + "px) and " +
-        ("(max-width: " + (breakpoints[breakpointKeys[endIndex]] - step) + "px)"));
+    return (`@media (min-width: ${breakpoints[start]}px) and ` +
+        `(max-width: ${breakpoints[breakpointKeys[endIndex]] - step}px)`);
 }
 /**
  * ### Only

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

@@ -1,25 +1,3 @@
-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)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import chroma from 'chroma-js';
 import colors from '@workday/canvas-colors-web';
 import { defaultCanvasTheme } from './theme';
@@ -28,77 +6,70 @@ import { pickForegroundColor } from '../utils';
 // Should these be exported?
 import { deepMerge } from '../utils/deepMerge';
 import { memoize } from '../utils/memoize';
-export var shiftColor = memoize(function (hexColor, amount) {
-    if (amount === void 0) { amount = 100; }
-    var canvasColor = Object.keys(colors).find(function (color) { return colors[color] === hexColor; });
+export const shiftColor = memoize((hexColor, amount = 100) => {
+    const canvasColor = Object.keys(colors).find(color => colors[color] === hexColor);
     if (canvasColor) {
-        var colorRegex = /([a-zAz]*)(\d{3})/g;
-        var match = colorRegex.exec(canvasColor);
+        const colorRegex = /([a-zAz]*)(\d{3})/g;
+        const match = colorRegex.exec(canvasColor);
         if (match) {
-            var baseColor = match[1];
-            var shadeNumber = parseInt(match[2], 10);
-            var newShade = shadeNumber + amount;
+            const baseColor = match[1];
+            const shadeNumber = parseInt(match[2], 10);
+            const newShade = shadeNumber + amount;
             if (newShade >= 100 && newShade <= 600) {
                 return colors[(baseColor + newShade)];
             }
         }
     }
     try {
-        var newColor = amount > 0
+        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");
+        console.warn(`Invalid color '${hexColor}' used in theme`);
         return hexColor;
     }
-}, function (color, value) { return color + "." + value; });
+}, (color, value) => `${color}.${value}`);
 function fillPalette(defaultPalette, palette) {
     if (!palette) {
         return {};
     }
-    var main = palette.main || defaultPalette.main;
-    var dark = palette.dark || (palette.main && shiftColor(palette.main, 100)) || defaultPalette.dark;
-    var darkest = palette.darkest || (palette.main && shiftColor(palette.main, 200)) || defaultPalette.darkest;
-    var light = palette.light || (palette.main && shiftColor(palette.main, -100)) || defaultPalette.light;
-    var lightest = palette.lightest || (palette.main && shiftColor(palette.main, -200)) || defaultPalette.lightest;
-    var contrast = palette.contrast || pickForegroundColor(main) || defaultPalette.contrast;
+    const main = palette.main || defaultPalette.main;
+    const dark = palette.dark || (palette.main && shiftColor(palette.main, 100)) || defaultPalette.dark;
+    const darkest = palette.darkest || (palette.main && shiftColor(palette.main, 200)) || defaultPalette.darkest;
+    const light = palette.light || (palette.main && shiftColor(palette.main, -100)) || defaultPalette.light;
+    const lightest = palette.lightest || (palette.main && shiftColor(palette.main, -200)) || defaultPalette.lightest;
+    const contrast = palette.contrast || pickForegroundColor(main) || defaultPalette.contrast;
     return {
-        lightest: lightest,
-        light: light,
-        main: main,
-        dark: dark,
-        darkest: darkest,
-        contrast: contrast,
+        lightest,
+        light,
+        main,
+        dark,
+        darkest,
+        contrast,
     };
 }
 function calculateCanvasTheme(partialTheme) {
-    var _a = partialTheme.palette, palette = _a === void 0 ? {} : _a, _b = partialTheme.breakpoints, breakpoints = _b === void 0 ? {} : _b, direction = partialTheme.direction, extraFields = __rest(partialTheme, ["palette", "breakpoints", "direction"]);
-    var _c = palette, primary = _c.primary, alert = _c.alert, error = _c.error, success = _c.success, neutral = _c.neutral, _d = _c.common, common = _d === void 0 ? {} : _d;
-    var mergeable = {
+    const { palette = {}, breakpoints = {}, direction, ...extraFields } = partialTheme;
+    const { primary, alert, error, success, neutral, common = {} } = palette;
+    const mergeable = {
         palette: {
-            common: common,
+            common,
             primary: fillPalette(defaultCanvasTheme.palette.primary, primary),
             alert: fillPalette(defaultCanvasTheme.palette.alert, alert),
             error: fillPalette(defaultCanvasTheme.palette.error, error),
             success: fillPalette(defaultCanvasTheme.palette.success, success),
             neutral: fillPalette(defaultCanvasTheme.palette.neutral, neutral),
         },
-        breakpoints: breakpoints,
+        breakpoints,
         direction: direction === ContentDirection.RTL ? direction : ContentDirection.LTR,
     };
-    return deepMerge(deepMerge({}, defaultCanvasTheme), __assign(__assign({}, mergeable), extraFields));
+    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 var createCanvasTheme = memoize(calculateCanvasTheme, function () {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-    }
-    return JSON.stringify(args);
-});
+export const createCanvasTheme = memoize(calculateCanvasTheme, (...args) => JSON.stringify(args));

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

@@ -8,17 +8,17 @@
 export function getObjectProxy(target, fallback) {
     if (target) {
         return new Proxy(target, {
-            get: function (target, prop, receiver) {
+            get(target, prop, receiver) {
                 if (typeof fallback[prop] === 'object') {
                     return getObjectProxy(target[prop], fallback[prop]);
                 }
-                var targetProp = target[prop];
+                const targetProp = target[prop];
                 if (targetProp !== undefined) {
                     return targetProp;
                 }
                 return Reflect.get(fallback, prop, receiver);
             },
-            ownKeys: function () {
+            ownKeys() {
                 return Reflect.ownKeys(fallback);
             },
         });

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

@@ -4,7 +4,7 @@ export * from './types';
 export { default as styled, StyleRewriteFn } from './styled';
 export * from './theme';
 export * from './useTheme';
+export * from './useThemedRing';
 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;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,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,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

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

@@ -4,6 +4,6 @@ export * from './types';
 export { default as styled } from './styled';
 export * from './theme';
 export * from './useTheme';
+export * from './useThemedRing';
 export * from './useIsRTL';
-export * from './getCanvasTheme';
 export * from './getObjectProxy';

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

@@ -1,18 +1,14 @@
 import { default as emotionStyled } from '@emotion/styled';
 import { useTheme, ContentDirection } from './index';
 import rtlCSSJS from 'rtl-css-js';
-var noop = function (styles) { return styles; };
+const noop = (styles) => styles;
 function styled(node) {
-    return function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        var newArgs = args.map(function (interpolation) { return function (props) {
+    return (...args) => {
+        const newArgs = args.map(interpolation => (props) => {
             props.theme = useTheme(props.theme);
-            var direction = props.theme.canvas.direction;
-            var maybeFlip = direction === ContentDirection.RTL ? rtlCSSJS : noop;
-            var maybeConvert = props.theme._styleRewriteFn || noop;
+            const direction = props.theme.canvas.direction;
+            const maybeFlip = direction === ContentDirection.RTL ? rtlCSSJS : noop;
+            const maybeConvert = props.theme._styleRewriteFn || noop;
             try {
                 if (typeof interpolation === 'function') {
                     return maybeFlip(maybeConvert(interpolation(props)));
@@ -22,7 +18,7 @@ function styled(node) {
             catch (e) {
                 return maybeConvert(interpolation);
             }
-        }; });
+        });
         return emotionStyled(node)(newArgs);
     };
 }

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

@@ -1,7 +1,7 @@
 import colors from '@workday/canvas-colors-web';
 import { ContentDirection } from './types';
 import { breakpoints, up, down, between, only } from './breakpoints';
-export var defaultCanvasTheme = {
+export const defaultCanvasTheme = {
     palette: {
         primary: {
             lightest: colors.blueberry100,
@@ -49,10 +49,10 @@ export var defaultCanvasTheme = {
     },
     breakpoints: {
         values: breakpoints,
-        up: up,
-        down: down,
-        between: between,
-        only: only,
+        up,
+        down,
+        between,
+        only,
     },
     direction: ContentDirection.LTR,
 };

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

@@ -10,7 +10,7 @@ function useDefaultTheme(theme, config, fn) {
  * @example
  * const isRTL = useIsRTL();
  */
-export var useIsRTL = function (partialTheme) {
-    var theme = useDefaultTheme(partialTheme, ThemeContext, React.useContext);
+export const useIsRTL = (partialTheme) => {
+    const theme = useDefaultTheme(partialTheme, ThemeContext, React.useContext);
     return (theme && theme.canvas && theme.canvas.direction) === ContentDirection.RTL;
 };

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

@@ -1,11 +1,47 @@
 import { EmotionCanvasTheme, PartialEmotionCanvasTheme } from './index';
 /**
- * Hook function to get the correct theme object.
- * @param {Object=} theme - The theme object returned from the emotion ThemeContext
- * (through ThemeProvider). The Canvas Kit theme is namespaced within this variable under the `canvas` key.
+ * Function to get the correct theme object for `styled` and class components
+ * or to be used outside component.
+ * @param {Object=} theme - The theme object with the Canvas Kit theme.
+ * It should be namespaced within this variable under the `canvas` key.
+ * Value of `canvas` property is any partial or full theme object to overwtite default theme.
  *
- * NOTE: If you are using a class component, you MUST pass the theme.
- * If not passed, the function will try to pull the theme from ThemeContext.
+ * @returns An object containing updated or default Canvas Kit theme under `canvas` key.
+ *
+ * The passed partial theme object will be merged with the default Canvas theme
+ * (using memoized createCanvasTheme()) to establish any missing fields that have
+ * not been defined by the consumer's theme object.
+ *
+ * If theme is not passed, the function will try to retrieve it from the window object.
+ * If window theme is not found, it will return the default Canvas theme.
+ *
+ * @example
+ * import {getTheme} from '@workday/canvas-kit-react/common';
+ *
+ * const theme = getTheme();
+ * const {up, down} = theme.canvas.breakpoints;
+ * const small = down('m'); // Returns '@media (max-width: 768px)'
+ * const medium = up('m'); // Returns '@media (min-width: 768px)'
+ *
+ * const styles = {
+ *  [small]: {
+ *    margin: space.m
+ *  },
+ *  [medium]: {
+ *    margin: space.l
+ *  }
+ * }
+ */
+export declare function getTheme(theme?: PartialEmotionCanvasTheme): EmotionCanvasTheme;
+/**
+ * Hook function to get the correct theme object for functional components.
+ * @param {Object=} theme - The theme object with the Canvas Kit theme.
+ * It should be namespaced within this variable under the `canvas` key.
+ * Value of `canvas` property is any partial or full theme object to overwtite default theme.
+ *
+ * @returns An object containing updated or default Canvas Kit theme under `canvas` key.
+ *
+ * NOTE: If theme is not passed, the function will try to pull the theme from ThemeContext.
  * If that does not work, it will try to retrieve it from the window object.
  * As a last resort, it will return the default Canvas theme.
  *
@@ -16,6 +52,14 @@ import { EmotionCanvasTheme, PartialEmotionCanvasTheme } from './index';
  * Providing the default theme here is currently a work around for when no
  * ThemeProvider or context exists.
  * Tracked on https://github.com/emotion-js/emotion/issues/1193.
+ *
+ * @example
+ * export const ErrorMessage = () => {
+ *  const theme = useTheme();
+ *  return (
+ *    <Subtext size="large" color={theme.canvas.palette.error.main}>
+ *  );
+ * }
  */
 export declare function useTheme(theme?: PartialEmotionCanvasTheme): EmotionCanvasTheme;
 //# sourceMappingURL=useTheme.d.ts.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useTheme.ts"],"names":[],"mappings":"AAIA,OAAO,EAGL,kBAAkB,EAClB,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AAOjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,yBAAyB,GAAG,kBAAkB,CAY9E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,yBAAyB,GAAG,kBAAkB,CAkB9E"}

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

@@ -1,24 +1,64 @@
-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);
-};
+// refactor for v5
+/// <reference types="@types/node" />
 import { useTheme as useEmotionTheme } from '@emotion/react';
 import { defaultCanvasTheme, createCanvasTheme, } from './index';
-var getFilledTheme = function (theme) { return (__assign(__assign({}, theme), { canvas: createCanvasTheme(theme.canvas) })); };
+const getFilledTheme = (theme) => ({
+    ...theme,
+    canvas: createCanvasTheme(theme.canvas),
+});
+/**
+ * Function to get the correct theme object for `styled` and class components
+ * or to be used outside component.
+ * @param {Object=} theme - The theme object with the Canvas Kit theme.
+ * It should be namespaced within this variable under the `canvas` key.
+ * Value of `canvas` property is any partial or full theme object to overwtite default theme.
+ *
+ * @returns An object containing updated or default Canvas Kit theme under `canvas` key.
+ *
+ * The passed partial theme object will be merged with the default Canvas theme
+ * (using memoized createCanvasTheme()) to establish any missing fields that have
+ * not been defined by the consumer's theme object.
+ *
+ * If theme is not passed, the function will try to retrieve it from the window object.
+ * If window theme is not found, it will return the default Canvas theme.
+ *
+ * @example
+ * import {getTheme} from '@workday/canvas-kit-react/common';
+ *
+ * const theme = getTheme();
+ * const {up, down} = theme.canvas.breakpoints;
+ * const small = down('m'); // Returns '@media (max-width: 768px)'
+ * const medium = up('m'); // Returns '@media (min-width: 768px)'
+ *
+ * const styles = {
+ *  [small]: {
+ *    margin: space.m
+ *  },
+ *  [medium]: {
+ *    margin: space.l
+ *  }
+ * }
+ */
+export function getTheme(theme) {
+    var _a, _b, _c;
+    if (theme === null || theme === void 0 ? void 0 : theme.canvas) {
+        return getFilledTheme(theme);
+    }
+    const 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 });
+    }
+    return { canvas: defaultCanvasTheme };
+}
 /**
- * Hook function to get the correct theme object.
- * @param {Object=} theme - The theme object returned from the emotion ThemeContext
- * (through ThemeProvider). The Canvas Kit theme is namespaced within this variable under the `canvas` key.
+ * Hook function to get the correct theme object for functional components.
+ * @param {Object=} theme - The theme object with the Canvas Kit theme.
+ * It should be namespaced within this variable under the `canvas` key.
+ * Value of `canvas` property is any partial or full theme object to overwtite default theme.
  *
- * NOTE: If you are using a class component, you MUST pass the theme.
- * If not passed, the function will try to pull the theme from ThemeContext.
+ * @returns An object containing updated or default Canvas Kit theme under `canvas` key.
+ *
+ * NOTE: If theme is not passed, the function will try to pull the theme from ThemeContext.
  * If that does not work, it will try to retrieve it from the window object.
  * As a last resort, it will return the default Canvas theme.
  *
@@ -29,25 +69,29 @@ var getFilledTheme = function (theme) { return (__assign(__assign({}, theme), {
  * Providing the default theme here is currently a work around for when no
  * ThemeProvider or context exists.
  * Tracked on https://github.com/emotion-js/emotion/issues/1193.
+ *
+ * @example
+ * export const ErrorMessage = () => {
+ *  const theme = useTheme();
+ *  return (
+ *    <Subtext size="large" color={theme.canvas.palette.error.main}>
+ *  );
+ * }
  */
 export function useTheme(theme) {
-    var _a, _b, _c;
-    if (theme && theme.canvas) {
-        return getFilledTheme(theme);
-    }
-    try {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        var contextTheme = useEmotionTheme();
-        if (contextTheme && contextTheme.canvas) {
-            return getFilledTheme(contextTheme);
+    if (!theme) {
+        try {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            const contextTheme = useEmotionTheme();
+            if (contextTheme === null || contextTheme === void 0 ? void 0 : contextTheme.canvas) {
+                return getFilledTheme(contextTheme);
+            }
+        }
+        catch (e) {
+            if (process && process.env.NODE_ENV === 'development') {
+                console.warn('useTheme: Context not supported or invalid. Please consider using `getTheme` function instead for `styled` or class components.');
+            }
         }
     }
-    catch (e) {
-        // Context not supported or invalid (probably called from within a class component)
-    }
-    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 });
-    }
-    return { canvas: defaultCanvasTheme };
+    return getTheme(theme);
 }

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

@@ -0,0 +1,43 @@
+import { EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
+import { CSSProperties } from '@workday/canvas-kit-react/tokens';
+declare type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
+interface ContrastColors {
+    outer?: string;
+    inner?: string;
+}
+export declare function getPaletteColorsForFocusRing(type: paletteSelection, theme: EmotionCanvasTheme): ContrastColors;
+/**
+ * This is a way to automatically add themed colors to your input and is helpful when showing alerts, success or errors to users.
+ * It supports `error`, `alert`, and `success` states. It will try and use the corresponding
+ * `main` colors from your `CanvasThemePalette` unless they do not meet accessibility contrast, in
+ * which case the outer ring will use the `darkest` color. This hook will also show a `focusOutline`
+ * ring when the input is focused. Note: You should not rely on these colors alone to differentiate
+ * alerts, but use them in combination with icons or hint text.
+ * ```tsx
+ * // Add here jsx pragma to use css
+ * import {jsx} from '@emotion/core';
+ * import React from 'react';
+ * import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+ * import {useThemedRing} from '@workday/canvas-kit-react/common';
+ *
+ * export const MyInput = ({handleChange}) => {
+ *  const [value, setValue] = React.useState('invalid@email');
+ *  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ *    setValue(event.target.value);
+ *  };
+ *
+ *  const alertStyles = useThemedRing('alert');
+ *
+ *  return (
+ *    <TextInput>
+ *     <TextInput.Label>Email</TextInput.Label>
+ *      <TextInput.Field css={alertStyles} onChange={handleChange} value={value} />
+ *      <TextInput.Hint>Please enter a valid email.</TextInput.Hint>
+ *    </TextInput>
+ *  );
+ * };
+ *```
+ */
+export declare const useThemedRing: (type: paletteSelection) => CSSProperties;
+export {};
+//# sourceMappingURL=useThemedRing.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useThemedRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemedRing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,kBAAkB,EAAW,MAAM,kCAAkC,CAAC;AAClG,OAAO,EAAS,aAAa,EAA4B,MAAM,kCAAkC,CAAC;AAIlG,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AACzF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoBD,wBAAgB,4BAA4B,CAC1C,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,kBAAkB,GACxB,cAAc,CAsBhB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,aAAa,SAAU,gBAAgB,KAAG,aAyBtD,CAAC"}