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

package/dist/commonjs/skeleton/lib/parts/skeletonHeader.js

@@ -1,15 +1,4 @@
 "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 __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]; } });
@@ -29,27 +18,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonHeader = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var skeletonShape_1 = require("./skeletonShape");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const skeletonShape_1 = require("./skeletonShape");
 exports.SkeletonHeader = common_1.createComponent('div')({
     displayName: 'Skeleton.Header',
-    Component: function (_a, ref, Element) {
-        var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? tokens_1.colors.soap200 : _b, _c = _a.height, height = _c === void 0 ? '28px' : _c, _d = _a.width, width = _d === void 0 ? '100%' : _d, elemProps = __rest(_a, ["backgroundColor", "height", "width"]);
-        return (React.createElement(skeletonShape_1.SkeletonShape, __assign({ ref: ref, as: Element, backgroundColor: backgroundColor, borderRadius: tokens_1.borderRadius.s, height: height, width: width }, elemProps)));
-    },
+    Component: ({ backgroundColor = tokens_1.colors.soap200, height = '28px', width = '100%', ...elemProps }, ref, Element) => (React.createElement(skeletonShape_1.SkeletonShape, Object.assign({ ref: ref, as: Element, backgroundColor: backgroundColor, borderRadius: tokens_1.borderRadius.s, height: height, width: width }, elemProps))),
 });

package/dist/commonjs/skeleton/lib/parts/skeletonShape.js

@@ -1,15 +1,4 @@
 "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 __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]; } });
@@ -29,40 +18,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonShape = void 0;
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var Shape = styled_1.default('div')(function (_a) {
-    var backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius, height = _a.height, width = _a.width;
-    return ({
-        backgroundColor: backgroundColor,
-        borderRadius: borderRadius,
-        height: height,
-        width: width,
-        marginBottom: tokens_1.space.s,
-    });
-});
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const Shape = styled_1.default('div')(({ backgroundColor, borderRadius, height, width }) => ({
+    backgroundColor,
+    borderRadius,
+    height,
+    width,
+    marginBottom: tokens_1.space.s,
+}));
 exports.SkeletonShape = common_1.createComponent('div')({
     displayName: 'Skeleton.Shape',
-    Component: function (_a, ref, Element) {
-        var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? tokens_1.colors.soap200 : _b, _c = _a.borderRadius, borderRadius = _c === void 0 ? 0 : _c, _d = _a.height, height = _d === void 0 ? '100%' : _d, _e = _a.width, width = _e === void 0 ? '100%' : _e, elemProps = __rest(_a, ["backgroundColor", "borderRadius", "height", "width"]);
-        return (React.createElement(Shape, __assign({ ref: ref, as: Element, backgroundColor: backgroundColor, borderRadius: borderRadius, height: height, width: width }, elemProps)));
-    },
+    Component: ({ backgroundColor = tokens_1.colors.soap200, borderRadius = 0, height = '100%', width = '100%', ...elemProps }, ref, Element) => (React.createElement(Shape, Object.assign({ ref: ref, as: Element, backgroundColor: backgroundColor, borderRadius: borderRadius, height: height, width: width }, elemProps))),
 });

package/dist/commonjs/skeleton/lib/parts/skeletonText.js

@@ -1,15 +1,4 @@
 "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 __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]; } });
