@workday/canvas-kit-react 7.0.0-alpha.0-next.7 → 7.0.0-alpha.78-next.6

package/dist/commonjs/popup/lib/PopupCloseIcon.js

@@ -31,15 +31,14 @@ var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 var common_1 = require("@workday/canvas-kit-react/common");
 var button_1 = require("@workday/canvas-kit-react/button");
 var hooks_1 = require("./hooks");
-var closeIconSpacing = 11;
-var closeIconSpacingSmall = 9;
-var StyledCloseIcon = common_1.styled(button_1.IconButton)({
+var closeIconSpacing = 4;
+var StyledCloseIcon = common_1.styled(button_1.TertiaryButton)({
     position: 'absolute',
 }, function (_a) {
     var size = _a.size;
     return ({
-        right: size === 'small' ? closeIconSpacingSmall : closeIconSpacing,
-        top: size === 'small' ? closeIconSpacingSmall : closeIconSpacing,
+        right: closeIconSpacing,
+        top: closeIconSpacing,
     });
 });
 exports.PopupCloseIcon = common_1.createComponent('button')({
@@ -48,6 +47,6 @@ exports.PopupCloseIcon = common_1.createComponent('button')({
         var _b = _a.size, size = _b === void 0 ? 'medium' : _b, children = _a.children, model = _a.model, elemProps = __rest(_a, ["size", "children", "model"]);
         var localModel = common_1.useModelContext(hooks_1.PopupModelContext, model);
         var props = hooks_1.usePopupCloseButton(localModel, elemProps, ref);
-        return react_1.default.createElement(StyledCloseIcon, __assign({ as: Element, variant: "plain", size: size, icon: canvas_system_icons_web_1.xIcon }, props));
+        return react_1.default.createElement(StyledCloseIcon, __assign({ as: Element, size: size, icon: canvas_system_icons_web_1.xIcon }, props));
     },
 });

package/dist/commonjs/popup/lib/hooks/useDisableBodyScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDisableBodyScroll.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useDisableBodyScroll.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAE3C;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,UAAW,UAAU,uBAgBrD,CAAC"}
+{"version":3,"file":"useDisableBodyScroll.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useDisableBodyScroll.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAE3C;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,UAAW,UAAU,uBAsBrD,CAAC"}

package/dist/commonjs/popup/lib/hooks/useDisableBodyScroll.js

@@ -19,10 +19,14 @@ var useDisableBodyScroll = function (model, elemProps) {
         if (!visible) {
             return;
         }
+        var overflowY = document.body.style.overflowY;
+        var overflowX = document.body.style.overflowX;
         var overflow = document.body.style.overflow;
         document.body.style.overflow = 'hidden';
         return function () {
             document.body.style.overflow = overflow;
+            document.body.style.overflowY = overflowY;
+            document.body.style.overflowX = overflowX;
         };
     }, [visible]);
     return elemProps;

package/dist/commonjs/segmented-control/lib/SegmentedControl.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { SegmentedControlButtonProps } from './SegmentedControlButton';
 export interface SegmentedControlProps {
     /**
-     * The IconButton children of the SegmentedControl (must be at least two).
+     * The Button children of the SegmentedControl (must be at least two).
      * TODO: Add support for text children
      */
-    children: React.ReactElement<IconButtonProps>[];
+    children: React.ReactElement<SegmentedControlButtonProps>[];
     /**
-     * The value or index of the IconButton that the SegmentedControl should be toggled on to.
-     * If a string is provided, the IconButton with the corresponding value will be selected.
-     * If a number is provided, the IconButton with the corresponding index will be selected.
+     * The value or index of the Button that the SegmentedControl should be toggled on to.
+     * If a string is provided, the Button with the corresponding value will be selected.
+     * If a number is provided, the Button with the corresponding index will be selected.
      * @default 0
      */
     value?: string | number;
@@ -20,6 +20,8 @@ export interface SegmentedControlProps {
      */
     onChange?: (value: string | number) => void;
 }
-declare const SegmentedControl: ({ value, children, onChange, ...elemProps }: SegmentedControlProps) => JSX.Element;
+export declare const SegmentedControl: import("../../common").ElementComponent<"div", SegmentedControlProps> & {
+    Button: import("../../common").ElementComponent<"button", SegmentedControlButtonProps>;
+};
 export default SegmentedControl;
 //# sourceMappingURL=SegmentedControl.d.ts.map

package/dist/commonjs/segmented-control/lib/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAG7E,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,EAAE,CAAC;IAEhD;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC7C;AAsED,QAAA,MAAM,gBAAgB,gDAAmD,qBAAqB,gBAsB7F,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAyB,2BAA2B,EAAC,MAAM,0BAA0B,CAAC;AAE7F,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,2BAA2B,CAAC,EAAE,CAAC;IAE5D;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC7C;AAsBD,eAAO,MAAM,gBAAgB;;CA+B3B,CAAC;AAEH,eAAe,gBAAgB,CAAC"}

package/dist/commonjs/segmented-control/lib/SegmentedControl.js

@@ -41,51 +41,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedControl = void 0;
 var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var button_1 = require("@workday/canvas-kit-react/button");
 var common_1 = require("@workday/canvas-kit-react/common");
-var SegmentedControlContainer = common_1.styled('div')({
-    '& button': {
-        borderRadius: tokens_1.borderRadius.zero,
-        border: "1px solid " + tokens_1.colors.soap500,
-        borderLeft: 'none',
-        '&[aria-pressed="true"]': {
-            borderColor: tokens_1.colors.blueberry400,
-            '&:hover, &:focus:hover': {
-                background: tokens_1.colors.blueberry400,
-            },
-        },
-        '&:first-of-type': {
-            borderRadius: tokens_1.borderRadius.m + " 0 0 " + tokens_1.borderRadius.m,
-            borderLeft: "1px solid " + tokens_1.colors.soap500,
-        },
-        '&:last-of-type': {
-            borderRadius: "0 " + tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0",
-        },
-        '&:focus': __assign({ borderRadius: tokens_1.borderRadius.m, zIndex: 1, animation: 'none', transition: 'all 120ms, border-radius 1ms' }, common_1.mouseFocusBehavior({
-            '&': {
-                borderRadius: tokens_1.borderRadius.zero,
-                '&:first-of-type': {
-                    borderRadius: tokens_1.borderRadius.m + " 0 0 " + tokens_1.borderRadius.m,
-                },
-                '&:last-of-type': {
-                    borderRadius: "0 " + tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0",
-                },
-            },
-        })),
-    },
-}, function (_a) {
-    var theme = _a.theme;
-    return ({
-        '& button[aria-pressed="true"]': {
-            borderColor: theme.canvas.palette.primary.main,
-            '&:hover, &:focus:hover': {
-                background: theme.canvas.palette.primary.main,
-            },
-        },
-    });
-});
+var SegmentedControlButton_1 = require("./SegmentedControlButton");
 var onButtonClick = function (existingOnClick, onChange, index, event) {
     if (existingOnClick) {
         existingOnClick(event);
@@ -100,17 +59,22 @@ var onButtonClick = function (existingOnClick, onChange, index, event) {
         }
     }
 };
-var SegmentedControl = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? 0 : _b, children = _a.children, onChange = _a.onChange, elemProps = __rest(_a, ["value", "children", "onChange"]);
-    return (React.createElement(SegmentedControlContainer, __assign({}, elemProps), React.Children.map(children, function (child, index) {
-        if (typeof child.type === typeof button_1.IconButton) {
-            return React.cloneElement(child, {
-                toggled: typeof value === 'number' ? index === value : child.props.value === value,
-                variant: 'squareFilled',
-                onClick: onButtonClick.bind(undefined, child.props.onClick, onChange, index),
-            });
-        }
-        return child;
-    })));
-};
-exports.default = SegmentedControl;
+exports.SegmentedControl = common_1.createComponent('div')({
+    displayName: 'SegmentedControl',
+    Component: function (_a, ref) {
+        var _b = _a.value, value = _b === void 0 ? 0 : _b, children = _a.children, onChange = _a.onChange, elemProps = __rest(_a, ["value", "children", "onChange"]);
+        return (React.createElement("div", __assign({}, elemProps), React.Children.map(children, function (child, index) {
+            if (typeof child.type === typeof SegmentedControlButton_1.SegmentedControlButton) {
+                return React.cloneElement(child, {
+                    toggled: typeof value === 'number' ? index === value : child.props.value === value,
+                    onClick: onButtonClick.bind(undefined, child.props.onClick, onChange, index),
+                });
+            }
+            return child;
+        })));
+    },
+    subComponents: {
+        Button: SegmentedControlButton_1.SegmentedControlButton,
+    },
+});
+exports.default = exports.SegmentedControl;

package/dist/commonjs/segmented-control/lib/SegmentedControlButton.d.ts

@@ -0,0 +1,8 @@
+import { CanvasSystemIcon } from '@workday/design-assets-types';
+export interface SegmentedControlButtonProps {
+    toggled?: boolean;
+    icon: CanvasSystemIcon;
+    value?: string | number;
+}
+export declare const SegmentedControlButton: import("../../common").ElementComponent<"button", SegmentedControlButtonProps>;
+//# sourceMappingURL=SegmentedControlButton.d.ts.map

package/dist/commonjs/segmented-control/lib/SegmentedControlButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlButton.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlButton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AA4E9D,MAAM,WAAW,2BAA2B;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,sBAAsB,gFAkBjC,CAAC"}

package/dist/commonjs/segmented-control/lib/SegmentedControlButton.js

@@ -0,0 +1,106 @@
+"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.SegmentedControlButton = void 0;
+var react_1 = __importDefault(require("react"));
+var button_1 = require("@workday/canvas-kit-react/button");
+var common_1 = require("@workday/canvas-kit-react/common");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var getIconButtonColors = function (toggled) {
+    return {
+        default: {
+            background: toggled ? tokens_1.colors.blueberry400 : tokens_1.colors.soap200,
+            icon: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.licorice200,
+        },
+        hover: {
+            background: toggled ? tokens_1.colors.blueberry400 : tokens_1.colors.soap300,
+            icon: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.licorice500,
+        },
+        active: {
+            background: toggled ? tokens_1.colors.blueberry400 : tokens_1.colors.soap500,
+            icon: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.licorice500,
+        },
+        focus: {
+            background: toggled ? tokens_1.colors.blueberry400 : undefined,
+            icon: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.licorice500,
+        },
+        disabled: {
+            background: toggled ? tokens_1.colors.soap100 : tokens_1.colors.soap100,
+            icon: tokens_1.colors.soap600,
+            opacity: '1',
+        },
+    };
+};
+var StyledButton = common_1.styled(button_1.BaseButton)({
+    borderRadius: tokens_1.borderRadius.zero,
+    border: "1px solid " + tokens_1.colors.soap500,
+    borderLeft: 'none',
+    minWidth: tokens_1.space.xl,
+    '&:first-of-type': {
+        borderRadius: tokens_1.borderRadius.m + " 0 0 " + tokens_1.borderRadius.m,
+        borderLeft: "1px solid " + tokens_1.colors.soap500,
+    },
+    '&:last-of-type': {
+        borderRadius: "0 " + tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0",
+    },
+    '&[aria-pressed="true"]': {
+        borderColor: tokens_1.colors.blueberry400 + " !important",
+        '&:hover, &:focus:hover': {
+            background: tokens_1.colors.blueberry400,
+        },
+    },
+    '&:focus': __assign({ borderRadius: tokens_1.borderRadius.m, zIndex: 1, animation: 'none', transition: 'all 120ms, border-radius 1ms' }, common_1.mouseFocusBehavior({
+        '&': {
+            borderRadius: tokens_1.borderRadius.zero,
+            '&:first-of-type': {
+                borderRadius: tokens_1.borderRadius.m + " 0 0 " + tokens_1.borderRadius.m,
+            },
+            '&:last-of-type': {
+                borderRadius: "0 " + tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0",
+            },
+        },
+    })),
+}, function (_a) {
+    var theme = _a.theme;
+    return ({
+        '[aria-pressed="true"]': {
+            borderColor: theme.canvas.palette.primary.main,
+            '&:hover, &:focus:hover': {
+                background: theme.canvas.palette.primary.main,
+            },
+        },
+    });
+});
+exports.SegmentedControlButton = common_1.createComponent('button')({
+    displayName: 'Button',
+    Component: function (_a, ref, Element) {
+        var value = _a.value, icon = _a.icon, toggled = _a.toggled, props = __rest(_a, ["value", "icon", "toggled"]);
+        console.warn(props);
+        return (react_1.default.createElement(StyledButton, __assign({ as: Element, "aria-pressed": toggled, value: value, colors: getIconButtonColors(toggled), fillIcon: toggled, ref: ref }, props),
+            react_1.default.createElement(button_1.BaseButton.Icon, { size: "large", icon: icon })));
+    },
+});

package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAsB,iBAAiB,EAAC,MAAM,kCAAkC,CAAC;AAIxF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;OAGG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,wBAAwB,CAAC;IAC3C;;;OAGG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,oBAAY,sBAAsB;IAChC,IAAI,IAAA;IACJ,KAAK,IAAA;CACN;AAED,oBAAY,wBAAwB;IAClC,KAAK,IAAA;IACL,WAAW,IAAA;IACX,IAAI,IAAA;CACL;AA2FD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;IACpF,MAAM,CAAC,aAAa,gCAA0B;IAC9C,MAAM,CAAC,eAAe,kCAA4B;gBAEtC,KAAK,EAAE,cAAc;IAKjC,KAAK;;MAEH;IAEK,iBAAiB;IAGjB,oBAAoB;IAIpB,MAAM;IA+Cb,OAAO,CAAC,YAAY,CAWlB;IAEF,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,qBAAqB,CAS3B;CACH"}
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAsB,iBAAiB,EAAC,MAAM,kCAAkC,CAAC;AAIxF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;OAGG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,wBAAwB,CAAC;IAC3C;;;OAGG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,oBAAY,sBAAsB;IAChC,IAAI,IAAA;IACJ,KAAK,IAAA;CACN;AAED,oBAAY,wBAAwB;IAClC,KAAK,IAAA;IACL,WAAW,IAAA;IACX,IAAI,IAAA;CACL;AA6FD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;IACpF,MAAM,CAAC,aAAa,gCAA0B;IAC9C,MAAM,CAAC,eAAe,kCAA4B;gBAEtC,KAAK,EAAE,cAAc;IAKjC,KAAK;;MAEH;IAEK,iBAAiB;IAGjB,oBAAoB;IAIpB,MAAM;IA4Cb,OAAO,CAAC,YAAY,CAWlB;IAEF,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,qBAAqB,CAS3B;CACH"}

package/dist/commonjs/side-panel/lib/SidePanel.js

@@ -135,7 +135,7 @@ var ChildrenContainer = styled_1.default('div')({
         width: open ? openWidth : closedWidth,
     });
 });
