@workday/canvas-kit-react 8.0.0-alpha.150-next.2 → 8.0.0-alpha.155-next.0

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

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

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

@@ -21,10 +21,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { type, typeColors } from '@workday/canvas-kit-react/tokens';
-import { styled } from '@workday/canvas-kit-react/common';
-var StyledLabel = styled('label')(__assign(__assign({}, type.levels.subtext.medium), { color: typeColors.hint, whiteSpace: 'nowrap' }));
+import { LabelText } from '@workday/canvas-kit-react/text';
 export var GoToLabel = function (_a) {
     var model = _a.model, children = _a.children, elemProps = __rest(_a, ["model", "children"]);
-    return (React.createElement(StyledLabel, __assign({}, elemProps), typeof children === 'function' ? children(model) : children));
+    return (React.createElement(LabelText, __assign({ typeLevel: "subtext.medium", variant: "hint", whiteSpace: "nowrap" }, elemProps), typeof children === 'function' ? children(model) : children));
 };

package/dist/es6/popup/lib/Popup.d.ts

@@ -106,7 +106,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Body: import("../../common").ElementComponentM<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & React.HTMLAttributes<HTMLDivElement>, {
+    Body: import("../../common").ElementComponentM<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").FontStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & import("../..").TextStyleProps & React.HTMLAttributes<HTMLDivElement>, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;

package/dist/es6/popup/lib/PopupBody.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare const PopupBody: import("../../common").ElementComponentM<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & React.HTMLAttributes<HTMLDivElement>, {
+export declare const PopupBody: import("../../common").ElementComponentM<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").FontStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & import("../..").TextStyleProps & React.HTMLAttributes<HTMLDivElement>, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;

package/dist/es6/popup/lib/PopupCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAQ,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAKxE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmCD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAgCpB,CAAC"}
+{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAQ,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAKxE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA0CD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAiCpB,CAAC"}

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

@@ -36,21 +36,29 @@ var popupAnimation = function (transformOrigin) {
     var translate = getTranslateFromOrigin(transformOrigin, space.xxs);
     return keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "], ["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "])), translate.x, translate.y);
 };
-var StyledPopupCard = styled(Card)(type.levels.subtext.large, function (_a) {
-    var transformOrigin = _a.transformOrigin;
+var StyledPopupCard = styled(Card)(function (_a) {
+    var _b;
+    var transformOrigin = _a.transformOrigin, theme = _a.theme;
     if (transformOrigin == null) {
         return {};
     }
-    return {
-        animation: popupAnimation(transformOrigin),
-        animationDuration: '150ms',
-        animationTimingFunction: 'ease-out',
-        transformOrigin: transformOrigin.vertical + " " + transformOrigin.horizontal,
+    return _b = {
+            animation: popupAnimation(transformOrigin),
+            animationDuration: '150ms',
+            animationTimingFunction: 'ease-out',
+            transformOrigin: transformOrigin.vertical + " " + transformOrigin.horizontal
+        },
+        _b[theme.canvas.breakpoints.down('s')] = {
+            animation: popupAnimation({ vertical: 'bottom', horizontal: 'center' }),
+            animationDuration: '150ms',
+            animationTimingFunction: 'ease-out',
+            transformOrigin: 'bottom center',
+        },
         // Allow overriding of animation in special cases
-        '.wd-no-animation &': {
+        _b['.wd-no-animation &'] = {
             animation: 'none',
         },
-    };
+        _b;
 });
 export var PopupCard = createSubcomponent('div')({
     displayName: 'Popup.Card',
@@ -64,6 +72,6 @@ export var PopupCard = createSubcomponent('div')({
     // As is a Stack that will render an element of `Element`
     var As = useConstant(function () { return Stack.as(Element); });
     return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", padding: "l", depth: 5, maxWidth: "calc(100vw - " + space.l + ")", spacing: 0, flexDirection: "column", minHeight: 0, maxHeight: "calc(100vh - " + (elemProps.margin ? space[elemProps.margin] || 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
-     }, elemProps), children));
+     }, type.levels.subtext.large, elemProps), children));
 });
 var templateObject_1;

package/dist/es6/popup/lib/PopupPopper.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Placement, PopperOptions } from './Popper';
-export interface PopupPopperProps {
+import { Placement, PopperOptions, PopperProps } from './Popper';
+export interface PopupPopperProps extends PopperProps {
     /**
      * The placement of the `Popper` contents relative to the `anchorElement`. Accepts `auto`, `top`,
      * `right`, `bottom`, or `left`. Each placement can also be modified using any of the following
@@ -12,7 +12,6 @@ export interface PopupPopperProps {
      * The additional options passed to the Popper's `popper.js` instance.
      */
     popperOptions?: Partial<PopperOptions>;
-    children?: React.ReactNode;
 }
 export declare const PopupPopper: import("../../common").ElementComponentM<"div", PopupPopperProps, {
     state: {

package/dist/es6/popup/lib/PopupPopper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupPopper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,SAAS,EAAE,aAAa,EAAS,MAAM,UAAU,CAAC;AAE1D,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;EAMtB,CAAC"}
+{"version":3,"file":"PopupPopper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,SAAS,EAAE,aAAa,EAAU,WAAW,EAAC,MAAM,UAAU,CAAC;AAEvE,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;EAMtB,CAAC"}

package/dist/es6/radio/lib/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../radio/lib/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAML,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAS1C,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAkPD,eAAO,MAAM,KAAK,8DAgDhB,CAAC"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../radio/lib/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAML,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAI1C,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAmOD,eAAO,MAAM,KAAK,8DAqDhB,CAAC"}

package/dist/es6/radio/lib/Radio.js

@@ -22,7 +22,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { createComponent, focusRing, mouseFocusBehavior, styled, 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';
 var radioBorderRadius = 9;
 var radioDot = 8;
 var radioHeight = 18;
@@ -201,18 +202,6 @@ var RadioCheck = styled('div')({
         transform: checked ? 'scale(1)' : 'scale(0.5)',
     });
 });
-var RadioLabel = styled('label')(__assign(__assign({}, canvas.type.levels.subtext.large), { paddingLeft: radioLabelDistance }), function (_a) {
-    var variant = _a.variant;
-    return (variant === 'inverse' ? { color: colors.frenchVanilla100 } : undefined);
-}, function (_a) {
-    var disabled = _a.disabled, variant = _a.variant;
-    return disabled
-        ? {
-            color: variant === 'inverse' ? colors.frenchVanilla100 : inputColors.disabled.text,
-            opacity: variant === 'inverse' ? '.4' : '1',
-        }
-        : { cursor: 'pointer' };
-});
 export var Radio = createComponent('input')({
     displayName: 'Radio',
     Component: function (_a, ref, Element) {
@@ -224,6 +213,6 @@ export var Radio = createComponent('input')({
                 React.createElement(RadioRipple, { variant: variant }),
                 React.createElement(RadioBackground, { checked: checked, disabled: disabled, variant: variant },
                     React.createElement(RadioCheck, { checked: checked, variant: variant }))),
-            label && (React.createElement(RadioLabel, { htmlFor: inputId, disabled: disabled, variant: variant }, label))));
+            label && (React.createElement(LabelText, { paddingLeft: radioLabelDistance, htmlFor: inputId, disabled: disabled, variant: variant }, label))));
     },
 });

