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

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

@@ -0,0 +1,61 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalOverflowOverlay = void 0;
+var React = __importStar(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var ModalOverlay_1 = require("./ModalOverlay");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var StyledOverlay = styled_1.default(ModalOverlay_1.ModalOverlay)({
+    '& > div': { maxHeight: 'inherit' },
+});
+exports.ModalOverflowOverlay = common_1.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));
+    },
+});

package/dist/commonjs/modal/lib/ModalOverlay.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { PopupModel } from '@workday/canvas-kit-react/popup';
-export interface ModalOverlayProps {
+import { BoxProps } from '@workday/canvas-kit-labs-react/common';
+export interface ModalOverlayProps extends BoxProps {
     model?: PopupModel;
     children: React.ReactNode;
 }

package/dist/commonjs/modal/lib/ModalOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalOverlay.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAC,UAAU,EAAmC,MAAM,iCAAiC,CAAC;AAI7F,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAwCD,eAAO,MAAM,YAAY,mEAWvB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;OAQ1B,CAAC"}
+{"version":3,"file":"ModalOverlay.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAC,UAAU,EAAmC,MAAM,iCAAiC,CAAC;AAG7F,OAAO,EAAM,QAAQ,EAAC,MAAM,uCAAuC,CAAC;AAEpE,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AA+CD,eAAO,MAAM,YAAY,mEAWvB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;OAQ1B,CAAC"}

package/dist/commonjs/modal/lib/ModalOverlay.js

@@ -29,14 +29,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModalOverlay = exports.ModalOverlay = void 0;
 var react_1 = __importDefault(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var popup_1 = require("@workday/canvas-kit-react/popup");
-var core_1 = require("@emotion/core");
+var react_2 = require("@emotion/react");
 var styled_1 = __importDefault(require("@emotion/styled"));
-var fadeIn = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    background: none;\n  }\n  to {\n    background: rgba(0,0,0,0.65);\n  }\n"], ["\n  from {\n    background: none;\n  }\n  to {\n    background: rgba(0,0,0,0.65);\n  }\n"])));
-var Container = styled_1.default('div')({
+var common_2 = require("@workday/canvas-kit-labs-react/common");
+var fadeIn = react_2.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    background: none;\n  }\n  to {\n    background: rgba(0,0,0,0.65);\n  }\n"], ["\n  from {\n    background: none;\n  }\n  to {\n    background: rgba(0,0,0,0.65);\n  }\n"])));
+var Container = styled_1.default(common_2.Box)({
     position: 'fixed',
     top: 0,
     left: 0,
@@ -55,13 +57,19 @@ var Container = styled_1.default('div')({
 // the Modal. The centering container forces a "center" pixel calculation by making sure the width
 // is always an even number
 var CenteringContainer = styled_1.default('div')({
-    height: '100vh',
+    maxHeight: '100vh',
     display: 'flex',
     position: 'absolute',
     left: 0,
     top: 0,
     alignItems: 'center',
     justifyContent: 'center',
+    // IE11 fix for setting min-height in a flex container
+    ':before': {
+        display: 'block',
+        content: "''",
+        height: '100vh',
+    },
 });
 exports.ModalOverlay = common_1.createComponent('div')({
     displayName: 'Modal.Overlay',

package/dist/commonjs/modal/lib/hooks/index.js

@@ -1,9 +1,16 @@
 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./useCloseOnOverlayClick"));
-__export(require("./useModalCard"));
-__export(require("./useModalHeading"));
-__export(require("./useModalModel"));
+__exportStar(require("./useCloseOnOverlayClick"), exports);
+__exportStar(require("./useModalCard"), exports);
+__exportStar(require("./useModalHeading"), exports);
+__exportStar(require("./useModalModel"), exports);

package/dist/commonjs/modal/lib/hooks/useCloseOnOverlayClick.d.ts

@@ -1,7 +1,8 @@
+import { PopupModel } from '@workday/canvas-kit-react/popup';
 /**
  * Registers global listener for all clicks. It will only call the PopupModel's `hide` event if the
  * click happened outside the `[role=dialog]` of an overlay component. The difference between `useCloseOnOutsideClick`
  * and `useCloseOnOverlayClick` is the Overlay is a child of a `stackRef` element and has a different
  */
-export declare const useCloseOnOverlayClick: (model: import("../../..").Model<import("../../../popup").PopupState, import("../../../popup").PopupEvents>, elemProps?: {}) => {};
+export declare const useCloseOnOverlayClick: (model: PopupModel, elemProps?: {}) => {};
 //# sourceMappingURL=useCloseOnOverlayClick.d.ts.map

package/dist/commonjs/modal/lib/hooks/useCloseOnOverlayClick.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCloseOnOverlayClick.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useCloseOnOverlayClick.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,oIA8ClC,CAAC"}
+{"version":3,"file":"useCloseOnOverlayClick.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useCloseOnOverlayClick.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,UAAU,EAAC,MAAM,iCAAiC,CAAC;AAE3D;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,UAAW,UAAU,uBA8CvD,CAAC"}

package/dist/commonjs/modal/lib/hooks/useCloseOnOverlayClick.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCloseOnOverlayClick = void 0;
 var react_1 = __importDefault(require("react"));
 var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
 /**
@@ -10,7 +11,7 @@ var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
  * click happened outside the `[role=dialog]` of an overlay component. The difference between `useCloseOnOutsideClick`
  * and `useCloseOnOverlayClick` is the Overlay is a child of a `stackRef` element and has a different
  */
-exports.useCloseOnOverlayClick = function (model, elemProps) {
+var useCloseOnOverlayClick = function (model, elemProps) {
     if (elemProps === void 0) { elemProps = {}; }
     var onClick = react_1.default.useCallback(function (event) {
         if (!model.state.stackRef.current) {
@@ -48,3 +49,4 @@ exports.useCloseOnOverlayClick = function (model, elemProps) {
     }, [model.state.stackRef, visible, onClick]);
     return elemProps;
 };
+exports.useCloseOnOverlayClick = useCloseOnOverlayClick;

package/dist/commonjs/modal/lib/hooks/useModalCard.d.ts

@@ -1,10 +1,4 @@
-/// <reference types="@emotion/core" />
-export declare const useModalCard: <P extends {}, R>(model: import("../../../common").Model<import("../../../popup").PopupState, import("../../../popup").PopupEvents>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
-    role: string;
-    'aria-labelledby': string;
-} & {
-    'aria-modal': boolean;
-} & P & (R extends HTMLOrSVGElement ? {
+export declare const useModalCard: <P extends {}, R>(model: import("../../../common").Model<import("../../../popup").PopupState, import("../../../popup").PopupEvents>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
     ref: import("react").Ref<R>;
 } : {});
 //# sourceMappingURL=useModalCard.d.ts.map

package/dist/commonjs/modal/lib/hooks/useModalCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useModalCard.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useModalCard.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;;;;;;OAOxB,CAAC"}
+{"version":3,"file":"useModalCard.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useModalCard.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY;;OAOxB,CAAC"}

package/dist/commonjs/modal/lib/hooks/useModalCard.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModalCard = void 0;
 var common_1 = require("@workday/canvas-kit-react/common");
 var popup_1 = require("@workday/canvas-kit-react/popup");
 exports.useModalCard = common_1.composeHooks(popup_1.usePopupCard, common_1.createHook(function (_a) {

package/dist/commonjs/modal/lib/hooks/useModalHeading.d.ts

@@ -1,10 +1,5 @@
 import React from 'react';
-export declare const useModalHeading: <P extends {}, R>(model: import("../../../common").Model<import("../../../popup").PopupState, import("../../../popup").PopupEvents>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
-    id: string;
-} & {
-    ref: (instance: HTMLElement | null) => void;
-    onBlur: () => void;
-} & P & (R extends HTMLOrSVGElement ? {
+export declare const useModalHeading: <P extends {}, R>(model: import("../../../common").Model<import("../../../popup").PopupState, import("../../../popup").PopupEvents>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
     ref: React.Ref<R>;
 } : {});
 //# sourceMappingURL=useModalHeading.d.ts.map

package/dist/commonjs/modal/lib/hooks/useModalHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useModalHeading.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useModalHeading.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,eAAO,MAAM,eAAe;;;;;;;OAqB3B,CAAC"}
+{"version":3,"file":"useModalHeading.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useModalHeading.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,eAAO,MAAM,eAAe;;OAqB3B,CAAC"}

package/dist/commonjs/modal/lib/hooks/useModalHeading.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModalHeading = void 0;
 var common_1 = require("@workday/canvas-kit-react/common");
 var popup_1 = require("@workday/canvas-kit-react/popup");
 exports.useModalHeading = common_1.composeHooks(popup_1.usePopupHeading, common_1.createHook(function (_, ref) {

package/dist/commonjs/modal/lib/hooks/useModalModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useModalModel.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useModalModel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAQjB,MAAM,iCAAiC,CAAC;AAIzC,eAAO,MAAM,aAAa,oIAYzB,CAAC"}
+{"version":3,"file":"useModalModel.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useModalModel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAQjB,MAAM,iCAAiC,CAAC;AAIzC,eAAO,MAAM,aAAa,YAAY,gBAAgB,wGAYrD,CAAC"}

package/dist/commonjs/modal/lib/hooks/useModalModel.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModalModel = void 0;
 var popup_1 = require("@workday/canvas-kit-react/popup");
 var useCloseOnOverlayClick_1 = require("./useCloseOnOverlayClick");
-exports.useModalModel = function (config) {
+var useModalModel = function (config) {
     if (config === void 0) { config = {}; }
     var model = popup_1.usePopupModel(config);
     popup_1.useInitialFocus(model);
@@ -14,3 +15,4 @@ exports.useModalModel = function (config) {
     popup_1.useDisableBodyScroll(model);
     return model;
 };
+exports.useModalModel = useModalModel;

package/dist/commonjs/pagination/index.js

@@ -1,6 +1,13 @@
 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./lib/Pagination"));
+__exportStar(require("./lib/Pagination"), exports);

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

@@ -1,12 +1,11 @@
-/** @jsx jsx */
 import * as React from 'react';
 import { PaginationModel } from './types';
-import { FlexProps } from './common/Flex';
+import { FlexProps } from '@workday/canvas-kit-labs-react/layout';
 export interface AdditionalDetailsProps extends FlexProps {
     children: (model: PaginationModel) => React.ReactNode | React.ReactNode;
     model: PaginationModel;
     shouldAnnounceToScreenReader?: boolean;
     shouldHideDetails?: boolean;
 }
-export declare const AdditionalDetails: ({ model, children, shouldAnnounceToScreenReader, shouldHideDetails, ...elemProps }: AdditionalDetailsProps) => JSX.Element;
+export declare const AdditionalDetails: ({ model, children, shouldAnnounceToScreenReader, ...elemProps }: AdditionalDetailsProps) => JSX.Element;
 //# sourceMappingURL=AdditionalDetails.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AdditionalDetails.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/AdditionalDetails.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAAO,SAAS,EAAC,MAAM,eAAe,CAAC;AAG9C,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;IACxE,KAAK,EAAE,eAAe,CAAC;IACvB,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAQD,eAAO,MAAM,iBAAiB,6HAoB7B,CAAC"}
+{"version":3,"file":"AdditionalDetails.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/AdditionalDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAAO,SAAS,EAAC,MAAM,uCAAuC,CAAC;AAGtE,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;IACxE,KAAK,EAAE,eAAe,CAAC;IACvB,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAuBD,eAAO,MAAM,iBAAiB,oEAK3B,sBAAsB,gBAQxB,CAAC"}

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

@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -22,16 +41,25 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = require("@emotion/core");
+exports.AdditionalDetails = void 0;
+var React = __importStar(require("react"));
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var common_1 = require("@workday/canvas-kit-react/common");
-var Flex_1 = require("./common/Flex");
+var layout_1 = require("@workday/canvas-kit-labs-react/layout");
 var useLiveRegion_1 = require("./common/useLiveRegion");
-// Ideally, these styles would be applied directly to a Text component
-var textStyles = core_1.css(__assign(__assign({}, tokens_1.type.levels.subtext.medium), { color: tokens_1.typeColors.hint }));
-exports.AdditionalDetails = function (_a) {
-    var model = _a.model, children = _a.children, shouldAnnounceToScreenReader = _a.shouldAnnounceToScreenReader, _b = _a.shouldHideDetails, shouldHideDetails = _b === void 0 ? false : _b, elemProps = __rest(_a, ["model", "children", "shouldAnnounceToScreenReader", "shouldHideDetails"]);
+var StyledAdditionalDetails = common_1.styled(layout_1.Flex)(function (_a) {
+    var shouldHideDetails = _a.shouldHideDetails;
+    var styles = __assign(__assign({}, tokens_1.type.levels.subtext.medium), { color: tokens_1.typeColors.hint });
+    if (shouldHideDetails) {
+        return __assign(__assign(__assign({}, styles), common_1.accessibleHide), { marginTop: tokens_1.space.zero });
+    }
+    else {
+        return __assign(__assign({}, styles), { marginTop: tokens_1.space.xs });
+    }
+});
+var AdditionalDetails = function (_a) {
+    var model = _a.model, children = _a.children, shouldAnnounceToScreenReader = _a.shouldAnnounceToScreenReader, elemProps = __rest(_a, ["model", "children", "shouldAnnounceToScreenReader"]);
     var liveRegionProps = useLiveRegion_1.useLiveRegion({ shouldAnnounceToScreenReader: shouldAnnounceToScreenReader });
-    var detailStyles = core_1.css([textStyles, shouldHideDetails ? common_1.accessibleHide : null]);
-    return (core_1.jsx(Flex_1.Flex, __assign({ mt: shouldHideDetails ? 'zero' : 'xs', css: detailStyles }, liveRegionProps, elemProps), typeof children === 'function' ? children(model) : children));
+    return (React.createElement(StyledAdditionalDetails, __assign({}, liveRegionProps, elemProps), typeof children === 'function' ? children(model) : children));
 };
+exports.AdditionalDetails = AdditionalDetails;

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,uEAqB7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,uEAqBhC,CAAC;AAEF,eAAO,MAAM,gBAAgB,uEAqB5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,uEAqB5B,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,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"}

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

@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,24 +40,19 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.JumpToLastButton = exports.StepToNextButton = exports.StepToPreviousButton = exports.JumpToFirstButton = exports.Controls = void 0;
 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 Stack_1 = require("./common/Stack");
+var layout_1 = require("@workday/canvas-kit-labs-react/layout");
 var useRTL_1 = require("./common/utils/useRTL");
-exports.Controls = function (_a) {
+var Controls = function (_a) {
     var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return (React.createElement(Stack_1.HStack, __assign({ spacing: "xxxs", alignItems: "center" }, elemProps), children));
+    return (React.createElement(layout_1.HStack, __assign({ spacing: "xxxs", alignItems: "center" }, elemProps), children));
 };
-exports.JumpToFirstButton = function (_a) {
+exports.Controls = Controls;
+var JumpToFirstButton = function (_a) {
     var model = _a.model, onClick = _a.onClick, restProps = __rest(_a, ["model", "onClick"]);
     var isDisabled = model.state.currentPage <= model.state.firstPage;
     var handleClick = function (e) {
@@ -52,7 +66,8 @@ exports.JumpToFirstButton = function (_a) {
     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)));
 };
-exports.StepToPreviousButton = function (_a) {
+exports.JumpToFirstButton = JumpToFirstButton;
+var StepToPreviousButton = function (_a) {
     var onClick = _a.onClick, model = _a.model, restProps = __rest(_a, ["onClick", "model"]);
     var isDisabled = model.state.currentPage <= model.state.firstPage;
     var handleClick = function (e) {
@@ -66,7 +81,8 @@ exports.StepToPreviousButton = function (_a) {
     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)));
 };
-exports.StepToNextButton = function (_a) {
+exports.StepToPreviousButton = StepToPreviousButton;
+var StepToNextButton = function (_a) {
     var model = _a.model, onClick = _a.onClick, restProps = __rest(_a, ["model", "onClick"]);
     var isDisabled = model.state.currentPage >= model.state.lastPage;
     var handleClick = function (e) {
@@ -80,7 +96,8 @@ exports.StepToNextButton = function (_a) {
     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)));
 };
-exports.JumpToLastButton = function (_a) {
+exports.StepToNextButton = StepToNextButton;
+var JumpToLastButton = function (_a) {
     var model = _a.model, onClick = _a.onClick, restProps = __rest(_a, ["model", "onClick"]);
     var isDisabled = model.state.currentPage >= model.state.lastPage;
     var handleClick = function (e) {
@@ -94,3 +111,4 @@ exports.JumpToLastButton = function (_a) {
     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)));
 };
+exports.JumpToLastButton = JumpToLastButton;

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

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { HStackProps } from '../common/Stack';
-import { Spacing } from '../common/utils/space';
+import { HStackProps, StackSpacing } from '@workday/canvas-kit-labs-react/layout';
 export declare type GoToFormProps = React.FormHTMLAttributes<HTMLFormElement> & Omit<HStackProps, 'spacing'> & {
-    spacing?: Spacing;
+    spacing?: StackSpacing;
 };
 export declare const GoToForm: ({ children, onSubmit, spacing, ...elemProps }: GoToFormProps) => JSX.Element;
 //# sourceMappingURL=Form.d.ts.map

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,EAAC,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAG9C,oBAAY,aAAa,GAAG,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,GACnE,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,eAAO,MAAM,QAAQ,+EAepB,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,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"}

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

@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,19 +40,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.GoToForm = void 0;
 var React = __importStar(require("react"));
-var Stack_1 = require("../common/Stack");
+var layout_1 = require("@workday/canvas-kit-labs-react/layout");
 var useRTL_1 = require("../common/utils/useRTL");
-exports.GoToForm = function (_a) {
+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"]);
     var shouldUseRTL = useRTL_1.useRTL().shouldUseRTL;
-    return (React.createElement(Stack_1.HStack, __assign({ as: "form", alignItems: "center", spacing: spacing, pl: shouldUseRTL ? 'xxs' : undefined, pr: shouldUseRTL ? 'xxs' : undefined, onSubmit: onSubmit }, elemProps), children));
+    return (React.createElement(layout_1.HStack, __assign({ as: "form", alignItems: "center", spacing: spacing, paddingLeft: shouldUseRTL ? 'xxs' : undefined, paddingRight: shouldUseRTL ? 'xxs' : undefined, onSubmit: onSubmit }, elemProps), children));
 };
+exports.GoToForm = GoToForm;

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

@@ -1 +1 @@
-{"version":3,"file":"GoTo.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/GoTo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAW,aAAa,EAAC,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAY,cAAc,EAAC,MAAM,SAAS,CAAC;AAClD,OAAO,EAAgB,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAc,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAEzC,MAAM,WAAW,SAAU,SAAQ,iBAAiB;IAClD,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAID,eAAO,MAAM,IAAI;;;;;CAKhB,CAAC"}
+{"version":3,"file":"GoTo.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/GoTo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAW,aAAa,EAAC,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAY,cAAc,EAAC,MAAM,SAAS,CAAC;AAClD,OAAO,EAAgB,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAc,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAEzC,MAAM,WAAW,SAAU,SAAQ,iBAAiB;IAClD,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAID,eAAO,MAAM,IAAI;YAAW,SAAS;gBAOjB,aAAa;qBAMR,kBAAkB;iBAMtB,cAAc;CAdlC,CAAC"}

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

@@ -10,25 +10,39 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.GoTo = void 0;
 var React = __importStar(require("react"));
 var Form_1 = require("./Form");
 var Label_1 = require("./Label");
 var TextInput_1 = require("./TextInput");
 var useGoToForm_1 = require("./useGoToForm");
 var GoToContext = React.createContext({});
-exports.GoTo = function (props) {
+var GoTo = function (props) {
     var children = props.children, model = props.model;
     var goToContext = useGoToForm_1.useGoToForm({ model: model });
     return React.createElement(GoToContext.Provider, { value: goToContext }, children);
 };
+exports.GoTo = GoTo;
 exports.GoTo.Form = function (props) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     var formProps = React.useContext(GoToContext).formProps;

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

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import * as React from 'react';
 import { PaginationModel } from '../types';
 export interface GoToLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
@@ -8,5 +7,5 @@ export interface GoToLabelProps extends React.LabelHTMLAttributes<HTMLLabelEleme
      */
     children?: (model: PaginationModel) => React.ReactNode | React.ReactNode;
 }
-export declare const GoToLabel: ({ css: cssProp, model, children, ...elemProps }: GoToLabelProps) => JSX.Element;
+export declare const GoToLabel: ({ model, children, ...elemProps }: GoToLabelProps) => JSX.Element;
 //# sourceMappingURL=Label.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/Label.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAEzC,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACjF,KAAK,EAAE,eAAe,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;CAC1E;AAQD,eAAO,MAAM,SAAS,kFAMrB,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAGzC,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACjF,KAAK,EAAE,eAAe,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;CAC1E;AAQD,eAAO,MAAM,SAAS,sCAAqC,cAAc,gBAMxE,CAAC"}