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

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

@@ -64,6 +64,7 @@ var throttle_1 = __importDefault(require("lodash/throttle"));
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var button_1 = require("@workday/canvas-kit-react/button");
 var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+var text_1 = require("@workday/canvas-kit-react/text");
 var SidePanelOpenDirection;
 (function (SidePanelOpenDirection) {
     SidePanelOpenDirection[SidePanelOpenDirection["Left"] = 0] = "Left";
@@ -76,7 +77,6 @@ var SidePanelBackgroundColor;
     SidePanelBackgroundColor[SidePanelBackgroundColor["Gray"] = 2] = "Gray";
 })(SidePanelBackgroundColor = exports.SidePanelBackgroundColor || (exports.SidePanelBackgroundColor = {}));
 var closedWidth = tokens_1.space.xxl;
-var Header = styled_1.default('h2')(__assign(__assign({}, tokens_1.type.levels.heading.small), { marginTop: tokens_1.space.zero }));
 var SidePanelContainer = styled_1.default('div')({
     overflow: 'hidden',
     height: '100%',
@@ -201,7 +201,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(text_1.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/commonjs/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/commonjs/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/commonjs/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/commonjs/text/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./lib/Text"), exports);
+__exportStar(require("./lib/TypeLevelComponents"), exports);
+__exportStar(require("./lib/LabelText"), exports);

package/dist/commonjs/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/commonjs/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/commonjs/text/lib/LabelText.js

@@ -0,0 +1,51 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelText = void 0;
+var React = __importStar(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var text_1 = require("@workday/canvas-kit-react/text");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var StyledLabel = common_1.styled(text_1.Text.as('label'))(function (_a) {
+    var cursor = _a.cursor, disabled = _a.disabled, variant = _a.variant;
+    return ({
+        color: disabled && variant !== 'inverse' ? tokens_1.inputColors.disabled.text : undefined,
+        cursor: cursor && !disabled ? cursor : 'default',
+        opacity: disabled && variant === 'inverse' ? '.4' : '1',
+    });
+});
+exports.LabelText = common_1.createComponent('label')({
+    displayName: 'Label',
+    Component: function (elemProps, ref, Element) {
+        return React.createElement(StyledLabel, __assign({ ref: ref, as: Element, typeLevel: "subtext.large" }, elemProps));
+    },
+});

package/dist/commonjs/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/commonjs/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/commonjs/text/lib/Text.js

@@ -0,0 +1,90 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = void 0;
+var React = __importStar(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+// type changes no need
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var layout_1 = require("@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 = tokens_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), tokens_1.type.variants[variant]);
+    }
+    return updatedProps;
+};
+exports.Text = common_1.createComponent('span')({
+    displayName: 'Text',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(layout_1.Box, __assign({ ref: ref, as: Element }, validateProps(elemProps)), children));
+    },
+});

package/dist/commonjs/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/commonjs/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/commonjs/text/lib/TypeLevelComponents.js

@@ -0,0 +1,79 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Title = exports.Heading = exports.BodyText = exports.Subtext = void 0;
+var React = __importStar(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var text_1 = require("@workday/canvas-kit-react/text");
+exports.Subtext = common_1.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_1.Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    },
+});
+exports.BodyText = common_1.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_1.Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    },
+});
+exports.Heading = common_1.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_1.Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    },
+});
+exports.Title = common_1.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_1.Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    },
+});

package/dist/es6/banner/lib/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAQtD,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAkBD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CjB,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAQtD,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAYD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDjB,CAAC"}

package/dist/es6/banner/lib/Banner.js

@@ -30,9 +30,7 @@ import { useBanner, useBannerModel, useThemedPalette } from './hooks';
 import { BannerIcon } from './BannerIcon';
 import { BannerLabel } from './BannerLabel';
 import { BannerActionText } from './BannerActionText';