package/dist/es6/side-panel/lib/SidePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAsB,iBAAiB,EAAC,MAAM,kCAAkC,CAAC;AAIxF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;OAGG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,wBAAwB,CAAC;IAC3C;;;OAGG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,oBAAY,sBAAsB;IAChC,IAAI,IAAA;IACJ,KAAK,IAAA;CACN;AAED,oBAAY,wBAAwB;IAClC,KAAK,IAAA;IACL,WAAW,IAAA;IACX,IAAI,IAAA;CACL;AA6FD,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;IAC5E,MAAM,CAAC,aAAa,gCAA0B;IAC9C,MAAM,CAAC,eAAe,kCAA4B;gBAEtC,KAAK,EAAE,cAAc;IAKjC,KAAK;;MAEH;IAEK,iBAAiB;IAGjB,oBAAoB;IAIpB,MAAM;IA4Cb,OAAO,CAAC,YAAY,CAWlB;IAEF,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,qBAAqB,CAS3B;CACH"}
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAgB,iBAAiB,EAAC,MAAM,kCAAkC,CAAC;AAKlF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;OAGG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,wBAAwB,CAAC;IAC3C;;;OAGG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,oBAAY,sBAAsB;IAChC,IAAI,IAAA;IACJ,KAAK,IAAA;CACN;AAED,oBAAY,wBAAwB;IAClC,KAAK,IAAA;IACL,WAAW,IAAA;IACX,IAAI,IAAA;CACL;AAwFD,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;IAC5E,MAAM,CAAC,aAAa,gCAA0B;IAC9C,MAAM,CAAC,eAAe,kCAA4B;gBAEtC,KAAK,EAAE,cAAc;IAKjC,KAAK;;MAEH;IAEK,iBAAiB;IAGjB,oBAAoB;IAIpB,MAAM;IAgDb,OAAO,CAAC,YAAY,CAWlB;IAEF,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,qBAAqB,CAS3B;CACH"}

