@workday/canvas-kit-react 13.0.0-alpha.1016-next.0 → 13.0.0-alpha.1024-next.0

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

@@ -6,7 +6,7 @@ import { createStencil } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '../../layout';
 import { system } from '@workday/canvas-tokens-web';
 export const popupBodyStencil = createStencil({
-    base: { name: "n0tg2l", styles: "box-sizing:border-box;overflow-y:auto;padding:var(--cnvs-sys-space-x2);" }
+    base: { name: "br892l", styles: "box-sizing:border-box;overflow-y:auto;padding:var(--cnvs-sys-space-x2);" }
 }, "popup-body-1fee86");
 export const PopupBody = createSubcomponent('div')({
     displayName: 'Popup.Body',

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

@@ -11,7 +11,7 @@ const translateVars = createVars({ id: "696a04", args: ["positionX", "positionY"
 /**
  * Keyframe for the dots loading animation.
  */
-const fadeIn = keyframes({ name: "n0tgx", styles: "0%{opacity:1;transform:translate(var(--positionX-696a04), var(--positionY-696a04));}100%{opacity:1;transform:translate(0);}" });
+const fadeIn = keyframes({ name: "br89x", styles: "0%{opacity:1;transform:translate(var(--positionX-696a04), var(--positionY-696a04));}100%{opacity:1;transform:translate(0);}" });
 function getSpace(value) {
     if (value && value in space) {
         return space[value];
@@ -45,7 +45,7 @@ export const popupCardStencil = createStencil({
         transformOriginHorizontal: '',
         transformOriginVertical: '',
     },
-    base: { name: "n0tgy", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);display:flex;position:relative;max-width:calc(100vw - var(--cnvs-sys-space-x8));flex-direction:column;box-shadow:var(--cnvs-sys-depth-5);min-height:var(--cnvs-sys-space-zero);padding:var(--cnvs-sys-space-x6);max-height:var(--maxHeight-popup-card-36628b);overflow-y:auto;animation-name:animation-n0tgx;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--transformOriginVertical-popup-card-36628b) var(--transformOriginHorizontal-popup-card-36628b);.wd-no-animation &{animation:none;}@media screen and (max-width: 768px){transform-origin:bottom center;}" }
+    base: { name: "br89y", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);display:flex;position:relative;max-width:calc(100vw - var(--cnvs-sys-space-x8));flex-direction:column;box-shadow:var(--cnvs-sys-depth-5);min-height:var(--cnvs-sys-space-zero);padding:var(--cnvs-sys-space-x6);max-height:var(--maxHeight-popup-card-36628b);overflow-y:auto;animation-name:animation-br89x;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--transformOriginVertical-popup-card-36628b) var(--transformOriginHorizontal-popup-card-36628b);.wd-no-animation &{animation:none;}@media screen and (max-width: 768px){transform-origin:bottom center;}" }
 }, "popup-card-36628b");
 export const PopupCard = createSubcomponent('div')({
     displayName: 'Popup.Card',

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

@@ -7,7 +7,7 @@ import { createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 import { mergeStyles } from '../../layout';
 export const popupCloseIconStencil = createStencil({
-    base: { name: "n0tg2k", styles: "box-sizing:border-box;position:absolute;inset-inline-end:var(--cnvs-sys-space-x1);top:var(--cnvs-sys-space-x1);" }
+    base: { name: "br892k", styles: "box-sizing:border-box;position:absolute;inset-inline-end:var(--cnvs-sys-space-x1);top:var(--cnvs-sys-space-x1);" }
 }, "popup-close-icon-111273");
 export const PopupCloseIcon = createSubcomponent('button')({
     displayName: 'Popup.CloseIcon',

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

@@ -6,7 +6,7 @@ import { createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 import { mergeStyles } from '../../layout';
 export const popupHeadingStencil = createStencil({
-    base: { name: "n0tg2j", styles: "box-sizing:border-box;margin-block-end:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x2);" }
+    base: { name: "br892j", styles: "box-sizing:border-box;margin-block-end:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x2);" }
 }, "popup-heading-3e49bb");
 export const PopupHeading = createSubcomponent('h2')({
     displayName: 'Popup.Heading',

package/dist/es6/select/lib/SelectCard.js

@@ -5,7 +5,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { useSelectCard } from './hooks/useSelectCard';
 import { useSelectModel } from './hooks/useSelectModel';
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
-const selectCardStyles = createStyles({ name: "n0tg5d", styles: "max-height:18.75rem;" });
+const selectCardStyles = createStyles({ name: "br895d", styles: "max-height:18.75rem;" });
 export const SelectCard = createSubcomponent('div')({
     modelHook: useSelectModel,
     elemPropsHook: useSelectCard,

package/dist/es6/select/lib/SelectInput.js

@@ -9,18 +9,18 @@ import { useSelectModel } from './hooks/useSelectModel';
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { system } from '@workday/canvas-tokens-web';
 const selectInputStencil = createStencil({
-    base: { name: "n0tg5a", styles: "box-sizing:border-box;caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" }
+    base: { name: "br895a", styles: "box-sizing:border-box;caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" }
 }, "select-input-f7e590");
 const selectIconsStencil = createStencil({
-    base: { name: "n0tg5b", styles: "box-sizing:border-box;position:absolute;pointer-events:none;" }
+    base: { name: "br895b", styles: "box-sizing:border-box;position:absolute;pointer-events:none;" }
 }, "select-icons-c9a14d");
 const hiddenSelectInputStencil = createStencil({
-    base: { name: "n0tg5c", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;" }
+    base: { name: "br895c", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;" }
 }, "hidden-select-input-d9dbbc");
 export const SelectInput = createSubcomponent(TextInput)({
     modelHook: useSelectModel,
     elemPropsHook: useSelectInput,
-})(({ placeholder = 'Choose an option', inputStartIcon, formInputProps, width, ...elemProps }, Element, model) => {
+})(({ placeholder = 'Choose an option', inputStartIcon, formInputProps, ...elemProps }, Element, model) => {
     return (React.createElement(InputGroup, { "data-width": "ck-formfield-width" },
         inputStartIcon && model.state.selectedIds.length > 0 && (React.createElement(InputGroup.InnerStart, { "data-part": "select-start-icon-container", ...selectIconsStencil() },
             React.createElement(SystemIcon, { "data-part": "select-start-icon", icon: inputStartIcon }))),

package/dist/es6/skeleton/lib/Skeleton.js

@@ -4,9 +4,9 @@ import { createStencil, handleCsProp, keyframes } from '@workday/canvas-kit-styl
 import { SkeletonHeader } from './parts/SkeletonHeader';
 import { SkeletonShape } from './parts/SkeletonShape';
 import { SkeletonText } from './parts/SkeletonText';
-const fade = keyframes({ name: "n0tg5h", styles: "from{opacity:0.4;}to{opacity:1;}" });
+const fade = keyframes({ name: "br895h", styles: "from{opacity:0.4;}to{opacity:1;}" });
 export const skeletonStencil = createStencil({
-    base: { name: "n0tg5i", styles: "box-sizing:border-box;animation:animation-n0tg5h 0.8s linear infinite alternate;position:relative;overflow:hidden;height:100%;width:100%;& [data-part=\"skeleton-accessible-hide\"]{clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0;border:0;}" }
+    base: { name: "br895i", styles: "box-sizing:border-box;animation:animation-br895h 0.8s linear infinite alternate;position:relative;overflow:hidden;height:100%;width:100%;& [data-part=\"skeleton-accessible-hide\"]{clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0;border:0;}" }
 }, "skeleton-b7ee63");
 /**
  * Skeleton subcomponents **must** be wrapped by the `Skeleton` container component.

package/dist/es6/skeleton/lib/parts/SkeletonHeader.js

@@ -9,7 +9,7 @@ export const skeletonHeaderStencil = createStencil({
         height: '',
         backgroundColor: '',
     },
-    base: { name: "n0tg5f", styles: "box-sizing:border-box;background-color:var(--backgroundColor-skeleton-header-1c5804, var(--cnvs-sys-color-bg-alt-strong));border-radius:0;height:var(--height-skeleton-header-1c5804, calc(var(--cnvs-sys-space-x1) * 7));width:var(--width-skeleton-header-1c5804);margin-bottom:var(--cnvs-sys-space-x4);" }
+    base: { name: "br895f", styles: "box-sizing:border-box;background-color:var(--backgroundColor-skeleton-header-1c5804, var(--cnvs-sys-color-bg-alt-strong));border-radius:0;height:var(--height-skeleton-header-1c5804, calc(var(--cnvs-sys-space-x1) * 7));width:var(--width-skeleton-header-1c5804);margin-bottom:var(--cnvs-sys-space-x4);" }
 }, "skeleton-header-1c5804");
 export const SkeletonHeader = createComponent('div')({
     displayName: 'Skeleton.Header',

package/dist/es6/skeleton/lib/parts/SkeletonShape.js

@@ -9,7 +9,7 @@ export const skeletonShapeStencil = createStencil({
         borderRadius: '',
         backgroundColor: '',
     },
-    base: { name: "n0tg5e", styles: "box-sizing:border-box;background-color:var(--backgroundColor-skeleton-shape-5b02f8, var(--cnvs-sys-color-bg-alt-strong));border-radius:var(--borderRadius-skeleton-shape-5b02f8, var(--cnvs-sys-space-zero));height:var(--height-skeleton-shape-5b02f8, 100%);width:var(--width-skeleton-shape-5b02f8);margin-bottom:var(--cnvs-sys-space-x4);" }
+    base: { name: "br895e", styles: "box-sizing:border-box;background-color:var(--backgroundColor-skeleton-shape-5b02f8, var(--cnvs-sys-color-bg-alt-strong));border-radius:var(--borderRadius-skeleton-shape-5b02f8, var(--cnvs-sys-space-zero));height:var(--height-skeleton-shape-5b02f8, 100%);width:var(--width-skeleton-shape-5b02f8);margin-bottom:var(--cnvs-sys-space-x4);" }
 }, "skeleton-shape-5b02f8");
 export const SkeletonShape = createComponent('div')({
     displayName: 'Skeleton.Shape',

package/dist/es6/skeleton/lib/parts/SkeletonText.js

@@ -6,7 +6,7 @@ export const skeletonTextStencil = createStencil({
     vars: {
         backgroundColor: '',
     },
-    base: { name: "n0tg5g", styles: "box-sizing:border-box;margin-bottom:var(--cnvs-sys-space-x6);& [data-part=\"skeleton-text-lines\"]{background-color:var(--backgroundColor-skeleton-text-3d78a6, var(--cnvs-sys-color-bg-alt-strong));height:1.3125rem;margin-block-end:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-half);width:100%;}& [data-part=\"skeleton-text-lines\"]:last-child{width:60%;}" }
+    base: { name: "br895g", styles: "box-sizing:border-box;margin-bottom:var(--cnvs-sys-space-x6);& [data-part=\"skeleton-text-lines\"]{background-color:var(--backgroundColor-skeleton-text-3d78a6, var(--cnvs-sys-color-bg-alt-strong));height:1.3125rem;margin-block-end:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-half);width:100%;}& [data-part=\"skeleton-text-lines\"]:last-child{width:60%;}" }
 }, "skeleton-text-3d78a6");
 export const SkeletonText = createComponent('div')({
     displayName: 'Skeleton.Text',

package/dist/es6/switch/lib/Switch.js

@@ -4,7 +4,7 @@ import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { brand, system } from '@workday/canvas-tokens-web';
 import { mergeStyles } from '../../layout';
 const switchContainerStencil = createStencil({
-    base: { name: "n0tg5j", styles: "box-sizing:border-box;position:relative;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);" }
+    base: { name: "br895j", styles: "box-sizing:border-box;position:relative;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);" }
 }, "switch-container-e9661f");
 const SwitchContainer = createComponent('div')({
     displayName: 'SwitchContainer',
@@ -13,11 +13,11 @@ const SwitchContainer = createComponent('div')({
     },
 });
 const switchInputStencil = createStencil({
-    base: { name: "n0tg5k", styles: "box-sizing:border-box;display:flex;position:absolute;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);margin:var(--cnvs-sys-space-zero);margin-left:var(--cnvs-sys-space-x1);border-radius:var(--cnvs-sys-shape-round);opacity:0;cursor:pointer;&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
+    base: { name: "br895k", styles: "box-sizing:border-box;display:flex;position:absolute;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);margin:var(--cnvs-sys-space-zero);margin-left:var(--cnvs-sys-space-x1);border-radius:var(--cnvs-sys-shape-round);opacity:0;cursor:pointer;&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
     modifiers: {
         error: {
-            error: { name: "n0tg5l", styles: "& ~ div:first-of-type{box-shadow:\n              0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n              0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-error-base),\n              0 0 0 0.3125rem transparent;}" },
-            alert: { name: "n0tg5m", styles: "& ~ div:first-of-type{box-shadow:\n          0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n          0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-alert-base),\n          0 0 0 0.3125rem var(--cnvs-brand-alert-darkest);}" }
+            error: { name: "br895l", styles: "& ~ div:first-of-type{box-shadow:\n              0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n              0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-error-base),\n              0 0 0 0.3125rem transparent;}" },
+            alert: { name: "br895m", styles: "& ~ div:first-of-type{box-shadow:\n          0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n          0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-alert-base),\n          0 0 0 0.3125rem var(--cnvs-brand-alert-darkest);}" }
         }
     }
 }, "switch-input-001dec");
@@ -28,7 +28,7 @@ const SwitchInput = createComponent('input')({
     },
 });
 const switchBackgroundStencil = createStencil({
-    base: { name: "n0tg5n", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1);width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-round);padding:var(--cnvs-sys-space-zero) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-bg-muted-soft);" }
+    base: { name: "br895n", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1);width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-round);padding:var(--cnvs-sys-space-zero) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-bg-muted-soft);" }
 }, "switch-background-17579c");
 const SwitchBackground = createComponent('div')({
     displayName: 'SwitchBackground',
@@ -37,10 +37,10 @@ const SwitchBackground = createComponent('div')({
     },
 });
 const switchCircleStencil = createStencil({
-    base: { name: "n0tg5o", styles: "box-sizing:border-box;width:var(--cnvs-sys-space-x3);height:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-round);box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent);transform:translateX(var(--cnvs-sys-space-zero));" },
+    base: { name: "br895o", styles: "box-sizing:border-box;width:var(--cnvs-sys-space-x3);height:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-round);box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent);transform:translateX(var(--cnvs-sys-space-zero));" },
     modifiers: {
         checked: {
-            true: { name: "n0tg5p", styles: "transform:translateX(var(--cnvs-sys-space-x4));" }
+            true: { name: "br895p", styles: "transform:translateX(var(--cnvs-sys-space-x4));" }
         }
     }
 }, "switch-circle-2d1f0c");

package/dist/es6/table/lib/Table.js

@@ -11,7 +11,7 @@ import { TableCaption } from './TableCaption';
 import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const tableStencil = createStencil({
-    base: { name: "n0tg5x", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);display:grid;border:0.0625rem solid var(--cnvs-sys-color-border-container);border-radius:var(--cnvs-sys-shape-x2);overflow:auto;color:var(--cnvs-sys-color-text-default);" }
+    base: { name: "br895x", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);display:grid;border:0.0625rem solid var(--cnvs-sys-color-border-container);border-radius:var(--cnvs-sys-shape-x2);overflow:auto;color:var(--cnvs-sys-color-text-default);" }
 }, "table-773355");
 /**
  * `Table` is a simple styled compound component that renders a [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to present information in a two-dimensional table comprised of rows and columns of cells containing data.

package/dist/es6/table/lib/TableBody.js

@@ -3,7 +3,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil } from '@workday/canvas-kit-styling';
 const tableBodyStencil = createStencil({
-    base: { name: "n0tg5r", styles: "box-sizing:border-box;display:grid;tr {&:last-of-type{td, th{border-bottom:none;}}&:first-of-type{td, th{border-top:none;}}}td {&:last-of-type{border-inline-end:none;}&:first-of-type{border-inline-start:none;}}" }
+    base: { name: "br895r", styles: "box-sizing:border-box;display:grid;tr {&:last-of-type{td, th{border-bottom:none;}}&:first-of-type{td, th{border-top:none;}}}td {&:last-of-type{border-inline-end:none;}&:first-of-type{border-inline-start:none;}}" }
 }, "table-body-dbe12a");
 export const TableBody = createComponent('tbody')({
     displayName: 'Table.Body',

package/dist/es6/table/lib/TableCaption.js

@@ -4,7 +4,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const tableCaptionStencil = createStencil({
-    base: { name: "n0tg5w", styles: "box-sizing:border-box;display:flex;border-bottom:0.0625rem solid var(--cnvs-sys-color-border-container);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);" }
+    base: { name: "br895w", styles: "box-sizing:border-box;display:flex;border-bottom:0.0625rem solid var(--cnvs-sys-color-border-container);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);" }
 }, "table-caption-106f16");
 export const TableCaption = createComponent('caption')({
     displayName: 'Table.Caption',

package/dist/es6/table/lib/TableCell.js

@@ -4,7 +4,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const tableCellStencil = createStencil({
-    base: { name: "n0tg5u", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);grid-template-columns:1fr;justify-content:start;min-height:3.5rem;padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;" }
+    base: { name: "br895u", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);grid-template-columns:1fr;justify-content:start;min-height:3.5rem;padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;" }
 }, "table-cell-c39aaf");
 export const TableCell = createComponent('td')({
     displayName: 'Table.Cell',

package/dist/es6/table/lib/TableFooter.js

@@ -3,7 +3,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil } from '@workday/canvas-kit-styling';
 const tableFooterStencil = createStencil({
-    base: { name: "n0tg5v", styles: "box-sizing:border-box;display:grid;" }
+    base: { name: "br895v", styles: "box-sizing:border-box;display:grid;" }
 }, "table-footer-9bbb07");
 export const TableFooter = createComponent('tfoot')({
     displayName: 'Table.Footer',

package/dist/es6/table/lib/TableHead.js

@@ -4,7 +4,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { calc, createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const tableHeadStencil = createStencil({
-    base: { name: "n0tg5q", styles: "box-sizing:border-box;display:grid;background-color:var(--cnvs-sys-color-bg-alt-softer);min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x4));th {&:first-of-type{border-inline-start:none;}&:last-of-type{border-inline-end:none;}}" }
+    base: { name: "br895q", styles: "box-sizing:border-box;display:grid;background-color:var(--cnvs-sys-color-bg-alt-softer);min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x4));th {&:first-of-type{border-inline-start:none;}&:last-of-type{border-inline-end:none;}}" }
 }, "table-head-c91e37");
 export const TableHead = createComponent('thead')({
     displayName: 'Table.Head',

package/dist/es6/table/lib/TableHeader.js

@@ -4,7 +4,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const tableHeaderStencil = createStencil({
-    base: { name: "n0tg5t", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);justify-content:start;min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x2));padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;font-weight:var(--cnvs-sys-font-weight-medium);" }
+    base: { name: "br895t", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);justify-content:start;min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x2));padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;font-weight:var(--cnvs-sys-font-weight-medium);" }
 }, "table-header-8f0b37");
 export const TableHeader = createComponent('th')({
     displayName: 'Table.Header',

package/dist/es6/table/lib/TableRow.js

@@ -5,7 +5,7 @@ import { createStencil, createVars } from '@workday/canvas-kit-styling';
 const childrenVars = createVars({ id: "4d9bf5", args: ["cellNumber"] });
 // Styles for rows including dynamic sizing for amount of cells within a row
 const tableRowStencil = createStencil({
-    base: { name: "n0tg5s", styles: "box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--cellNumber-4d9bf5), minmax(10rem, 1fr));" }
+    base: { name: "br895s", styles: "box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--cellNumber-4d9bf5), minmax(10rem, 1fr));" }
 }, "table-row-a6e914");
 export const TableRow = createComponent('tr')({
     displayName: 'Table.Row',

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

@@ -4059,7 +4059,9 @@ export declare const Tabs: import("@workday/canvas-kit-react/common").ComponentM
      * <Tabs.List>{Tabs.Items}</Tabs.List>
      * ```
      */
-    List: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./TabsList").TabListProps<any>, {
+    List: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./TabsList").TabListProps<any> & {
+        maskImage?: string | undefined;
+    }, {
         state: {
             getId: (item: any) => string;
             orientation: import("../../collection/lib/useBaseListModel").Orientation;

package/dist/es6/tabs/lib/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIb;;;;;;;OAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;OAQG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;OAeG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOL,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIb;;;;;;;OAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;OAQG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;OAeG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOL,CAAC"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyledType, ExtractProps } from '@workday/canvas-kit-react/common';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { Box, FlexProps } from '@workday/canvas-kit-react/layout';
 export interface TabsItemProps extends ExtractProps<typeof Box, never>, Partial<Pick<FlexProps, 'gap'>> {
     /**
@@ -53,11 +53,7 @@ export interface TabsItemProps extends ExtractProps<typeof Box, never>, Partial<
      */
     tabIndex?: number;
 }
-export declare const StyledTabItem: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "fill" | "as" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "inset" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "scrollMargin" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "cs" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY"> & {
-    ref?: React.Ref<HTMLButtonElement> | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & StyledType & Pick<TabsItemProps, "gap">, {}, {}>;
+export declare const StyledTabItem: import("@workday/canvas-kit-react/common").ElementComponent<"button", TabsItemProps>;
 export declare const useTabsItem: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         getId: (item: any) => string;
@@ -103,7 +99,10 @@ export declare const useTabsItem: import("@workday/canvas-kit-react/common").Beh
             id: string;
         }) => void;
         select(data: {
-            id: string;
+            id: string; /**
+             * Part of the ARIA specification for tabs. The currently active tab should not have a `tabIndex`
+             * set while all inactive tabs should have a `tabIndex={-1}`
+             */
         }): void;
         setContainerSize(data: {
             width?: number | undefined;
@@ -215,7 +214,10 @@ export declare const useTabsItem: import("@workday/canvas-kit-react/common").Beh
             show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
             select(data: {
-                id: string;
+                id: string; /**
+                 * Part of the ARIA specification for tabs. The currently active tab should not have a `tabIndex`
+                 * set while all inactive tabs should have a `tabIndex={-1}`
+                 */
             }): void;
             selectAll(): void;
             unselectAll(): void;
@@ -271,7 +273,11 @@ export declare const useTabsItem: import("@workday/canvas-kit-react/common").Beh
 }, import("@workday/canvas-kit-react/common").MergeProps<{
     readonly onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
     readonly onClick: () => void;
-    readonly 'data-focus-id': `${string}-undefined` | `${string}-${string}`;
+    readonly 'data-focus-id': `${string}-undefined` | `${string}-${string}`; /**
+     * Part of the ARIA specification for tabs. Lets screen readers know which tab is active. This
+     * should either be `true` or `undefined` and never `false`. This is automatically set by the
+     * component and should only be used in advanced cases.
+     */
     readonly tabIndex: 0 | -1;
 }, import("@workday/canvas-kit-react/common").MergeProps<{
     readonly ref: (instance: HTMLElement | null) => void;
@@ -329,7 +335,10 @@ export declare const TabsItem: import("@workday/canvas-kit-react/common").Elemen
             id: string;
         }) => void;
         select(data: {
-            id: string;
+            id: string; /**
+             * Part of the ARIA specification for tabs. The currently active tab should not have a `tabIndex`
+             * set while all inactive tabs should have a `tabIndex={-1}`
+             */
         }): void;
         setContainerSize(data: {
             width?: number | undefined;
@@ -441,7 +450,10 @@ export declare const TabsItem: import("@workday/canvas-kit-react/common").Elemen
             show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
             select(data: {
-                id: string;
+                id: string; /**
+                 * Part of the ARIA specification for tabs. The currently active tab should not have a `tabIndex`
+                 * set while all inactive tabs should have a `tabIndex={-1}`
+                 */
             }): void;
             selectAll(): void;
             unselectAll(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,UAAU,EAIV,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAE,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAYhE,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa;;;;oDAwEzB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uEAiBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}
+{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAKL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAE,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAe7E,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6ED,eAAO,MAAM,aAAa,sFASxB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA7FtB;;;eAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAHH;;;mBAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EATH;;;;OAIG;;;;;;;;;;;;uEAgHJ,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAhHnB;;;eAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAHH;;;mBAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8HH,CAAC"}

package/dist/es6/tabs/lib/TabsItem.js

@@ -1,75 +1,21 @@
 import * as React from 'react';
-import { colors, space, type, borderRadius, iconColors } from '@workday/canvas-kit-react/tokens';
-import { focusRing, hideMouseFocus, styled, slugify, createElemPropsHook, composeHooks, ellipsisStyles, EllipsisText, createSubcomponent, useModalityType, } from '@workday/canvas-kit-react/common';
-import { Box } from '@workday/canvas-kit-react/layout';
+import { focusRing, slugify, createElemPropsHook, composeHooks, EllipsisText, createSubcomponent, useModalityType, createComponent, } from '@workday/canvas-kit-react/common';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
 import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { useListItemRegister, useListItemRovingFocus, isSelected, useListItemSelect, useOverflowListItemMeasure, } from '@workday/canvas-kit-react/collection';
+import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { useTabsModel } from './useTabsModel';
-export const StyledTabItem = styled(Box.as('button'))(({ theme }) => ({
-    ...type.levels.subtext.large,
-    fontWeight: type.properties.fontWeights.medium,
-    border: 'none',
-    backgroundColor: 'transparent',
-    flex: '0 0 auto',
-    alignItems: 'center',
-    padding: `${space.xs} ${space.s}`,
-    height: 52,
-    boxSizing: 'border-box',
-    cursor: 'pointer',
-    color: colors.licorice300,
-    position: 'relative',
-    borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
-    transition: 'background 150ms ease, color 150ms ease',
-    ...hideMouseFocus,
-    '&:hover, &:focus': {
-        backgroundColor: colors.soap200,
-        color: colors.blackPepper400,
-        [systemIconStencil.vars.color]: iconColors.hover,
+import { buttonStencil } from '@workday/canvas-kit-react/button';
+import { system, brand, base } from '@workday/canvas-tokens-web';
+const tabItemStencil = createStencil({
+    base: { name: "br895y", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);border:none;background-color:transparent;flex:0 0 auto;min-width:var(--cnvs-sys-space-zero);align-items:center;padding:var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x4);height:3.25rem;cursor:pointer;color:var(--cnvs-sys-color-fg-muted-default);position:relative;border-radius:var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x1) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-212f69:var(--cnvs-sys-color-fg-muted-soft);&:has([data-part=\"system-icon\"]), &:has([data-part=\"ellipsis-text\"]){display:flex;gap:var(--cnvs-sys-space-x2);}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-base-palette-soap-200);color:var(--cnvs-base-palette-black-pepper-400);--color-system-icon-212f69:var(--cnvs-sys-color-icon-strong);}&:focus-visible, &.focus{outline:none;box-shadow:inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)), inset 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-212f69:var(--cnvs-sys-color-icon-strong);}&:disabled, &.disabled, &[aria-disabled]{color:var(--cnvs-sys-color-text-disabled);--color-system-icon-212f69:var(--cnvs-sys-color-fg-disabled);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-bg-transparent);--color-system-icon-212f69:var(--cnvs-sys-color-fg-disabled);}}&[aria-selected=true]{color:var(--cnvs-brand-primary-base);cursor:default;--color-system-icon-212f69:var(--cnvs-brand-primary-base);&:after{position:absolute;height:var(--cnvs-sys-space-x1);border-radius:var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-zero) var(--cnvs-sys-shape-zero);background-color:var(--cnvs-brand-primary-base);bottom:var(--cnvs-sys-space-zero);content:'';left:var(--cnvs-sys-space-zero);margin-block-start:calc(calc(var(--cnvs-sys-space-x2) / var(--cnvs-sys-space-x1)) * -1);width:100%;}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-bg-transparent);color:var(--cnvs-brand-primary-base);}}" }
+}, "tab-item-c66993");
+export const StyledTabItem = createComponent('button')({
+    displayName: 'StyledTabItem',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, tabItemStencil()) }, children));
     },
-    '&:focus': {
-        outline: `none`,
-        ...focusRing({ inset: 'outer', width: 0, separation: 2 }, theme),
-    },
-    '&:disabled, &[aria-disabled]': {
-        color: colors.licorice100,
-        [systemIconStencil.vars.color]: iconColors.disabled,
-        '&:hover': {
-            cursor: 'auto',
-            backgroundColor: `transparent`,
-            [systemIconStencil.vars.color]: iconColors.disabled,
-        },
-    },
-    '&[aria-selected=true]': {
-        color: theme.canvas.palette.primary.main,
-        cursor: 'default',
-        [systemIconStencil.vars.color]: theme.canvas.palette.primary.main,
-        '&:after': {
-            position: 'absolute',
-            height: space.xxxs,
-            borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
-            backgroundColor: theme.canvas.palette.primary.main,
-            bottom: 0,
-            content: `''`,
-            left: 0,
-            marginTop: '-2px',
-            width: '100%',
-        },
-        '&:hover, &:focus': {
-            backgroundColor: `transparent`,
-            color: theme.canvas.palette.primary.main,
-        },
-    },
-}), ({ children, gap = space.xxs }) => {
-    if (typeof children === 'string') {
-        return ellipsisStyles;
-    }
-    else {
-        return {
-            display: 'flex',
-            gap,
-        };
-    }
 });
 export const useTabsItem = composeHooks(createElemPropsHook(useTabsModel)(({ state }, _, elemProps = {}) => {
     const name = elemProps['data-id'] || '';

package/dist/es6/tabs/lib/TabsList.d.ts

@@ -222,7 +222,30 @@ export declare const useTabsList: import("@workday/canvas-kit-react/common").Beh
     readonly onFocus: () => void;
     readonly onBlur: () => void;
 }, import("@workday/canvas-kit-react/common").MergeProps<{}, import("@workday/canvas-kit-react/common").MergeProps<{}, import("@workday/canvas-kit-react/common").MergeProps<{}, {}>>>>>>>>;
-export declare const TabsList: import("@workday/canvas-kit-react/common").ElementComponentM<"div", TabListProps<any>, {
+export declare const tabsListStencil: import("@workday/canvas-kit-styling").Stencil<{
+    modality: {
+        touch: {
+            paddingInline: "--cnvs-sys-space-zero";
+        };
+        mouse: {};
+        pen: {};
+    };
+    isDragging: {
+        true: {};
+        false: {};
+    };
+    direction: {
+        left: {};
+        right: {};
+    };
+    currentScrollPos: {
+        true: {};
+        false: {};
+    };
+}, {}, never, never>;
+export declare const TabsList: import("@workday/canvas-kit-react/common").ElementComponentM<"div", TabListProps<any> & {
+    maskImage?: string | undefined;
+}, {
     state: {
         getId: (item: any) => string;
         orientation: import("../../collection/lib/useBaseListModel").Orientation;
@@ -422,7 +445,7 @@ export declare const TabsList: import("@workday/canvas-kit-react/common").Elemen
     getId: (item: any) => string;
 }>;
 export declare const useTouchDirection: () => {
-    direction: string;
+    direction: "left" | "right" | undefined;
     isDragging: boolean;
 };
 //# sourceMappingURL=TabsList.d.ts.map

package/dist/es6/tabs/lib/TabsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAStD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/F;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2LAUvB,CAAC;AAQF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BnB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;CA+B7B,CAAC"}
+{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAIL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAWnE,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/F;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2LAUvB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;oBAoD1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBpB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;CA+B7B,CAAC"}