@workday/canvas-kit-react 7.0.0-alpha.0-next.7 → 7.0.0-alpha.80-next.8

package/dist/es6/icon/lib/SystemIcon.js

@@ -1,16 +1,3 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -37,6 +24,7 @@ import * as React from 'react';
 import { iconColors } from '@workday/canvas-kit-react/tokens';
 import { CanvasIconTypes } from '@workday/design-assets-types';
 import Icon from './Icon';
+import { createComponent } from '../../common';
 export var systemIconStyles = function (_a) {
     var accent = _a.accent, accentHover = _a.accentHover, _b = _a.background, background = _b === void 0 ? 'transparent' : _b, _c = _a.backgroundHover, backgroundHover = _c === void 0 ? 'transparent' : _c, _d = _a.color, color = _d === void 0 ? iconColors.standard : _d, _e = _a.colorHover, colorHover = _e === void 0 ? iconColors.hover : _e, fill = _a.fill, fillHover = _a.fillHover;
     return ({
@@ -60,13 +48,10 @@ export var systemIconStyles = function (_a) {
         },
     });
 };
-var SystemIcon = /** @class */ (function (_super) {
-    __extends(SystemIcon, _super);
-    function SystemIcon() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SystemIcon.prototype.render = function () {
-        var _a = this.props, _b = _a.background, background = _b === void 0 ? 'transparent' : _b, _c = _a.backgroundHover, backgroundHover = _c === void 0 ? 'transparent' : _c, _d = _a.color, color = _d === void 0 ? iconColors.standard : _d, _e = _a.colorHover, colorHover = _e === void 0 ? iconColors.hover : _e, icon = _a.icon, iconRef = _a.iconRef, accent = _a.accent, accentHover = _a.accentHover, fill = _a.fill, fillHover = _a.fillHover, size = _a.size, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["background", "backgroundHover", "color", "colorHover", "icon", "iconRef", "accent", "accentHover", "fill", "fillHover", "size", "shouldMirror"]);
+var SystemIcon = createComponent('span')({
+    displayName: 'SystemIcon',
+    Component: function (_a, ref, Element) {
+        var _b = _a.background, background = _b === void 0 ? 'transparent' : _b, _c = _a.backgroundHover, backgroundHover = _c === void 0 ? 'transparent' : _c, _d = _a.color, color = _d === void 0 ? iconColors.standard : _d, _e = _a.colorHover, colorHover = _e === void 0 ? iconColors.hover : _e, icon = _a.icon, accent = _a.accent, accentHover = _a.accentHover, fill = _a.fill, fillHover = _a.fillHover, size = _a.size, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["background", "backgroundHover", "color", "colorHover", "icon", "accent", "accentHover", "fill", "fillHover", "size", "shouldMirror"]);
         var style = systemIconStyles({
             accent: accent,
             accentHover: accentHover,
@@ -77,8 +62,7 @@ var SystemIcon = /** @class */ (function (_super) {
             fill: fill,
             fillHover: fillHover,
         });
-        return (React.createElement(Icon, __assign({ src: icon, type: CanvasIconTypes.System, size: size, styles: style, iconRef: iconRef, shouldMirror: shouldMirror }, elemProps)));
-    };
-    return SystemIcon;
-}(React.Component));
+        return (React.createElement(Icon, __assign({ src: icon, type: CanvasIconTypes.System, size: size, as: Element, shouldMirror: shouldMirror, ref: ref, styles: style }, elemProps)));
+    },
+});
 export default SystemIcon;

