@workday/canvas-kit-react 15.0.0-alpha.1303-next.0 → 15.0.0

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

@@ -2,14 +2,14 @@ import * as React from 'react';
 export declare const paginationPageButtonStencil: import("@workday/canvas-kit-styling").Stencil<{
     toggled: {
         true: {
-            [x: string]: "--cnvs-brand-primary-base" | "--cnvs-sys-font-weight-bold" | "--cnvs-sys-color-fg-inverse" | {
-                [x: string]: "--cnvs-brand-primary-base" | "--cnvs-sys-color-fg-inverse";
+            [x: string]: "--cnvs-sys-font-weight-bold" | "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))" | {
+                [x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))";
             } | {
                 [x: string]: "--cnvs-sys-color-fg-disabled";
             };
             fontWeight: "--cnvs-sys-font-weight-bold";
             '&:hover, &.hover, &:active, &.active, &:focus-visible, &.focus': {
-                [x: string]: "--cnvs-brand-primary-base" | "--cnvs-sys-color-fg-inverse";
+                [x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))";
             };
             '&:disabled, &.disabled': {
                 [x: string]: "--cnvs-sys-color-fg-disabled";
@@ -19,46 +19,38 @@ export declare const paginationPageButtonStencil: import("@workday/canvas-kit-st
 }, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
     size: {
         large: {
-            fontWeight: "--cnvs-sys-font-weight-bold";
-            height: string;
-            paddingInline: "--cnvs-sys-space-x8";
-            minWidth: string;
-            fontFamily: "--cnvs-sys-font-family-default";
-            lineHeight: "--cnvs-sys-line-height-body-small";
-            fontSize: "--cnvs-sys-font-size-body-small";
-            letterSpacing: "--cnvs-base-letter-spacing-200";
+            fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
+            height: "var(--cnvs-sys-size-lg, 3rem)";
+            paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8, 2rem))";
+            minWidth: "var(--cnvs-base-size-1400, 7rem)";
         };
         medium: {
-            fontWeight: "--cnvs-sys-font-weight-bold";
-            minWidth: string;
-            paddingInline: "--cnvs-sys-space-x6";
-            height: "--cnvs-sys-space-x10";
-            fontFamily: "--cnvs-sys-font-family-default";
-            lineHeight: "--cnvs-sys-line-height-subtext-large";
-            fontSize: "--cnvs-sys-font-size-subtext-large";
-            letterSpacing: "--cnvs-base-letter-spacing-150";
+            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
+            minWidth: "var(--cnvs-base-size-1200, 6rem)";
+            paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem))";
+            height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
         };
         small: {
-            fontWeight: "--cnvs-sys-font-weight-bold";
-            height: "--cnvs-sys-space-x8";
-            minWidth: "--cnvs-sys-space-x20";
-            paddingInline: "--cnvs-sys-space-x4";
-            gap: "--cnvs-sys-space-x1";
-            fontFamily: "--cnvs-sys-font-family-default";
-            lineHeight: "--cnvs-sys-line-height-subtext-large";
-            fontSize: "--cnvs-sys-font-size-subtext-large";
-            letterSpacing: "--cnvs-base-letter-spacing-150";
+            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
+            height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
+            minWidth: "var(--cnvs-base-size-1000, 5rem)";
+            paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem))";
+            gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
         };
         extraSmall: {
-            fontWeight: "--cnvs-sys-font-weight-bold";
-            height: "--cnvs-sys-space-x6";
+            fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
+            height: "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
             minWidth: string;
-            paddingInline: "--cnvs-sys-space-x3";
-            gap: "--cnvs-sys-space-x1";
-            fontFamily: "--cnvs-sys-font-family-default";
-            lineHeight: "--cnvs-sys-line-height-subtext-medium";
-            fontSize: "--cnvs-sys-font-size-subtext-medium";
-            letterSpacing: "--cnvs-base-letter-spacing-100";
+            paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem))";
+            gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
         };
     };
     grow: {
@@ -69,7 +61,7 @@ export declare const paginationPageButtonStencil: import("@workday/canvas-kit-st
     };
     iconPosition: {
         only: {
-            padding: "--cnvs-sys-space-zero";
+            padding: number;
         };
         start: {};
         end: {};

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;AAQ/B,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAuCtC,CAAC;AAEH,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,UAAU,wFAuBrB,CAAC"}
+{"version":3,"file":"PageButton.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/PageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0CtC,CAAC;AAEH,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,UAAU,wFAuBrB,CAAC"}

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

@@ -1,19 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { brand, system } from '@workday/canvas-tokens-web';
 import { BaseButton, buttonStencil } from '@workday/canvas-kit-react/button';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
 import { PaginationContext } from './usePaginationModel';
 export const paginationPageButtonStencil = createStencil({
     extends: buttonStencil,
-    base: { name: "mpe1i", styles: "box-sizing:border-box;min-width:var(--cnvs-sys-space-x8);padding:var(--cnvs-sys-space-zero);font-weight:var(--cnvs-sys-font-weight-normal);--label-button-85bf0e:var(--cnvs-sys-color-fg-default);&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-soft);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);}&:active, &.active, &:focus-visible, &.focus{--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-fg-disabled);}" },
+    base: { name: "i4llb", styles: "box-sizing:border-box;min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));padding:0;font-weight:var(--cnvs-sys-font-weight-normal);--label-button-c26182:var(--cnvs-sys-color-fg-default);&:hover, &.hover{--background-button-c26182:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));--label-button-c26182:var(--cnvs-sys-color-fg-strong);}&:active, &.active, &:focus-visible, &.focus{--label-button-c26182:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--background-button-c26182:var(--cnvs-sys-color-fg-disabled);}" },
     modifiers: {
         toggled: {
-            true: { name: "2ot1kp", styles: "font-weight:var(--cnvs-sys-font-weight-bold);--background-button-85bf0e:var(--cnvs-brand-primary-base);--label-button-85bf0e:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover, &:active, &.active, &:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-brand-primary-base);--label-button-85bf0e:var(--cnvs-sys-color-fg-inverse);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-fg-disabled);}" }
+            true: { name: "1legob", styles: "font-weight:var(--cnvs-sys-font-weight-bold);--background-button-c26182:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));--label-button-c26182:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover, &:active, &.active, &:focus-visible, &.focus{--background-button-c26182:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));--label-button-c26182:var(--cnvs-sys-color-fg-inverse);}&:disabled, &.disabled{--background-button-c26182:var(--cnvs-sys-color-fg-disabled);}" }
         }
     }
-}, "pagination-page-button-88d20c");
+}, "pagination-page-button-db11fc");
 export const PageButton = createComponent('button')({
     displayName: 'Pagination.PageButton',
     Component({ pageNumber, children, ...elemProps }) {

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

@@ -1,14 +1,15 @@
 import * as React from 'react';
-import { PaginationModel } from './types';
-import { ListItemProps } from './common/List';
 import { FlexProps } from '@workday/canvas-kit-react/layout';
+import { CSProps } from '@workday/canvas-kit-styling';
+import { ListItemProps } from './common/List';
+import { PaginationModel } from './types';
 export interface PageListProps extends Omit<FlexProps, 'as' | 'children'> {
     model?: PaginationModel;
     children?: (model: PaginationModel) => React.ReactNode[] | React.ReactNode;
 }
 export declare const paginationPageListStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
 export declare const PageList: import("@workday/canvas-kit-react/common").ElementComponent<"ol", PageListProps>;
-export interface PageListItemProps extends ListItemProps {
+export interface PageListItemProps extends ListItemProps, CSProps {
 }
 export declare const PageListItem: import("@workday/canvas-kit-react/common").ElementComponent<"li", PageListItemProps>;
 //# sourceMappingURL=PageList.d.ts.map

package/dist/es6/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,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAMxE,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,UAAU,CAAC;IACvE,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;CAC5E;AAED,eAAO,MAAM,yBAAyB,iJAQpC,CAAC;AAEH,eAAO,MAAM,QAAQ,kFAUnB,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,aAAa;CAAG;AAE3D,eAAO,MAAM,YAAY,sFASvB,CAAC"}
+{"version":3,"file":"PageList.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/PageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,OAAO,EAA8B,MAAM,6BAA6B,CAAC;AAGjF,OAAO,EAAW,aAAa,EAAC,MAAM,eAAe,CAAC;AACtD,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAGxC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,UAAU,CAAC;IACvE,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;CAC5E;AAED,eAAO,MAAM,yBAAyB,iJAOpC,CAAC;AAEH,eAAO,MAAM,QAAQ,kFAUnB,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,aAAa,EAAE,OAAO;CAAG;AAEpE,eAAO,MAAM,YAAY,sFASvB,CAAC"}

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

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { ListItem } from './common/List';
-import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createComponent } from '@workday/canvas-kit-react/common';
-import { PaginationContext } from './usePaginationModel';
-import { createStencil } from '@workday/canvas-kit-styling';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
+import { ListItem } from './common/List';
+import { PaginationContext } from './usePaginationModel';
 export const paginationPageListStencil = createStencil({
-    base: { name: "2zv3tj", styles: "box-sizing:border-box;display:flex;margin:var(--cnvs-sys-space-zero);padding-inline-start:var(--cnvs-sys-space-zero);padding-inline-end:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);" }
-}, "pagination-page-list-762aeb");
+    base: { name: "x7kkn", styles: "box-sizing:border-box;display:flex;margin:0;padding-inline:0;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));" }
+}, "pagination-page-list-1f5414");
 export const PageList = createComponent('ol')({
     displayName: 'Pagination.PageList',
     Component({ children, ...elemProps }, ref, Element) {
@@ -19,6 +19,6 @@ export const PageList = createComponent('ol')({
 export const PageListItem = createComponent('li')({
     displayName: 'Pagination.PageListItem',
     Component({ children, ...elemProps }, ref, Element) {
-        return (_jsx(ListItem, { ref: ref, as: Element, ...elemProps, children: children }));
+        return (_jsx(ListItem, { ref: ref, as: Element, ...handleCsProp(elemProps), children: children }));
     },
 });

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":"AAEA,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAExE,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAGL,iBAAiB,EAClB,MAAM,sBAAsB,CAAC;AAiB9B,OAAO,EAAC,iBAAiB,EAAC,CAAC;AAE3B,MAAM,MAAM,eAAe,GAAG,kBAAkB,GAAG;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,CAAC;AAMF,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,iJAM5B,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,UAAU;;;;;;iCApDO,MAAM,KAAK,IAAI;;IAsEzC;;;;;;;OAOG;;IAEH;;;;;;;;;;;OAWG;;IAEH;;;;;;;;;;;OAWG;;IAEH;;;;;;;;;;OAUG;;IAEH;;;;;;;;;;;OAWG;;IAEH;;;;;;;;;;;;;;;;;;;OAmBG;;IAEH;;;;;;;OAOG;;IAEH;;;;;;;;;;;;OAYG;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;OASG;;;;;IAEH;;;;;;;;;;;OAWG;;IAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoCG;;CAGL,CAAC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/Pagination.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAgBxE,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EACL,iBAAiB,EAGlB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAC,iBAAiB,EAAC,CAAC;AAE3B,MAAM,MAAM,eAAe,GAAG,kBAAkB,GAAG;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,CAAC;AAMF,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,iJAM5B,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,UAAU;;;;;;iCApDO,MAAM,KAAK,IAAI;;IAsEzC;;;;;;;OAOG;;IAEH;;;;;;;;;;;OAWG;;IAEH;;;;;;;;;;;OAWG;;IAEH;;;;;;;;;;OAUG;;IAEH;;;;;;;;;;;OAWG;;IAEH;;;;;;;;;;;;;;;;;;;OAmBG;;IAEH;;;;;;;OAOG;;IAEH;;;;;;;;;;;;OAYG;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;OASG;;;;;IAEH;;;;;;;;;;;OAWG;;IAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoCG;;CAGL,CAAC"}

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

@@ -1,22 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
-import { createStencil } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
-import { usePaginationModel, PaginationContext, } from './usePaginationModel';
-import { JumpToFirstButton, StepToPreviousButton, StepToNextButton, JumpToLastButton, PaginationControls, } from './Controls';
-import { PageList, PageListItem } from './PageList';
-import { PageButton } from './PageButton';
+import { createStencil } from '@workday/canvas-kit-styling';
 import { AdditionalDetails } from './AdditionalDetails';
+import { JumpToFirstButton, JumpToLastButton, PaginationControls, StepToNextButton, StepToPreviousButton, } from './Controls';
 import { GoToForm } from './GoTo/Form';
-import { GoToTextInput } from './GoTo/TextInput';
 import { GoToLabel } from './GoTo/Label';
+import { GoToTextInput } from './GoTo/TextInput';
+import { PageButton } from './PageButton';
+import { PageList, PageListItem } from './PageList';
+import { PaginationContext, usePaginationModel, } from './usePaginationModel';
 export { PaginationContext };
 function useDefaultModel(model, config, fn) {
     return model || fn(config);
 }
 export const paginationStencil = createStencil({
-    base: { name: "25khlz", styles: "box-sizing:border-box;display:inline-flex;flex-direction:column;align-items:center;" }
-}, "pagination-03584c");
+    base: { name: "445fb1", styles: "box-sizing:border-box;display:inline-flex;flex-direction:column;align-items:center;" }
+}, "pagination-a1a7ca");
 /**
  * `Pagination` is a container component rendered as a `<nav>` element that is responsible for creating
  * a `PaginationModel` and sharing it with its subcomponents using React context.

package/dist/es6/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,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAGxE,MAAM,WAAW,SAAU,SAAQ,SAAS;CAAG;AAE/C,eAAO,MAAM,qBAAqB,iJAQhC,CAAC;AAEH,eAAO,MAAM,IAAI,8EASf,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,SAAS;CAAG;AAEnD,eAAO,MAAM,yBAAyB,iJAIpC,CAAC;AAEH,eAAO,MAAM,QAAQ,kFASnB,CAAC"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/common/List.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAGxE,MAAM,WAAW,SAAU,SAAQ,SAAS;CAAG;AAE/C,eAAO,MAAM,qBAAqB,iJAOhC,CAAC;AAEH,eAAO,MAAM,IAAI,8EASf,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,SAAS;CAAG;AAEnD,eAAO,MAAM,yBAAyB,iJAIpC,CAAC;AAEH,eAAO,MAAM,QAAQ,kFASnB,CAAC"}

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

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
-import { createStencil } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
-import { system } from '@workday/canvas-tokens-web';
+import { createStencil } from '@workday/canvas-kit-styling';
 export const paginationListStencil = createStencil({
-    base: { name: "9v9ov", styles: "box-sizing:border-box;display:flex;margin-block:var(--cnvs-sys-space-zero);margin-inline:var(--cnvs-sys-space-zero);padding:var(--cnvs-sys-space-zero);list-style:none;" }
-}, "pagination-list-95ee94");
+    base: { name: "2o775c", styles: "box-sizing:border-box;display:flex;margin:0;padding:0;list-style:none;" }
+}, "pagination-list-1d14bc");
 export const List = createComponent('ul')({
     displayName: 'List',
     Component: ({ children, ...elemProps }, ref, Element) => {
@@ -13,8 +12,8 @@ export const List = createComponent('ul')({
     },
 });
 export const paginationListItemStencil = createStencil({
-    base: { name: "2to3oa", styles: "box-sizing:border-box;display:flex;" }
-}, "pagination-list-item-657bcc");
+    base: { name: "49tpwz", styles: "box-sizing:border-box;display:flex;" }
+}, "pagination-list-item-acd2e7");
 export const ListItem = createComponent('li')({
     displayName: 'ListItem',
     Component: ({ children, ...elemProps }, ref, Element) => {

package/dist/es6/pagination/lib/Pagination/common/utils/useRTL.js

@@ -1,4 +1,4 @@
-import { useTheme, ContentDirection, } from '@workday/canvas-kit-react/common';
+import { ContentDirection, useTheme, } from '@workday/canvas-kit-react/common';
 export const useRTL = (partialTheme) => {
     const theme = useTheme(partialTheme);
     const shouldUseRTL = theme.canvas.direction === ContentDirection.RTL;

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

@@ -0,0 +1,8 @@
+export * from './lib/Pill';
+export * from './lib/usePillModel';
+export * from './lib/PillCount';
+export * from './lib/PillIconButton';
+export * from './lib/PillIcon';
+export * from './lib/PillLabel';
+export * from './lib/Pill';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../pill/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC"}

package/dist/es6/pill/index.js

@@ -0,0 +1,7 @@
+export * from './lib/Pill';
+export * from './lib/usePillModel';
+export * from './lib/PillCount';
+export * from './lib/PillIconButton';
+export * from './lib/PillIcon';
+export * from './lib/PillLabel';
+export * from './lib/Pill';

package/dist/es6/pill/lib/Pill.d.ts

@@ -0,0 +1,266 @@
+import { BoxProps } from '@workday/canvas-kit-react/layout';
+export interface PillProps extends BoxProps {
+    /**
+     * Defines what kind of pill to render stylistically and its interaction states
+     * @default 'default'
+     */
+    variant?: 'readOnly' | 'removable';
+    /**
+     * Determines the max width of the pill. If the pill text is longer than the max width,
+     * text will be truncated and a tooltip will show the rest of the content when hovered over
+     */
+    maxWidth?: string | number;
+}
+export declare const pillStencil: import("@workday/canvas-kit-styling").Stencil<{
+    variant: {
+        readOnly: {
+            [x: string]: string | {
+                [x: string]: "var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)))" | "--cnvs-sys-color-bg-default";
+                borderColor: "var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)))";
+            } | {
+                [x: string]: "--cnvs-sys-color-bg-default";
+                borderColor?: undefined;
+            };
+            border: string;
+            cursor: string;
+            '&:hover, &.hover': {
+                [x: string]: "var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)))" | "--cnvs-sys-color-bg-default";
+                borderColor: "var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)))";
+            };
+            '&:focus-visible, &.focus': {
+                [x: string]: "--cnvs-sys-color-bg-default";
+            };
+            '&:active, &.active': {
+                [x: string]: "--cnvs-sys-color-bg-default";
+            };
+            '&:disabled, &.disabled': {
+                [x: string]: "--cnvs-sys-color-bg-default";
+            };
+        };
+        removable: {
+            '&:focus-visible, &.focus': {
+                [x: string]: string;
+                boxShadow: string;
+            };
+            '&:hover, &.hover': {
+                [x: string]: string;
+            };
+            '&:active, &.active': {
+                [x: string]: string;
+            };
+            '&:disabled, &.disabled': {
+                [x: string]: string;
+            };
+            cursor: string;
+            overflow: string;
+            position: string;
+        };
+    };
+}, {}, {
+    maxWidth: string;
+}, import("@workday/canvas-kit-styling").Stencil<{
+    size: {
+        large: {
+            fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
+            height: "var(--cnvs-sys-size-lg, 3rem)";
+            paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8, 2rem))";
+            minWidth: "var(--cnvs-base-size-1400, 7rem)";
+        };
+        medium: {
+            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
+            minWidth: "var(--cnvs-base-size-1200, 6rem)";
+            paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem))";
+            height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
+        };
+        small: {
+            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
+            height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
+            minWidth: "var(--cnvs-base-size-1000, 5rem)";
+            paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem))";
+            gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
+        };
+        extraSmall: {
+            fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
+            height: "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
+            minWidth: string;
+            paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem))";
+            gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
+        };
+    };
+    grow: {
+        true: {
+            width: string;
+            maxWidth: string; /**
+             * This component renders a `<span>` that automatically handles overflow by rendering a tooltip.
+             * There's no need to use this component directly since the overflow is handled for you automatically unless you have an icon or other element.
+             *
+             * ```tsx
+             * <Pill variant="readOnly">
+             *   <Pill.Label>Read-only</Pill.Label>
+             * </Pill>
+             * ```
+             */
+        };
+    };
+    iconPosition: {
+        only: {
+            padding: number;
+        };
+        start: {};
+        end: {};
+    };
+}, {}, {
+    background: string;
+    border: string;
+    boxShadowInner: string;
+    boxShadowOuter: string;
+    label: string;
+    opacity: string;
+    borderRadius: string;
+}, never, never>, never>;
+/**
+ * By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
+ * we mean that the Pill container is a focusable element (a `<button>`). All leading elements
+ * (icons or avatars) are intended to be descriptive, helping support the label. They should not
+ * receive focus.
+ *
+ * `Pill` is the container component. It also provides a React context model for its subcomponents.
+ * Based on the `variant` prop this component will render different styled `Pill`s.
+ *
+ * Example of read only:
+ *
+ * ```tsx
+ * <Pill variant="readOnly">This is a read only</Pill>
+ * ```
+ *
+ * Example of interactive:
+ *
+ * ```tsx
+ * <Pill onClick={() => console.log('clicked')}>
+ *   <Pill.Avatar /> Regina Skeltor
+ * </Pill>
+ * ```
+ *
+ * Example of removable:
+ *
+ * ```tsx
+ * <Pill variant="removable">
+ *   <Pill.Avatar /> Regina Skeltor
+ *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('clicked')} />
+ * </Pill>
+ * ```
+ *
+ * If you set the `Pill` `variant` to `removable`, it will render a `<span>` element. You can then
+ * provide a `Pill.IconButton` that acts as the focus target. This creates a smaller, more
+ * intentional click target that prevents users from accidentally deleting an item.
+ *
+ * ```tsx
+ * <Pill variant="removable">
+ *   Shoes
+ *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
+ * </Pill>
+ * ```
+ */
+export declare const Pill: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillProps & Partial<{
+    disabled: boolean;
+    id: string;
+}> & {} & {}, {
+    state: {
+        id: string;
+        disabled: boolean;
+    };
+    events: {};
+}> & {
+    /**
+     * This component renders an avatar. It supports all props of the `Avatar` component.
+     *
+     * ```tsx
+     * <Pill variant="removable">
+     *   <Pill.Avatar url={avatarUrl} />
+     *    <Pill.Label>Regina Skeltor</Pill.Label>
+     *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
+     * </Pill>
+     * ```
+     */
+    Avatar: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./PillAvatar").PillAvatarProps, {
+        state: {
+            id: string;
+            disabled: boolean;
+        };
+        events: {};
+    }>;
+    /**
+     * This component renders its `children` as the count.
+     *
+     * ```tsx
+     * <Pill onClick={() => console.warn('clicked')}>
+     *    <Pill.Label>Shoes</Pill.Label>
+     *   <Pill.Count>30</Pill.Count>
+     * </Pill>
+     * ```
+     */
+    Count: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./PillCount").PillCountProps>;
+    /**
+     * This component renders an `icon`. By default it renders a `plusIcon` but it can be overridden by
+     * providing an icon to the `icon` prop. You must provide an `aria-label` for the icon.
+     *
+     * ```tsx
+     * <Pill onClick={() => console.warn('clicked')}>
+     *   <Pill.Icon aria-label='Add user' />
+     *   <Pill.Label>Regina Skeltor</Pill.Label>
+     * </Pill>
+     * ```
+     */
+    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillIcon").PillIconProps, {
+        state: {
+            id: string;
+            disabled: boolean;
+        };
+        events: {};
+    }>;
+    /**
+     * This component renders a custom icon button. It is only intended to be used with the
+     * `removable` variant. By default, it renders a `xSmallIcon` but can be overridden by providing
+     * an icon to the `icon` prop.
+     *
+     * ```tsx
+     * <Pill variant="removable">
+     *   <Pill.Label>Pink Shirts</Pill.Label>
+     *   <Pill.IconButton aria-label='Remove item' onClick={() => console.warn('clicked')} />
+     * </Pill>
+     * ```
+     */
+    IconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillIconButton").PillIconButtonProps, {
+        state: {
+            id: string;
+            disabled: boolean;
+        };
+        events: {};
+    }>;
+    /**
+     * This component renders a `<span>` that automatically handles overflow by rendering a tooltip.
+     * There's no need to use this component directly since the overflow is handled for you automatically unless you have an icon or other element.
+     *
+     * ```tsx
+     * <Pill variant="readOnly">
+     *   <Pill.Label>Read-only</Pill.Label>
+     * </Pill>
+     * ```
+     */
+    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillLabel").PillLabelProps, {
+        state: {
+            id: string;
+            disabled: boolean;
+        };
+        events: {};
+    }>;
+};
+//# sourceMappingURL=Pill.d.ts.map

package/dist/es6/pill/lib/Pill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAW5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BA0OpB;;;;;;;;;eASG;;;;;;;;;;;;;;;;;;wBA1GL,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;CA8BL,CAAC"}