@workday/canvas-kit-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.382-next.2

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

@@ -1,19 +1,3 @@
-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 _a;
 import * as React from 'react';
 export var InputType;
 (function (InputType) {
@@ -36,29 +20,29 @@ export var InputEventType;
     InputEventType["TouchStart"] = "touchstart";
 })(InputEventType || (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
-export var 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);
+export const 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];
     }
@@ -72,8 +56,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')) {
@@ -85,17 +69,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);
@@ -110,20 +94,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
+export 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');
@@ -132,14 +115,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;
@@ -154,8 +136,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]')) {
@@ -164,9 +146,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);
@@ -179,8 +161,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;
         }
@@ -188,8 +170,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;
@@ -197,10 +179,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);
@@ -227,21 +209,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 = inputEventMap[eventType];
+        const eventKey = 'key' in event ? event.key : undefined;
+        const eventType = event.type;
+        let value = 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) {
@@ -250,8 +232,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 */
@@ -260,37 +242,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 = inputEventMap[eventType];
+            const eventType = event.type;
+            let value = 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;
@@ -299,11 +280,9 @@ var InputProvider = /** @class */ (function (_super) {
         else {
             this.isScrolling = true;
         }
-    };
-    InputProvider.prototype.render = function () {
+    }
+    render() {
         return this.props.children || null;
-    };
-    return InputProvider;
-}(React.Component));
-export { InputProvider };
+    }
+}
 export default InputProvider;

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

@@ -1,6 +1,6 @@
-var CDN_URI = 'https://design.workday.com/images/';
-export var dubLogoBlue = "<img src=\"" + CDN_URI + "ck-dub-logo-blue.svg\" alt=\"\">";
-export var dubLogoWhite = "<img src=\"" + CDN_URI + "ck-dub-logo-white.svg\" alt=\"\">";
-export var wdayLogoBlue = "<img src=\"" + CDN_URI + "ck-wday-logo-blue.svg\" alt=\"\">";
-export var wdayLogoWhite = "<img src=\"" + CDN_URI + "ck-wday-logo-white.svg\" alt=\"\">";
-export var miniWdayLogoBlue = "<img src=\"" + CDN_URI + "ck-mini-wday-logo-blue.svg\" alt=\"\">";
+const CDN_URI = 'https://design.workday.com/images/';
+export const dubLogoBlue = `<img src="${CDN_URI}ck-dub-logo-blue.svg" alt="">`;
+export const dubLogoWhite = `<img src="${CDN_URI}ck-dub-logo-white.svg" alt="">`;
+export const wdayLogoBlue = `<img src="${CDN_URI}ck-wday-logo-blue.svg" alt="">`;
+export const wdayLogoWhite = `<img src="${CDN_URI}ck-wday-logo-white.svg" alt="">`;
+export const miniWdayLogoBlue = `<img src="${CDN_URI}ck-mini-wday-logo-blue.svg" alt="">`;

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

@@ -1,60 +1,34 @@
-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;
-};
 import { useTheme, breakpointKeys } from "@workday/canvas-kit-react/common";
 import { isWithinBreakpoint } from '../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 breakpointKeys.find(function (size) { return isWithinBreakpoint.apply(void 0, __spreadArray([width], ranges[size])); }) || 'zero';
