@workday/canvas-kit-react 8.0.0-alpha.116-next.1 → 8.0.0-alpha.123-next.3

package/dist/commonjs/avatar/index.d.ts

@@ -1,5 +1,2 @@
-import Avatar from './lib/Avatar';
-export default Avatar;
-export { Avatar };
 export * from './lib/Avatar';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/avatar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,eAAe,MAAM,CAAC;AACtB,OAAO,EAAC,MAAM,EAAC,CAAC;AAChB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/commonjs/avatar/index.js

@@ -9,12 +9,5 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = void 0;
-var Avatar_1 = __importDefault(require("./lib/Avatar"));
-exports.Avatar = Avatar_1.default;
-exports.default = Avatar_1.default;
 __exportStar(require("./lib/Avatar"), exports);

package/dist/commonjs/avatar/lib/Avatar.d.ts

@@ -49,6 +49,6 @@ declare type AvatarOverload = {
     Variant: typeof AvatarVariant;
     Size: typeof SystemIconCircleSize;
 };
-declare const Avatar: AvatarOverload;
-export default Avatar;
+export declare const Avatar: AvatarOverload;
+export {};
 //# sourceMappingURL=Avatar.d.ts.map

package/dist/commonjs/avatar/lib/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;CACZ;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAoEF,QAAA,MAAM,MAAM,EAAE,cAmDN,CAAC;AAKT,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;CACZ;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAoEF,eAAO,MAAM,MAAM,EAAE,cAmDb,CAAC"}

package/dist/commonjs/avatar/lib/Avatar.js

@@ -44,7 +44,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvatarVariant = void 0;
+exports.Avatar = exports.AvatarVariant = void 0;
 var react_1 = __importStar(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
@@ -103,7 +103,7 @@ var StyledImage = common_1.styled('img')({
         opacity: isLoaded ? 1 : 0,
     });
 });
