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

package/dist/commonjs/common/lib/InputProvider.js

@@ -1,19 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -33,10 +18,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputProvider = exports.inputEventMap = exports.InputEventType = exports.InputType = void 0;
-var React = __importStar(require("react"));
+const React = __importStar(require("react"));
 var InputType;
 (function (InputType) {
     InputType["Initial"] = "initial";
@@ -58,29 +42,29 @@ var InputEventType;
     InputEventType["TouchStart"] = "touchstart";
 })(InputEventType = exports.InputEventType || (exports.InputEventType = {}));
 // form input types
-var formInputs = ['input', 'select', 'textarea'];
+const formInputs = ['input', 'select', 'textarea'];
 // list of modifier keys commonly used with the mouse and
 // can be safely ignored to prevent false keyboard detection
-var ignoreKeys = ['Shift', 'Control', 'Alt', 'Meta', 'OS'];
+const ignoreKeys = ['Shift', 'Control', 'Alt', 'Meta', 'OS'];
 // mapping of events to input types
-exports.inputEventMap = (_a = {},
-    _a[InputEventType.KeyDown] = InputType.Keyboard,
-    _a[InputEventType.KeyUp] = InputType.Keyboard,
-    _a[InputEventType.MouseDown] = InputType.Mouse,
-    _a[InputEventType.MouseMove] = InputType.Mouse,
-    _a[InputEventType.Wheel] = InputType.Mouse,
-    _a[InputEventType.MouseWheel] = InputType.Mouse,
-    _a[InputEventType.PointerDown] = InputType.Pointer,
-    _a[InputEventType.PointerMove] = InputType.Pointer,
-    _a[InputEventType.TouchStart] = InputType.Touch,
-    _a);
+exports.inputEventMap = {
+    [InputEventType.KeyDown]: InputType.Keyboard,
+    [InputEventType.KeyUp]: InputType.Keyboard,
+    [InputEventType.MouseDown]: InputType.Mouse,
+    [InputEventType.MouseMove]: InputType.Mouse,
+    [InputEventType.Wheel]: InputType.Mouse,
+    [InputEventType.MouseWheel]: InputType.Mouse,
+    [InputEventType.PointerDown]: InputType.Pointer,
+    [InputEventType.PointerMove]: InputType.Pointer,
+    [InputEventType.TouchStart]: InputType.Touch,
+};
 // map of IE 10 pointer events