package/dist/es6/icon/lib/SystemIconCircle.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { SystemIconProps } from './SystemIcon';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
 export declare enum SystemIconCircleSize {
@@ -9,7 +8,7 @@ export declare enum SystemIconCircleSize {
     xl = 64,
     xxl = 120
 }
-export interface SystemIconCircleProps extends Pick<SystemIconProps, 'iconRef' | 'shouldMirror'> {
+export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirror'> {
     /**
      * The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
      * @default colors.soap300
@@ -25,8 +24,6 @@ export interface SystemIconCircleProps extends Pick<SystemIconProps, 'iconRef' |
      */
     size?: SystemIconCircleSize | number;
 }
-export default class SystemIconCircle extends React.Component<SystemIconCircleProps> {
-    static Size: typeof SystemIconCircleSize;
-    render(): JSX.Element;
-}
+declare const SystemIconCircle: import("../../common").ElementComponent<"span", SystemIconCircleProps>;
+export default SystemIconCircle;
 //# sourceMappingURL=SystemIconCircle.d.ts.map

package/dist/es6/icon/lib/SystemIconCircle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAmB,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AACzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,cAAc,CAAC;IAC9F;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;CACtC;AA4BD,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,qBAAqB,CAAC;IAClF,MAAM,CAAC,IAAI,8BAAwB;IAEnC,MAAM;CA0BP"}
+{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAIA,OAAmB,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AACzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IAClF;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;CACtC;AA4BD,QAAA,MAAM,gBAAgB,wEA8BpB,CAAC;AAEH,eAAe,gBAAgB,CAAC"}

package/dist/es6/icon/lib/SystemIconCircle.js

@@ -1,16 +1,3 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -38,7 +25,7 @@ import styled from '@emotion/styled';
 import isPropValid from '@emotion/is-prop-valid';
 import { colors, borderRadius } from '@workday/canvas-kit-react/tokens';
 import SystemIcon from './SystemIcon';
-import { pickForegroundColor } from '@workday/canvas-kit-react/common';
+import { createComponent, pickForegroundColor } from '@workday/canvas-kit-react/common';
 export var SystemIconCircleSize;
 (function (SystemIconCircleSize) {
     SystemIconCircleSize[SystemIconCircleSize["xs"] = 16] = "xs";
@@ -75,19 +62,14 @@ var Container = styled('div', {
         height: size,
     });
 });
-var SystemIconCircle = /** @class */ (function (_super) {
-    __extends(SystemIconCircle, _super);
-    function SystemIconCircle() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SystemIconCircle.prototype.render = function () {
-        var _a = this.props, _b = _a.background, background = _b === void 0 ? colors.soap200 : _b, _c = _a.size, size = _c === void 0 ? SystemIconCircleSize.l : _c, icon = _a.icon, iconRef = _a.iconRef, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["background", "size", "icon", "iconRef", "shouldMirror"]);
+var SystemIconCircle = createComponent('span')({
+    displayName: 'SystemIconCircle',
+    Component: function (_a, ref, Element) {
+        var _b = _a.background, background = _b === void 0 ? colors.soap200 : _b, _c = _a.size, size = _c === void 0 ? SystemIconCircleSize.l : _c, icon = _a.icon, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["background", "size", "icon", "shouldMirror"]);
         var iconColor = pickForegroundColor(background, 'rgba(0,0,0,0.65)', colors.frenchVanilla100);
         var iconSize = size * 0.625;
         return (React.createElement(Container, __assign({ background: background, size: size }, elemProps),
-            React.createElement(SystemIcon, { icon: icon, color: iconColor, colorHover: iconColor, size: iconSize, iconRef: iconRef, shouldMirror: shouldMirror })));
-    };
-    SystemIconCircle.Size = SystemIconCircleSize;
-    return SystemIconCircle;
-}(React.Component));
+            React.createElement(SystemIcon, { icon: icon, color: iconColor, colorHover: iconColor, as: Element, size: iconSize, ref: ref, shouldMirror: shouldMirror })));
+    },
+});
 export default SystemIconCircle;

package/dist/es6/layout/lib/Box.d.ts

@@ -10,6 +10,23 @@ import { SpaceStyleProps } from './utils/space';
 export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & OtherStyleProps & PositionStyleProps & SpaceStyleProps & {
     children?: React.ReactNode;
 };
+/**
+ * A function that allows us to call Box styles on an element and reduce the amount of elements in the React Dom tree.
+ * Instead of using the `as` in a styled function, you can just call this instead to pass those props to the styled element
+ * @example
+ * import { boxStyleFn } from '@workday/canvas-kit-react/layout';
+ * const StyledHeader = styled('h1')(
+ *  boxStyleFn,
+ *  {
+ *    fontWeight: 400,
+ *  }
+ * )
+ *
+ * ....
+ *
+ * <StyledHeader color='red'>Hello World</StyledHeader>
+ */
+export declare const boxStyleFn: <P extends BoxProps>(props: P) => {};
 /**
  * `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
  * It is highly flexible, and its primary purpose is to build other components.
@@ -23,7 +40,7 @@ export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStylePr
  *
  * // `Card`'s default values are set using `BoxProps`
  * const Card = (props: CardProps) => (
- *   <Box depth={2} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
+ *   <Box depth={1} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
  * );
  *
  */

