@workday/canvas-kit-react 8.0.0-alpha.150-next.2 → 8.0.0-alpha.151-next.3

package/dist/es6/text/lib/Text.js

@@ -0,0 +1,68 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+// type changes no need
+import { type } from '@workday/canvas-kit-react/tokens';
+import { Box } from '@workday/canvas-kit-react/layout';
+/**
+ * Function returns updated props by token and variant values
+ */
+var validateProps = function (_a) {
+    var typeLevel = _a.typeLevel, variant = _a.variant, props = __rest(_a, ["typeLevel", "variant"]);
+    var updatedProps = props;
+    var tokenPropNames = [
+        'color',
+        'fontFamily',
+        'fontSize',
+        'fontWeight',
+        'letterSpacing',
+        'lineHeight',
+    ];
+    /*
+    If token provided it updates undefined values of token styles:
+    `fontFamily`, `fontSize`, `lineHeight`, `fontWeight`, `color`
+    by replacing them by token value
+    */
+    if (typeLevel) {
+        var _b = typeLevel.split('.'), level = _b[0], size = _b[1];
+        var tokenProps_1 = type.levels[level][size];
+        tokenPropNames.forEach(function (item) {
+            if (!props[item]) {
+                updatedProps[item] = tokenProps_1[item];
+            }
+        });
+    }
+    // If variant provided it updates color value by variant color
+    if (variant) {
+        updatedProps = __assign(__assign({}, updatedProps), type.variants[variant]);
+    }
+    return updatedProps;
+};
+export var Text = createComponent('span')({
+    displayName: 'Text',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(Box, __assign({ ref: ref, as: Element }, validateProps(elemProps)), children));
+    },
+});

package/dist/es6/text/lib/TypeLevelComponents.d.ts

@@ -0,0 +1,13 @@
+import { TextProps } from '@workday/canvas-kit-react/text';
+/**
+ * Props interface for type level specific component:
+ * Title, Heading, BodyText, Subtext.
+ */
+export interface TypeLevelProps extends Omit<TextProps, 'typeLevel'> {
+    size: 'large' | 'medium' | 'small';
+}
+export declare const Subtext: import("../../common").ElementComponent<"p", TypeLevelProps>;
+export declare const BodyText: import("../../common").ElementComponent<"p", TypeLevelProps>;
+export declare const Heading: import("../../common").ElementComponent<"h2", TypeLevelProps>;
+export declare const Title: import("../../common").ElementComponent<"h1", TypeLevelProps>;
+//# sourceMappingURL=TypeLevelComponents.d.ts.map

package/dist/es6/text/lib/TypeLevelComponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypeLevelComponents.d.ts","sourceRoot":"","sources":["../../../../text/lib/TypeLevelComponents.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,SAAS,EAAC,MAAM,gCAAgC,CAAC;AAE/D;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;IAClE,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,OAAO,8DAMlB,CAAC;AAEH,eAAO,MAAM,QAAQ,8DAMnB,CAAC;AAEH,eAAO,MAAM,OAAO,+DAMlB,CAAC;AAEH,eAAO,MAAM,KAAK,+DAMhB,CAAC"}

package/dist/es6/text/lib/TypeLevelComponents.js

@@ -0,0 +1,57 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { Text } from '@workday/canvas-kit-react/text';
+export var Subtext = createComponent('p')({
+    displayName: 'Subtext',
+    Component: function (_a, ref, Element) {
+        var size = _a.size, elemProps = __rest(_a, ["size"]);
+        var typeLevel = "subtext." + size;
+        return React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    },
+});
+export var BodyText = createComponent('p')({
+    displayName: 'BodyText',
+    Component: function (_a, ref, Element) {
+        var size = _a.size, elemProps = __rest(_a, ["size"]);
+        var typeLevel = "body." + size;
+        return React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    },
+});
+export var Heading = createComponent('h2')({
+    displayName: 'Heading',
+    Component: function (_a, ref, Element) {
+        var size = _a.size, elemProps = __rest(_a, ["size"]);
+        var typeLevel = "heading." + size;
+        return React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    },
+});
+export var Title = createComponent('h1')({
+    displayName: 'Title',
+    Component: function (_a, ref, Element) {
+        var size = _a.size, elemProps = __rest(_a, ["size"]);
+        var typeLevel = "title." + size;
+        return React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    },
+});