-var ToggleButton = styled_1.default(button_1.IconButton)({
+var ToggleButton = styled_1.default(button_1.TertiaryButton)({
     position: 'absolute',
     bottom: tokens_1.space.s,
 }, function (_a) {
@@ -203,7 +203,7 @@ var SidePanel = /** @class */ (function (_super) {
             React.createElement(ChildrenContainer, { open: open, openWidth: openWidth },
                 header && open ? React.createElement(Header, null, header) : null,
                 this.props.children),
-            React.createElement(SidePanelFooter, { openWidth: openWidth, open: open }, onToggleClick && (React.createElement(ToggleButton, { openDirection: openDirection, "aria-label": open ? closeNavigationAriaLabel : openNavigationAriaLabel, toggled: false, size: "small", onClick: this.onToggleClick, icon: this.toggleButtonDirection(open, openDirection), variant: "circleFilled" })))));
+            React.createElement(SidePanelFooter, { openWidth: openWidth, open: open }, onToggleClick && (React.createElement(ToggleButton, { openDirection: openDirection, "aria-label": open ? closeNavigationAriaLabel : openNavigationAriaLabel, onClick: this.onToggleClick, icon: this.toggleButtonDirection(open, openDirection) })))));
     };
     SidePanel.OpenDirection = SidePanelOpenDirection;
     SidePanel.BackgroundColor = SidePanelBackgroundColor;

package/dist/commonjs/tabs/lib/Tabs.d.ts

@@ -16,7 +16,7 @@ export interface TabsProps<T = any> extends TabsModelConfig<T> {
 export declare const Tabs: import("../../common").Component<TabsProps<any>> & {
     List: import("../../common").ElementComponent<"div", import("./TabsList").TabListProps<unknown>>;
     Item: import("../../common").ElementComponent<"button", import("./TabsItem").TabsItemProps> & {
-        Icon: typeof import("../..").SystemIcon;
+        Icon: import("../../common").ElementComponent<"span", import("../..").SystemIconProps>;
         Text: import("../../common").ElementComponent<"span", {}>;
     };
     Panel: import("../../common").ElementComponent<"div", import("./TabsPanel").TabPanelProps<unknown>>;
@@ -39,7 +39,7 @@ export declare const Tabs: import("../../common").Component<TabsProps<any>> & {
         Card: import("../../common").ElementComponent<"div", import("./menu/MenuCard").MenuCardProps<unknown>>;
         List: import("../../common").ElementComponent<"div", import("./menu/MenuList").MenuListProps<unknown>>;
         Item: import("../../common").ElementComponent<"button", import("./menu/MenuItem").MenuItemProps<unknown>> & {
-            Icon: typeof import("../..").SystemIcon;
+            Icon: import("../../common").ElementComponent<"span", import("../..").SystemIconProps>;
             Text: import("@emotion/styled").StyledComponent<{
                 theme?: import("@emotion/react").Theme | undefined;
                 as?: "symbol" | "object" | "s" | "big" | "link" | "small" | "sub" | "sup" | "circle" | "stop" | "path" | "style" | "map" | "filter" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;

package/dist/commonjs/tabs/lib/TabsItem.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { StyledType, ExtractProps } from '@workday/canvas-kit-react/common';
 import { Box, StackProps } from '@workday/canvas-kit-react/layout';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { TabsModel } from './useTabsModel';
 export interface TabsItemProps extends ExtractProps<typeof Box, never>, Partial<Pick<StackProps, 'spacing'>> {
     /**
@@ -79,7 +78,7 @@ export declare const StyledTabItem: import("@emotion/styled").StyledComponent<im
     hasIcon?: boolean | undefined;
 } & Pick<TabsItemProps, "spacing">, {}, {}>;
 export declare const TabsItem: import("../../common").ElementComponent<"button", TabsItemProps> & {
-    Icon: typeof SystemIcon;
+    Icon: import("../../common").ElementComponent<"span", import("../../icon").SystemIconProps>;
     Text: import("../../common").ElementComponent<"span", {}>;
 };
 export declare const useTabsItem: <P extends {}, R>(model: import("./list").ListModel<unknown>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {

package/dist/commonjs/tabs/lib/TabsItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAKL,UAAU,EAIV,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAE,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAO1D,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;IACtC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,aAAa;;;;;;2CA2FzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;CAkCnB,CAAC;AAEH,eAAO,MAAM,WAAW;;OAoBvB,CAAC"}
+{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAKL,UAAU,EAIV,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAE,UAAU,EAAC,MAAM,kCAAkC,CAAC;AASjE,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;IACtC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,aAAa;;;;;;2CA2FzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;CAkCnB,CAAC;AAEH,eAAO,MAAM,WAAW;;OAoBvB,CAAC"}

package/dist/commonjs/tabs/lib/TabsList.js

@@ -56,7 +56,7 @@ exports.TabsList = common_1.createComponent('div')({
         var children = _a.children, model = _a.model, overflowButton = _a.overflowButton, elemProps = __rest(_a, ["children", "model", "overflowButton"]);
         var localModel = common_1.useModelContext(Tabs_1.TabsModelContext, model);
         var props = exports.useTabsList(localModel, elemProps, ref);
-        return (React.createElement(layout_1.Stack, __assign({ as: Element, position: "relative", borderBottom: "1px solid " + tokens_1.commonColors.divider, marginX: "m", spacing: "xxxs" }, props),
+        return (React.createElement(layout_1.Stack, __assign({ as: Element, position: "relative", borderBottom: "1px solid " + tokens_1.commonColors.divider, paddingX: "m", spacing: "xxxs" }, props),
             list_1.useRenderItems(localModel, children),
             overflowButton));
     },

package/dist/commonjs/tabs/lib/menu/Menu.d.ts

@@ -65,7 +65,7 @@ export declare const Menu: import("../../../common").Component<MenuProps<any>> &
      * HTML. If more complex HTML is provided, consider
      */
     Item: import("../../../common").ElementComponent<"button", import("./MenuItem").MenuItemProps<unknown>> & {
-        Icon: typeof import("../../..").SystemIcon;
+        Icon: import("../../../common").ElementComponent<"span", import("../../..").SystemIconProps>;
         Text: import("@emotion/styled").StyledComponent<{
             theme?: import("@emotion/react").Theme | undefined;
             as?: "symbol" | "object" | "s" | "big" | "link" | "small" | "sub" | "sup" | "circle" | "stop" | "path" | "style" | "map" | "filter" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;

package/dist/commonjs/tabs/lib/menu/MenuItem.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { MenuModel } from './useMenuModel';
 export interface MenuItemProps<T = unknown> {
     /**
@@ -38,7 +37,7 @@ export interface MenuItemProps<T = unknown> {
     hasIcon?: boolean;
 }
 export declare const MenuItem: import("../../../common").ElementComponent<"button", MenuItemProps<unknown>> & {
-    Icon: typeof SystemIcon;
+    Icon: import("../../../common").ElementComponent<"span", import("../../../icon").SystemIconProps>;
     Text: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme | undefined;
         as?: "symbol" | "object" | "s" | "big" | "link" | "small" | "sub" | "sup" | "circle" | "stop" | "path" | "style" | "map" | "filter" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;

package/dist/commonjs/tabs/lib/menu/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/menu/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAM1D,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,OAAO;IACxC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA2FD,eAAO,MAAM,QAAQ;;;;;;CAkCnB,CAAC;AAEH,eAAO,MAAM,WAAW;;OASvB,CAAC"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/menu/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,OAAO;IACxC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA2FD,eAAO,MAAM,QAAQ;;;;;;CAkCnB,CAAC;AAEH,eAAO,MAAM,WAAW;;OASvB,CAAC"}

package/dist/commonjs/text-input/lib/InputIconContainer.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { GrowthBehavior } from '@workday/canvas-kit-react/common';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 export interface InputIconContainerProps extends GrowthBehavior {
-    icon?: React.ReactElement<SystemIcon>;
+    icon?: React.ReactElement<typeof SystemIcon>;
 }
 declare const InputIconContainer: React.FunctionComponent<InputIconContainerProps>;
 export default InputIconContainer;

package/dist/commonjs/text-input/lib/InputIconContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputIconContainer.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputIconContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAEhE,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAE1D,MAAM,WAAW,uBAAwB,SAAQ,cAAc;IAC7D,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;CACvC;AAaD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CASxE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"InputIconContainer.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputIconContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAEhE,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAE1D,MAAM,WAAW,uBAAwB,SAAQ,cAAc;IAC7D,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;CAC9C;AAaD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CASxE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/commonjs/tooltip/lib/Tooltip.d.ts

@@ -24,7 +24,7 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * Determines the tooltip type for accessibility.
      *
      * - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
-     *   `title` prop is the same as the text content of the wrapped element. E.g. IconButtons or
+     *   `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButtons that render an icon or
      *   Ellipsis tooltips.
      * - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
      *   information about the target.

package/dist/commonjs/tooltip/lib/useTooltip.d.ts

@@ -8,7 +8,7 @@ export declare function useTooltip<T extends Element = Element>({ type, titleTex
      * Determines the tooltip type for accessibility.
      *
      * - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
-     *   `title` prop is the same as the text content of the wrapped element. E.g. IconButtons or
+     *   `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButton that renders an icon or
      *   Ellipsis tooltips.
      * - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
      *   information about the target.

package/dist/es6/banner/lib/BannerIcon.js

@@ -36,7 +36,7 @@ export var BannerIcon = createComponent('span')({
         var _b = _a.icon, icon = _b === void 0 ? exclamationTriangleIcon : _b, model = _a.model, elemProps = __rest(_a, ["icon", "model"]);
         var localModel = useModelContext(BannerModelContext, model);
         // SystemIcon is still a class based component so we need to set ref manually.
-        var _c = useBannerIcon(localModel, elemProps, ref), iconRef = _c.ref, defaultIcon = _c.icon, props = __rest(_c, ["ref", "icon"]);
-        return React.createElement(StyledBannerIcon, __assign({ icon: icon !== null && icon !== void 0 ? icon : defaultIcon, iconRef: iconRef }, props));
+        var _c = useBannerIcon(localModel, elemProps), defaultIcon = _c.icon, props = __rest(_c, ["icon"]);
+        return React.createElement(StyledBannerIcon, __assign({ icon: icon !== null && icon !== void 0 ? icon : defaultIcon, ref: ref }, props));
     },
 });

package/dist/es6/button/index.d.ts

@@ -3,9 +3,9 @@ export { SecondaryButton, SecondaryButtonProps } from './lib/SecondaryButton';
 export { TertiaryButton, TertiaryButtonProps } from './lib/TertiaryButton';
 export { DeleteButton, DeleteButtonProps } from './lib/DeleteButton';
 export { DeprecatedButton as deprecated_Button, DeprecatedButtonProps, } from './lib/deprecated_Button';
-export { IconButton, IconButtonProps } from './lib/IconButton';
 export { ToolbarIconButton, ToolbarIconButtonProps } from './lib/ToolbarIconButton';
 export { ToolbarDropdownButton, ToolbarDropdownButtonProps } from './lib/ToolbarDropdownButton';
 export { Hyperlink, HyperlinkProps } from './lib/Hyperlink';
+export { BaseButton, ButtonContainerProps } from './lib/BaseButton';
 export * from './lib/types';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAE,kBAAkB,EAAC,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAC,eAAe,EAAE,oBAAoB,EAAC,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAC,cAAc,EAAE,mBAAmB,EAAC,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAC,YAAY,EAAE,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AACnE,OAAO,EACL,gBAAgB,IAAI,iBAAiB,EACrC,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAC,iBAAiB,EAAE,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAC,qBAAqB,EAAE,0BAA0B,EAAC,MAAM,6BAA6B,CAAC;AAC9F,OAAO,EAAC,SAAS,EAAE,cAAc,EAAC,MAAM,iBAAiB,CAAC;AAC1D,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAE,kBAAkB,EAAC,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAC,eAAe,EAAE,oBAAoB,EAAC,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAC,cAAc,EAAE,mBAAmB,EAAC,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAC,YAAY,EAAE,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AACnE,OAAO,EACL,gBAAgB,IAAI,iBAAiB,EACrC,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAC,iBAAiB,EAAE,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAC,qBAAqB,EAAE,0BAA0B,EAAC,MAAM,6BAA6B,CAAC;AAC9F,OAAO,EAAC,SAAS,EAAE,cAAc,EAAC,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAC,UAAU,EAAE,oBAAoB,EAAC,MAAM,kBAAkB,CAAC;AAClE,cAAc,aAAa,CAAC"}

package/dist/es6/button/index.js

@@ -3,8 +3,8 @@ export { SecondaryButton } from './lib/SecondaryButton';
 export { TertiaryButton } from './lib/TertiaryButton';
 export { DeleteButton } from './lib/DeleteButton';
 export { DeprecatedButton as deprecated_Button, } from './lib/deprecated_Button';
-export { IconButton } from './lib/IconButton';
 export { ToolbarIconButton } from './lib/ToolbarIconButton';
 export { ToolbarDropdownButton } from './lib/ToolbarDropdownButton';
 export { Hyperlink } from './lib/Hyperlink';
+export { BaseButton } from './lib/BaseButton';
 export * from './lib/types';

package/dist/es6/button/lib/BaseButton.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { GrowthBehavior } from '@workday/canvas-kit-react/common';
+import { BoxProps } from '@workday/canvas-kit-react/layout';
+import { ButtonColors, ButtonSizes, IconPositions, TertiaryButtonSizes } from './types';
+import { CanvasSystemIcon } from '@workday/design-assets-types';
+export interface ButtonContainerProps extends BoxProps, GrowthBehavior {
+    colors?: ButtonColors;
+    /**
+     * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+     * If no size is provided, it will default to `medium`.
+     *
+     * @default 'medium'
+     */
+    size?: ButtonSizes;
+    /**
+     * The ref to the button that the styled component renders.
+     */
+    ref?: React.Ref<HTMLButtonElement>;
+    /**
+     * Whether the icon should received filled (colored background layer) or regular styles.
+     * Corresponds to `toggled` in ToolbarIconButton
+     */
+    fillIcon?: boolean;
+}
+export declare const getMinWidthStyles: (children: React.ReactNode, size: ButtonSizes | TertiaryButtonSizes) => "auto" | "24px" | "32px" | "40px" | "80px" | "48px" | "112px" | "96px";
+export declare const getPaddingStyles: (children: React.ReactNode, size: ButtonSizes | TertiaryButtonSizes, icon: CanvasSystemIcon | undefined, iconPosition: IconPositions | undefined) => string | 0;
+export declare const BaseButton: import("../../common").ElementComponent<"button", ButtonContainerProps> & {
+    Icon: import("../../common").ElementComponent<"span", import("./parts/ButtonLabelIcon").ButtonLabelIconProps>;
+    Label: import("../../common").ElementComponent<"span", import("./parts/ButtonLabel").ButtonLabelProps>;
+};
+//# sourceMappingURL=BaseButton.d.ts.map

package/dist/es6/button/lib/BaseButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAEL,cAAc,EAMf,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAa,MAAM,kCAAkC,CAAC;AAGtE,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAGtF,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,QAAQ,EAAE,cAAc;IACpE,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgLD,eAAO,MAAM,iBAAiB,aAClB,MAAM,SAAS,QACnB,WAAW,GAAG,mBAAmB,2EAcxC,CAAC;AAEF,eAAO,MAAM,gBAAgB,aACjB,MAAM,SAAS,QACnB,WAAW,GAAG,mBAAmB,QACjC,gBAAgB,GAAG,SAAS,gBACpB,aAAa,GAAG,SAAS,eAiDxC,CAAC;AAEF,eAAO,MAAM,UAAU;;;CAarB,CAAC"}