package/dist/es6/layout/lib/Box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,QAAQ,GAAG,gBAAgB,GACrC,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,gBAAgB,GAChB,eAAe,GACf,kBAAkB,GAClB,eAAe,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAqCJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,unBAad,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,QAAQ,GAAG,gBAAgB,GACrC,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,gBAAgB,GAChB,eAAe,GACf,kBAAkB,GAClB,eAAe,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAQJ;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,sCAsBtB,CAAC;AA+BF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,unBAad,CAAC"}

package/dist/es6/layout/lib/Box.js

@@ -37,6 +37,45 @@ var omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border',
 var shouldForwardProp = function (prop) {
     return isPropValid(prop) && !omittedProps.includes(prop);
 };
+/**
+ * A function that allows us to call Box styles on an element and reduce the amount of elements in the React Dom tree.
+ * Instead of using the `as` in a styled function, you can just call this instead to pass those props to the styled element
+ * @example
+ * import { boxStyleFn } from '@workday/canvas-kit-react/layout';
+ * const StyledHeader = styled('h1')(
+ *  boxStyleFn,
+ *  {
+ *    fontWeight: 400,
+ *  }
+ * )
+ *
+ * ....
+ *
+ * <StyledHeader color='red'>Hello World</StyledHeader>
+ */
+export var boxStyleFn = function (props) {
+    return [
+        {
+            boxSizing: 'border-box',
+        },
+        border,
+        color,
+        depth,
+        flexItem,
+        layout,
+        position,
+        space,
+    ].reduce(function (result, style) {
+        // @ts-ignore
+        var temp = typeof style === 'function' ? style(props) : style;
+        // eslint-disable-next-line guard-for-in
+        for (var key in temp) {
+            // @ts-ignore
+            result[key] = temp[key];
+        }
+        return result;
+    }, {});
+};
 // Meant to be used with elements. The `shouldForwardProps` will remove all style props
 var StyledBoxElement = styled('div', { shouldForwardProp: shouldForwardProp })({
     boxSizing: 'border-box',
@@ -58,7 +97,7 @@ var StyledBoxComponent = styled('div')({
  *
  * // `Card`'s default values are set using `BoxProps`
  * const Card = (props: CardProps) => (
- *   <Box depth={2} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
+ *   <Box depth={1} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
  * );
  *
  */

package/dist/es6/layout/lib/Flex.d.ts

@@ -15,7 +15,7 @@ export declare type FlexProps = BoxProps & FlexStyleProps;
  *
  * // `Card`'s default values are set using `FlexProps`
  * const Card = (props: CardProps) => (
- *   <Flex flexDirection="column" alignItems="flex-start" depth={2} space="m" {...props}>
+ *   <Flex flexDirection="column" alignItems="flex-start" depth={1} space="m" {...props}>
  *     <h1>Hello, Card!</h1>
  *     <p>This card uses flexbox to set its layout.</p>
  *   </Flex>

package/dist/es6/layout/lib/Flex.js

@@ -42,7 +42,7 @@ var StyledFlex = styled(Box)({
  *
  * // `Card`'s default values are set using `FlexProps`
  * const Card = (props: CardProps) => (
- *   <Flex flexDirection="column" alignItems="flex-start" depth={2} space="m" {...props}>
+ *   <Flex flexDirection="column" alignItems="flex-start" depth={1} space="m" {...props}>
  *     <h1>Hello, Card!</h1>
  *     <p>This card uses flexbox to set its layout.</p>
  *   </Flex>

package/dist/es6/modal/lib/ModalCard.js

@@ -30,6 +30,6 @@ export var ModalCard = createComponent('div')({
         var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
         var localModel = useModelContext(PopupModelContext, model);
         var props = useModalCard(localModel, elemProps, ref);
-        return (React.createElement(Popup.Card, __assign({ as: Element, width: 440, borderWidth: 0, margin: "xl" }, props), children));
+        return (React.createElement(Popup.Card, __assign({ as: Element, width: 440, borderWidth: 0, margin: "xl", depth: 6 }, props), children));
     },
 });

package/dist/es6/modal/lib/ModalOverflowOverlay.js

@@ -31,6 +31,6 @@ export var ModalOverflowOverlay = createComponent('div')({
     displayName: 'Modal.OverflowOverlay',
     Component: function (_a, ref, Element) {
         var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
-        return (React.createElement(StyledOverlay, __assign({ as: Element, ref: ref, overflow: "auto" }, elemProps), children));
+        return (React.createElement(StyledOverlay, __assign({ as: Element, ref: ref, overflowX: "hidden", overflowY: "auto" }, elemProps), children));
     },
 });

package/dist/es6/pagination/lib/Pagination/Controls.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 import { PaginationModel } from './types';
-export declare type ControlButtonProps = IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export declare type ControlButtonProps = TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     model: PaginationModel;
 };
 export declare type ControlsProps = React.HTMLAttributes<HTMLDivElement>;

package/dist/es6/pagination/lib/Pagination/Controls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/Controls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAQ7E,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAIxC,oBAAY,kBAAkB,GAAG,eAAe,GAC9C,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC9C,KAAK,EAAE,eAAe,CAAC;CACxB,CAAC;AAEJ,oBAAY,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjE,eAAO,MAAM,QAAQ,4DAMpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qCAAoC,kBAAkB,gBAqBnF,CAAC;AAEF,eAAO,MAAM,oBAAoB,qCAAoC,kBAAkB,gBAqBtF,CAAC;AAEF,eAAO,MAAM,gBAAgB,qCAAoC,kBAAkB,gBAqBlF,CAAC;AAEF,eAAO,MAAM,gBAAgB,qCAAoC,kBAAkB,gBAqBlF,CAAC"}
+{"version":3,"file":"Controls.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/Controls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAQrF,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAIxC,oBAAY,kBAAkB,GAAG,mBAAmB,GAClD,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC9C,KAAK,EAAE,eAAe,CAAC;CACxB,CAAC;AAEJ,oBAAY,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjE,eAAO,MAAM,QAAQ,4DAMpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qCAAoC,kBAAkB,gBAoBnF,CAAC;AAEF,eAAO,MAAM,oBAAoB,qCAAoC,kBAAkB,gBAoBtF,CAAC;AAEF,eAAO,MAAM,gBAAgB,qCAAoC,kBAAkB,gBAoBlF,CAAC;AAEF,eAAO,MAAM,gBAAgB,qCAAoC,kBAAkB,gBAoBlF,CAAC"}

package/dist/es6/pagination/lib/Pagination/Controls.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { IconButton } from '@workday/canvas-kit-react/button';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
 import { chevronLeftSmallIcon, chevron2xLeftSmallIcon, chevronRightSmallIcon, chevron2xRightSmallIcon, } from '@workday/canvas-system-icons-web';
 import { HStack } from '@workday/canvas-kit-react/layout';
 import { useRTL } from './common/utils/useRTL';
@@ -41,7 +41,7 @@ export var JumpToFirstButton = function (_a) {
     };
     var shouldUseRTL = useRTL().shouldUseRTL;
     var icon = shouldUseRTL ? chevron2xRightSmallIcon : chevron2xLeftSmallIcon;
-    return (React.createElement(IconButton, __assign({ "aria-disabled": isDisabled || undefined, variant: "square", size: "small", icon: icon, onClick: handleClick }, restProps)));
+    return (React.createElement(TertiaryButton, __assign({ "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick }, restProps)));
 };
 export var StepToPreviousButton = function (_a) {
     var onClick = _a.onClick, model = _a.model, restProps = __rest(_a, ["onClick", "model"]);
@@ -55,7 +55,7 @@ export var StepToPreviousButton = function (_a) {
     };
     var shouldUseRTL = useRTL().shouldUseRTL;
     var icon = shouldUseRTL ? chevronRightSmallIcon : chevronLeftSmallIcon;
-    return (React.createElement(IconButton, __assign({ "aria-disabled": isDisabled || undefined, variant: "square", size: "small", icon: icon, onClick: handleClick }, restProps)));
+    return (React.createElement(TertiaryButton, __assign({ "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick }, restProps)));
 };
 export var StepToNextButton = function (_a) {
     var model = _a.model, onClick = _a.onClick, restProps = __rest(_a, ["model", "onClick"]);
@@ -69,7 +69,7 @@ export var StepToNextButton = function (_a) {
     };
     var shouldUseRTL = useRTL().shouldUseRTL;
     var icon = shouldUseRTL ? chevronLeftSmallIcon : chevronRightSmallIcon;
-    return (React.createElement(IconButton, __assign({ "aria-disabled": isDisabled || undefined, variant: "square", size: "small", icon: icon, onClick: handleClick }, restProps)));
+    return (React.createElement(TertiaryButton, __assign({ "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick }, restProps)));
 };
 export var JumpToLastButton = function (_a) {
     var model = _a.model, onClick = _a.onClick, restProps = __rest(_a, ["model", "onClick"]);
@@ -83,5 +83,5 @@ export var JumpToLastButton = function (_a) {
     };
     var shouldUseRTL = useRTL().shouldUseRTL;
     var icon = shouldUseRTL ? chevron2xLeftSmallIcon : chevron2xRightSmallIcon;
-    return (React.createElement(IconButton, __assign({ "aria-disabled": isDisabled || undefined, variant: "square", size: "small", icon: icon, onClick: handleClick }, restProps)));
+    return (React.createElement(TertiaryButton, __assign({ "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick }, restProps)));
 };

package/dist/es6/pagination/lib/Pagination/PageButton.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
 import { PaginationModel } from './types';
-export declare type PageButtonProps = IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export declare type PageButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     model: PaginationModel;
     pageNumber: number;
 };

package/dist/es6/pagination/lib/Pagination/PageButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageButton.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/PageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAiBxC,oBAAY,eAAe,GAAG,eAAe,GAC3C,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC9C,KAAK,EAAE,eAAe,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEJ,eAAO,MAAM,UAAU,2DAMpB,eAAe,gBAqBjB,CAAC"}
+{"version":3,"file":"PageButton.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/PageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAwCxC,oBAAY,eAAe,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC5E,KAAK,EAAE,eAAe,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,UAAU,2DAMpB,eAAe,gBAoBjB,CAAC"}

package/dist/es6/pagination/lib/Pagination/PageButton.js

@@ -22,17 +22,42 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { styled } from '@workday/canvas-kit-react/common';
-import canvas, { type } from '@workday/canvas-kit-react/tokens';
-import { IconButton } from '@workday/canvas-kit-react/button';
-var toggledStyles = {
-    color: canvas.colors.frenchVanilla100,
-    fontWeight: 700,
-    pointerEvents: 'none',
-};
-var StyledPageButton = styled(IconButton)(__assign({}, type.levels.subtext.large), function (_a) {
+import { borderRadius, colors, space } from '@workday/canvas-kit-react/tokens';
+import { BaseButton } from '@workday/canvas-kit-react/button';
+var StyledPageButton = styled(BaseButton)({
+    minWidth: space.l,
+    width: space.l,
+    borderRadius: borderRadius.circle,
+    height: space.l,
+}, function (_a) {
     var toggled = _a.toggled;
-    return toggled ? toggledStyles : {};
+    return {
+        fontWeight: toggled ? 700 : 'normal',
+    };
 });
+var getPaginationButtonColors = function (toggled) {
+    return {
+        default: {
+            background: toggled ? colors.blueberry400 : 'transparent',
+            label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
+        },
+        hover: {
+            background: toggled ? colors.blueberry400 : colors.soap300,
+            label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
+        },
+        active: {
+            background: toggled ? colors.blueberry400 : 'transparent',
+            label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
+        },
+        focus: {
+            background: toggled ? colors.blueberry400 : 'transparent',
+            label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
+        },
+        disabled: {
+            background: colors.licorice100,
+        },
+    };
+};
 export var PageButton = function (_a) {
     var model = _a.model, onClick = _a.onClick, pageNumber = _a.pageNumber, children = _a.children, elemProps = __rest(_a, ["model", "onClick", "pageNumber", "children"]);
     var isCurrentPage = pageNumber === model.state.currentPage;
@@ -40,5 +65,5 @@ export var PageButton = function (_a) {
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
         model.events.goTo(pageNumber);
     };
-    return (React.createElement(StyledPageButton, __assign({ "aria-current": isCurrentPage ? 'page' : undefined, "aria-pressed": undefined, onClick: handleClick, size: "small", toggled: isCurrentPage, variant: "square" }, elemProps), children || pageNumber));
+    return (React.createElement(StyledPageButton, __assign({ "aria-current": isCurrentPage ? 'page' : undefined, colors: getPaginationButtonColors(isCurrentPage), "aria-pressed": undefined, onClick: handleClick, toggled: isCurrentPage }, elemProps), children || pageNumber));
 };

package/dist/es6/pagination/lib/Pagination/Pagination.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 import { PaginationModel } from './types';
 import { PaginationNavProps } from './Nav';
 import { ControlsProps } from './Controls';
@@ -30,10 +30,10 @@ export declare type PaginationProps = PaginationConfigurationProps | PaginationM
 export declare const Pagination: {
     (props: PaginationProps): JSX.Element;
     Controls(props: ControlsProps): JSX.Element;
-    JumpToFirstButton(props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
-    StepToPreviousButton(props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
-    StepToNextButton(props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
-    JumpToLastButton(props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
+    JumpToFirstButton(props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
+    StepToPreviousButton(props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
+    StepToNextButton(props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
+    JumpToLastButton(props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
     PageList(props: Omit<PageListProps, 'model'>): JSX.Element;
     PageListItem(props: PageListItemProps): JSX.Element;
     PageButton({ "aria-label": ariaLabel, ...elemProps }: Omit<PageButtonProps, 'model'>): JSX.Element;

package/dist/es6/pagination/lib/Pagination/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAGxC,OAAO,EAAgB,kBAAkB,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,EAML,aAAa,EACd,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAW,aAAa,EAAgB,iBAAiB,EAAC,MAAM,YAAY,CAAC;AACpF,OAAO,EAAa,eAAe,EAAC,MAAM,cAAc,CAAC;AAGzD,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAC,cAAc,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAEpD,OAAO,EAAoB,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAE9E,eAAO,MAAM,iBAAiB,gCAA6C,CAAC;AAE5E,aAAK,4BAA4B,GAAG,kBAAkB,GAAG;IACvD,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,aAAK,oBAAoB,GAAG,kBAAkB,GAAG;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,KAAK,EAAE,eAAe,CAAC;IACvB,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB,CAAC;AAMF,oBAAY,eAAe,GAAG,4BAA4B,GAAG,oBAAoB,CAAC;AAElF,eAAO,MAAM,UAAU;YAAW,eAAe;;6BA4BxC,eAAe,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;gCAS/D,eAAe,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;4BAS/D,eAAe,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;4BAS/D,eAAe,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;oBAQ1C,KAAK,aAAa,EAAE,OAAO,CAAC;wBAOxB,iBAAiB;0DAOhD,KAAK,eAAe,EAAE,OAAO,CAAC;6BAOM,KAAK,sBAAsB,EAAE,OAAO,CAAC;2BAOzC,aAAa;yBAWb,kBAAkB;qBAItB,KAAK,cAAc,EAAE,OAAO,CAAC;CArF3D,CAAC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAErE,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAGxC,OAAO,EAAgB,kBAAkB,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,EAML,aAAa,EACd,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAW,aAAa,EAAgB,iBAAiB,EAAC,MAAM,YAAY,CAAC;AACpF,OAAO,EAAa,eAAe,EAAC,MAAM,cAAc,CAAC;AAGzD,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAC,cAAc,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAEpD,OAAO,EAAoB,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAE9E,eAAO,MAAM,iBAAiB,gCAA6C,CAAC;AAE5E,aAAK,4BAA4B,GAAG,kBAAkB,GAAG;IACvD,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,aAAK,oBAAoB,GAAG,kBAAkB,GAAG;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,KAAK,EAAE,eAAe,CAAC;IACvB,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB,CAAC;AAMF,oBAAY,eAAe,GAAG,4BAA4B,GAAG,oBAAoB,CAAC;AAElF,eAAO,MAAM,UAAU;YAAW,eAAe;;6BA4BxC,mBAAmB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;gCASnE,mBAAmB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;4BASnE,mBAAmB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;4BASnE,mBAAmB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;oBAQ9C,KAAK,aAAa,EAAE,OAAO,CAAC;wBAOxB,iBAAiB;0DAOhD,KAAK,eAAe,EAAE,OAAO,CAAC;6BAOM,KAAK,sBAAsB,EAAE,OAAO,CAAC;2BAOzC,aAAa;yBAWb,kBAAkB;qBAItB,KAAK,cAAc,EAAE,OAAO,CAAC;CArF3D,CAAC"}

package/dist/es6/popup/lib/PopupCard.js

@@ -63,7 +63,7 @@ export var PopupCard = createComponent('div')({
         }, [localModel.state.placement]);
         // As is a Stack that will render an element of `Element`
         var As = useConstant(function () { return Stack.as(Element); });
-        return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", padding: "l", depth: 2, maxWidth: "calc(100vw - " + space.l + ")", spacing: 0, flexDirection: "column", minHeight: 0, maxHeight: "calc(100vh - " + (elemProps.margin
+        return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", padding: "l", depth: 5, maxWidth: "calc(100vw - " + space.l + ")", spacing: 0, flexDirection: "column", minHeight: 0, maxHeight: "calc(100vh - " + (elemProps.margin
                 ? space[elemProps.margin] || elemProps.margin
                 : space.xl) + " * 2)", overflowY: "auto" // force IE11 to limit the flex size of the card. Without this, the body isn't allowed to overflow properly: https://github.com/philipwalton/flexbugs/issues/216#issuecomment-453053557
          }, props), children));

package/dist/es6/popup/lib/PopupCloseIcon.d.ts

@@ -1,7 +1,7 @@
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { IconButton } from '@workday/canvas-kit-react/button';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
 import { PopupModel } from './hooks';
-export interface PopupCloseIconProps extends ExtractProps<typeof IconButton, never> {
+export interface PopupCloseIconProps extends ExtractProps<typeof TertiaryButton, never> {
     /**
      * Optionally pass a model directly to this component. Default is to implicitly use the same
      * model as the container component which uses React context. Only use this for advanced use-cases

package/dist/es6/popup/lib/PopupCloseIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupCloseIcon.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCloseIcon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAKL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAE5D,OAAO,EAAsB,UAAU,EAAoB,MAAM,SAAS,CAAC;AAK3E,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC;IACjF;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAYD,eAAO,MAAM,cAAc,wEAWzB,CAAC"}
+{"version":3,"file":"PopupCloseIcon.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCloseIcon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAKL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAEhE,OAAO,EAAsB,UAAU,EAAoB,MAAM,SAAS,CAAC;AAI3E,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,cAAc,EAAE,KAAK,CAAC;IACrF;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAYD,eAAO,MAAM,cAAc,wEAWzB,CAAC"}

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

@@ -23,17 +23,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { xIcon } from '@workday/canvas-system-icons-web';
 import { styled, createComponent, useModelContext, } from '@workday/canvas-kit-react/common';
-import { IconButton } from '@workday/canvas-kit-react/button';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
 import { usePopupCloseButton, PopupModelContext } from './hooks';
-var closeIconSpacing = 11;
-var closeIconSpacingSmall = 9;
-var StyledCloseIcon = styled(IconButton)({
+var closeIconSpacing = 4;
+var StyledCloseIcon = styled(TertiaryButton)({
     position: 'absolute',
 }, function (_a) {
     var size = _a.size;
     return ({
-        right: size === 'small' ? closeIconSpacingSmall : closeIconSpacing,
-        top: size === 'small' ? closeIconSpacingSmall : closeIconSpacing,
+        right: closeIconSpacing,
+        top: closeIconSpacing,
     });
 });
 export var PopupCloseIcon = createComponent('button')({
@@ -42,6 +41,6 @@ export var PopupCloseIcon = 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 = useModelContext(PopupModelContext, model);
         var props = usePopupCloseButton(localModel, elemProps, ref);
-        return React.createElement(StyledCloseIcon, __assign({ as: Element, variant: "plain", size: size, icon: xIcon }, props));
+        return React.createElement(StyledCloseIcon, __assign({ as: Element, size: size, icon: xIcon }, props));
     },
 });

package/dist/es6/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/es6/popup/lib/hooks/useDisableBodyScroll.js

@@ -13,10 +13,14 @@ export 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/es6/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/es6/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"}