+    return breakpointKeys.find((size) => isWithinBreakpoint(width, ...ranges[size])) || 'zero';
 };
 // Returns responsive style objects that are within the current CanvasBreakpoint size
 function getStyles(key, styles) {
-    var responsiveStyles = {};
-    var breakpointSize = breakpointKeys.indexOf(key);
-    var _loop_1 = function (i) {
-        var breakpointName = breakpointKeys[i];
+    const responsiveStyles = {};
+    const breakpointSize = breakpointKeys.indexOf(key);
+    for (let i = 0; i <= breakpointSize; i++) {
+        const breakpointName = 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;
 }
@@ -124,10 +98,9 @@ return (
 );
 ```
  */
-export function useResponsiveContainerStyles(styles, width, theme) {
-    if (theme === void 0) { theme = {}; }
-    var canvasTheme = useTheme(theme);
-    var breakpoints = canvasTheme.canvas.breakpoints.values;
-    var size = getSize(width, breakpoints);
+export function useResponsiveContainerStyles(styles, width, theme = {}) {
+    const canvasTheme = useTheme(theme);
+    const breakpoints = canvasTheme.canvas.breakpoints.values;
+    const size = getSize(width, breakpoints);
     return getStyles(size, styles);
 }

package/dist/es6/common/lib/styles/accessibleHide.js

@@ -2,7 +2,7 @@
  * A utility to hide content normal users while still making accessible to screenreaders
  * See https://a11y-101.com/development/skip-link
  */
-export var accessibleHide = {
+export const accessibleHide = {
     clip: 'rect(1px, 1px, 1px, 1px)',
     clipPath: 'polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)',
     position: 'absolute',

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

@@ -1,14 +1,13 @@
 import { ErrorType } from '../types';
 import { colors, inputColors } from '@workday/canvas-kit-react/tokens';
 import chroma from 'chroma-js';
-var isAccessible = function (foreground, background) {
-    if (background === void 0) { background = colors.frenchVanilla100; }
+const isAccessible = (foreground, background = colors.frenchVanilla100) => {
     return chroma.contrast(foreground, background) >= 3;
 };
 export function getErrorColors(error, theme) {
     if (error === 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,
@@ -23,7 +22,7 @@ export function getErrorColors(error, theme) {
     }
     else if (error === 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,
@@ -44,8 +43,8 @@ export function errorRing(error, theme) {
     if (error !== ErrorType.Error && error !== 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',
@@ -55,7 +54,9 @@ export function errorRing(error, theme) {
         },
         '&:focus:not([disabled])': {
             borderColor: errorColors.outer,
-            boxShadow: errorBoxShadow + ",\n        0 0 0 2px " + colors.frenchVanilla100 + ",\n        0 0 0 4px " + (theme ? theme.canvas.palette.common.focusOutline : inputColors.focusBorder),
+            boxShadow: `${errorBoxShadow},
+        0 0 0 2px ${colors.frenchVanilla100},
+        0 0 0 4px ${theme ? theme.canvas.palette.common.focusOutline : inputColors.focusBorder}`,
         },
     };
 }

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

@@ -1,34 +1,33 @@
 import { keyframes } from '@emotion/react';
 import { canvas } from '@workday/canvas-kit-react/tokens';
 import { defaultCanvasTheme } from '../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;
+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 = keyframes({
-            '0%': { boxShadow: boxShadow },
-            '100%': { boxShadow: boxShadow },
+        const fadeIn = 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.
@@ -52,18 +51,17 @@ function calculateFocusRing(_a) {
  *
  * @returns {CSSObject} the css object for the focus ring style
  */
-export 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 ? canvas.colors.frenchVanilla100 : _d, _e = options.outerColor, outerColor = _e === void 0 ? theme && theme.canvas
+export function focusRing(options = {}, theme) {
+    const { width = 2, separation = 0, animate = true, innerColor = canvas.colors.frenchVanilla100, outerColor = theme && theme.canvas
         ? theme.canvas.palette.common.focusOutline
-        : defaultCanvasTheme.palette.common.focusOutline : _e, inset = options.inset;
-    var args = {
+        : 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/es6/common/lib/styles/hideMouseFocus.js

@@ -1,15 +1,16 @@
-var _a;
 /**
  * A utility to hide the default canvas style focus ring when using mouse input.
  * Requires wrapping your components in an InputProvider component.
  */
-export var hideMouseFocus = (_a = {},
-    _a["[data-whatinput=\"mouse\"] &:focus,\n    [data-whatinput=\"touch\"] &:focus,\n    [data-whatinput=\"pointer\"] &:focus"] = {
+export const 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"],
@@ -20,11 +21,14 @@ export var hideMouseFocus = (_a = {},
        }
    },
  */
-export 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;
+export 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];
         });
     });