package/dist/es6/side-panel/lib/SidePanel.js

@@ -36,9 +36,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled from '@emotion/styled';
 import throttle from 'lodash/throttle';
-import { colors, space, type } from '@workday/canvas-kit-react/tokens';
+import { colors, space } from '@workday/canvas-kit-react/tokens';
 import { TertiaryButton } from '@workday/canvas-kit-react/button';
 import { chevronLeftIcon, chevronRightIcon } from '@workday/canvas-system-icons-web';
+import { Heading } from '@workday/canvas-kit-react/text';
 export var SidePanelOpenDirection;
 (function (SidePanelOpenDirection) {
     SidePanelOpenDirection[SidePanelOpenDirection["Left"] = 0] = "Left";
@@ -51,7 +52,6 @@ export var SidePanelBackgroundColor;
     SidePanelBackgroundColor[SidePanelBackgroundColor["Gray"] = 2] = "Gray";
 })(SidePanelBackgroundColor || (SidePanelBackgroundColor = {}));
 var closedWidth = space.xxl;
-var Header = styled('h2')(__assign(__assign({}, type.levels.heading.small), { marginTop: space.zero }));
 var SidePanelContainer = styled('div')({
     overflow: 'hidden',
     height: '100%',
@@ -176,7 +176,7 @@ var SidePanel = /** @class */ (function (_super) {
         var _a = this.props, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? SidePanelBackgroundColor.White : _b, _c = _a.openNavigationAriaLabel, openNavigationAriaLabel = _c === void 0 ? 'open navigation' : _c, _d = _a.closeNavigationAriaLabel, closeNavigationAriaLabel = _d === void 0 ? 'close navigation' : _d, _e = _a.openDirection, openDirection = _e === void 0 ? SidePanelOpenDirection.Left : _e, _f = _a.breakpoint, breakpoint = _f === void 0 ? 768 : _f, _g = _a.openWidth, openWidth = _g === void 0 ? 300 : _g, header = _a.header, onToggleClick = _a.onToggleClick, open = _a.open, padding = _a.padding, onBreakpointChange = _a.onBreakpointChange, elemProps = __rest(_a, ["backgroundColor", "openNavigationAriaLabel", "closeNavigationAriaLabel", "openDirection", "breakpoint", "openWidth", "header", "onToggleClick", "open", "padding", "onBreakpointChange"]);
         return (React.createElement(SidePanelContainer, __assign({ role: "region", padding: padding, openDirection: openDirection, openWidth: openWidth, backgroundColor: backgroundColor, open: open }, elemProps),
             React.createElement(ChildrenContainer, { open: open, openWidth: openWidth },
-                header && open ? React.createElement(Header, null, header) : null,
+                header && open ? (React.createElement(Heading, { as: "h2", size: "small", marginTop: "zero" }, header)) : null,
                 this.props.children),
             React.createElement(SidePanelFooter, { openWidth: openWidth, open: open }, onToggleClick && (React.createElement(ToggleButton, { openDirection: openDirection, "aria-label": open ? closeNavigationAriaLabel : openNavigationAriaLabel, onClick: this.onToggleClick, icon: this.toggleButtonDirection(open, openDirection) })))));
     };

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

@@ -53,7 +53,7 @@ export interface TabsItemProps extends ExtractProps<typeof Box, never>, Partial<
      */
     tabIndex?: number;
 }
-export declare const StyledTabItem: import("@emotion/styled").StyledComponent<import("../../layout").BorderShorthandStyleProps & import("../../layout").BorderColorStyleProps & import("../../layout").BorderRadiusStyleProps & import("../../layout").BorderLineStyleProps & import("../../layout").BorderWidthStyleProps & import("../../layout").BorderLogicalStyleProps & import("../../layout").ColorStyleProps & import("../../layout").DepthStyleProps & import("../../layout").FlexItemStyleProps & import("../../layout").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../../layout").PositionStandardProps & import("../../layout").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "name" | "style" | "ref" | "form" | "slot" | "title" | "dir" | "value" | "children" | "hidden" | "type" | "disabled" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & {
+export declare const StyledTabItem: import("@emotion/styled").StyledComponent<import("../../layout").BorderShorthandStyleProps & import("../../layout").BorderColorStyleProps & import("../../layout").BorderRadiusStyleProps & import("../../layout").BorderLineStyleProps & import("../../layout").BorderWidthStyleProps & import("../../layout").BorderLogicalStyleProps & import("../../layout").ColorStyleProps & import("../../layout").DepthStyleProps & import("../../layout").FlexItemStyleProps & import("../../layout").FontStyleProps & import("../../layout").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../../layout").PositionStandardProps & import("../../layout").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & import("../../layout").TextStyleProps & Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "name" | "style" | "ref" | "form" | "slot" | "title" | "dir" | "value" | "children" | "hidden" | "type" | "disabled" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;

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

@@ -0,0 +1,4 @@
+export * from './lib/Text';
+export * from './lib/TypeLevelComponents';
+export * from './lib/LabelText';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../text/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC"}

package/dist/es6/text/index.js

@@ -0,0 +1,3 @@
+export * from './lib/Text';
+export * from './lib/TypeLevelComponents';
+export * from './lib/LabelText';

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

@@ -0,0 +1,8 @@
+import { Property } from 'csstype';
+import { TextProps } from '@workday/canvas-kit-react/text';
+export interface TypeLabelProps extends TextProps {
+    cursor?: Property.Cursor;
+    disabled?: boolean;
+}
+export declare const LabelText: import("../../common").ElementComponent<"label", TypeLabelProps>;
+//# sourceMappingURL=LabelText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LabelText.d.ts","sourceRoot":"","sources":["../../../../text/lib/LabelText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAO,SAAS,EAAC,MAAM,gCAAgC,CAAC;AAG/D,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAUD,eAAO,MAAM,SAAS,kEAKpB,CAAC"}

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

@@ -0,0 +1,29 @@
+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);
+};
+import * as React from 'react';
+import { createComponent, styled } from '@workday/canvas-kit-react/common';
+import { Text } from '@workday/canvas-kit-react/text';
+import { inputColors } from '@workday/canvas-kit-react/tokens';
+var StyledLabel = styled(Text.as('label'))(function (_a) {
+    var cursor = _a.cursor, disabled = _a.disabled, variant = _a.variant;
+    return ({
+        color: disabled && variant !== 'inverse' ? inputColors.disabled.text : undefined,
+        cursor: cursor && !disabled ? cursor : 'default',
+        opacity: disabled && variant === 'inverse' ? '.4' : '1',
+    });
+});
+export var LabelText = createComponent('label')({
+    displayName: 'Label',
+    Component: function (elemProps, ref, Element) {
+        return React.createElement(StyledLabel, __assign({ ref: ref, as: Element, typeLevel: "subtext.large" }, elemProps));
+    },
+});

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

@@ -0,0 +1,14 @@
+import { CanvasTypeHierarchy, CanvasTypeVariants } from '@workday/canvas-kit-react/tokens';
+import { BoxProps } from '@workday/canvas-kit-react/layout';
+export interface TextProps extends BoxProps {
+    /**
+     * Type token as string with level and size separated by dot.
+     */
+    typeLevel?: `${keyof CanvasTypeHierarchy}.${'large' | 'medium' | 'small'}`;
+    /**
+     * Type variant token names: `error`, `hint` or `inverse`.
+     */
+    variant?: keyof CanvasTypeVariants;
+}
+export declare const Text: import("../../common").ElementComponent<"span", TextProps>;
+//# sourceMappingURL=Text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../text/lib/Text.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AAC/F,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;OAEG;IACF,SAAS,CAAC,EAAE,GAAG,MAAM,mBAAmB,IAAI,OAAO,GAAC,QAAQ,GAAC,OAAO,EAAE,CAAC;IACxE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,kBAAkB,CAAC;CACpC;AA2CD,eAAO,MAAM,IAAI,4DAOf,CAAC"}

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';