-// Remove color from our type since it is set on the Flex style attribute
-var _a = type.levels.subtext.large, _color = _a.color, typeLevelsSubtextLarge = __rest(_a, ["color"]);
-var styles = __assign(__assign(__assign({}, typeLevelsSubtextLarge), { cursor: 'pointer', fontWeight: type.properties.fontWeights.medium, textAlign: 'left', transition: 'background-color 120ms', '&:focus': __assign({ outline: 'none' }, focusRing({ separation: 2 })) }), hideMouseFocus);
+var styles = __assign({ cursor: 'pointer', transition: 'background-color 120ms', '&:focus': __assign({ outline: 'none' }, focusRing({ separation: 2 })) }, hideMouseFocus);
 export var Banner = createContainer('button')({
     displayName: 'Banner',
     modelHook: useBannerModel,
@@ -62,5 +60,5 @@ export var Banner = createContainer('button')({
         _b[borderBottomRightRadius] = model.state.isSticky ? 0 : borderRadius.m,
         _b[borderTopRightRadius] = model.state.isSticky ? 0 : borderRadius.m,
         _b);
-    return (jsx(Flex, __assign({ as: Element, width: model.state.isSticky ? '222px' : '328px', backgroundColor: palette.normal, color: palette.contrast, padding: space.xxs + " " + space.s, border: "0", display: "flex", alignItems: "center" }, borderStyleProps, { css: [styles, themedBackgroundStyles] }, elemProps), children));
+    return (jsx(Flex, __assign({ as: Element }, type.levels.subtext.large, { fontWeight: "medium", textAlign: "left", width: model.state.isSticky ? '222px' : '328px', backgroundColor: palette.normal, color: palette.contrast, padding: space.xxs + " " + space.s, border: "0", display: "flex", alignItems: "center" }, borderStyleProps, { css: [styles, themedBackgroundStyles] }, elemProps), children));
 });

package/dist/es6/card/lib/Card.d.ts

@@ -8,6 +8,6 @@ export interface CardProps extends BoxProps {
 }
 export declare const Card: import("../../common").ElementComponent<"div", CardProps> & {
     Heading: import("../../common").ElementComponent<"h3", import("./CardHeading").CardHeadingProps>;
-    Body: import("../../common").ElementComponent<"div", 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>;
+    Body: import("../../common").ElementComponent<"div", 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>;
 };
 //# sourceMappingURL=Card.d.ts.map

package/dist/es6/card/lib/CardBody.d.ts

@@ -1,2 +1,2 @@
-export declare const CardBody: import("../../common").ElementComponent<"div", 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>;
+export declare const CardBody: import("../../common").ElementComponent<"div", 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>;
 //# sourceMappingURL=CardBody.d.ts.map

package/dist/es6/card/lib/CardBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardBody.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardBody.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,QAAQ,owBASnB,CAAC"}
+{"version":3,"file":"CardBody.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardBody.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,o1BASnB,CAAC"}

package/dist/es6/card/lib/CardBody.js

@@ -21,15 +21,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import styled from '@emotion/styled';
 import { type } from '@workday/canvas-kit-react/tokens';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { Box } from '@workday/canvas-kit-react/layout';
-var Body = styled(Box)(type.levels.subtext.large);
 export var CardBody = createComponent('div')({
     displayName: 'Card.Body',
     Component: function (_a, ref, Element) {
         var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(Body, __assign({ ref: ref, as: Element }, elemProps), children));
+        return (React.createElement(Box, __assign({ ref: ref, as: Element }, type.levels.subtext.large, elemProps), children));
     },
 });

package/dist/es6/card/lib/CardHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeading.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;IAChD;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,eAAO,MAAM,WAAW,iEAStB,CAAC"}
+{"version":3,"file":"CardHeading.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAG1D,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;IAChD;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,iEAiBtB,CAAC"}

package/dist/es6/card/lib/CardHeading.js

@@ -21,17 +21,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import styled from '@emotion/styled';
-import { type } from '@workday/canvas-kit-react/tokens';
 import { createComponent } from '@workday/canvas-kit-react/common';
-import { Box } from '@workday/canvas-kit-react/layout';
-var Heading = styled(Box.as('h3'))(type.levels.body.large, {
-    fontWeight: type.properties.fontWeights.bold,
-});
+import { Text } from '@workday/canvas-kit-react/text';
 export var CardHeading = createComponent('h3')({
     displayName: 'Card.Heading',
     Component: function (_a, ref, Element) {
         var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(Heading, __assign({ ref: ref, marginBottom: "m", marginTop: 0, as: Element }, elemProps), children));
+        return (React.createElement(Text, __assign({ ref: ref, typeLevel: "body.large", fontWeight: "bold", marginBottom: "m", marginTop: 0, as: Element }, elemProps), children));
     },
 });

package/dist/es6/checkbox/lib/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAOT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAW1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;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,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAoQD,eAAO,MAAM,QAAQ;;CAoEnB,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAOT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAM1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;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,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAqPD,eAAO,MAAM,QAAQ;;CAyEnB,CAAC"}

package/dist/es6/checkbox/lib/Checkbox.js

@@ -22,9 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { createComponent, ErrorType, useUniqueId, focusRing, mouseFocusBehavior, getErrorColors, styled, useTheme, } 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 { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { checkSmallIcon } from '@workday/canvas-system-icons-web';
+import { LabelText } from '@workday/canvas-kit-react/text';
 var checkboxHeight = 18;
 var checkboxTapArea = spaceNumbers.m;
 var checkboxContainerHeight = checkboxTapArea;
@@ -209,18 +210,6 @@ var IndeterminateBox = styled('div')({
             : theme.canvas.palette.primary.contrast,
     });
 });