package/form-field/lib/Hint.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import {ErrorType, styled, Themeable} from '@workday/canvas-kit-react/common';
-import {space, type} from '@workday/canvas-kit-react/tokens';
+import {ErrorType, Themeable, styled} from '@workday/canvas-kit-react/common';
+import {space} from '@workday/canvas-kit-react/tokens';
+import {Subtext, Text} from '@workday/canvas-kit-react/text';
 
 export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraphElement> {
   /**
@@ -19,20 +20,7 @@ export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraph
   alertLabel?: string;
 }
 
-const Label = styled('span')<Pick<HintProps, 'error'>>(
-  type.levels.subtext.medium,
-  {
-    fontWeight: type.properties.fontWeights.medium,
-  },
-  ({error, theme}) => error === ErrorType.Error && {color: theme.canvas.palette.error.main}
-);
-
-const Message = styled('p')<Pick<HintProps, 'error'>>(
-  type.levels.subtext.medium,
-  {
-    margin: `${space.xxs} 0 0`,
-    width: '100%',
-  },
+const Message = styled(Subtext)<Pick<HintProps, 'error'>>(
   ({error, theme}) => error === ErrorType.Error && {color: theme.canvas.palette.error.main}
 );
 
@@ -41,7 +29,6 @@ class Hint extends React.Component<HintProps> {
 
   public render() {
     const {errorLabel = 'Error', alertLabel = 'Alert', children, error} = this.props;
-
     let hintLabel: string | undefined;
     switch (error) {
       case Hint.ErrorType.Error:
@@ -54,8 +41,10 @@ class Hint extends React.Component<HintProps> {
     }
 
     return (
-      <Message {...this.props}>
-        {typeof error !== 'undefined' && hintLabel && <Label error={error}>{hintLabel}: </Label>}
+      <Message size="medium" margin={`${space.xxs} 0 0`} width="100%" {...this.props}>
+        {typeof error !== 'undefined' && hintLabel && (
+          <Text fontWeight="medium">{hintLabel}: </Text>
+        )}
         {children}
       </Message>
     );

package/index.ts

@@ -27,6 +27,7 @@ export * from './status-indicator';
 export * from './switch';
 export * from './table';
 export * from './tabs';
+export * from './text';
 export * from './text-area';
 export * from './text-input';
 export * from './toast';

package/layout/index.ts

@@ -7,9 +7,11 @@ export * from './lib/utils/border';
 export * from './lib/utils/color';
 export {DepthStyleProps} from './lib/utils/depth';
 export * from './lib/utils/flexItem';
+export * from './lib/utils/font';
 export * from './lib/utils/layout';
 export * from './lib/utils/position';
 export {SpaceStyleProps} from './lib/utils/space';
+export * from './lib/utils/text';
 export * from './lib/Flex';
 export * from './lib/Grid';
 export * from './lib/Stack';

package/layout/lib/Box.tsx

@@ -8,23 +8,47 @@ import {border, BorderStyleProps} from './utils/border';
 import {color, ColorStyleProps} from './utils/color';
 import {depth, DepthStyleProps} from './utils/depth';
 import {flexItem, FlexItemStyleProps} from './utils/flexItem';
+import {font, FontStyleProps} from './utils/font';
 import {layout, LayoutStyleProps} from './utils/layout';
 import {other, OtherStyleProps} from './utils/other';
 import {position, PositionStyleProps} from './utils/position';
 import {space, SpaceStyleProps} from './utils/space';
+import {text, TextStyleProps} from './utils/text';
 
 export type BoxProps = BorderStyleProps &
   ColorStyleProps &
   DepthStyleProps &
   FlexItemStyleProps &
+  FontStyleProps &
   LayoutStyleProps &
   OtherStyleProps &
   PositionStyleProps &
-  SpaceStyleProps & {
+  SpaceStyleProps &
+  TextStyleProps & {
     children?: React.ReactNode;
   };
 
-const omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border', 'background'];
+const omittedProps = [
+  'display',
+  'color',
+  'height',
+  'overflow',
+  'width',
+  'border',
+  'background',
+  'fontSize',
+  'fontWeight',
+  'fontFamily',
+  'letterSpacing',
+  'lineHeight',
+  'textAlign',
+  'textDecoration',
+  'textOverflow',
+  'textTransform',
+  'textShadow',
+  'whiteSpace',
+  'wordBreak',
+];
 
 const shouldForwardProp = (prop: string) => {
   return isPropValid(prop) && !omittedProps.includes(prop);
@@ -55,9 +79,11 @@ export const boxStyleFn = <P extends BoxProps>(props: P) => {
     color,
     depth,
     flexItem,
+    font,
     layout,
     position,
     space,
+    text,
   ].reduce((result, style) => {
     // @ts-ignore
     const temp = typeof style === 'function' ? style(props) : style;
@@ -79,9 +105,11 @@ const StyledBoxElement = styled('div', {shouldForwardProp})<StyledType & BoxProp
   color,
   depth,
   flexItem,
+  font,
   layout,
   position,
-  space
+  space,
+  text
 );
 
 // Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
@@ -93,10 +121,12 @@ const StyledBoxComponent = styled('div')<StyledType & BoxProps>(
   color,
   depth,
   flexItem,
+  font,
   layout,
   other,
   position,
-  space
+  space,
+  text
 );
 
 /**

package/layout/lib/utils/color.ts

@@ -1,4 +1,9 @@
-import {colors as colorTokens, CanvasColor} from '@workday/canvas-kit-react/tokens';
+// type changes no need
+import {
+  colors as colorTokens,
+  CanvasColor,
+  CanvasTypeVariants,
+} from '@workday/canvas-kit-react/tokens';
 
 export type ColorTokens = typeof colorTokens;
 
@@ -26,7 +31,7 @@ const getBackgroundImage = (value: string) => ({
   backgroundImage: value,
 });
 
-const getColor = (value: CanvasColor | string) => ({
+const getColor = (value: CanvasColor | keyof CanvasTypeVariants | string) => ({
   color: colorTokens[value] || value,
 });
 

package/layout/lib/utils/font.ts

@@ -0,0 +1,67 @@
+import {Property} from 'csstype';
+import {type, CanvasTypeProperties} from '@workday/canvas-kit-react/tokens';
+
+export type FontFamilyTokens = keyof CanvasTypeProperties['fontFamilies'];
+export type FontSizeTokens = keyof CanvasTypeProperties['fontSizes'];
+export type FontWeightTokens = keyof CanvasTypeProperties['fontWeights'];
+type FontValue = FontFamilyTokens & FontSizeTokens & FontWeightTokens;
+
+/** style props to for color properties */
+export type FontStyleProps = {
+  /** sets `font-family` property */
+  fontFamily?: Property.FontFamily | FontFamilyTokens;
+  /** sets `font-size` property */
+  fontSize?: Property.FontSize | FontSizeTokens;
+  /** sets `font-style` property */
+  fontStyle?: Property.FontStyle;
+  /** sets `font-weight` property */
+  fontWeight?: Property.FontWeight | FontWeightTokens;
+};
+
+const getFontFamily = (value: FontStyleProps['fontFamily']) => ({
+  fontFamily: type.properties.fontFamilies[value as FontFamilyTokens] || value,
+});
+
+const getFontSize = (value: FontStyleProps['fontSize']) => ({
+  fontSize: type.properties.fontSizes[value as FontSizeTokens] || value,
+});
+
+const getFontStyle = (value: FontStyleProps['fontStyle']) => ({
+  fontStyle: value,
+});
+
+const getFontWeight = (value: FontStyleProps['fontWeight']) => ({
+  fontWeight: type.properties.fontWeights[value as FontWeightTokens] || value,
+});
+
+const fontProps = {
+  fontFamily: getFontFamily,
+  fontSize: getFontSize,
+  fontWeight: getFontWeight,
+  fontStyle: getFontStyle,
+};
+
+/**
+ * A style prop function that takes components props and returns font styles from canvas token values.
+ * If no `FontStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `font` with low-level, styled components
+ * const BoxExample = () => (
+ *   <Box fontFamily="monospace" fontWeight="medium">Hello, fonts!</Box>
+ * );
+ *
+ */
+export function font<P extends FontStyleProps>(props: P) {
+  let styles = {};
+  for (const key in props) {
+    if (key in fontProps) {
+      const value = props[key as keyof FontStyleProps] as FontValue;
+      const fontFn = fontProps[key as keyof FontStyleProps];
+      const style = fontFn(value);
+      styles = {...styles, ...style};
+    }
+  }
+
+  return styles;
+}

package/layout/lib/utils/text.ts

@@ -0,0 +1,57 @@
+import {Property} from 'csstype';
+
+/** style props to for text properties */
+export type TextStyleProps = {
+  /** sets `line-height` property */
+  lineHeight?: Property.LineHeight;
+  /** sets `letter-spacing` property */
+  letterSpacing?: Property.LetterSpacing;
+  /** sets `text-align` property */
+  textAlign?: Property.TextAlign;
+  /** sets `text-decoration` property */
+  textDecoration?: Property.TextDecoration;
+  /** sets `text-overflow` property */
+  textOverflow?: Property.TextOverflow;
+  /** sets `text-transform` property */
+  textTransform?: Property.TextTransform;
+  /** sets `text-shadow` property */
+  textShadow?: Property.TextShadow;
+  /** sets `white-space` property */
+  whiteSpace?: Property.WhiteSpace;
+  /** sets `word-break` property */
+  wordBreak?: Property.WordBreak;
+};
+
+const textProps = [
+  'lineHeight',
+  'letterSpacing',
+  'textAlign',
+  'textDecoration',
+  'textOverflow',
+  'textTransform',
+  'textShadow',
+  'whiteSpace',
+  'wordBreak',
+];
+
+/**
+ * A style prop function that takes components props and returns text styles.
+ * If no `TextStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `text-align` with low-level, styled components
+ * const BoxExample = () => (
+ *   <Box textAlign="center">Hello, alignment!</Box>
+ * );
+ *
+ */
+export function text<P extends TextStyleProps>(props: P) {
+  let styles = {};
+  for (const key in props) {
+    if (textProps.includes(key)) {
+      const value = props[key as keyof TextStyleProps] as string;
+      styles = {...styles, [key]: value};
+    }
+  }
+  return styles;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "8.0.0-alpha.150-next.2+b0c3f340",
+  "version": "8.0.0-alpha.151-next.3+548c0a40",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,9 +49,9 @@
     "@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.150-next.2+b0c3f340",
-    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.150-next.2+b0c3f340",
-    "@workday/canvas-kit-preview-react": "^8.0.0-alpha.150-next.2+b0c3f340",
+    "@workday/canvas-kit-labs-react": "^8.0.0-alpha.151-next.3+548c0a40",
+    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.151-next.3+548c0a40",
+    "@workday/canvas-kit-preview-react": "^8.0.0-alpha.151-next.3+548c0a40",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -70,5 +70,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "b0c3f340ec8e06d39bed5d992b23a1b36892106f"
+  "gitHead": "548c0a4090f25b1feeabaf1c1288fec4539e7d0a"
 }

package/pagination/lib/Pagination/AdditionalDetails.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {type, typeColors, space} from '@workday/canvas-kit-react/tokens';
+import {type, space, typeColors} from '@workday/canvas-kit-react/tokens';
 import {accessibleHide, styled, StyledType} from '@workday/canvas-kit-react/common';
 
 import {PaginationModel} from './types';
@@ -16,19 +16,13 @@ export interface AdditionalDetailsProps extends Omit<FlexProps, 'children'> {
 const StyledAdditionalDetails = styled(Flex)<
   StyledType & Pick<AdditionalDetailsProps, 'shouldHideDetails'>
 >(({shouldHideDetails}) => {
-  const styles = {
-    ...type.levels.subtext.medium,
-    color: typeColors.hint,
-  };
   if (shouldHideDetails) {
     return {
-      ...styles,
       ...accessibleHide,
       marginTop: space.zero,
     };
   } else {
     return {
-      ...styles,
       marginTop: space.xs,
     };
   }
@@ -43,7 +37,12 @@ export const AdditionalDetails = ({
   const liveRegionProps = useLiveRegion({shouldAnnounceToScreenReader});
 
   return (
-    <StyledAdditionalDetails {...liveRegionProps} {...elemProps}>
+    <StyledAdditionalDetails
+      {...type.levels.subtext.medium}
+      color={typeColors.hint}
+      {...liveRegionProps}
+      {...elemProps}
+    >
       {typeof children === 'function' ? children(model) : children}
     </StyledAdditionalDetails>
   );

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import {type, typeColors} from '@workday/canvas-kit-react/tokens';
-
 import {PaginationModel} from '../types';
-import {StyledType, styled} from '@workday/canvas-kit-react/common';
+import {LabelText} from '@workday/canvas-kit-react/text';
 
 export interface GoToLabelProps
   extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> {
@@ -13,16 +11,10 @@ export interface GoToLabelProps
   children?: (model: PaginationModel) => React.ReactNode | React.ReactNode;
 }
 
-const StyledLabel = styled('label')<StyledType>({
-  ...type.levels.subtext.medium,
-  color: typeColors.hint,
-  whiteSpace: 'nowrap',
-});
-
 export const GoToLabel = ({model, children, ...elemProps}: GoToLabelProps) => {
   return (
-    <StyledLabel {...elemProps}>
+    <LabelText typeLevel="subtext.medium" variant="hint" whiteSpace="nowrap" {...elemProps}>
       {typeof children === 'function' ? children(model) : children}
-    </StyledLabel>
+    </LabelText>
   );
 };

package/popup/lib/PopupCard.tsx

@@ -38,7 +38,7 @@ const popupAnimation = (transformOrigin: TransformOrigin) => {
 
 const StyledPopupCard = styled(Card)<
   StyledType & {width?: number | string; transformOrigin?: TransformOrigin}
->(type.levels.subtext.large, ({transformOrigin}) => {
+>(({transformOrigin}) => {
   if (transformOrigin == null) {
     return {};
   }
@@ -81,6 +81,7 @@ export const PopupCard = createSubcomponent('div')({
         elemProps.margin ? space[elemProps.margin as CanvasSpaceKeys] || elemProps.margin : space.xl
       } * 2)`}
       overflowY="auto" // force IE11 to limit the flex size of the card. Without this, the body isn't allowed to overflow properly: https://github.com/philipwalton/flexbugs/issues/216#issuecomment-453053557
+      {...type.levels.subtext.large}
       {...elemProps}
     >
       {children}

package/radio/lib/Radio.tsx

@@ -8,13 +8,8 @@ import {
   Themeable,
   useUniqueId,
 } from '@workday/canvas-kit-react/common';
-import {
-  canvas,
-  borderRadius,
-  colors,
-  inputColors,
-  spaceNumbers,
-} from '@workday/canvas-kit-react/tokens';
+import {borderRadius, colors, inputColors, spaceNumbers} from '@workday/canvas-kit-react/tokens';
+import {LabelText} from '@workday/canvas-kit-react/text';
 
 export interface RadioProps extends Themeable {
   /**
@@ -277,21 +272,6 @@ const RadioCheck = styled('div')<Pick<RadioProps, 'checked' | 'variant'>>(
   })
 );
 
-const RadioLabel = styled('label')<{disabled?: boolean; variant?: 'inverse' | undefined}>(
-  {
-    ...canvas.type.levels.subtext.large,
-    paddingLeft: radioLabelDistance,
-  },
-  ({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: (
@@ -333,9 +313,14 @@ export const Radio = createComponent('input')({
           </RadioBackground>
         </RadioInputWrapper>
         {label && (
-          <RadioLabel htmlFor={inputId} disabled={disabled} variant={variant}>
+          <LabelText
+            paddingLeft={radioLabelDistance}
+            htmlFor={inputId}
+            disabled={disabled}
+            variant={variant}
+          >
             {label}
-          </RadioLabel>
+          </LabelText>
         )}
       </RadioContainer>
     );

package/side-panel/lib/SidePanel.tsx

@@ -3,9 +3,10 @@ import styled from '@emotion/styled';
 import throttle from 'lodash/throttle';
 
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {colors, space, type, CanvasSpaceValues} from '@workday/canvas-kit-react/tokens';
+import {colors, space, CanvasSpaceValues} from '@workday/canvas-kit-react/tokens';
 import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
 import {chevronLeftIcon, chevronRightIcon} from '@workday/canvas-system-icons-web';
+import {Heading} from '@workday/canvas-kit-react/text';
 
 export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -78,11 +79,6 @@ export enum SidePanelBackgroundColor {
 
 const closedWidth = space.xxl;
 
-const Header = styled('h2')({
-  ...type.levels.heading.small,
-  marginTop: space.zero,
-});
-
 const SidePanelContainer = styled('div')<
   Pick<SidePanelProps, 'open' | 'backgroundColor' | 'padding' | 'openWidth' | 'openDirection'>
 >(
@@ -214,7 +210,11 @@ export class SidePanel extends React.Component<SidePanelProps, SidePanelState> {
         {...elemProps}
       >
         <ChildrenContainer open={open} openWidth={openWidth}>
-          {header && open ? <Header>{header}</Header> : null}
+          {header && open ? (
+            <Heading as="h2" size="small" marginTop="zero">
+              {header}
+            </Heading>
+          ) : null}
           {this.props.children}
         </ChildrenContainer>
         <SidePanelFooter openWidth={openWidth} open={open}>