@workday/canvas-kit-react 8.0.0-alpha.111-next.0 → 8.0.0-alpha.121-next.2

package/form-field/lib/FormField.tsx

@@ -136,7 +136,7 @@ const FormFieldInputContainer = styled('div')<GrowthBehavior & FormFieldLabelPos
   }
 );
 
-class FormField extends React.Component<FormFieldProps> {
+class FormField extends React.Component<React.PropsWithChildren<FormFieldProps>> {
   static LabelPosition = FormFieldLabelPosition;
   static ErrorType = ErrorType;
 

package/form-field/lib/Label.tsx

@@ -88,7 +88,7 @@ const LegendComponent = styled('legend')<LabelProps>(...labelStyles, ({labelPosi
 });
 const LabelComponent = styled('label')<LabelProps>(...labelStyles);
 
-class Label extends React.Component<LabelProps> {
+class Label extends React.Component<React.PropsWithChildren<LabelProps>> {
   static Position = FormFieldLabelPosition;
 
   public render() {

package/layout/lib/utils/types.ts

@@ -1,19 +1,70 @@
-import {
-  Globals,
-  GlobalsNumber,
-  SelfPosition,
-  DisplayOutside,
-  DisplayInside,
-  DisplayInternal,
-  DisplayLegacy,
-  LineStyle,
-  ContentDistribution,
-  ContentPosition,
-} from 'csstype';
-
 // We're temporarily creating these types from csstype
 // to improve type completion until we move to csstype v3.
 
+type Globals = '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset';
+type GlobalsNumber = Globals | number;
+
+type SelfPosition =
+  | 'center'
+  | 'end'
+  | 'flex-end'
+  | 'flex-start'
+  | 'self-end'
+  | 'self-start'
+  | 'start';
+
+type DisplayOutside = 'block' | 'inline' | 'run-in';
+
+type DisplayInside =
+  | '-ms-flexbox'
+  | '-ms-grid'
+  | '-webkit-flex'
+  | 'flex'
+  | 'flow'
+  | 'flow-root'
+  | 'grid'
+  | 'ruby'
+  | 'table';
+
+type DisplayInternal =
+  | 'ruby-base'
+  | 'ruby-base-container'
+  | 'ruby-text'
+  | 'ruby-text-container'
+  | 'table-caption'
+  | 'table-cell'
+  | 'table-column'
+  | 'table-column-group'
+  | 'table-footer-group'
+  | 'table-header-group'
+  | 'table-row'
+  | 'table-row-group';
+
+type DisplayLegacy =
+  | '-ms-inline-flexbox'
+  | '-ms-inline-grid'
+  | '-webkit-inline-flex'
+  | 'inline-block'
+  | 'inline-flex'
+  | 'inline-grid'
+  | 'inline-list-item'
+  | 'inline-table';
+
+type LineStyle =
+  | 'dashed'
+  | 'dotted'
+  | 'double'
+  | 'groove'
+  | 'hidden'
+  | 'inset'
+  | 'none'
+  | 'outset'
+  | 'ridge'
+  | 'solid';
+
+type ContentDistribution = 'space-around' | 'space-between' | 'space-evenly' | 'stretch';
+type ContentPosition = 'center' | 'end' | 'flex-end' | 'flex-start' | 'start';
+
 // Border
 export type PropertyBorder = Globals | LineStyle | (string & {});
 

package/menu/lib/MenuList.tsx

@@ -11,11 +11,12 @@ import {Stack} from '@workday/canvas-kit-react/layout';
 
 import {useMenuModel} from './useMenuModel';
 
-export interface MenuListProps extends Partial<ExtractProps<typeof Stack, never>> {
+export interface MenuListProps<T = any>
+  extends Omit<Partial<ExtractProps<typeof Stack, never>>, 'children'> {
   /**
    * The label text of the MenuList.
    */
-  children: React.ReactNode;
+  children: React.ReactNode | ((item: T) => React.ReactNode);
 }
 
 export const useMenuList = createElemPropsHook(useMenuModel)(model => {

package/modal/lib/ModalOverlay.tsx

@@ -14,9 +14,7 @@ import styled from '@emotion/styled';
 import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 import {useModalModel} from './hooks';
 
-export interface ModalOverlayProps extends BoxProps {
-  children: React.ReactNode;
-}
+export interface ModalOverlayProps extends BoxProps {}
 
 const fadeIn = keyframes`
   from {
@@ -86,7 +84,7 @@ const OpenModalOverlay = createSubcomponent('div')({
   displayName: 'Modal.OpenOverlay',
   modelHook: useModalModel,
   elemPropsHook: useModalOverlay,
-})<ModalOverlayProps>((elemProps: ModalOverlayProps, Element, model) => {
+})<ModalOverlayProps>((elemProps, Element, model) => {
   const windowSize = useWindowSize();
 
   const content = (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "8.0.0-alpha.111-next.0+2f9c1930",
+  "version": "8.0.0-alpha.121-next.2+83e3394d",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -10,7 +10,8 @@
   "types": "dist/es6/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "http://github.com/Workday/canvas-kit/tree/master/modules/canvas-kit-react"
+    "url": "https://github.com/workday/canvas-kit.git",
+    "directory": "modules/react"
   },
   "files": [
     "*/package.json",
@@ -40,7 +41,7 @@
     "workday"
   ],
   "peerDependencies": {
-    "react": "^16.8 || ^17.0"
+    "react": "^17.0 || ^18.0"
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.1.1",
@@ -48,13 +49,12 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^8.0.0-alpha.111-next.0+2f9c1930",
-    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.111-next.0+2f9c1930",
-    "@workday/canvas-kit-preview-react": "^8.0.0-alpha.111-next.0+2f9c1930",
+    "@workday/canvas-kit-labs-react": "^8.0.0-alpha.121-next.2+83e3394d",
+    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.121-next.2+83e3394d",
+    "@workday/canvas-kit-preview-react": "^8.0.0-alpha.121-next.2+83e3394d",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/design-assets-types": "^0.2.4",
+    "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
-    "csstype": "^2.6.17",
     "element-closest": "^3.0.2",
     "lodash": "^4.17.14",
     "polished": "^4.1.3",
@@ -69,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "2f9c193032b814210ceff5a30bbcc5dc2dd1a37c"
+  "gitHead": "83e3394d370efc56362ddb4bcc49c65a12a2bc8f"
 }

package/pagination/lib/Pagination/AdditionalDetails.tsx

@@ -6,7 +6,7 @@ import {PaginationModel} from './types';
 import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
 import {useLiveRegion} from './common/useLiveRegion';
 
-export interface AdditionalDetailsProps extends FlexProps {
+export interface AdditionalDetailsProps extends Omit<FlexProps, 'children'> {
   children: (model: PaginationModel) => React.ReactNode | React.ReactNode;
   model: PaginationModel;
   shouldAnnounceToScreenReader?: boolean;

package/pagination/lib/Pagination/GoTo/Label.tsx

@@ -4,7 +4,8 @@ import {type, typeColors} from '@workday/canvas-kit-react/tokens';
 import {PaginationModel} from '../types';
 import {StyledType, styled} from '@workday/canvas-kit-react/common';
 
-export interface GoToLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+export interface GoToLabelProps
+  extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> {
   model: PaginationModel;
   /**
    * Accepts child elements or a render prop.

package/pagination/lib/Pagination/PageButton.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {styled} from '@workday/canvas-kit-react/common';
+import {EmotionCanvasTheme, styled, useTheme} from '@workday/canvas-kit-react/common';
 import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
 import {BaseButton} from '@workday/canvas-kit-react/button';
 
@@ -19,22 +19,27 @@ const StyledPageButton = styled(BaseButton)<{toggled?: boolean}>(
   }
 );
 
-const getPaginationButtonColors = (toggled: boolean) => {
+const getPaginationButtonColors = (toggled: boolean, theme: EmotionCanvasTheme) => {
+  const {
+    canvas: {
+      palette: {primary: themePrimary},
+    },
+  } = theme;
   return {
     default: {
-      background: toggled ? colors.blueberry400 : 'transparent',
+      background: toggled ? themePrimary.main : 'transparent',
       label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
     },
     hover: {
-      background: toggled ? colors.blueberry400 : colors.soap300,
+      background: toggled ? themePrimary.main : colors.soap300,
       label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
     },
     active: {
-      background: toggled ? colors.blueberry400 : 'transparent',
+      background: toggled ? themePrimary.main : 'transparent',
       label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
     },
     focus: {
-      background: toggled ? colors.blueberry400 : 'transparent',
+      background: toggled ? themePrimary.main : 'transparent',
       label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
     },
     disabled: {
@@ -56,6 +61,7 @@ export const PageButton = ({
   ...elemProps
 }: PageButtonProps) => {
   const isCurrentPage = pageNumber === model.state.currentPage;
+  const theme = useTheme();
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     onClick?.(e);
@@ -65,7 +71,7 @@ export const PageButton = ({
   return (
     <StyledPageButton
       aria-current={isCurrentPage ? 'page' : undefined}
-      colors={getPaginationButtonColors(isCurrentPage)}
+      colors={getPaginationButtonColors(isCurrentPage, theme)}
       aria-pressed={undefined}
       onClick={handleClick}
       toggled={isCurrentPage}

package/pagination/lib/Pagination/PageList.tsx

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

package/popup/lib/hooks/useCloseOnFullscreenExit.ts

@@ -12,7 +12,7 @@ import {usePopupModel} from './usePopupModel';
  */
 export const useCloseOnFullscreenExit = createElemPropsHook(usePopupModel)(model => {
   const handler = React.useCallback(
-    event => {
+    (event: any) => {
       if (!screenfull.isFullscreen) {
         model.events.hide(event);
       }

package/popup/lib/hooks/useTransferOnFullscreenEnter.ts

@@ -16,7 +16,7 @@ import {usePopupModel} from './usePopupModel';
  */
 export const useTransferOnFullscreenEnter = createElemPropsHook(usePopupModel)(model => {
   const handler = React.useCallback(
-    event => {
+    (event: any) => {
       if (screenfull.isFullscreen && model.state.stackRef.current) {
         PopupStack.transferToCurrentContext({
           element: model.state.stackRef.current,

package/popup/lib/hooks/useTransferOnFullscreenExit.ts

@@ -15,7 +15,7 @@ import {usePopupModel} from './usePopupModel';
  */
 export const useTransferOnFullscreenExit = createElemPropsHook(usePopupModel)(model => {
   const handler = React.useCallback(
-    event => {
+    (event: any) => {
       if (!screenfull.isFullscreen && model.state.stackRef.current) {
         PopupStack.transferToCurrentContext({
           element: model.state.stackRef.current,

package/radio/lib/Radio.tsx

@@ -48,6 +48,7 @@ export interface RadioProps extends Themeable {
    * The value of the Radio button.
    */
   value?: string;
+  variant?: 'inverse' | undefined;
 }
 
 const radioBorderRadius = 9;
@@ -77,16 +78,20 @@ const RadioInputWrapper = styled('div')<Pick<RadioProps, 'disabled'>>({
   width: radioWidth,
 });
 
-const RadioRipple = styled('span')<Pick<RadioProps, 'disabled'>>({
-  borderRadius: borderRadius.circle,
-  boxShadow: `0 0 0 0 ${colors.soap200}`,
-  height: radioHeight,
-  transition: 'box-shadow 150ms ease-out',
-  width: radioWidth,
-  position: 'absolute',
-  pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
-  zIndex: -1,
-});
+const RadioRipple = styled('span')<Pick<RadioProps, 'disabled' | 'variant'>>(
+  {
+    borderRadius: borderRadius.circle,
+    boxShadow: `0 0 0 0 ${colors.soap200}`,
+    height: radioHeight,
+    transition: 'box-shadow 150ms ease-out',
+    width: radioWidth,
+    position: 'absolute',
+    pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
+  },
+  ({variant}) => ({
+    opacity: variant === 'inverse' ? '0.4' : '1',
+  })
+);
 
 const RadioInput = styled('input')<RadioProps & StyledType>(
   {
@@ -105,6 +110,7 @@ const RadioInput = styled('input')<RadioProps & StyledType>(
   ({
     checked,
     disabled,
+    variant,
     theme: {
       canvas: {
         palette: {
@@ -134,34 +140,68 @@ const RadioInput = styled('input')<RadioProps & StyledType>(
     // input (which is visually hidden)
     '&:hover ~ div:first-of-type': {
       backgroundColor: checked
-        ? themePrimary.main
+        ? variant === 'inverse'
+          ? colors.frenchVanilla100
+          : themePrimary.main
         : disabled
         ? inputColors.disabled.background
         : 'white',
       borderColor: checked
-        ? themePrimary.main
+        ? variant === 'inverse'
+          ? colors.soap300
+          : themePrimary.main
         : disabled
         ? inputColors.disabled.border
+        : variant === 'inverse'
+        ? colors.soap300
         : inputColors.hoverBorder,
       borderWidth: '1px',
     },
     '&:focus, &focus:hover': {
       '& ~ div:first-of-type': {
-        borderColor: checked ? themePrimary.main : themeFocusOutline,
         borderWidth: '2px',
+        borderColor: variant === 'inverse' ? colors.blackPepper400 : themeFocusOutline,
+        boxShadow: 'none',
+        ...focusRing({
+          width: variant === 'inverse' ? 2 : 0,
+          separation: 0,
+          animate: false,
+          innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+          outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
+        }),
       },
     },
     '&:checked:focus ~ div:first-of-type': {
-      ...focusRing({separation: 2, outerColor: themeFocusOutline}),
+      ...focusRing({
+        separation: 2,
+        width: 2,
+        innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+        outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+      }),
+      borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
+      borderWidth: '2px',
     },
     ...mouseFocusBehavior({
       '&:focus ~ div:first-of-type': {
-        ...focusRing({width: 0, outerColor: themeFocusOutline}),
+        ...focusRing({
+          width: 0,
+          outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+        }),
         borderWidth: '1px',
-        borderColor: checked ? themePrimary.main : inputColors.border,
+        borderColor: checked
+          ? variant === 'inverse'
+            ? colors.soap300
+            : themePrimary.main
+          : inputColors.border,
       },
       '&:focus:hover ~ div:first-of-type, &:focus:active ~ div:first-of-type': {
-        borderColor: checked ? themePrimary.main : inputColors.hoverBorder,
+        borderColor: checked
+          ? variant === 'inverse'
+            ? colors.soap300
+            : themePrimary.main
+          : variant === 'inverse'
+          ? colors.soap300
+          : inputColors.hoverBorder,
       },
     }),
   })
@@ -187,6 +227,7 @@ const RadioBackground = styled('div')<RadioProps>(
   ({
     checked,
     disabled,
+    variant,
     theme: {
       canvas: {
         palette: {primary: themePrimary},
@@ -194,19 +235,26 @@ const RadioBackground = styled('div')<RadioProps>(
     },
   }) => ({
     borderColor: checked
-      ? themePrimary.main
+      ? variant === 'inverse'
+        ? colors.soap300
+        : themePrimary.main
       : disabled
       ? inputColors.disabled.border
+      : variant === 'inverse'
+      ? colors.soap300
       : inputColors.border,
     backgroundColor: checked
-      ? themePrimary.main
+      ? variant === 'inverse'
+        ? colors.frenchVanilla100
+        : themePrimary.main
       : disabled
       ? inputColors.disabled.background
       : 'white',
+    opacity: disabled && variant === 'inverse' ? '.4' : '1',
   })
 );
 
-const RadioCheck = styled('div')<Pick<RadioProps, 'checked'>>(
+const RadioCheck = styled('div')<Pick<RadioProps, 'checked' | 'variant'>>(
   {
     borderRadius: radioBorderRadius,
     display: 'flex',
@@ -216,8 +264,11 @@ const RadioCheck = styled('div')<Pick<RadioProps, 'checked'>>(
     transition: 'transform 200ms ease, opacity 200ms ease',
     width: radioDot,
   },
-  ({theme}) => ({
-    backgroundColor: theme.canvas.palette.primary.contrast,
+  ({theme, variant}) => ({
+    backgroundColor:
+      variant === 'inverse'
+        ? theme.canvas.palette.primary.main
+        : theme.canvas.palette.primary.contrast,
   }),
   ({checked}) => ({
     opacity: checked ? 1 : 0,
@@ -225,18 +276,35 @@ const RadioCheck = styled('div')<Pick<RadioProps, 'checked'>>(
   })
 );
 
-const RadioLabel = styled('label')<{disabled?: boolean}>(
+const RadioLabel = styled('label')<{disabled?: boolean; variant?: 'inverse' | undefined}>(
   {
     ...canvas.type.levels.subtext.large,
     paddingLeft: radioLabelDistance,
   },
-  ({disabled}) => (disabled ? {color: inputColors.disabled.text} : {cursor: 'pointer'})
+  ({variant}) => (variant === 'inverse' ? {color: colors.frenchVanilla100} : undefined),
+  ({disabled, variant}) =>
+    disabled
+      ? {
+          color: variant === 'inverse' ? colors.frenchVanilla100 : inputColors.disabled.text,
+          opacity: variant === 'inverse' ? '.4' : '1',
+        }
+      : {cursor: 'pointer'}
 );
 
 export const Radio = createComponent('input')({
   displayName: 'Radio',
   Component: (
-    {checked = false, id, label = '', disabled, name, onChange, value, ...elemProps}: RadioProps,
+    {
+      checked = false,
+      id,
+      label = '',
+      disabled,
+      name,
+      onChange,
+      value,
+      variant,
+      ...elemProps
+    }: RadioProps,
     ref,
     Element
   ) => {
@@ -255,15 +323,16 @@ export const Radio = createComponent('input')({
             type="radio"
             value={value}
             aria-checked={checked}
+            variant={variant}
             {...elemProps}
           />
-          <RadioRipple />
-          <RadioBackground checked={checked} disabled={disabled}>
-            <RadioCheck checked={checked} />
+          <RadioRipple variant={variant} />
+          <RadioBackground checked={checked} disabled={disabled} variant={variant}>
+            <RadioCheck checked={checked} variant={variant} />
           </RadioBackground>
         </RadioInputWrapper>
         {label && (
-          <RadioLabel htmlFor={inputId} disabled={disabled}>
+          <RadioLabel htmlFor={inputId} disabled={disabled} variant={variant}>
             {label}
           </RadioLabel>
         )}

package/tabs/lib/TabsItem.tsx

@@ -12,6 +12,7 @@ import {
   ellipsisStyles,
   EllipsisText,
   createSubcomponent,
+  useModalityType,
 } from '@workday/canvas-kit-react/common';
 import {Box, StackProps} from '@workday/canvas-kit-react/layout';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
@@ -91,7 +92,6 @@ export const StyledTabItem = styled(Box.as('button'))<StyledType & Pick<TabsItem
     backgroundColor: 'transparent',
     flex: '0 0 auto',
     alignItems: 'center',
-    maxWidth: '280px',
     padding: `${space.xs} ${space.s}`,
     height: 52,
     boxSizing: 'border-box',
@@ -201,10 +201,11 @@ export const TabsItem = createSubcomponent('button')({
     Icon: SystemIcon,
     Text: EllipsisText,
   },
-})<TabsItemProps>(({children, ...elemProps}, Element, model) => {
+})<TabsItemProps>(({children, ...elemProps}, Element) => {
+  const modality = useModalityType();
   return (
     <OverflowTooltip>
-      <StyledTabItem as={Element} {...elemProps}>
+      <StyledTabItem as={Element} maxWidth={modality === 'touch' ? undefined : 280} {...elemProps}>
         {children}
       </StyledTabItem>
     </OverflowTooltip>

package/tabs/lib/TabsList.tsx

@@ -6,6 +6,9 @@ import {
   createSubcomponent,
   createElemPropsHook,
   ExtractProps,
+  useModalityType,
+  styled,
+  StyledType,
 } from '@workday/canvas-kit-react/common';
 import {Stack} from '@workday/canvas-kit-react/layout';
 import {
@@ -17,7 +20,8 @@ import {
 import {useTabsModel} from './useTabsModel';
 
 // Use `Partial` here to make `spacing` optional
-export interface TabListProps<T = unknown> extends Partial<ExtractProps<typeof Stack, never>> {
+export interface TabListProps<T = any>
+  extends Omit<Partial<ExtractProps<typeof Stack, never>>, 'children'> {
   /**
    * If items are passed to a `TabsModel`, the child of `Tabs.List` should be a render prop. The
    * List will determine how and when the item will be rendered.
@@ -33,28 +37,44 @@ export interface TabListProps<T = unknown> extends Partial<ExtractProps<typeof S
 
 export const useTabsList = composeHooks(
   createElemPropsHook(useTabsModel)(() => {
-    return {role: 'tablist'};
+    const modality = useModalityType();
+    return {role: 'tablist', overflowX: modality === 'touch' ? 'auto' : undefined};
   }),
   useOverflowListMeasure,
   useListResetCursorOnBlur
 );
 
+const StyledStack = styled(Stack)<StyledType>({
+  '::after': {
+    content: '""',
+    position: 'sticky',
+    height: 52,
+    minWidth: 30,
+    background: `linear-gradient(to right,rgba(255,255,255,0),white);`,
+    zIndex: 1,
+    right: 0,
+    top: 0,
+    pointerEvents: 'none',
+  },
+});
+
 export const TabsList = createSubcomponent('div')({
   displayName: 'Tabs.List',
   modelHook: useTabsModel,
   elemPropsHook: useTabsList,
 })<TabListProps>(({children, overflowButton, ...elemProps}, Element, model) => {
+  const modality = useModalityType();
   return (
-    <Stack
+    <StyledStack
       as={Element}
       position="relative"
       borderBottom={`1px solid ${commonColors.divider}`}
-      paddingX="m"
+      paddingX={modality === 'touch' ? 'zero' : 'm'}
       spacing="xxxs"
       {...elemProps}
     >
       {useListRenderItems(model, children)}
       {overflowButton}
-    </Stack>
+    </StyledStack>
   );
 });

package/tabs/lib/TabsPanel.tsx

@@ -14,7 +14,7 @@ import {Box} from '@workday/canvas-kit-react/layout';
 
 import {useTabsModel} from './useTabsModel';
 
-export interface TabPanelProps<T = unknown> extends ExtractProps<typeof Box, never> {
+export interface TabPanelProps extends ExtractProps<typeof Box, never> {
   /**
    * The contents of the TabPanel.
    */

package/tabs/lib/TabsPanels.tsx

@@ -5,7 +5,7 @@ import {useListRenderItems} from '@workday/canvas-kit-react/collection';
 
 import {useTabsModel} from './useTabsModel';
 
-export interface TabsPanelsProps<T = unknown> {
+export interface TabsPanelsProps<T = any> {
   /**
    *
    */