-var pointerMap = {
+const pointerMap = {
     2: InputType.Touch,
     3: InputType.Touch,
     4: InputType.Mouse,
 };
-var getPointerType = function (event) {
+const getPointerType = (event) => {
     if (typeof event.pointerType === 'number') {
         return pointerMap[event.pointerType];
     }
@@ -94,8 +78,8 @@ var getPointerType = function (event) {
 };
 // detect version of mouse wheel event to use
 // via https://developer.mozilla.org/en-US/docs/Web/Events/wheel
-var detectWheel = function () {
-    var wheelType;
+const detectWheel = () => {
+    let wheelType;
     // Modern browsers support "wheel"
     /* istanbul ignore else for coverage */
     if ('onwheel' in document.createElement('div')) {
@@ -107,17 +91,17 @@ var detectWheel = function () {
     }
     return wheelType;
 };
-var supportsPassive = function () {
-    var supportsPassive;
+const supportsPassive = () => {
+    let supportsPassive;
     try {
         /* istanbul ignore next function for coverage */
-        var opts = Object.defineProperty({}, 'passive', {
-            get: function () {
+        const opts = Object.defineProperty({}, 'passive', {
+            get: () => {
                 supportsPassive = true;
             },
         });
         /* istanbul ignore next function for coverage */
-        var stub = function () {
+        const stub = () => {
             return;
         };
         window.addEventListener('test', stub, opts);
@@ -132,20 +116,19 @@ var supportsPassive = function () {
 /**
  * This component takes heavy inspiration from what-input (https://github.com/ten1seven/what-input)
  */
-var InputProvider = /** @class */ (function (_super) {
-    __extends(InputProvider, _super);
-    function InputProvider(props) {
-        var _this = _super.call(this, props) || this;
-        _this.isBuffering = false;
-        _this.isScrolling = false; // Unused if props.provideIntent is not defined
-        _this.mousePosX = null; // Unused if props.provideIntent is not defined
-        _this.mousePosY = null; // Unused if props.provideIntent is not defined
-        _this.deferInputTracking = false; // True if there is another input provider
+class InputProvider extends React.Component {
+    constructor(props) {
+        super(props);
+        this.isBuffering = false;
+        this.isScrolling = false; // Unused if props.provideIntent is not defined
+        this.mousePosX = null; // Unused if props.provideIntent is not defined
+        this.mousePosY = null; // Unused if props.provideIntent is not defined
+        this.deferInputTracking = false; // True if there is another input provider
         // Need to remember how it component was mounted so we ensure listener removal
-        _this.provideIntent = _this.props.provideIntent;
+        this.provideIntent = this.props.provideIntent;
         // check for sessionStorage support
         // then check for session variables and use if available
-        var storedInput, storedIntent;
+        let storedInput, storedIntent;
         try {
             storedInput = window.sessionStorage.getItem('what-input');
             storedIntent = window.sessionStorage.getItem('what-intent');
@@ -154,14 +137,13 @@ var InputProvider = /** @class */ (function (_super) {
             /* istanbul ignore next line for coverage */
             console.warn('Failed to retrieve input status from session storage' + e);
         }
-        _this.currentInput = storedInput || InputType.Initial;
-        _this.currentIntent = storedIntent || InputType.Initial;
-        _this.setInput = _this.setInput.bind(_this);
-        _this.setIntent = _this.setIntent.bind(_this);
-        _this.eventBuffer = _this.eventBuffer.bind(_this);
-        return _this;
+        this.currentInput = storedInput || InputType.Initial;
+        this.currentIntent = storedIntent || InputType.Initial;
+        this.setInput = this.setInput.bind(this);
+        this.setIntent = this.setIntent.bind(this);
+        this.eventBuffer = this.eventBuffer.bind(this);
     }
-    InputProvider.prototype.getContainer = function (container) {
+    getContainer(container) {
         // Note: Not a default prop because using document when defining default props causes errors during SSR
         if (!container) {
             return document.body;
@@ -176,8 +158,8 @@ var InputProvider = /** @class */ (function (_super) {
             }
         }
         return container;
-    };
-    InputProvider.prototype.componentDidMount = function () {
+    }
+    componentDidMount() {
         // Check for passive event listener support
         this.supportsPassive = supportsPassive();
         if (this.getContainer(this.props.container).closest('[data-whatinput]')) {
@@ -186,9 +168,9 @@ var InputProvider = /** @class */ (function (_super) {
         }
         this.updateAttributes();
         this.enableListeners(true);
-    };
-    InputProvider.prototype.updateAttributes = function () {
-        var intent = this.provideIntent ? this.currentIntent : null;
+    }
+    updateAttributes() {
+        const intent = this.provideIntent ? this.currentIntent : null;
         this.getContainer(this.props.container).setAttribute('data-whatinput', this.currentInput);
         if (intent) {
             this.getContainer(this.props.container).setAttribute('data-whatintent', intent);
@@ -201,8 +183,8 @@ var InputProvider = /** @class */ (function (_super) {
             /* istanbul ignore next line for coverage */
             console.warn('Failed to set input status in session storage' + e);
         }
-    };
-    InputProvider.prototype.componentWillUnmount = function () {
+    }
+    componentWillUnmount() {
         if (this.deferInputTracking) {
             return;
         }
@@ -210,8 +192,8 @@ var InputProvider = /** @class */ (function (_super) {
         this.getContainer(this.props.container).removeAttribute('data-whatintent');
         window.clearTimeout(this.eventTimer);
         this.enableListeners(false);
-    };
-    InputProvider.prototype.enableListeners = function (enable) {
+    }
+    enableListeners(enable) {
         /* istanbul ignore if for coverage */
         if (typeof window === 'undefined') {
             return;
@@ -219,10 +201,10 @@ var InputProvider = /** @class */ (function (_super) {
         // `pointermove`, `MSPointerMove`, `mousemove` and mouse wheel event binding
         // can only demonstrate potential, but not actual, interaction
         // and are treated separately
-        var options = this.supportsPassive
+        const options = this.supportsPassive
             ? { passive: true } // fixes Type '{ passive: boolean; }' has no properties in common with type 'EventListenerOptions'.  TS2345
             : false;
-        var fn = enable ? window.addEventListener : window.removeEventListener;
+        const fn = enable ? window.addEventListener : window.removeEventListener;
         // pointer events (mouse, pen, touch)
         if (window.PointerEvent) {
             fn('pointerdown', this.setInput);
@@ -249,21 +231,21 @@ var InputProvider = /** @class */ (function (_super) {
         // keyboard events
         fn('keydown', this.eventBuffer);
         fn('keyup', this.eventBuffer);
-    };
-    InputProvider.prototype.setInput = function (event) {
+    }
+    setInput(event) {
         // only execute if the event buffer timer isn't running
         /* istanbul ignore if for coverage */
         if (this.isBuffering) {
             return;
         }
-        var eventKey = 'key' in event ? event.key : undefined;
-        var eventType = event.type;
-        var value = exports.inputEventMap[eventType];
+        const eventKey = 'key' in event ? event.key : undefined;
+        const eventType = event.type;
+        let value = exports.inputEventMap[eventType];
         if (value === InputType.Pointer) {
             value = getPointerType(event);
         }
-        var ignoreMatch = eventKey ? ignoreKeys.indexOf(eventKey) === -1 : undefined;
-        var shouldUpdate = (value === InputType.Keyboard && eventKey && ignoreMatch) ||
+        const ignoreMatch = eventKey ? ignoreKeys.indexOf(eventKey) === -1 : undefined;
+        const shouldUpdate = (value === InputType.Keyboard && eventKey && ignoreMatch) ||
             value === InputType.Mouse ||
             value === InputType.Touch;
         if (this.currentInput !== value && shouldUpdate) {
@@ -272,8 +254,8 @@ var InputProvider = /** @class */ (function (_super) {
         }
         if (this.currentIntent !== value && shouldUpdate && this.provideIntent) {
             // preserve intent for keyboard typing in form fields
-            var activeElem = document.activeElement;
-            var notFormInput = activeElem &&
+            const activeElem = document.activeElement;
+            const notFormInput = activeElem &&
                 activeElem.nodeName &&
                 formInputs.indexOf(activeElem.nodeName.toLowerCase()) === -1;
             /* istanbul ignore else for coverage */
@@ -282,37 +264,36 @@ var InputProvider = /** @class */ (function (_super) {
                 this.updateAttributes();
             }
         }
-    };
+    }
     // updates input intent for `mousemove` and `pointermove`
-    InputProvider.prototype.setIntent = function (event) {
+    setIntent(event) {
         // test to see if `mousemove` happened relative to the screen to detect scrolling versus mousemove
         this.detectScrolling(event);
         // only execute if the event buffer timer isn't running
         // or scrolling isn't happening
         /* istanbul ignore else for coverage */
         if (!this.isBuffering && !this.isScrolling) {
-            var eventType = event.type;
-            var value = exports.inputEventMap[eventType];
+            const eventType = event.type;
+            let value = exports.inputEventMap[eventType];
             if (value === InputType.Pointer) {
                 value = getPointerType(event);
             }
             this.currentIntent = value;
             this.updateAttributes();
         }
-    };
+    }
     // buffers events that frequently also fire mouse events
-    InputProvider.prototype.eventBuffer = function (event) {
-        var _this = this;
+    eventBuffer(event) {
         // set the current input
         this.setInput(event);
         window.clearTimeout(this.eventTimer);
         this.isBuffering = true;
         /* istanbul ignore next function for coverage */
-        this.eventTimer = window.setTimeout(function () {
-            _this.isBuffering = false;
+        this.eventTimer = window.setTimeout(() => {
+            this.isBuffering = false;
         }, 100);
-    };
-    InputProvider.prototype.detectScrolling = function (event) {
+    }
+    detectScrolling(event) {
         if (this.mousePosX !== event.screenX || this.mousePosY !== event.screenY) {
             this.isScrolling = false;
             this.mousePosX = event.screenX;
@@ -321,11 +302,10 @@ var InputProvider = /** @class */ (function (_super) {
         else {
             this.isScrolling = true;
         }
-    };
-    InputProvider.prototype.render = function () {
+    }
+    render() {
         return this.props.children || null;
-    };
-    return InputProvider;
-}(React.Component));
+    }
+}
 exports.InputProvider = InputProvider;
 exports.default = InputProvider;

package/dist/commonjs/common/lib/parts/_brand-assets.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.miniWdayLogoBlue = exports.wdayLogoWhite = exports.wdayLogoBlue = exports.dubLogoWhite = exports.dubLogoBlue = void 0;
-var CDN_URI = 'https://design.workday.com/images/';
-exports.dubLogoBlue = "<img src=\"" + CDN_URI + "ck-dub-logo-blue.svg\" alt=\"\">";
-exports.dubLogoWhite = "<img src=\"" + CDN_URI + "ck-dub-logo-white.svg\" alt=\"\">";
-exports.wdayLogoBlue = "<img src=\"" + CDN_URI + "ck-wday-logo-blue.svg\" alt=\"\">";
-exports.wdayLogoWhite = "<img src=\"" + CDN_URI + "ck-wday-logo-white.svg\" alt=\"\">";
-exports.miniWdayLogoBlue = "<img src=\"" + CDN_URI + "ck-mini-wday-logo-blue.svg\" alt=\"\">";
+const CDN_URI = 'https://design.workday.com/images/';
+exports.dubLogoBlue = `<img src="${CDN_URI}ck-dub-logo-blue.svg" alt="">`;
+exports.dubLogoWhite = `<img src="${CDN_URI}ck-dub-logo-white.svg" alt="">`;
+exports.wdayLogoBlue = `<img src="${CDN_URI}ck-wday-logo-blue.svg" alt="">`;
+exports.wdayLogoWhite = `<img src="${CDN_URI}ck-wday-logo-white.svg" alt="">`;
+exports.miniWdayLogoBlue = `<img src="${CDN_URI}ck-mini-wday-logo-blue.svg" alt="">`;

package/dist/commonjs/common/lib/responsive/useResponsiveContainerStyles.js

@@ -1,63 +1,37 @@
 "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)
-        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;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useResponsiveContainerStyles = void 0;
-var common_1 = require("@workday/canvas-kit-react/common");
-var isWithinBreakpoint_1 = require("../utils/isWithinBreakpoint");
+const common_1 = require("@workday/canvas-kit-react/common");
+const isWithinBreakpoint_1 = require("../utils/isWithinBreakpoint");
 // Takes in CanvasBreakpoint keys and returns current breakpoint key. Current breakpoint key is determined by the `width` of the container
-var getSize = function (width, breakpoints) {
-    var ranges = {
+const getSize = (width, breakpoints) => {
+    const ranges = {
         'zero': [0, breakpoints.s],
         's': [breakpoints.s, breakpoints.m],
         'm': [breakpoints.m, breakpoints.l],
         'l': [breakpoints.l, breakpoints.xl],
         'xl': [breakpoints.xl]
     };
-    return common_1.breakpointKeys.find(function (size) { return isWithinBreakpoint_1.isWithinBreakpoint.apply(void 0, __spreadArray([width], ranges[size])); }) || 'zero';
+    return common_1.breakpointKeys.find((size) => isWithinBreakpoint_1.isWithinBreakpoint(width, ...ranges[size])) || 'zero';
 };
 // Returns responsive style objects that are within the current CanvasBreakpoint size
 function getStyles(key, styles) {
-    var responsiveStyles = {};
-    var breakpointSize = common_1.breakpointKeys.indexOf(key);
-    var _loop_1 = function (i) {
-        var breakpointName = common_1.breakpointKeys[i];
+    const responsiveStyles = {};
+    const breakpointSize = common_1.breakpointKeys.indexOf(key);
+    for (let i = 0; i <= breakpointSize; i++) {
+        const breakpointName = common_1.breakpointKeys[i];
         // property is key of the style object
-        Object.keys(styles).forEach(function (property) {
+        Object.keys(styles).forEach((property) => {
             var _a, _b;
-            var _c = styles[property], zero = _c.zero, s = _c.s, m = _c.m, l = _c.l, xl = _c.xl, base = __rest(_c, ["zero", "s", "m", "l", "xl"]);
-            var currentBreakpointStyles = (_a = styles[property][breakpointName]) !== null && _a !== void 0 ? _a : {};
-            var previousBreakpointStyles = (_b = responsiveStyles[property]) !== null && _b !== void 0 ? _b : {};
-            responsiveStyles[property] = __assign(__assign(__assign({}, base), previousBreakpointStyles), currentBreakpointStyles);
+            const { zero, s, m, l, xl, ...base } = styles[property];
+            const currentBreakpointStyles = (_a = styles[property][breakpointName]) !== null && _a !== void 0 ? _a : {};
+            const previousBreakpointStyles = (_b = responsiveStyles[property]) !== null && _b !== void 0 ? _b : {};
+            responsiveStyles[property] = {
+                ...base,
+                ...previousBreakpointStyles,
+                ...currentBreakpointStyles
+            };
         });
-    };
-    for (var i = 0; i <= breakpointSize; i++) {
-        _loop_1(i);
     }
     return responsiveStyles;
 }
@@ -127,11 +101,10 @@ return (
 );
 ```
  */
-function useResponsiveContainerStyles(styles, width, theme) {
-    if (theme === void 0) { theme = {}; }
-    var canvasTheme = common_1.useTheme(theme);
-    var breakpoints = canvasTheme.canvas.breakpoints.values;
-    var size = getSize(width, breakpoints);
+function useResponsiveContainerStyles(styles, width, theme = {}) {
+    const canvasTheme = common_1.useTheme(theme);
+    const breakpoints = canvasTheme.canvas.breakpoints.values;
+    const size = getSize(width, breakpoints);
     return getStyles(size, styles);
 }
 exports.useResponsiveContainerStyles = useResponsiveContainerStyles;

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

@@ -4,17 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.errorRing = exports.getErrorColors = void 0;
-var types_1 = require("../types");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var chroma_js_1 = __importDefault(require("chroma-js"));
-var isAccessible = function (foreground, background) {
-    if (background === void 0) { background = tokens_1.colors.frenchVanilla100; }
+const types_1 = require("../types");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const chroma_js_1 = __importDefault(require("chroma-js"));
+const isAccessible = (foreground, background = tokens_1.colors.frenchVanilla100) => {
     return chroma_js_1.default.contrast(foreground, background) >= 3;
 };
 function getErrorColors(error, theme) {
     if (error === types_1.ErrorType.Error) {
         if (theme) {
-            var palette = theme.canvas.palette.error;
+            const palette = theme.canvas.palette.error;
             return {
                 outer: isAccessible(palette.main) ? palette.main : palette.darkest,
                 inner: palette.main,
@@ -29,7 +28,7 @@ function getErrorColors(error, theme) {
     }
     else if (error === types_1.ErrorType.Alert) {
         if (theme) {
-            var palette = theme.canvas.palette.alert;
+            const palette = theme.canvas.palette.alert;
             return {
                 outer: isAccessible(palette.main) ? palette.main : palette.darkest,
                 inner: palette.main,
@@ -51,8 +50,8 @@ function errorRing(error, theme) {
     if (error !== types_1.ErrorType.Error && error !== types_1.ErrorType.Alert) {
         return {};
     }
-    var errorColors = getErrorColors(error, theme);
-    var errorBoxShadow = "inset 0 0 0 " + (errorColors.outer === errorColors.inner ? 1 : 2) + "px " + errorColors.inner;
+    const errorColors = getErrorColors(error, theme);
+    const errorBoxShadow = `inset 0 0 0 ${errorColors.outer === errorColors.inner ? 1 : 2}px ${errorColors.inner}`;
     return {
         borderColor: errorColors.outer,
         transition: '100ms box-shadow',
@@ -62,7 +61,9 @@ function errorRing(error, theme) {
         },
         '&:focus:not([disabled])': {
             borderColor: errorColors.outer,
-            boxShadow: errorBoxShadow + ",\n        0 0 0 2px " + tokens_1.colors.frenchVanilla100 + ",\n        0 0 0 4px " + (theme ? theme.canvas.palette.common.focusOutline : tokens_1.inputColors.focusBorder),
+            boxShadow: `${errorBoxShadow},
+        0 0 0 2px ${tokens_1.colors.frenchVanilla100},
+        0 0 0 4px ${theme ? theme.canvas.palette.common.focusOutline : tokens_1.inputColors.focusBorder}`,
         },
     };
 }

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

@@ -1,37 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 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");
-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;
+const react_1 = require("@emotion/react");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const index_1 = require("../theming/index");
+function calculateFocusRing({ width, separation, animate, inset, innerColor, outerColor, }) {
+    let boxShadow, innerWidth, outerWidth;
     switch (inset) {
         case 'outer':
             innerWidth = width + separation;
             outerWidth = separation;
-            boxShadow = "inset 0 0 0 " + outerWidth + "px " + outerColor + ", inset 0 0 0 " + innerWidth + "px " + innerColor;
+            boxShadow = `inset 0 0 0 ${outerWidth}px ${outerColor}, inset 0 0 0 ${innerWidth}px ${innerColor}`;
             break;
         case 'inner':
             innerWidth = separation;
             outerWidth = width;
-            boxShadow = "inset 0 0 0 " + innerWidth + "px " + innerColor + ", 0 0 0 " + outerWidth + "px " + outerColor;
+            boxShadow = `inset 0 0 0 ${innerWidth}px ${innerColor}, 0 0 0 ${outerWidth}px ${outerColor}`;
             break;
         default:
             innerWidth = separation;
             outerWidth = width + separation;
-            boxShadow = "0 0 0 " + innerWidth + "px " + innerColor + ", 0 0 0 " + outerWidth + "px " + outerColor;
+            boxShadow = `0 0 0 ${innerWidth}px ${innerColor}, 0 0 0 ${outerWidth}px ${outerColor}`;
             break;
     }
     if (animate) {
-        var fadeIn = react_1.keyframes({
-            '0%': { boxShadow: boxShadow },
-            '100%': { boxShadow: boxShadow },
+        const fadeIn = react_1.keyframes({
+            '0%': { boxShadow },
+            '100%': { boxShadow },
         });
-        return { animation: fadeIn + " 100ms", boxShadow: boxShadow };
+        return { animation: `${fadeIn} 100ms`, boxShadow };
     }
-    return { boxShadow: boxShadow };
+    return { boxShadow };
 }
 /**
  * A utility to create a canvas style focus ring around your widget.
@@ -55,18 +54,17 @@ function calculateFocusRing(_a) {
  *
  * @returns {CSSObject} the css object for the focus ring style
  */
-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
+function focusRing(options = {}, theme) {
+    const { width = 2, separation = 0, animate = true, innerColor = tokens_1.canvas.colors.frenchVanilla100, outerColor = theme && theme.canvas
         ? theme.canvas.palette.common.focusOutline
-        : index_1.defaultCanvasTheme.palette.common.focusOutline : _e, inset = options.inset;
-    var args = {
+        : index_1.defaultCanvasTheme.palette.common.focusOutline, inset, } = options;
+    const args = {
         width: width,
         separation: separation,
         innerColor: innerColor,
         outerColor: outerColor,
-        animate: animate,
-        inset: inset,
+        animate,
+        inset,
     };
     return calculateFocusRing(args);
 }

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

@@ -1,18 +1,19 @@
 "use strict";
-var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.mouseFocusBehavior = exports.hideMouseFocus = void 0;
 /**
  * A utility to hide the default canvas style focus ring when using mouse input.
  * Requires wrapping your components in an InputProvider component.
  */
-exports.hideMouseFocus = (_a = {},
-    _a["[data-whatinput=\"mouse\"] &:focus,\n    [data-whatinput=\"touch\"] &:focus,\n    [data-whatinput=\"pointer\"] &:focus"] = {
+exports.hideMouseFocus = {
+    [`[data-whatinput="mouse"] &:focus,
+    [data-whatinput="touch"] &:focus,
+    [data-whatinput="pointer"] &:focus`]: {
         outline: 'none',
         boxShadow: 'none',
         animation: 'none',
     },
-    _a);
+};
 /*
  * A utility that simplifies focus selectors since you can't use nested syntax for some reason. Example:
  * [`[data-whatinput="mouse"],
@@ -23,11 +24,14 @@ exports.hideMouseFocus = (_a = {},
        }
    },
  */
-var mouseFocusBehavior = function (selectors) {
-    var output = {};
-    Object.keys(selectors).map(function (selector, index) {
-        selector.split(',').forEach(function (selectorPart) {
-            var prefixedSelector = "\n        [data-whatinput=\"mouse\"] " + selectorPart + ",\n        [data-whatinput=\"touch\"] " + selectorPart + ",\n        [data-whatinput=\"pointer\"] " + selectorPart;
+const mouseFocusBehavior = (selectors) => {
+    const output = {};
+    Object.keys(selectors).map((selector, index) => {
+        selector.split(',').forEach(selectorPart => {
+            const prefixedSelector = `
+        [data-whatinput="mouse"] ${selectorPart},
+        [data-whatinput="touch"] ${selectorPart},
+        [data-whatinput="pointer"] ${selectorPart}`;
             output[prefixedSelector] = selectors[selector];
         });
     });