@@ -29,47 +18,32 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonText = void 0;
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var TextContainer = styled_1.default('div')({
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const TextContainer = styled_1.default('div')({
     marginBottom: tokens_1.space.m,
 });
-var Line = styled_1.default('div')(function (_a) {
-    var backgroundColor = _a.backgroundColor, width = _a.width;
+const Line = styled_1.default('div')(({ backgroundColor, width }) => {
     return {
-        backgroundColor: backgroundColor,
-        width: width,
+        backgroundColor,
+        width,
         borderRadius: tokens_1.borderRadius.s,
         height: '21px',
         marginBottom: tokens_1.space.xs,
     };
 });
-var createTextLines = function (lineCount, backgroundColor) {
-    var lines = new Array(lineCount).fill(null);
-    return lines.map(function (_value, index) { return (React.createElement(Line, { key: index, backgroundColor: backgroundColor, width: index < lineCount - 1 || lineCount === 1 ? '100%' : '60%' })); });
+const createTextLines = (lineCount, backgroundColor) => {
+    const lines = new Array(lineCount).fill(null);
+    return lines.map((_value, index) => (React.createElement(Line, { key: index, backgroundColor: backgroundColor, width: index < lineCount - 1 || lineCount === 1 ? '100%' : '60%' })));
 };
 exports.SkeletonText = common_1.createComponent('div')({
     displayName: 'Skeleton.Text',
-    Component: function (_a, ref, Element) {
-        var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? tokens_1.colors.soap200 : _b, _c = _a.lineCount, lineCount = _c === void 0 ? 2 : _c, elemProps = __rest(_a, ["backgroundColor", "lineCount"]);
-        return lineCount <= 0 ? null : (React.createElement(TextContainer, __assign({ ref: ref, as: Element }, elemProps), createTextLines(lineCount, backgroundColor)));
-    },
+    Component: ({ backgroundColor = tokens_1.colors.soap200, lineCount = 2, ...elemProps }, ref, Element) => lineCount <= 0 ? null : (React.createElement(TextContainer, Object.assign({ ref: ref, as: Element }, elemProps), createTextLines(lineCount, backgroundColor))),
 });

package/dist/commonjs/skeleton/lib/skeleton.js

@@ -1,15 +1,4 @@
 "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 __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]; } });
@@ -29,37 +18,26 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Skeleton = void 0;
-var React = __importStar(require("react"));
-var react_1 = require("@emotion/react");
-var styled_1 = __importDefault(require("@emotion/styled"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var skeletonHeader_1 = require("./parts/skeletonHeader");
-var skeletonShape_1 = require("./parts/skeletonShape");
-var skeletonText_1 = require("./parts/skeletonText");
-var AccessibleHide = styled_1.default('div')(common_1.accessibleHide);
-var fade = react_1.keyframes({
+const React = __importStar(require("react"));
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const skeletonHeader_1 = require("./parts/skeletonHeader");
+const skeletonShape_1 = require("./parts/skeletonShape");
+const skeletonText_1 = require("./parts/skeletonText");
+const AccessibleHide = styled_1.default('div')(common_1.accessibleHide);
+const fade = react_1.keyframes({
     from: { opacity: 0.4 },
     to: { opacity: 1 },
 });
-var animation = fade + " 0.8s linear infinite alternate";
-var SkeletonAnimator = styled_1.default('div')({
-    animation: animation,
+const animation = `${fade} 0.8s linear infinite alternate`;
+const SkeletonAnimator = styled_1.default('div')({
+    animation,
     overflow: 'hidden',
     width: '100%',
     height: '100%',
@@ -80,12 +58,9 @@ var SkeletonAnimator = styled_1.default('div')({
  */
 exports.Skeleton = common_1.createComponent('div')({
     displayName: 'Skeleton',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, _b = _a["aria-label"], loadingAriaLabel = _b === void 0 ? 'Loading' : _b, elemProps = __rest(_a, ["children", 'aria-label']);
-        return (React.createElement(SkeletonAnimator, __assign({ ref: ref, as: Element }, elemProps),
-            React.createElement(AccessibleHide, null, loadingAriaLabel),
-            React.createElement("div", { "aria-hidden": true }, children)));
-    },
+    Component: ({ children, 'aria-label': loadingAriaLabel = 'Loading', ...elemProps }, ref, Element) => (React.createElement(SkeletonAnimator, Object.assign({ ref: ref, as: Element }, elemProps),
+        React.createElement(AccessibleHide, null, loadingAriaLabel),
+        React.createElement("div", { "aria-hidden": true }, children))),
     subComponents: {
         /**
          * `Skeleton.Header` renders a placeholder for header content such as headings.

package/dist/commonjs/status-indicator/lib/StatusIndicator.js

@@ -1,30 +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 __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 __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]; } });
@@ -44,26 +18,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatusIndicator = exports.statusIndicatorStyles = exports.StatusIndicatorEmphasis = exports.StatusIndicatorType = void 0;
-var React = __importStar(require("react"));
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var styled_1 = __importDefault(require("@emotion/styled"));
+const React = __importStar(require("react"));
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const styled_1 = __importDefault(require("@emotion/styled"));
 var StatusIndicatorType;
 (function (StatusIndicatorType) {
     StatusIndicatorType["Gray"] = "gray";
@@ -80,7 +43,16 @@ var StatusIndicatorEmphasis;
 })(StatusIndicatorEmphasis = exports.StatusIndicatorEmphasis || (exports.StatusIndicatorEmphasis = {}));
 exports.statusIndicatorStyles = {
     classname: 'status-indicator',
-    styles: __assign(__assign({}, tokens_1.type.levels.subtext.medium), { display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', height: tokens_1.space.s, padding: "1px " + tokens_1.space.xxxs, borderRadius: tokens_1.borderRadius.s, boxSizing: 'border-box' }),
+    styles: {
+        ...tokens_1.type.levels.subtext.medium,
+        display: 'inline-flex',
+        alignItems: 'center',
+        verticalAlign: 'middle',
+        height: tokens_1.space.s,
+        padding: `1px ${tokens_1.space.xxxs}`,
+        borderRadius: tokens_1.borderRadius.s,
+        boxSizing: 'border-box',
+    },
     variants: {
         gray: {
             high: {
@@ -145,11 +117,11 @@ exports.statusIndicatorStyles = {
         },
     },
 };
-var Container = styled_1.default('span')(exports.statusIndicatorStyles.styles, function (_a) {
-    var type = _a.type, emphasis = _a.emphasis, maxWidth = _a.maxWidth;
-    return (__assign(__assign({}, exports.statusIndicatorStyles.variants[type][emphasis]), { maxWidth: maxWidth }));
-});
-var StatusLabel = styled_1.default('span')({
+const Container = styled_1.default('span')(exports.statusIndicatorStyles.styles, ({ type, emphasis, maxWidth }) => ({
+    ...exports.statusIndicatorStyles.variants[type][emphasis],
+    maxWidth: maxWidth,
+}));
+const StatusLabel = styled_1.default('span')({
     fontWeight: 'bold',
     WebkitFontSmoothing: 'antialiased',
     textTransform: 'uppercase',
@@ -157,20 +129,15 @@ var StatusLabel = styled_1.default('span')({
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
 });
-var StatusIndicator = /** @class */ (function (_super) {
-    __extends(StatusIndicator, _super);
-    function StatusIndicator() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    StatusIndicator.prototype.render = function () {
-        var _a = this.props, _b = _a.emphasis, emphasis = _b === void 0 ? StatusIndicatorEmphasis.High : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? 200 : _c, type = _a.type, icon = _a.icon, label = _a.label, elemProps = __rest(_a, ["emphasis", "maxWidth", "type", "icon", "label"]);
-        var variant = exports.statusIndicatorStyles.variants[type][emphasis];
-        return (React.createElement(Container, __assign({ type: type, emphasis: emphasis, maxWidth: maxWidth }, elemProps),
+class StatusIndicator extends React.Component {
+    render() {
+        const { emphasis = StatusIndicatorEmphasis.High, maxWidth = 200, type, icon, label, ...elemProps } = this.props;
+        const variant = exports.statusIndicatorStyles.variants[type][emphasis];
+        return (React.createElement(Container, Object.assign({ type: type, emphasis: emphasis, maxWidth: maxWidth }, elemProps),
             icon && (React.createElement(icon_1.SystemIcon, { colorHover: variant.color, color: variant.color, icon: icon, size: 14, style: { paddingRight: tokens_1.space.xxxs } })),
             React.createElement(StatusLabel, null, label)));
-    };
-    StatusIndicator.Type = StatusIndicatorType;
-    StatusIndicator.Emphasis = StatusIndicatorEmphasis;
-    return StatusIndicator;
-}(React.Component));
+    }
+}
 exports.StatusIndicator = StatusIndicator;
+StatusIndicator.Type = StatusIndicatorType;
+StatusIndicator.Emphasis = StatusIndicatorEmphasis;

package/dist/commonjs/switch/lib/Switch.js

@@ -1,15 +1,4 @@
 "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 __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]; } });
@@ -29,33 +18,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Switch = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var circleSize = tokens_1.space.xs;
-var switchWidth = tokens_1.space.l;
-var switchHeight = tokens_1.space.s;
-var switchTapArea = tokens_1.space.l;
-var translateLength = tokens_1.space.s;
-var SwitchContainer = common_1.styled('div')({
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const circleSize = tokens_1.space.xs;
+const switchWidth = tokens_1.space.l;
+const switchHeight = tokens_1.space.s;
+const switchTapArea = tokens_1.space.l;
+const translateLength = tokens_1.space.s;
+const SwitchContainer = common_1.styled('div')({
     position: 'relative',
     height: tokens_1.space.m,
     width: switchTapArea,
 });
-var SwitchInput = common_1.styled('input')({
+const SwitchInput = common_1.styled('input')({
     position: 'absolute',
     height: tokens_1.space.m,
     width: switchTapArea,
@@ -64,32 +42,45 @@ var SwitchInput = common_1.styled('input')({
     borderRadius: tokens_1.borderRadius.circle,
     opacity: 0,
     display: 'block',
-}, function (_a) {
-    var disabled = _a.disabled;
-    return ({
-        cursor: disabled ? 'not-allowed' : 'pointer',
-    });
-}, function (_a) {
-    var error = _a.error, theme = _a.theme;
-    var errorColors = common_1.getErrorColors(error, theme);
+}, ({ disabled }) => ({
+    cursor: disabled ? 'not-allowed' : 'pointer',
+}), ({ error, theme }) => {
+    const errorColors = common_1.getErrorColors(error, theme);
     if (errorColors.outer === errorColors.inner) {
         errorColors.outer = 'transparent';
     }
-    var styles = {
+    const styles = {
         '&:focus': {
             outline: 'none',
-            '& ~ div:first-of-type': __assign({}, common_1.focusRing({ separation: 2, animate: false }, theme)),
+            '& ~ div:first-of-type': {
+                ...common_1.focusRing({ separation: 2, animate: false }, theme),
+            },
         },
         '& ~ div:first-of-type': {
-            boxShadow: "\n          0 0 0 2px " + tokens_1.colors.frenchVanilla100 + ",\n          0 0 0 4px " + errorColors.inner + ",\n          0 0 0 5px " + errorColors.outer,
+            boxShadow: `
+          0 0 0 2px ${tokens_1.colors.frenchVanilla100},
+          0 0 0 4px ${errorColors.inner},
+          0 0 0 5px ${errorColors.outer}`,
         },
-        '&:focus ~ div:first-of-type': __assign({}, common_1.focusRing({ separation: 2, animate: false }, theme)),
+        '&:focus ~ div:first-of-type': {
+            ...common_1.focusRing({ separation: 2, animate: false }, theme),
+        },
+    };
+    return {
+        ...styles,
+        // Error rings take precedence over focus
+        ...common_1.mouseFocusBehavior({
+            ...styles,
+            '&:focus ~ div:first-of-type, &:active ~ div:first-of-type': {
+                boxShadow: `
+            0 0 0 2px ${tokens_1.colors.frenchVanilla100},
+            0 0 0 4px ${errorColors.inner},
+            0 0 0 5px ${errorColors.outer}`,
+            },
+        }),
     };
-    return __assign(__assign({}, styles), common_1.mouseFocusBehavior(__assign(__assign({}, styles), { '&:focus ~ div:first-of-type, &:active ~ div:first-of-type': {
-            boxShadow: "\n            0 0 0 2px " + tokens_1.colors.frenchVanilla100 + ",\n            0 0 0 4px " + errorColors.inner + ",\n            0 0 0 5px " + errorColors.outer,
-        } })));
 });
-var SwitchBackground = common_1.styled('div')({
+const SwitchBackground = common_1.styled('div')({
     boxSizing: 'border-box',
     position: 'absolute',
     display: 'flex',
@@ -101,8 +92,7 @@ var SwitchBackground = common_1.styled('div')({
     borderRadius: tokens_1.borderRadius.circle,
     padding: '0px 2px',
     transition: 'background-color 200ms ease',
-}, function (_a) {
-    var checked = _a.checked, disabled = _a.disabled, themePrimary = _a.theme.canvas.palette.primary;
+}, ({ checked, disabled, theme: { canvas: { palette: { primary: themePrimary }, }, }, }) => {
     if (checked) {
         return {
             backgroundColor: disabled ? themePrimary.light : themePrimary.main,
@@ -114,24 +104,24 @@ var SwitchBackground = common_1.styled('div')({
         };
     }
 });
-var SwitchCircle = common_1.styled('div')(__assign(__assign({ width: circleSize, height: circleSize, borderRadius: tokens_1.borderRadius.circle }, tokens_1.depth[1]), { transition: 'transform 150ms ease', pointerEvents: 'none' }), function (_a) {
-    var theme = _a.theme;
-    return ({
-        backgroundColor: theme.canvas.palette.primary.contrast,
-    });
-}, function (_a) {
-    var checked = _a.checked;
-    return ({
-        transform: checked ? "translateX(" + translateLength + ")" : 'translateX(0)',
-    });
-});
+const SwitchCircle = common_1.styled('div')({
+    width: circleSize,
+    height: circleSize,
+    borderRadius: tokens_1.borderRadius.circle,
+    ...tokens_1.depth[1],
+    transition: 'transform 150ms ease',
+    pointerEvents: 'none',
+}, ({ theme }) => ({
+    backgroundColor: theme.canvas.palette.primary.contrast,
+}), ({ checked }) => ({
+    transform: checked ? `translateX(${translateLength})` : 'translateX(0)',
+}));
 exports.Switch = common_1.createComponent('input')({
     displayName: 'Switch',
-    Component: function (_a, ref, Element) {
-        var _b = _a.checked, checked = _b === void 0 ? false : _b, id = _a.id, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, value = _a.value, elemProps = __rest(_a, ["checked", "id", "disabled", "onChange", "value"]);
-        var inputId = common_1.useUniqueId(id);
+    Component: ({ checked = false, id, disabled = false, onChange, value, ...elemProps }, ref, Element) => {
+        const inputId = common_1.useUniqueId(id);
         return (React.createElement(SwitchContainer, null,
-            React.createElement(SwitchInput, __assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, onChange: onChange, role: "checkbox", tabIndex: 0, type: "checkbox", value: value }, elemProps)),
+            React.createElement(SwitchInput, Object.assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, onChange: onChange, role: "checkbox", tabIndex: 0, type: "checkbox", value: value }, elemProps)),
             React.createElement(SwitchBackground, { checked: checked, disabled: disabled },
                 React.createElement(SwitchCircle, { checked: checked }))));
     },