-var Avatar = react_1.default.forwardRef(function (_a, ref) {
+exports.Avatar = react_1.default.forwardRef(function (_a, ref) {
     var _b = _a.variant, variant = _b === void 0 ? AvatarVariant.Light : _b, _c = _a.size, size = _c === void 0 ? icon_1.SystemIconCircleSize.m : _c, _d = _a.altText, altText = _d === void 0 ? 'Avatar' : _d, url = _a.url, onClick = _a.onClick, elemProps = __rest(_a, ["variant", "size", "altText", "url", "onClick"]);
     var _e = react_1.useState(false), imageLoaded = _e[0], setImageLoaded = _e[1];
     var loadImage = function () {
@@ -121,6 +121,5 @@ var Avatar = react_1.default.forwardRef(function (_a, ref) {
         url && (react_1.default.createElement(StyledStack, { size: size },
             react_1.default.createElement(StyledImage, { src: url, alt: altText, onLoad: loadImage, isLoaded: imageLoaded })))));
 }); // AvatarProps and forwardRef signatures are incompatible, so we must force cast
-Avatar.Variant = AvatarVariant;
-Avatar.Size = icon_1.SystemIconCircleSize;
-exports.default = Avatar;
+exports.Avatar.Variant = AvatarVariant;
+exports.Avatar.Size = icon_1.SystemIconCircleSize;

package/dist/commonjs/badge/index.d.ts

@@ -1,2 +1,2 @@
-export { default as CountBadge, CountBadgeProps } from './lib/CountBadge';
+export { CountBadge, CountBadgeProps } from './lib/CountBadge';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,UAAU,EAAE,eAAe,EAAC,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,kBAAkB,CAAC"}

package/dist/commonjs/badge/index.js

@@ -1,8 +1,5 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CountBadge = void 0;
 var CountBadge_1 = require("./lib/CountBadge");
-Object.defineProperty(exports, "CountBadge", { enumerable: true, get: function () { return __importDefault(CountBadge_1).default; } });
+Object.defineProperty(exports, "CountBadge", { enumerable: true, get: function () { return CountBadge_1.CountBadge; } });

package/dist/commonjs/badge/lib/CountBadge.d.ts

@@ -4,6 +4,5 @@ export interface CountBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     limit?: number;
     variant?: 'default' | 'inverse';
 }
-declare const CountBadge: (props: CountBadgeProps) => JSX.Element;
-export default CountBadge;
+export declare const CountBadge: (props: CountBadgeProps) => JSX.Element;
 //# sourceMappingURL=CountBadge.d.ts.map

package/dist/commonjs/badge/lib/CountBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA8CD,QAAA,MAAM,UAAU,UAAW,eAAe,gBAUzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA8CD,eAAO,MAAM,UAAU,UAAW,eAAe,gBAUhD,CAAC"}

package/dist/commonjs/badge/lib/CountBadge.js

@@ -48,6 +48,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.CountBadge = void 0;
 var React = __importStar(require("react"));
 var react_1 = require("@emotion/react");
 var styled_1 = __importDefault(require("@emotion/styled"));
@@ -88,5 +89,5 @@ var CountBadge = function (props) {
     var formattedCount = count < limit ? "" + count : limit - 1 + "+";
     return (React.createElement(Container, __assign({ variant: variant }, elemProps), formattedCount));
 };
-exports.default = CountBadge;
+exports.CountBadge = CountBadge;
 var templateObject_1;

package/dist/commonjs/button/lib/deprecated_Button.js

@@ -46,7 +46,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DeprecatedButton = void 0;
 var React = __importStar(require("react"));
-var tokens_1 = __importStar(require("@workday/canvas-kit-react/tokens"));
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var common_1 = require("@workday/canvas-kit-react/common");
 var styled_1 = __importDefault(require("@emotion/styled"));
 var Container = styled_1.default('button')({
@@ -73,7 +73,7 @@ var Container = styled_1.default('button')({
         case 'large':
             return {
                 height: '40px',
-                padding: "0 " + tokens_1.default.space.l,
+                padding: "0 " + tokens_1.canvas.space.l,
                 minWidth: '112px',
                 maxWidth: '288px',
             };
@@ -81,7 +81,7 @@ var Container = styled_1.default('button')({
         default:
             return {
                 height: '24px',
-                padding: "0 " + tokens_1.default.space.m,
+                padding: "0 " + tokens_1.canvas.space.m,
                 minWidth: '80px',
                 maxWidth: '200px',
                 fontSize: 13,
@@ -89,7 +89,7 @@ var Container = styled_1.default('button')({
         case 'small':
             return {
                 height: '18px',
-                padding: "0 " + tokens_1.default.space.xxs,
+                padding: "0 " + tokens_1.canvas.space.xxs,
                 minWidth: '56px',
                 maxWidth: '120px',
                 fontSize: 10,
@@ -104,14 +104,14 @@ var Container = styled_1.default('button')({
     var buttonColors;
     switch (variant) {
         case 'primary':
-            buttonColors = tokens_1.default.buttonColors.primary;
+            buttonColors = tokens_1.canvas.buttonColors.primary;
             break;
         case 'secondary':
         default:
-            buttonColors = tokens_1.default.buttonColors.secondary;
+            buttonColors = tokens_1.canvas.buttonColors.secondary;
             break;
         case 'delete':
-            buttonColors = __assign(__assign({}, tokens_1.default.buttonColors.delete), { focusBorder: tokens_1.default.colors.cinnamon500, activeBorder: tokens_1.default.colors.cinnamon500 });
+            buttonColors = __assign(__assign({}, tokens_1.canvas.buttonColors.delete), { focusBorder: tokens_1.canvas.colors.cinnamon500, activeBorder: tokens_1.canvas.colors.cinnamon500 });
             break;
     }
     if (!buttonColors) {

package/dist/commonjs/checkbox/index.d.ts

@@ -1,5 +1,2 @@
-import Checkbox from './lib/Checkbox';
-export default Checkbox;
-export { Checkbox };
 export * from './lib/Checkbox';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAEtC,eAAe,QAAQ,CAAC;AACxB,OAAO,EAAC,QAAQ,EAAC,CAAC;AAClB,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../checkbox/index.ts"],"names":[],"mappings":"AACA,cAAc,gBAAgB,CAAC"}

package/dist/commonjs/checkbox/index.js

@@ -9,12 +9,5 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = void 0;
-var Checkbox_1 = __importDefault(require("./lib/Checkbox"));
-exports.Checkbox = Checkbox_1.default;
-exports.default = Checkbox_1.default;
 __exportStar(require("./lib/Checkbox"), exports);

package/dist/commonjs/checkbox/lib/Checkbox.d.ts

@@ -38,9 +38,12 @@ export interface CheckboxProps extends Themeable {
      * @default false
      */
     indeterminate?: boolean;
+    /**
+     * The variant for the checkbox
+     */
+    variant?: 'inverse' | undefined;
 }
 export declare const Checkbox: import("../../common").ElementComponent<"input", CheckboxProps> & {
     ErrorType: typeof ErrorType;
 };
-export default Checkbox;
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/commonjs/checkbox/lib/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAOT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAU1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA6ND,eAAO,MAAM,QAAQ;;CA2DnB,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAOT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAW1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAoQD,eAAO,MAAM,QAAQ;;CAoEnB,CAAC"}

package/dist/commonjs/checkbox/lib/Checkbox.js

@@ -44,7 +44,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
 var React = __importStar(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = __importStar(require("@workday/canvas-kit-react/tokens"));
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var icon_1 = require("@workday/canvas-kit-react/icon");
 var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 var checkboxHeight = 18;
@@ -79,55 +79,70 @@ var CheckboxRipple = common_1.styled('span')({
     width: checkboxWidth,
     position: 'absolute',
     pointerEvents: 'none',
-    zIndex: -1,
+}, function (_a) {
+    var variant = _a.variant;
+    return ({
+        opacity: variant === 'inverse' ? '0.4' : '1',
+    });
 });
 /**
  * Note: `~ div:first-of-type` refers to `CheckboxBackground`
  * and was easier to use than a component selector in this case.
  */
 var CheckboxInput = common_1.styled('input')(function (_a) {
-    var _b = _a.theme.canvas.palette, themePrimary = _b.primary, themeFocusOutline = _b.common.focusOutline;
+    var _b = _a.theme.canvas.palette, themePrimary = _b.primary, themeFocusOutline = _b.common.focusOutline, variant = _a.variant;
     return (__assign({ borderRadius: tokens_1.borderRadius.s, width: checkboxTapArea, height: checkboxTapArea, margin: 0, marginTop: '-3px', marginLeft: '-3px', position: 'absolute', opacity: 0, '&:not(:disabled)': {
             cursor: 'pointer',
         }, 
         // States
         '&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
             '~ div:first-of-type': {
-                borderColor: tokens_1.inputColors.hoverBorder,
+                borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.hoverBorder,
             },
         }, '&:checked ~ div:first-of-type': {
-            borderColor: themePrimary.main,
-            backgroundColor: themePrimary.main,
+            borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.main,
+            backgroundColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main,
         }, '&:disabled ~ div:first-of-type': {
             borderColor: tokens_1.inputColors.disabled.border,
-            backgroundColor: tokens_1.inputColors.disabled.background,
+            backgroundColor: variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.disabled.background,
+            opacity: variant === 'inverse' ? '.4' : '1',
         }, '&:disabled:checked ~ div:first-of-type': {
-            borderColor: themePrimary.light,
-            backgroundColor: themePrimary.light,
+            borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.light,
+            backgroundColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.light,
         }, 
         // Focus
         '&:focus, &:active': {
             outline: 'none',
-        }, '&:focus ~ div:first-of-type': {
-            borderColor: themePrimary.main,
-            borderWidth: '2px',
-            boxShadow: 'none',
-        }, '&:checked:focus ~ div:first-of-type': __assign(__assign({}, common_1.focusRing({ width: 2, separation: 2, animate: false, outerColor: themeFocusOutline })), { '& span': {
+        }, '&:focus ~ div:first-of-type': __assign({ borderColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : themePrimary.main, borderWidth: '2px', boxShadow: 'none' }, common_1.focusRing({
+            width: variant === 'inverse' ? 2 : 0,
+            separation: 0,
+            animate: false,
+            innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
+            outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : undefined,
+        })), '&:checked:focus ~ div:first-of-type': __assign(__assign({}, common_1.focusRing({
+            width: 2,
+            separation: 2,
+            animate: false,
+            innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
+            outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
+        })), { borderColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main, borderWidth: '2px', '& span': {
                 marginLeft: '-7px',
             } }) }, common_1.mouseFocusBehavior({
         '&:focus ~ div:first-of-type': {
-            border: "1px solid " + tokens_1.inputColors.hoverBorder,
+            border: variant === 'inverse'
+                ? "1px solid " + tokens_1.colors.soap300
+                : "1px solid " + tokens_1.inputColors.hoverBorder,
             boxShadow: 'none',
             '& span': {
                 marginLeft: '-6px',
             },
         },
         '&:checked ~ div:first-of-type': {
-            borderColor: themePrimary.main,
+            borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.main,
         },
         '&:disabled:checked ~ div:first-of-type': {
             borderColor: themePrimary.light,
-            backgroundColor: themePrimary.light,
+            backgroundColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.light,
         },
     })));
 }, function (_a) {
@@ -138,36 +153,35 @@ var CheckboxInput = common_1.styled('input')(function (_a) {
         },
     });
 }, function (_a) {
-    var theme = _a.theme, error = _a.error;
+    var theme = _a.theme, error = _a.error, variant = _a.variant;
     var errorColors = common_1.getErrorColors(error, theme);
     if (errorColors.outer === errorColors.inner) {
         errorColors.outer = 'transparent';
     }
     var errorStyles = {
         '& ~ div:first-of-type': {
-            border: "1px solid " + errorColors.inner,
+            border: variant === 'inverse' ? "1px solid " + tokens_1.colors.soap300 : "1px solid " + errorColors.inner,
             boxShadow: "0 0 0 1px " + errorColors.inner + ", 0 0 0 2px " + errorColors.outer,
         },
         '&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
             '~ div:first-of-type': {
-                borderColor: errorColors.inner,
+                borderColor: variant === 'inverse' ? "1px solid " + tokens_1.colors.soap300 : errorColors.inner,
             },
         },
         '&:checked ~ div:first-of-type': {
-            borderColor: theme.canvas.palette.primary.main,
-            boxShadow: "\n            0 0 0 2px " + tokens_1.colors.frenchVanilla100 + ",\n            0 0 0 4px " + errorColors.inner + ",\n            0 0 0 5px " + errorColors.outer,
+            borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : theme.canvas.palette.primary.main,
+            boxShadow: "\n              0 0 0 2px " + tokens_1.colors.frenchVanilla100 + ",\n              0 0 0 4px " + errorColors.inner + ",\n              0 0 0 5px " + errorColors.outer,
         },
     };
-    return __assign(__assign({}, errorStyles), common_1.mouseFocusBehavior(__assign(__assign({}, errorStyles), { '&:not(:checked):focus ~ div:first-of-type': {
+    return __assign(__assign({}, common_1.mouseFocusBehavior(__assign(__assign({}, errorStyles), { '&:not(:checked):focus ~ div:first-of-type': {
             border: "1px solid " + errorColors.inner,
             boxShadow: "0 0 0 1px " + errorColors.inner + ", 0 0 0 2px " + errorColors.outer,
-        } })));
+        } }))), errorStyles);
 });
 var CheckboxBackground = common_1.styled('div')({
     alignItems: 'center',
     backgroundColor: tokens_1.colors.frenchVanilla100,
     borderRadius: tokens_1.borderRadius.s,
-    border: '1px solid ' + tokens_1.inputColors.border,
     boxSizing: 'border-box',
     display: 'flex',
     height: checkboxHeight,
@@ -177,6 +191,11 @@ var CheckboxBackground = common_1.styled('div')({
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
     width: checkboxWidth,
+}, function (_a) {
+    var variant = _a.variant;
+    return ({
+        border: "1px solid " + (variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.border),
+    });
 });
 var CheckboxCheck = common_1.styled('div')({
     display: 'flex',
@@ -205,14 +224,24 @@ var IndeterminateBox = common_1.styled('div')({
     width: '10px',
     height: '2px',
 }, function (_a) {
-    var theme = _a.theme;
+    var theme = _a.theme, variant = _a.variant;
     return ({
-        backgroundColor: theme.canvas.palette.primary.contrast,
+        backgroundColor: variant === 'inverse'
+            ? theme.canvas.palette.primary.main
+            : theme.canvas.palette.primary.contrast,
     });
 });
-var CheckboxLabel = common_1.styled('label')(__assign(__assign({}, tokens_1.default.type.levels.subtext.large), { paddingLeft: checkboxLabelDistance }), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? { color: tokens_1.inputColors.disabled.text } : { cursor: 'pointer' });
+var CheckboxLabel = common_1.styled('label')(__assign(__assign({}, tokens_1.canvas.type.levels.subtext.large), { paddingLeft: checkboxLabelDistance }), function (_a) {
+    var variant = _a.variant;
+    return (variant === 'inverse' ? { color: tokens_1.colors.frenchVanilla100 } : undefined);
+}, function (_a) {
+    var disabled = _a.disabled, variant = _a.variant;
+    return disabled
+        ? {
+            color: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : tokens_1.inputColors.disabled.text,
+            opacity: variant === 'inverse' ? '.4' : '1',
+        }
+        : { cursor: 'pointer' };
 });
 exports.Checkbox = common_1.createComponent('input')({
     displayName: 'Checkbox',
@@ -223,18 +252,19 @@ exports.Checkbox = common_1.createComponent('input')({
         _d = _a.theme, 
         // TODO: Fix useTheme and make it a real hook
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        theme = _d === void 0 ? common_1.useTheme() : _d, id = _a.id, disabled = _a.disabled, onChange = _a.onChange, value = _a.value, error = _a.error, indeterminate = _a.indeterminate, elemProps = __rest(_a, ["checked", "label", "theme", "id", "disabled", "onChange", "value", "error", "indeterminate"]);
+        theme = _d === void 0 ? common_1.useTheme() : _d, id = _a.id, disabled = _a.disabled, onChange = _a.onChange, value = _a.value, error = _a.error, indeterminate = _a.indeterminate, variant = _a.variant, elemProps = __rest(_a, ["checked", "label", "theme", "id", "disabled", "onChange", "value", "error", "indeterminate", "variant"]);
         var inputId = common_1.useUniqueId(id);
         return (React.createElement(CheckboxContainer, null,
             React.createElement(CheckboxInputWrapper, { disabled: disabled },
-                React.createElement(CheckboxInput, __assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, onChange: onChange, type: "checkbox", value: value, error: error, "aria-checked": indeterminate ? 'mixed' : checked }, elemProps)),
-                React.createElement(CheckboxRipple, null),
-                React.createElement(CheckboxBackground, { checked: checked, disabled: disabled },
-                    React.createElement(CheckboxCheck, { checked: checked }, indeterminate ? (React.createElement(IndeterminateBox, null)) : (React.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.checkSmallIcon, color: theme.canvas.palette.primary.contrast }))))),
-            label && (React.createElement(CheckboxLabel, { htmlFor: inputId, disabled: disabled }, label))));
+                React.createElement(CheckboxInput, __assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, onChange: onChange, type: "checkbox", value: value, error: error, variant: variant, "aria-checked": indeterminate ? 'mixed' : checked }, elemProps)),
+                React.createElement(CheckboxRipple, { variant: variant }),
+                React.createElement(CheckboxBackground, { variant: variant, checked: checked, disabled: disabled },
+                    React.createElement(CheckboxCheck, { checked: checked }, indeterminate ? (React.createElement(IndeterminateBox, { variant: variant })) : (React.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.checkSmallIcon, color: variant === 'inverse'
+                            ? theme.canvas.palette.primary.main
+                            : theme.canvas.palette.primary.contrast }))))),
+            label && (React.createElement(CheckboxLabel, { variant: variant, htmlFor: inputId, disabled: disabled }, label))));
     },
     subComponents: {
         ErrorType: common_1.ErrorType,
     },
 });
-exports.default = exports.Checkbox;

package/dist/commonjs/collection/lib/useOverflowListModel.d.ts

@@ -3,6 +3,11 @@ export declare function getHiddenIds(containerWidth: number, overflowTargetWidth
 export declare const useOverflowListModel: (<TT_Special_Generic>(config?: (Partial<{
     initialHiddenIds: string[];
     containerWidth: number;
+    /**
+     * Determines if overflow should actually occur. For example, touch devices are better at
+     * side-scrolling than mouse devices. In these cases, it makes sense to disable overflowing.
+     * @default true
+     */ shouldCalculateOverflow: boolean;
     initialSelectedIds: import("./useSelectionListModel").SelectedIds;
     initialUnselectedIds: string[];
     selection: import("./useSelectionListModel").SelectionManager;
@@ -1298,6 +1303,11 @@ export declare const useOverflowListModel: (<TT_Special_Generic>(config?: (Parti
 }) & import("../../common").ModelExtras<{
     initialHiddenIds: string[];
     containerWidth: number;
+    /**
+     * Determines if overflow should actually occur. For example, touch devices are better at
+     * side-scrolling than mouse devices. In these cases, it makes sense to disable overflowing.
+     * @default true
+     */ shouldCalculateOverflow: boolean;
     initialSelectedIds: import("./useSelectionListModel").SelectedIds;
     initialUnselectedIds: string[];
     selection: import("./useSelectionListModel").SelectionManager;

package/dist/commonjs/collection/lib/useOverflowListModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOverflowListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListModel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useOverflowListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,wBAAgB,YAAY,CAC1B,cAAc,EAAE,MAAM,EACtB,mBAAmB,EAAE,MAAM,EAC3B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACtC,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,GAC5B,MAAM,EAAE,CAwCV;AAED,eAAO,MAAM,oBAAoB;;;IAK7B;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA6DkC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;YAInB,MAAM;eAAS,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;YAiBlB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;YAiBT,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;YAGH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAzCI,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;YAInB,MAAM;eAAS,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;YAiBlB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;YAiBT,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;YAGH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAtDT;YAAC,KAAK,CAAC,EAAE,MAAM,CAAA;SAAC;qCAaX;YAAC,KAAK,EAAE,MAAM,CAAA;SAAC;2BAIzB;YAAC,EAAE,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAC;8BAiBxB;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;2BAiBf;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;8BAGT;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA1GlC;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAgDqB;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC;iCAaX;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC;uBAIzB;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC;0BAiBxB;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC;uBAiBf;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC;0BAGT;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAtDV;YAAC,KAAK,CAAC,EAAE,MAAM,CAAA;SAAC;qCAaX;YAAC,KAAK,EAAE,MAAM,CAAA;SAAC;2BAIzB;YAAC,EAAE,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAC;8BAiBxB;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;2BAiBf;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;8BAGT;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMpC,CAAC"}

package/dist/commonjs/collection/lib/useOverflowListModel.js

@@ -58,10 +58,16 @@ function getHiddenIds(containerWidth, overflowTargetWidth, itemWidthCache, selec
 }
 exports.getHiddenIds = getHiddenIds;
 exports.useOverflowListModel = common_1.createModelHook({
-    defaultConfig: __assign(__assign({}, useSelectionListModel_1.useSelectionListModel.defaultConfig), { initialHiddenIds: [], containerWidth: 0 }),
+    defaultConfig: __assign(__assign({}, useSelectionListModel_1.useSelectionListModel.defaultConfig), { initialHiddenIds: [], containerWidth: 0, 
+        /**
+         * Determines if overflow should actually occur. For example, touch devices are better at
+         * side-scrolling than mouse devices. In these cases, it makes sense to disable overflowing.
+         * @default true
+         */ shouldCalculateOverflow: true }),
     requiredConfig: useSelectionListModel_1.useSelectionListModel.requiredConfig,
     contextOverride: useSelectionListModel_1.useSelectionListModel.Context,
 })(function (config) {
+    var shouldCalculateOverflow = config.shouldCalculateOverflow === undefined ? true : config.shouldCalculateOverflow;
     var _a = react_1.default.useState(config.initialHiddenIds), hiddenIds = _a[0], setHiddenIds = _a[1];
     var _b = react_1.default.useState({}), itemWidthCache = _b[0], setItemWidthCache = _b[1];
     var _c = react_1.default.useState(0), containerWidth = _c[0], setContainerWidth = _c[1];
@@ -69,12 +75,12 @@ exports.useOverflowListModel = common_1.createModelHook({
     var itemWidthCacheRef = react_1.default.useRef(itemWidthCache);
     var _d = react_1.default.useState(0), overflowTargetWidth = _d[0], setOverflowTargetWidth = _d[1];
     var overflowTargetWidthRef = react_1.default.useRef(0);
+    var internalHiddenIds = shouldCalculateOverflow ? hiddenIds : [];
     // Cursors skip over disabled ids, but know nothing of hidden ids. We'll go ahead and disable
     // hidden ids as well
-    var nonInteractiveIds = (config.nonInteractiveIds || []).concat(hiddenIds);
+    var nonInteractiveIds = (config.nonInteractiveIds || []).concat(internalHiddenIds);
     var model = useSelectionListModel_1.useSelectionListModel(__assign(__assign({}, config), { nonInteractiveIds: nonInteractiveIds }));
-    var state = __assign(__assign({}, model.state), { hiddenIds: hiddenIds,
-        itemWidthCache: itemWidthCache,
+    var state = __assign(__assign({}, model.state), { hiddenIds: internalHiddenIds, itemWidthCache: itemWidthCache,
         containerWidth: containerWidth,
         overflowTargetWidth: overflowTargetWidth });
     var events = __assign(__assign({}, model.events), { select: function (data) {

package/dist/commonjs/color-picker/index.d.ts

@@ -1,6 +1,3 @@
-import ColorInput from './lib/ColorInput';
-import ColorPreview from './lib/ColorPreview';
-export { ColorInput, ColorPreview };
 export * from './lib/ColorInput';
 export * from './lib/ColorPreview';
 export * from './lib/parts/ColorSwatch';

package/dist/commonjs/color-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAE9C,OAAO,EAAC,UAAU,EAAE,YAAY,EAAC,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../color-picker/index.ts"],"names":[],"mappings":"AACA,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}

package/dist/commonjs/color-picker/index.js

@@ -9,15 +9,7 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPreview = exports.ColorInput = void 0;
-var ColorInput_1 = __importDefault(require("./lib/ColorInput"));
-exports.ColorInput = ColorInput_1.default;
-var ColorPreview_1 = __importDefault(require("./lib/ColorPreview"));
-exports.ColorPreview = ColorPreview_1.default;
 __exportStar(require("./lib/ColorInput"), exports);
 __exportStar(require("./lib/ColorPreview"), exports);
 __exportStar(require("./lib/parts/ColorSwatch"), exports);

package/dist/commonjs/color-picker/lib/ColorInput.d.ts

@@ -36,5 +36,4 @@ export interface ColorInputProps extends Themeable, TextInputProps, GrowthBehavi
     onValidColorChange?: (color: string) => void;
 }
 export declare const ColorInput: import("../../common").ElementComponent<"input", ColorInputProps>;
-export default ColorInput;
 //# sourceMappingURL=ColorInput.d.ts.map

package/dist/commonjs/color-picker/lib/ColorInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,cAAc,EACd,SAAS,EAET,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAY,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAG/E,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc,EAAE,cAAc;IAChF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChE;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AA+ED,eAAO,MAAM,UAAU,mEA0DrB,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ColorInput.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,cAAc,EACd,SAAS,EAET,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAY,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAG/E,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc,EAAE,cAAc;IAChF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChE;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AA+ED,eAAO,MAAM,UAAU,mEA0DrB,CAAC"}

package/dist/commonjs/color-picker/lib/ColorInput.js

@@ -128,4 +128,3 @@ exports.ColorInput = common_1.createComponent('input')({
             React.createElement(PoundSignPrefix, { "aria-hidden": true, disabled: disabled }, "#")));
     },
 });
-exports.default = exports.ColorInput;

package/dist/commonjs/color-picker/lib/ColorPreview.d.ts

@@ -10,5 +10,4 @@ export interface ColorPreviewProps extends TextInputProps {
     id?: string;
 }
 export declare const ColorPreview: import("../../common").ElementComponent<"input", ColorPreviewProps>;
-export default ColorPreview;
 //# sourceMappingURL=ColorPreview.d.ts.map

package/dist/commonjs/color-picker/lib/ColorPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPreview.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPreview.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAIpE,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAQD,eAAO,MAAM,YAAY,qEAavB,CAAC;AAEH,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ColorPreview.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPreview.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAIpE,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAQD,eAAO,MAAM,YAAY,qEAavB,CAAC"}

package/dist/commonjs/color-picker/lib/ColorPreview.js

@@ -46,11 +46,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorPreview = void 0;
 var React = __importStar(require("react"));
-var ColorInput_1 = __importDefault(require("./ColorInput"));
+var ColorInput_1 = require("./ColorInput");
 var common_1 = require("@workday/canvas-kit-react/common");
 var styled_1 = __importDefault(require("@emotion/styled"));
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var StyledColorPreview = styled_1.default(ColorInput_1.default)({
+var StyledColorPreview = styled_1.default(ColorInput_1.ColorInput)({
     backgroundColor: tokens_1.colors.frenchVanilla100,
     borderColor: tokens_1.colors.frenchVanilla100,
     pointerEvents: 'none',
@@ -62,4 +62,3 @@ exports.ColorPreview = common_1.createComponent('input')({
         return (React.createElement(StyledColorPreview, __assign({ ref: ref, as: Element, id: id, value: value, readOnly: true, placeholder: "" }, elemProps)));
     },
 });
-exports.default = exports.ColorPreview;

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

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.focusRing = exports.memoizedFocusRing = void 0;
 var react_1 = require("@emotion/react");
-var tokens_1 = __importDefault(require("@workday/canvas-kit-react/tokens"));
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var index_1 = require("../theming/index");
 var memoize_1 = __importDefault(require("lodash/memoize"));
 function calculateFocusRing(_a) {
@@ -68,7 +68,7 @@ exports.memoizedFocusRing = memoize_1.default(calculateFocusRing, function () {
  */
 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.default.colors.frenchVanilla100 : _d, _e = options.outerColor, outerColor = _e === void 0 ? theme && theme.canvas
+    var _a = options.width, width = _a === void 0 ? 2 : _a, _b = options.separation, separation = _b === void 0 ? 0 : _b, _c = options.animate, animate = _c === void 0 ? true : _c, _d = options.innerColor, innerColor = _d === void 0 ? tokens_1.canvas.colors.frenchVanilla100 : _d, _e = options.outerColor, outerColor = _e === void 0 ? theme && theme.canvas
         ? theme.canvas.palette.common.focusOutline
         : index_1.defaultCanvasTheme.palette.common.focusOutline : _e, _f = options.memoize, memoize = _f === void 0 ? true : _f, inset = options.inset;
     var args = {