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

package/dist/commonjs/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/commonjs/pagination/lib/Pagination/Controls.js

@@ -45,7 +45,7 @@ exports.JumpToLastButton = exports.StepToNextButton = exports.StepToPreviousButt
 var React = __importStar(require("react"));
 var button_1 = require("@workday/canvas-kit-react/button");
 var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var layout_1 = require("@workday/canvas-kit-labs-react/layout");
+var layout_1 = require("@workday/canvas-kit-react/layout");
 var useRTL_1 = require("./common/utils/useRTL");
 var Controls = function (_a) {
     var children = _a.children, elemProps = __rest(_a, ["children"]);
@@ -64,7 +64,7 @@ var JumpToFirstButton = function (_a) {
     };
     var shouldUseRTL = useRTL_1.useRTL().shouldUseRTL;
     var icon = shouldUseRTL ? canvas_system_icons_web_1.chevron2xRightSmallIcon : canvas_system_icons_web_1.chevron2xLeftSmallIcon;
-    return (React.createElement(button_1.IconButton, __assign({ "aria-disabled": isDisabled || undefined, variant: "square", size: "small", icon: icon, onClick: handleClick }, restProps)));
+    return (React.createElement(button_1.TertiaryButton, __assign({ "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick }, restProps)));
 };
 exports.JumpToFirstButton = JumpToFirstButton;
 var StepToPreviousButton = function (_a) {
@@ -79,7 +79,7 @@ var StepToPreviousButton = function (_a) {
     };
     var shouldUseRTL = useRTL_1.useRTL().shouldUseRTL;
     var icon = shouldUseRTL ? canvas_system_icons_web_1.chevronRightSmallIcon : canvas_system_icons_web_1.chevronLeftSmallIcon;
-    return (React.createElement(button_1.IconButton, __assign({ "aria-disabled": isDisabled || undefined, variant: "square", size: "small", icon: icon, onClick: handleClick }, restProps)));
+    return (React.createElement(button_1.TertiaryButton, __assign({ "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick }, restProps)));
 };
 exports.StepToPreviousButton = StepToPreviousButton;
 var StepToNextButton = function (_a) {
@@ -94,7 +94,7 @@ var StepToNextButton = function (_a) {
     };
     var shouldUseRTL = useRTL_1.useRTL().shouldUseRTL;
     var icon = shouldUseRTL ? canvas_system_icons_web_1.chevronLeftSmallIcon : canvas_system_icons_web_1.chevronRightSmallIcon;
-    return (React.createElement(button_1.IconButton, __assign({ "aria-disabled": isDisabled || undefined, variant: "square", size: "small", icon: icon, onClick: handleClick }, restProps)));
+    return (React.createElement(button_1.TertiaryButton, __assign({ "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick }, restProps)));
 };
 exports.StepToNextButton = StepToNextButton;
 var JumpToLastButton = function (_a) {
@@ -109,6 +109,6 @@ var JumpToLastButton = function (_a) {
     };
     var shouldUseRTL = useRTL_1.useRTL().shouldUseRTL;
     var icon = shouldUseRTL ? canvas_system_icons_web_1.chevron2xLeftSmallIcon : canvas_system_icons_web_1.chevron2xRightSmallIcon;
-    return (React.createElement(button_1.IconButton, __assign({ "aria-disabled": isDisabled || undefined, variant: "square", size: "small", icon: icon, onClick: handleClick }, restProps)));
+    return (React.createElement(button_1.TertiaryButton, __assign({ "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick }, restProps)));
 };
 exports.JumpToLastButton = JumpToLastButton;

package/dist/commonjs/pagination/lib/Pagination/GoTo/Form.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HStackProps, StackSpacing } from '@workday/canvas-kit-labs-react/layout';
+import { HStackProps, StackSpacing } from '@workday/canvas-kit-react/layout';
 export declare type GoToFormProps = React.FormHTMLAttributes<HTMLFormElement> & Omit<HStackProps, 'spacing'> & {
     spacing?: StackSpacing;
 };

package/dist/commonjs/pagination/lib/Pagination/GoTo/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAS,WAAW,EAAE,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAGxF,oBAAY,aAAa,GAAG,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,GACnE,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC7B,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAEJ,eAAO,MAAM,QAAQ,kDAAyD,aAAa,gBAe1F,CAAC"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAS,WAAW,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAGnF,oBAAY,aAAa,GAAG,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,GACnE,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC7B,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAEJ,eAAO,MAAM,QAAQ,kDAAyD,aAAa,gBAe1F,CAAC"}

package/dist/commonjs/pagination/lib/Pagination/GoTo/Form.js

@@ -43,7 +43,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GoToForm = void 0;
 var React = __importStar(require("react"));
-var layout_1 = require("@workday/canvas-kit-labs-react/layout");
+var layout_1 = require("@workday/canvas-kit-react/layout");
 var useRTL_1 = require("../common/utils/useRTL");
 var GoToForm = function (_a) {
     var children = _a.children, onSubmit = _a.onSubmit, _b = _a.spacing, spacing = _b === void 0 ? 'xxs' : _b, elemProps = __rest(_a, ["children", "onSubmit", "spacing"]);

package/dist/commonjs/pagination/lib/Pagination/Nav.d.ts

@@ -1,4 +1,4 @@
-import { FlexProps } from '@workday/canvas-kit-labs-react/layout';
+import { FlexProps } from '@workday/canvas-kit-react/layout';
 export interface PaginationNavProps extends Omit<FlexProps, 'as'> {
     'aria-label': string;
 }

package/dist/commonjs/pagination/lib/Pagination/Nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Nav.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/Nav.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,SAAS,EAAC,MAAM,uCAAuC,CAAC;AAEtE,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;IAC/D,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,8CAA6C,kBAAkB,gBAWxF,CAAC"}
+{"version":3,"file":"Nav.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/Nav.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAEjE,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;IAC/D,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,8CAA6C,kBAAkB,gBAWxF,CAAC"}

package/dist/commonjs/pagination/lib/Pagination/Nav.js

@@ -43,7 +43,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PaginationNav = void 0;
 var React = __importStar(require("react"));
-var layout_1 = require("@workday/canvas-kit-labs-react/layout");
+var layout_1 = require("@workday/canvas-kit-react/layout");
 var PaginationNav = function (_a) {
     var ariaLabel = _a["aria-label"], elemProps = __rest(_a, ['aria-label']);
     return (React.createElement(layout_1.Flex, __assign({ as: "nav", "aria-label": ariaLabel, display: "inline-flex", flexDirection: "column", alignItems: "center" }, elemProps)));

package/dist/commonjs/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/commonjs/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/commonjs/pagination/lib/Pagination/PageButton.js

@@ -44,17 +44,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageButton = void 0;
 var React = __importStar(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = __importStar(require("@workday/canvas-kit-react/tokens"));
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var button_1 = require("@workday/canvas-kit-react/button");
-var toggledStyles = {
-    color: tokens_1.default.colors.frenchVanilla100,
-    fontWeight: 700,
-    pointerEvents: 'none',
-};
-var StyledPageButton = common_1.styled(button_1.IconButton)(__assign({}, tokens_1.type.levels.subtext.large), function (_a) {
+var StyledPageButton = common_1.styled(button_1.BaseButton)({
+    minWidth: tokens_1.space.l,
+    width: tokens_1.space.l,
+    borderRadius: tokens_1.borderRadius.circle,
+    height: tokens_1.space.l,
+}, function (_a) {
     var toggled = _a.toggled;
-    return toggled ? toggledStyles : {};
+    return {
+        fontWeight: toggled ? 700 : 'normal',
+    };
 });
+var getPaginationButtonColors = function (toggled) {
+    return {
+        default: {
+            background: toggled ? tokens_1.colors.blueberry400 : 'transparent',
+            label: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.blackPepper400,
+        },
+        hover: {
+            background: toggled ? tokens_1.colors.blueberry400 : tokens_1.colors.soap300,
+            label: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.blackPepper400,
+        },
+        active: {
+            background: toggled ? tokens_1.colors.blueberry400 : 'transparent',
+            label: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.blackPepper400,
+        },
+        focus: {
+            background: toggled ? tokens_1.colors.blueberry400 : 'transparent',
+            label: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.blackPepper400,
+        },
+        disabled: {
+            background: tokens_1.colors.licorice100,
+        },
+    };
+};
 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;
@@ -62,6 +87,6 @@ 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));
 };
 exports.PageButton = PageButton;

package/dist/commonjs/pagination/lib/Pagination/PageList.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PaginationModel } from './types';
 import { ListItemProps } from './common/List';
-import { HStackProps } from '@workday/canvas-kit-labs-react/layout';
+import { HStackProps } from '@workday/canvas-kit-react/layout';
 export interface PageListProps extends Omit<HStackProps, 'as' | 'spacing'> {
     model: PaginationModel;
     children?: (model: PaginationModel) => React.ReactNode[] | React.ReactNode;

package/dist/commonjs/pagination/lib/Pagination/PageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageList.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/PageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAAW,aAAa,EAAC,MAAM,eAAe,CAAC;AACtD,OAAO,EAAS,WAAW,EAAC,MAAM,uCAAuC,CAAC;AAE1E,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,SAAS,CAAC;IACxE,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;CAC5E;AAED,eAAO,MAAM,QAAQ,sCAAqC,aAAa,gBActE,CAAC;AAEF,oBAAY,iBAAiB,GAAG,aAAa,CAAC;AAE9C,eAAO,MAAM,YAAY,+BAA8B,iBAAiB,gBAEvE,CAAC"}
+{"version":3,"file":"PageList.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/PageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAAW,aAAa,EAAC,MAAM,eAAe,CAAC;AACtD,OAAO,EAAS,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAErE,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,SAAS,CAAC;IACxE,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;CAC5E;AAED,eAAO,MAAM,QAAQ,sCAAqC,aAAa,gBActE,CAAC;AAEF,oBAAY,iBAAiB,GAAG,aAAa,CAAC;AAE9C,eAAO,MAAM,YAAY,+BAA8B,iBAAiB,gBAEvE,CAAC"}

package/dist/commonjs/pagination/lib/Pagination/PageList.js

@@ -44,7 +44,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageListItem = exports.PageList = void 0;
 var React = __importStar(require("react"));
 var List_1 = require("./common/List");
-var layout_1 = require("@workday/canvas-kit-labs-react/layout");
+var layout_1 = require("@workday/canvas-kit-react/layout");
 var PageList = function (_a) {
     var model = _a.model, children = _a.children, elemProps = __rest(_a, ["model", "children"]);
     return (React.createElement(layout_1.HStack, __assign({ margin: "zero", as: "ol", role: "list", paddingLeft: "zero", paddingRight: "zero", spacing: "xxxs" }, elemProps), typeof children === 'function' ? children(model) : children));

package/dist/commonjs/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/commonjs/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/commonjs/pagination/lib/Pagination/common/List.d.ts

@@ -1,4 +1,4 @@
-import { FlexProps } from '@workday/canvas-kit-labs-react/layout';
+import { FlexProps } from '@workday/canvas-kit-react/layout';
 export interface ListProps extends FlexProps {
 }
 export declare const List: import("../../../../common").ElementComponent<"ul", ListProps>;

package/dist/commonjs/pagination/lib/Pagination/common/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/common/List.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,SAAS,EAAC,MAAM,uCAAuC,CAAC;AAGtE,MAAM,WAAW,SAAU,SAAQ,SAAS;CAAG;AAM/C,eAAO,MAAM,IAAI,gEAgBf,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,SAAS;CAAG;AAEnD,eAAO,MAAM,QAAQ,oEASnB,CAAC"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/common/List.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAGjE,MAAM,WAAW,SAAU,SAAQ,SAAS;CAAG;AAM/C,eAAO,MAAM,IAAI,gEAgBf,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,SAAS;CAAG;AAEnD,eAAO,MAAM,QAAQ,oEASnB,CAAC"}

package/dist/commonjs/pagination/lib/Pagination/common/List.js

@@ -43,7 +43,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListItem = exports.List = void 0;
 var React = __importStar(require("react"));
-var layout_1 = require("@workday/canvas-kit-labs-react/layout");
+var layout_1 = require("@workday/canvas-kit-react/layout");
 var common_1 = require("@workday/canvas-kit-react/common");
 var StyledList = common_1.styled(layout_1.Flex.as('ul'))({
     listStyle: 'none',

package/dist/commonjs/popup/lib/Popup.d.ts

@@ -12,7 +12,7 @@ export interface PopupProps {
 }
 export declare const Popup: import("../../common").Component<PopupProps> & {
     Heading: import("../../common").ElementComponent<"h2", import("./PopupHeading").PopupHeadingProps>;
-    Body: import("../../common").ElementComponent<"div", import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderShorthandStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderColorStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderRadiusStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLineStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderWidthStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLogicalStyleProps & import("@workday/canvas-kit-labs-react").ColorStyleProps & import("@workday/canvas-kit-labs-react").DepthStyleProps & import("@workday/canvas-kit-labs-react").FlexItemStyleProps & import("@workday/canvas-kit-labs-react").LayoutStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionLogicalProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceLogicalProps>;
+    Body: import("../../common").ElementComponent<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps>;
     Card: import("../../common").ElementComponent<"div", import("./PopupCard").PopupCardProps>;
     CloseIcon: import("../../common").ElementComponent<"button", import("./PopupCloseIcon").PopupCloseIconProps>;
     Target: import("../../common").ElementComponent<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, import("./PopupTarget").PopupTargetProps>;

package/dist/commonjs/popup/lib/PopupBody.d.ts

@@ -1,2 +1,2 @@
-export declare const PopupBody: import("../../common").ElementComponent<"div", import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderShorthandStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderColorStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderRadiusStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLineStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderWidthStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLogicalStyleProps & import("@workday/canvas-kit-labs-react").ColorStyleProps & import("@workday/canvas-kit-labs-react").DepthStyleProps & import("@workday/canvas-kit-labs-react").FlexItemStyleProps & import("@workday/canvas-kit-labs-react").LayoutStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionLogicalProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceLogicalProps>;
+export declare const PopupBody: import("../../common").ElementComponent<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps>;
 //# sourceMappingURL=PopupBody.d.ts.map

package/dist/commonjs/popup/lib/PopupBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupBody.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupBody.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,2uCAKpB,CAAC"}
+{"version":3,"file":"PopupBody.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupBody.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,grBAKpB,CAAC"}

package/dist/commonjs/popup/lib/PopupCard.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Card } from '@workday/canvas-kit-react/card';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { StackStyleProps } from '@workday/canvas-kit-labs-react/layout';
+import { StackStyleProps } from '@workday/canvas-kit-react/layout';
 import { PopupModel } from './hooks';
 export interface PopupCardProps extends ExtractProps<typeof Card, never>, Partial<StackStyleProps> {
     /**

package/dist/commonjs/popup/lib/PopupCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAOL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAQ,eAAe,EAAC,MAAM,uCAAuC,CAAC;AAG7E,OAAO,EAAe,UAAU,EAAoB,MAAM,SAAS,CAAC;AAEpE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC;IAChG;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmCD,eAAO,MAAM,SAAS,gEAmCpB,CAAC"}
+{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAOL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAQ,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAGxE,OAAO,EAAe,UAAU,EAAoB,MAAM,SAAS,CAAC;AAEpE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC;IAChG;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmCD,eAAO,MAAM,SAAS,gEAmCpB,CAAC"}

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

@@ -51,7 +51,7 @@ var react_1 = require("@emotion/react");
 var card_1 = require("@workday/canvas-kit-react/card");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var common_1 = require("@workday/canvas-kit-react/common");
-var layout_1 = require("@workday/canvas-kit-labs-react/layout");
+var layout_1 = require("@workday/canvas-kit-react/layout");
 var getTransformFromPlacement_1 = require("./getTransformFromPlacement");
 var hooks_1 = require("./hooks");
 var popupAnimation = function (transformOrigin) {

package/dist/commonjs/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/commonjs/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/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"}