@workday/canvas-kit-react 7.1.5 → 7.2.0-427-next.2

package/dist/commonjs/button/lib/ToolbarDropdownButton.d.ts

@@ -2,5 +2,5 @@ import { Themeable } from '@workday/canvas-kit-react/common';
 import { ToolbarIconButtonProps } from './ToolbarIconButton';
 export interface ToolbarDropdownButtonProps extends Omit<ToolbarIconButtonProps, 'toggled' | 'onToggleChange'>, Themeable {
 }
-export declare const ToolbarDropdownButton: import("../../common").ElementComponent<"button", ToolbarDropdownButtonProps>;
+export declare const ToolbarDropdownButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", ToolbarDropdownButtonProps>;
 //# sourceMappingURL=ToolbarDropdownButton.d.ts.map

package/dist/commonjs/button/lib/ToolbarDropdownButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAE3D,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,gBAAgB,CAAC,EAChE,SAAS;CAAG;AAwBhB,eAAO,MAAM,qBAAqB,+EAuChC,CAAC"}
+{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAE3D,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,gBAAgB,CAAC,EAChE,SAAS;CAAG;AAwBhB,eAAO,MAAM,qBAAqB,mGAuChC,CAAC"}

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

@@ -1,37 +1,15 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolbarDropdownButton = void 0;
-var react_1 = __importDefault(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var BaseButton_1 = require("./BaseButton");
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var StyledToolbarDropdownButton = common_1.styled(BaseButton_1.BaseButton)({
+const react_1 = __importDefault(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const BaseButton_1 = require("./BaseButton");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const StyledToolbarDropdownButton = common_1.styled(BaseButton_1.BaseButton)({
     padding: tokens_1.space.zero,
     minWidth: tokens_1.space.l,
     width: 'auto',
@@ -47,27 +25,23 @@ var StyledToolbarDropdownButton = common_1.styled(BaseButton_1.BaseButton)({
         margin: '0 2px 0 0',
     },
     '& .wdc-toolbar-dropdown-btn-custom-icon': {
-        marginLeft: "" + tokens_1.space.xxxs,
+        marginLeft: `${tokens_1.space.xxxs}`,
         marginRight: 0,
-        width: 18,
+        width: 18, // decrease the space between a custom icon and the chevron per design
     },
 });
 exports.ToolbarDropdownButton = common_1.createComponent('button')({
     displayName: 'ToolbarDropdownButton',
-    Component: function (_a, ref, Element) {
-        var 
-        // TODO: Fix useTheme and make it a real hook
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        _b = _a.theme, 
-        // TODO: Fix useTheme and make it a real hook
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        theme = _b === void 0 ? common_1.useTheme() : _b, icon = _a.icon, _c = _a.shouldMirrorIcon, shouldMirrorIcon = _c === void 0 ? false : _c, children = _a.children, elemProps = __rest(_a, ["theme", "icon", "shouldMirrorIcon", "children"]);
-        return (react_1.default.createElement(StyledToolbarDropdownButton, __assign({ ref: ref, as: Element, colors: getToolbarDropdownButtonColors(theme) }, elemProps),
+    Component: ({ 
+    // TODO: Fix useTheme and make it a real hook
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    theme = common_1.useTheme(), icon, shouldMirrorIcon = false, children, ...elemProps }, ref, Element) => {
+        return (react_1.default.createElement(StyledToolbarDropdownButton, Object.assign({ ref: ref, as: Element, colors: getToolbarDropdownButtonColors(theme) }, elemProps),
             icon ? (react_1.default.createElement(BaseButton_1.BaseButton.Icon, { className: 'wdc-toolbar-dropdown-btn-custom-icon', icon: icon, shouldMirrorIcon: shouldMirrorIcon })) : (children),
             react_1.default.createElement(BaseButton_1.BaseButton.Icon, { className: 'wdc-toolbar-dropdown-btn-arrow', icon: canvas_system_icons_web_1.chevronDownSmallIcon, shouldMirrorIcon: shouldMirrorIcon })));
     },
 });
-var getToolbarDropdownButtonColors = function (theme) {
+const getToolbarDropdownButtonColors = (theme) => {
     return {
         default: {
             icon: tokens_1.colors.licorice200,

package/dist/commonjs/button/lib/ToolbarIconButton.d.ts

@@ -5,5 +5,5 @@ export interface ToolbarIconButtonProps extends Omit<TertiaryButtonProps, 'size'
     toggled?: boolean;
     shouldMirrorIcon?: boolean;
 }
-export declare const ToolbarIconButton: import("../../common").ElementComponent<"button", ToolbarIconButtonProps>;
+export declare const ToolbarIconButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", ToolbarIconButtonProps>;
 //# sourceMappingURL=ToolbarIconButton.d.ts.map

package/dist/commonjs/button/lib/ToolbarIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAErD,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC,EACnD,SAAS;IACX,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAWD,eAAO,MAAM,iBAAiB,2EAiD5B,CAAC"}
+{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAErD,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC,EACnD,SAAS;IACX,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAWD,eAAO,MAAM,iBAAiB,+FAiD5B,CAAC"}

package/dist/commonjs/button/lib/ToolbarIconButton.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,45 +18,29 @@ 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 _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolbarIconButton = void 0;
-var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var BaseButton_1 = require("./BaseButton");
-var StyledToolbarIconButton = common_1.styled(BaseButton_1.BaseButton)((_a = {},
-    _a['& .wd-icon'] = {
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const BaseButton_1 = require("./BaseButton");
+const StyledToolbarIconButton = common_1.styled(BaseButton_1.BaseButton)({
+    ['& .wd-icon']: {
         display: 'inline-block',
         verticalAlign: 'middle',
         width: 20,
         height: 20,
     },
-    _a));
+});
 exports.ToolbarIconButton = common_1.createComponent('button')({
     displayName: 'ToolbarIconButton',
-    Component: function (_a, ref, Element) {
-        var 
-        // TODO: Fix useTheme and make it a real hook
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        _b = _a.theme, 
-        // TODO: Fix useTheme and make it a real hook
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        theme = _b === void 0 ? common_1.useTheme() : _b, onToggleChange = _a.onToggleChange, icon = _a.icon, _c = _a.shouldMirrorIcon, shouldMirrorIcon = _c === void 0 ? false : _c, toggled = _a.toggled, children = _a.children, elemProps = __rest(_a, ["theme", "onToggleChange", "icon", "shouldMirrorIcon", "toggled", "children"]);
-        var isInitialMount = React.useRef(true);
+    Component: ({ 
+    // TODO: Fix useTheme and make it a real hook
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    theme = common_1.useTheme(), onToggleChange, icon, shouldMirrorIcon = false, toggled, children, ...elemProps }, ref, Element) => {
+        const isInitialMount = React.useRef(true);
         // Only call onToggleChange on update - not on first mount
-        React.useEffect(function () {
+        React.useEffect(() => {
             if (isInitialMount.current) {
                 isInitialMount.current = false;
             }
@@ -77,11 +50,11 @@ exports.ToolbarIconButton = common_1.createComponent('button')({
                 }
             }
         }, [toggled, onToggleChange]);
-        return (React.createElement(StyledToolbarIconButton, __assign({ ref: ref, as: Element, colors: getToolbarIconButtonColors(theme, toggled), size: 'small', fillIcon: toggled, "aria-pressed": toggled, padding: "zero", minWidth: tokens_1.space.l, width: tokens_1.space.l, height: tokens_1.space.l, borderRadius: tokens_1.borderRadius.m }, elemProps), icon ? React.createElement(BaseButton_1.BaseButton.Icon, { icon: icon, shouldMirrorIcon: shouldMirrorIcon }) : children));
+        return (React.createElement(StyledToolbarIconButton, Object.assign({ ref: ref, as: Element, colors: getToolbarIconButtonColors(theme, toggled), size: 'small', fillIcon: toggled, "aria-pressed": toggled, padding: "zero", minWidth: tokens_1.space.l, width: tokens_1.space.l, height: tokens_1.space.l, borderRadius: tokens_1.borderRadius.m }, elemProps), icon ? React.createElement(BaseButton_1.BaseButton.Icon, { icon: icon, shouldMirrorIcon: shouldMirrorIcon }) : children));
     },
 });
-var getToolbarIconButtonColors = function (theme, toggled) {
-    var themePrimary = theme.canvas.palette.primary;
+const getToolbarIconButtonColors = (theme, toggled) => {
+    const { canvas: { palette: { primary: themePrimary }, }, } = theme;
     return {
         default: {
             icon: toggled ? themePrimary.main : tokens_1.colors.licorice200,

package/dist/commonjs/button/lib/deprecated_Button.d.ts

@@ -13,5 +13,5 @@ export interface DeprecatedButtonProps extends GrowthBehavior {
     size?: 'small' | 'medium' | 'large';
     children?: React.ReactNode;
 }
-export declare const DeprecatedButton: import("../../common").ElementComponent<"button", DeprecatedButtonProps>;
+export declare const DeprecatedButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", DeprecatedButtonProps>;
 //# sourceMappingURL=deprecated_Button.d.ts.map

package/dist/commonjs/button/lib/deprecated_Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"deprecated_Button.d.ts","sourceRoot":"","sources":["../../../../button/lib/deprecated_Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,cAAc,EAGf,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC3D;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA4ID,eAAO,MAAM,gBAAgB,0EAiB3B,CAAC"}
+{"version":3,"file":"deprecated_Button.d.ts","sourceRoot":"","sources":["../../../../button/lib/deprecated_Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,cAAc,EAGf,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC3D;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA4ID,eAAO,MAAM,gBAAgB,8FAiB3B,CAAC"}

package/dist/commonjs/button/lib/deprecated_Button.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,16 @@ 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.DeprecatedButton = void 0;
-var React = __importStar(require("react"));
-var tokens_1 = __importStar(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')({
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Container = styled_1.default('button')({
     fontFamily: tokens_1.type.properties.fontFamilies.default,
     fontSize: 14,
     fontWeight: 500,
@@ -67,13 +45,12 @@ var Container = styled_1.default('button')({
     // Makes the "down" state of the button happens faster than the hover state, so it animates in correctly.
     '&:hover:active': { transitionDuration: '40ms' },
     '&:disabled, &:disabled:active': { cursor: 'default', boxShadow: 'none' },
-}, function (_a) {
-    var size = _a.size;
+}, ({ size }) => {
     switch (size) {
         case 'large':
             return {
                 height: '40px',
-                padding: "0 " + tokens_1.default.space.l,
+                padding: `0 ${tokens_1.canvas.space.l}`,
                 minWidth: '112px',
                 maxWidth: '288px',
             };
@@ -81,83 +58,103 @@ 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,
+                fontSize: 13, // hardcoded value to prevent shifting from type changes
             };
         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,
                 lineHeight: 'normal',
             };
     }
-}, function (_a) {
-    var grow = _a.grow;
-    return grow && { width: '100%', maxWidth: '100%' };
-}, function (_a) {
-    var variant = _a.variant;
-    var buttonColors;
+}, ({ grow }) => grow && { width: '100%', maxWidth: '100%' }, ({ variant }) => {
+    let 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 = {
+                ...tokens_1.canvas.buttonColors.delete,
+                focusBorder: tokens_1.canvas.colors.cinnamon500,
+                activeBorder: tokens_1.canvas.colors.cinnamon500,
+            };
             break;
     }
     if (!buttonColors) {
         return {};
     }
-    var baseStyles = {
+    const baseStyles = {
         backgroundColor: buttonColors.background,
         borderColor: buttonColors.border,
         color: buttonColors.text,
     };
-    var hoverStyles = {
+    const hoverStyles = {
         ':hover': {
             backgroundColor: buttonColors.hoverBackground,
             borderColor: buttonColors.hoverBorder,
             color: buttonColors.hoverText,
         },
     };
-    var activeStyles = {
+    const activeStyles = {
         ':active, :focus:active, :hover:active': {
             backgroundColor: buttonColors.activeBackground,
             borderColor: buttonColors.activeBorder,
             color: buttonColors.activeText,
         },
     };
-    return __assign(__assign(__assign(__assign(__assign(__assign({}, baseStyles), { ':focus': {
+    return {
+        ...baseStyles,
+        ':focus': {
             backgroundColor: buttonColors.focusBackground,
             borderColor: buttonColors.focusBorder,
             color: buttonColors.focusText,
-        } }), activeStyles), hoverStyles), { ':disabled, :active:disabled, :focus:disabled, :hover:disabled': {
+        },
+        ...activeStyles,
+        ...hoverStyles,
+        ':disabled, :active:disabled, :focus:disabled, :hover:disabled': {
             backgroundColor: buttonColors.disabledBackground,
             borderColor: buttonColors.disabledBorder,
             color: buttonColors.disabledText,
-        }, '&:not([disabled])': {
-            '&:focus': __assign({ borderColor: buttonColors.focusBorder }, common_1.focusRing()),
-            '&:active': __assign({ borderColor: buttonColors.activeBorder }, common_1.focusRing()),
-        } }), common_1.mouseFocusBehavior({
-        '&:focus': __assign(__assign(__assign(__assign({}, baseStyles), { outline: 'none', boxShadow: 'none', animation: 'none' }), hoverStyles), activeStyles),
-    }));
+        },
+        '&:not([disabled])': {
+            '&:focus': {
+                borderColor: buttonColors.focusBorder,
+                ...common_1.focusRing(),
+            },
+            '&:active': {
+                borderColor: buttonColors.activeBorder,
+                ...common_1.focusRing(),
+            },
+        },
+        ...common_1.mouseFocusBehavior({
+            '&:focus': {
+                ...baseStyles,
+                outline: 'none',
+                boxShadow: 'none',
+                animation: 'none',
+                ...hoverStyles,
+                ...activeStyles,
+            },
+        }),
+    };
 });
 exports.DeprecatedButton = common_1.createComponent('button')({
     displayName: 'DeprecatedButton',
-    Component: function (_a, ref, Element) {
-        var _b = _a.variant, variant = _b === void 0 ? 'secondary' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, children = _a.children, elemProps = __rest(_a, ["variant", "size", "children"]);
-        React.useEffect(function () {
+    Component: ({ variant = 'secondary', size = 'large', children, ...elemProps }, ref, Element) => {
+        React.useEffect(() => {
             console.warn('This component is now deprecated, consider using the new Button component');
         }, []);
-        return (React.createElement(Container, __assign({ ref: ref, as: Element, variant: variant, size: size }, elemProps), children));
+        return (React.createElement(Container, Object.assign({ ref: ref, as: Element, variant: variant, size: size }, elemProps), children));
     },
 });

package/dist/commonjs/button/lib/parts/ButtonLabel.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps } from '@workday/canvas-kit-react/layout';
 export interface ButtonLabelProps extends BoxProps {
 }
-export declare const ButtonLabel: import("../../../common").ElementComponent<"span", ButtonLabelProps>;
+export declare const ButtonLabel: import("@workday/canvas-kit-react/common").ElementComponent<"span", ButtonLabelProps>;
 //# sourceMappingURL=ButtonLabel.d.ts.map

package/dist/commonjs/button/lib/parts/ButtonLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonLabel.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;CAAG;AASrD,eAAO,MAAM,WAAW,sEAStB,CAAC"}
+{"version":3,"file":"ButtonLabel.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;CAAG;AASrD,eAAO,MAAM,WAAW,uFAStB,CAAC"}

package/dist/commonjs/button/lib/parts/ButtonLabel.js

@@ -1,35 +1,13 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonLabel = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var layout_1 = require("@workday/canvas-kit-react/layout");
-var StyledButtonLabel = common_1.styled(layout_1.Box.as('span'))({
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const StyledButtonLabel = common_1.styled(layout_1.Box.as('span'))({
     position: 'relative',
     textOverflow: 'ellipsis',
     overflow: 'hidden',
@@ -37,8 +15,7 @@ var StyledButtonLabel = common_1.styled(layout_1.Box.as('span'))({
 });
 exports.ButtonLabel = common_1.createComponent('span')({
     displayName: 'ButtonLabel',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (react_1.default.createElement(StyledButtonLabel, __assign({ as: Element, ref: ref }, elemProps), children));
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (react_1.default.createElement(StyledButtonLabel, Object.assign({ as: Element, ref: ref }, elemProps), children));
     },
 });

package/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts

@@ -1,18 +1,12 @@
-import { CanvasSystemIcon } from '@workday/design-assets-types';
 import { ButtonSizes, IconPositions } from '../types';
-import { BoxProps } from '@workday/canvas-kit-react/layout';
-export interface ButtonLabelIconProps extends BoxProps {
+import { SystemIconProps } from '@workday/canvas-kit-react/icon';
+export interface ButtonLabelIconProps extends Partial<SystemIconProps> {
     /**
      * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
      *
      * @default 'medium'
      */
     size?: ButtonSizes;
-    /**
-     * The icon of the Button.
-     * Note: not displayed at `small` size
-     */
-    icon?: CanvasSystemIcon;
     /**
      * Button icon positions can either be `left` or `right`.
      * If no value is provided, it defaults to `left`.
@@ -25,5 +19,5 @@ export interface ButtonLabelIconProps extends BoxProps {
      */
     shouldMirrorIcon?: boolean;
 }
-export declare const ButtonLabelIcon: import("../../../common").ElementComponent<"span", ButtonLabelIconProps>;
+export declare const ButtonLabelIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", ButtonLabelIconProps>;
 //# sourceMappingURL=ButtonLabelIcon.d.ts.map

package/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonLabelIcon.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonLabelIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,WAAW,EAAE,aAAa,EAAC,MAAM,UAAU,CAAC;AAGpD,OAAO,EAAC,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAE1D,MAAM,WAAW,oBAAqB,SAAQ,QAAQ;IACpD;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AASD,eAAO,MAAM,eAAe,0EAyB1B,CAAC"}
+{"version":3,"file":"ButtonLabelIcon.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonLabelIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAE,aAAa,EAAC,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE3E,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC;IACpE;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AASD,eAAO,MAAM,eAAe,2FAyB1B,CAAC"}

package/dist/commonjs/button/lib/parts/ButtonLabelIcon.js

@@ -1,35 +1,13 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonLabelIcon = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var iconSizes = {
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const iconSizes = {
     extraSmall: 18,
     small: 20,
     medium: 20,
@@ -37,12 +15,11 @@ var iconSizes = {
 };
 exports.ButtonLabelIcon = common_1.createComponent('span')({
     displayName: 'ButtonLabelIconNew',
-    Component: function (_a, ref, Element) {
-        var icon = _a.icon, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.shouldMirrorIcon, shouldMirrorIcon = _c === void 0 ? false : _c, elemProps = __rest(_a, ["icon", "size", "shouldMirrorIcon"]);
+    Component: ({ icon, size = 'medium', shouldMirrorIcon = false, ...elemProps }, ref, Element) => {
         if (icon === undefined) {
             return null;
         }
-        var iconSize = iconSizes[size];
-        return (react_1.default.createElement(icon_1.SystemIcon, __assign({ size: iconSize, icon: icon, shouldMirror: shouldMirrorIcon, width: size ? iconSizes[size] : iconSizes.large, height: size ? iconSizes[size] : iconSizes.large, display: "inline-block" }, elemProps)));
+        const iconSize = iconSizes[size];
+        return (react_1.default.createElement(icon_1.SystemIcon, Object.assign({ size: iconSize, icon: icon, shouldMirror: shouldMirrorIcon, width: size ? iconSizes[size] : iconSizes.large, height: size ? iconSizes[size] : iconSizes.large, display: "inline-block" }, elemProps)));
     },
 });

package/dist/commonjs/card/lib/Card.d.ts

@@ -6,8 +6,44 @@ export interface CardProps extends BoxProps {
      */
     children?: React.ReactNode;
 }
-export declare const Card: import("../../common").ElementComponent<"div", CardProps> & {
-    Heading: import("../../common").ElementComponent<"h3", import("./CardHeading").CardHeadingProps>;
-    Body: import("../../common").ElementComponent<"div", import("../../layout").BorderShorthandStyleProps & import("../../layout").BorderColorStyleProps & import("../../layout").BorderRadiusStyleProps & import("../../layout").BorderLineStyleProps & import("../../layout").BorderWidthStyleProps & import("../../layout").BorderLogicalStyleProps & import("../../layout").ColorStyleProps & import("../../layout").DepthStyleProps & import("../../layout").FlexItemStyleProps & import("../../layout").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../../layout").PositionStandardProps & import("../../layout").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps>;
+/**
+ * `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
+ * {@link CardHeading Card.Heading}. `Card` wraps a non-semantic `div` element. The element can be
+ * replaced using the `as` prop, or a `role` or other `aria-*` attributes can be added to give
+ * `Card` semantic meaning.
+ *
+ * **Note**: Changing the `Card` container to certain semantic elements will put accessibility at
+ * risk. For example, using the `as` prop to change the cards to buttons will flatten the content in
+ * the card. Headings, calls to action, etc. will not function as expected for users with
+ * disabilities. Semantic container elements like `<section>`, or using `<li>` grouped together in a
+ * common `<ul>` can be a useful way to elevate the accessibility of your design.
+ */
+export declare const Card: import("@workday/canvas-kit-react/common").ElementComponent<"div", CardProps> & {
+    /**
+     * `Card.Heading` is an optional subcomponent that is meant to describe the Card. Since `Card`
+     * is a non-semantic presentational component, `Card.Heading` does not automatically have any
+     * semantic meaning. If your use case requires the Heading to label the Card, you must do so
+     * manually.
+     *
+     * For example, {@link Modal} (which uses a `Card`) adds an `aria-labelledby` and a `role` to
+     * the `Card`, as well as an `id` to the `Card.Heading`.
+     *
+     * ```tsx
+     * <Card role="dialog" aria-labelledby="card-heading">
+     *   <Card.Heading id="card-heading">Card Title</Card.Heading>
+     *   <Card.Body>Card Contents</Card.Body>
+     * </Card>
+     * ```
+     *
+     * `Card.Heading` defaults to an `<h3>` element, but it can be changed using the `as` prop.
+     */
+    Heading: import("@workday/canvas-kit-react/common").ElementComponent<"h3", import("./CardHeading").CardHeadingProps>;
+    /**
+     * `Card.Body` is a non-semantic subcomponent that contains the body of the card. Attributes may
+     * be added to give `Card.Body` semantic meaning. If `Card.Body` is brief (like in a short
+     * dialog), it may be helpful to add an `aria-describedby` referencing the `id` of the
+     * `Card.Body` to the `Card` container.
+     */
+    Body: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps>;
 };
 //# sourceMappingURL=Card.d.ts.map

package/dist/commonjs/card/lib/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../card/lib/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAK/D,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,IAAI;;;CAsBf,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../card/lib/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAK/D,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,IAAI;IAmBb;;;;;;;;;;;;;;;;;OAiBG;;IAEH;;;;;OAKG;;CAGL,CAAC"}