-var CheckboxLabel = styled('label')(__assign(__assign({}, canvas.type.levels.subtext.large), { paddingLeft: checkboxLabelDistance }), 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 Checkbox = createComponent('input')({
     displayName: 'Checkbox',
     Component: function (_a, ref, Element) {
@@ -240,7 +229,7 @@ export var Checkbox = createComponent('input')({
                     React.createElement(CheckboxCheck, { checked: checked }, indeterminate ? (React.createElement(IndeterminateBox, { variant: variant })) : (React.createElement(SystemIcon, { icon: checkSmallIcon, color: variant === 'inverse'
                             ? theme.canvas.palette.primary.main
                             : theme.canvas.palette.primary.contrast }))))),
-            label && (React.createElement(CheckboxLabel, { variant: variant, htmlFor: inputId, disabled: disabled }, label))));
+            label && (React.createElement(LabelText, { htmlFor: inputId, disabled: disabled, variant: variant, paddingLeft: checkboxLabelDistance }, label))));
     },
     subComponents: {
         ErrorType: ErrorType,

package/dist/es6/common/lib/utils/useModalityType.js

@@ -8,23 +8,23 @@ import React from 'react';
 //   a. if localStorage isn't primed, use clientWidth of the browsers
 //   b. if < 768, default to 'touch'
 //   c. else default to 'mouse'
-var localStorageValue = 'mouse'; //((typeof localStorage !== 'undefined'
-//   ? localStorage.getItem('modality')
-//   : '') ||
-//   (typeof document !== 'undefined'
-//     ? document.documentElement.clientWidth < 768
-//       ? 'touch'
-//       : ''
-//     : '') ||
-//   'mouse') as Modality;
+var localStorageValue = ((typeof localStorage !== 'undefined'
+    ? localStorage.getItem('modality')
+    : '') ||
+    (typeof document !== 'undefined'
+        ? document.documentElement.clientWidth < 768
+            ? 'touch'
+            : ''
+        : '') ||
+    'mouse');
 // Update the `localStorageValue`, but conditionally update localStorage only if the value has
 // changed. This prevents too many calls to `localStorage` which can be costly on spinning disk
 // drives
 var updateLocalStorage = function (value) {
-    // if (localStorageValue !== value) {
-    //   localStorage.setItem('modality', value);
-    // }
-    // localStorageValue = value;
+    if (localStorageValue !== value) {
+        localStorage.setItem('modality', value);
+    }
+    localStorageValue = value;
 };
 /**
  * Uses heuristics to determine if the user is on a touch device, uses a pen, or a mouse. This hook

package/dist/es6/dialog/lib/Dialog.d.ts

@@ -88,7 +88,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
         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/form-field/lib/Hint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Hint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/Hint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,SAAS,EAAU,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAG9E,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACtF;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAmBD,cAAM,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;IAC3C,MAAM,CAAC,SAAS,mBAAa;IAEtB,MAAM;CAqBd;AAID,OAAO,EAAC,IAAI,EAAC,CAAC"}
+{"version":3,"file":"Hint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/Hint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,SAAS,EAAE,SAAS,EAAS,MAAM,kCAAkC,CAAC;AAI9E,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACtF;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAMD,cAAM,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;IAC3C,MAAM,CAAC,SAAS,mBAAa;IAEtB,MAAM;CAsBd;AAID,OAAO,EAAC,IAAI,EAAC,CAAC"}

package/dist/es6/form-field/lib/Hint.js

@@ -24,17 +24,9 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import { ErrorType, styled } from '@workday/canvas-kit-react/common';
-import { space, type } from '@workday/canvas-kit-react/tokens';
-var Label = styled('span')(type.levels.subtext.medium, {
-    fontWeight: type.properties.fontWeights.medium,
-}, function (_a) {
-    var error = _a.error, theme = _a.theme;
-    return error === ErrorType.Error && { color: theme.canvas.palette.error.main };
-});
-var Message = styled('p')(type.levels.subtext.medium, {
-    margin: space.xxs + " 0 0",
-    width: '100%',
-}, function (_a) {
+import { space } from '@workday/canvas-kit-react/tokens';
+import { Subtext, Text } from '@workday/canvas-kit-react/text';
+var Message = styled(Subtext)(function (_a) {
     var error = _a.error, theme = _a.theme;
     return error === ErrorType.Error && { color: theme.canvas.palette.error.main };
 });
@@ -55,10 +47,10 @@ var Hint = /** @class */ (function (_super) {
                 break;
             default:
         }
-        return (React.createElement(Message, __assign({}, this.props),
-            typeof error !== 'undefined' && hintLabel && React.createElement(Label, { error: error },
+        return (React.createElement(Message, __assign({ size: "medium", margin: space.xxs + " 0 0", width: "100%" }, this.props),
+            typeof error !== 'undefined' && hintLabel && (React.createElement(Text, { fontWeight: "medium" },
                 hintLabel,
-                ": "),
+                ": ")),
             children));
     };
     Hint.ErrorType = ErrorType;