@workday/canvas-kit-preview-react 8.0.0 → 8.0.1

package/color-picker/README.md

@@ -20,7 +20,7 @@ preview-react add @workday/canvas-kit-preview-react
 
 ```tsx
 import * as React from 'react';
-import ColorPicker from '@workday/canvas-kit-preview-react/color-picker';
+import {ColorPicker} from '@workday/canvas-kit-preview-react/color-picker';
 import {colors} from '@workday/canvas-kit-react/tokens';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {Popper, Popup} from '@workday/canvas-kit-react/popup';

package/color-picker/index.ts

@@ -1 +1 @@
-export {default, default as ColorPicker, ColorPickerProps} from './lib/ColorPicker';
+export {ColorPicker, ColorPickerProps} from './lib/ColorPicker';

package/color-picker/lib/ColorPicker.tsx

@@ -3,7 +3,7 @@ import {checkIcon} from '@workday/canvas-system-icons-web';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import * as React from 'react';
-import FormField from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import styled from '@emotion/styled';
 
 import {ResetButton} from './parts/ColorReset';
@@ -158,7 +158,7 @@ const isCustomColor = (colors: string[], hexCode?: string) => {
   return !colors.includes(lowercaseHex);
 };
 
-const ColorPicker = ({
+export const ColorPicker = ({
   colorSet = defaultColorSet,
   customHexInputLabel = 'Custom Hex Color',
   submitLabel = 'Submit',
@@ -215,4 +215,3 @@ const ColorPicker = ({
 };
 
 ColorPicker.defaultColorSet = defaultColorSet;
-export default ColorPicker;

package/dist/commonjs/color-picker/index.d.ts

@@ -1,2 +1,2 @@
-export { default, default as ColorPicker, ColorPickerProps } from './lib/ColorPicker';
+export { ColorPicker, ColorPickerProps } from './lib/ColorPicker';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/color-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,gBAAgB,EAAC,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,gBAAgB,EAAC,MAAM,mBAAmB,CAAC"}

package/dist/commonjs/color-picker/index.js

@@ -1,9 +1,5 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPicker = exports.default = void 0;
+exports.ColorPicker = void 0;
 var ColorPicker_1 = require("./lib/ColorPicker");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ColorPicker_1).default; } });
-Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return __importDefault(ColorPicker_1).default; } });
+Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return ColorPicker_1.ColorPicker; } });

package/dist/commonjs/color-picker/lib/ColorPicker.d.ts

@@ -47,9 +47,8 @@ export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     resetLabel?: string;
 }
-declare const ColorPicker: {
+export declare const ColorPicker: {
     ({ colorSet, customHexInputLabel, submitLabel, onColorChange, onColorReset, onSubmitClick, resetLabel, resetColor, value, showCustomHexInput, ...elemProps }: ColorPickerProps): JSX.Element;
     defaultColorSet: string[];
 };
-export default ColorPicker;
 //# sourceMappingURL=ColorPicker.d.ts.map

package/dist/commonjs/color-picker/lib/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsGD,QAAA,MAAM,WAAW;kKAYd,gBAAgB;;CA0ClB,CAAC;AAGF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsGD,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;CA0ClB,CAAC"}

package/dist/commonjs/color-picker/lib/ColorPicker.js

@@ -44,12 +44,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPicker = void 0;
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 var color_picker_1 = require("@workday/canvas-kit-react/color-picker");
 var button_1 = require("@workday/canvas-kit-react/button");
 var React = __importStar(require("react"));
-var form_field_1 = __importDefault(require("@workday/canvas-kit-react/form-field"));
+var form_field_1 = require("@workday/canvas-kit-react/form-field");
 var styled_1 = __importDefault(require("@emotion/styled"));
 var ColorReset_1 = require("./parts/ColorReset");
 var SwatchBook_1 = require("./parts/SwatchBook");
@@ -121,7 +122,7 @@ var ColorInputWrapper = styled_1.default('form')({
     flexDirection: 'row',
     justifyContent: 'space-between',
 });
-var ColorInputAndLabel = styled_1.default(form_field_1.default)({
+var ColorInputAndLabel = styled_1.default(form_field_1.FormField)({
     display: 'flex',
     flexDirection: 'column',
     margin: 0,
@@ -163,5 +164,5 @@ var ColorPicker = function (_a) {
                 React.createElement(HexColorInput, { onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue })),
             React.createElement(CheckButton, { "aria-label": submitLabel, icon: canvas_system_icons_web_1.checkIcon })))));
 };
-ColorPicker.defaultColorSet = defaultColorSet;
-exports.default = ColorPicker;
+exports.ColorPicker = ColorPicker;
+exports.ColorPicker.defaultColorSet = defaultColorSet;

package/dist/commonjs/form-field/lib/FormField.d.ts

@@ -28,16 +28,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
     };
     events: {};
 }> & {
-    Context: React.Context<{
-        state: {
-            id: string;
-            hasError: boolean;
-            isRequired: boolean;
-        };
-        events: {};
-    }>;
-} & {
-    Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps, {
+    Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").CommonStyleProps, {
         state: {
             id: string;
             hasError: boolean;
@@ -53,7 +44,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
         };
         events: {};
     }>;
-    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps, {
+    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "fill" | "children" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
         state: {
             id: string;
             hasError: boolean;

package/dist/commonjs/form-field/lib/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,KAAK,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAOrE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IACxF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBpB,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,KAAK,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAOrE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IACxF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBpB,CAAC"}

package/dist/commonjs/form-field/lib/FormFieldHint.d.ts

@@ -1,4 +1,4 @@
-export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps, {
+export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "fill" | "children" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
     state: {
         id: string;
         hasError: boolean;

package/dist/commonjs/form-field/lib/FormFieldHint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,aAAa;;;;;;;EAsBxB,CAAC"}
+{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,aAAa;;;;;;;EAyBzB,CAAC"}

package/dist/commonjs/form-field/lib/FormFieldHint.js

@@ -29,9 +29,8 @@ exports.FormFieldHint = void 0;
 var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var layout_1 = require("@workday/canvas-kit-react/layout");
 var hooks_1 = require("./hooks");
-var StyledHint = common_1.styled(layout_1.Box)(__assign({}, tokens_1.type.levels.subtext.medium));
+var text_1 = require("@workday/canvas-kit-react/text");
 exports.FormFieldHint = common_1.createSubcomponent('p')({
     displayName: 'FormField.Hint',
     modelHook: hooks_1.useFormFieldModel,
@@ -43,5 +42,5 @@ exports.FormFieldHint = common_1.createSubcomponent('p')({
         // If there is no hint text just skip rendering
         return null;
     }
-    return (react_1.default.createElement(StyledHint, __assign({ as: Element, color: model.state.hasError ? theme.canvas.palette.error.main : undefined, marginY: tokens_1.space.xxs }, elemProps), children));
+    return (react_1.default.createElement(text_1.Subtext, __assign({ as: Element, size: "medium", color: model.state.hasError ? theme.canvas.palette.error.main : undefined, marginY: tokens_1.space.xxs }, elemProps), children));
 });

package/dist/commonjs/form-field/lib/FormFieldInput.d.ts

@@ -1,4 +1,4 @@
-export declare const FormFieldInput: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps, {
+export declare const FormFieldInput: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").CommonStyleProps, {
     state: {
         id: string;
         hasError: boolean;

package/dist/commonjs/form-field/lib/FormFieldLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAM,MAAM,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAK3E,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9F;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAaD,eAAO,MAAM,cAAc;;;;;;;EAiBzB,CAAC"}
+{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,YAAY,EAAW,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAItE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9F;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,cAAc;;;;;;;EAyBzB,CAAC"}

package/dist/commonjs/form-field/lib/FormFieldLabel.js

@@ -29,14 +29,8 @@ exports.FormFieldLabel = void 0;
 var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var layout_1 = require("@workday/canvas-kit-react/layout");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var text_1 = require("@workday/canvas-kit-react/text");
 var hooks_1 = require("./hooks");
-var StyledFormFieldLabel = common_1.styled('span')(__assign(__assign({}, tokens_1.type.levels.subtext.large), { fontWeight: tokens_1.type.properties.fontWeights.medium }));
-var StyledAsterisk = common_1.styled(layout_1.Box)({
-    fontSize: tokens_1.type.properties.fontSizes[20],
-    fontWeight: tokens_1.type.properties.fontWeights.regular,
-    textDecoration: 'unset',
-});
 exports.FormFieldLabel = common_1.createSubcomponent('label')({
     displayName: 'FormField.Label',
     modelHook: hooks_1.useFormFieldModel,
@@ -45,6 +39,6 @@ exports.FormFieldLabel = common_1.createSubcomponent('label')({
     var _b = _a.spacing, spacing = _b === void 0 ? 'xxxs' : _b, children = _a.children, elemProps = __rest(_a, ["spacing", "children"]);
     var theme = common_1.useTheme();
     return (react_1.default.createElement(layout_1.HStack, __assign({ as: Element, spacing: spacing, minWidth: "180px" }, elemProps),
-        react_1.default.createElement(StyledFormFieldLabel, null, children),
-        model.state.isRequired && (react_1.default.createElement(StyledAsterisk, { as: "span", color: theme.canvas.palette.error.main, "aria-hidden": "true" }, "*"))));
+        react_1.default.createElement(text_1.LabelText, { as: "span", fontWeight: "medium" }, children),
+        model.state.isRequired && (react_1.default.createElement(text_1.Text, { fontSize: 20, fontWeight: "regular", textDecoration: "unset", color: theme.canvas.palette.error.main, "aria-hidden": "true" }, "*"))));
 });

package/dist/commonjs/index.d.ts

@@ -1,10 +1,11 @@
-export * from './breadcrumbs';
 export * from './color-picker';
 export * from './form-field';
 export * from './menu';
 export * from './pill';
+export * from './segmented-control';
 export * from './select';
 export * from './side-panel';
+export * from './status-indicator';
 export * from './text-area';
 export * from './text-input';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/commonjs/index.js

@@ -10,13 +10,13 @@ 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("./breadcrumbs"), exports);
 __exportStar(require("./color-picker"), exports);
 __exportStar(require("./form-field"), exports);
 __exportStar(require("./menu"), exports);
 __exportStar(require("./pill"), exports);
+__exportStar(require("./segmented-control"), exports);
 __exportStar(require("./select"), exports);
 __exportStar(require("./side-panel"), exports);
+__exportStar(require("./status-indicator"), exports);
 __exportStar(require("./text-area"), exports);
 __exportStar(require("./text-input"), exports);
-/// <reference types="@types/node" />

package/dist/commonjs/menu/index.d.ts

@@ -1,6 +1,3 @@
-import Menu, { MenuProps } from './lib/Menu';
-import MenuItem from './lib/MenuItem';
-export { Menu, MenuItem, MenuProps };
-export default Menu;
+export * from './lib/Menu';
 export * from './lib/MenuItem';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,EAAE,EAAC,SAAS,EAAC,MAAM,YAAY,CAAC;AAC3C,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAC,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC"}

package/dist/commonjs/menu/index.js

@@ -9,14 +9,6 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 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);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuItem = exports.Menu = void 0;
-var Menu_1 = __importDefault(require("./lib/Menu"));
-exports.Menu = Menu_1.default;
-var MenuItem_1 = __importDefault(require("./lib/MenuItem"));
-exports.MenuItem = MenuItem_1.default;
-exports.default = Menu_1.default;
+__exportStar(require("./lib/Menu"), exports);
 __exportStar(require("./lib/MenuItem"), exports);

package/dist/commonjs/menu/lib/Menu.d.ts

@@ -1,18 +1,26 @@
 import * as React from 'react';
-import { MenuItemProps } from './MenuItem';
+import { DeprecatedMenuItemProps } from './MenuItem';
 import { GrowthBehavior } from '@workday/canvas-kit-react/common';
-export interface MenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLUListElement> {
+/**
+ * ### Deprecated Menu
+ *
+ * As of Canvas Kit v8, Menu is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+export interface DeprecatedMenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLUListElement> {
     /**
-     * The MenuItem children of the Menu (must be at least one). Also accepts other components which share the same interface as `MenuItem`.
+     * The DeprecatedMenuItem children of the DeprecatedMenu (must be at least one). Also accepts other components which share the same interface as `DeprecatedMenuItem`.
      */
-    children?: React.ReactElement<MenuItemProps> | React.ReactElement<MenuItemProps>[];
+    children?: React.ReactElement<DeprecatedMenuItemProps> | React.ReactElement<DeprecatedMenuItemProps>[];
     /**
-     * If true, set the Menu to the open state. Useful for showing and hiding the Menu from a parent component such as a menu button.
+     * If true, set the DeprecatedMenu to the open state. Useful for showing and hiding the DeprecatedMenu from a parent component such as a menu button.
      * @default true
      */
     isOpen?: boolean;
     /**
-     * The width of the Menu. If no value is provided, the Menu will collapse around its content.
+     * The width of the DeprecatedMenu. If no value is provided, the DeprecatedMenu will collapse around its content.
      */
     width?: number | string;
     /**
@@ -20,7 +28,7 @@ export interface MenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLULis
      */
     onSelect?: () => void;
     /**
-     * The function called when the Menu should close. This is called after a menu item is selected or if the escape shortcut key is used. This will not fire if the menu item sets `shouldClose` to false.
+     * The function called when the DeprecatedMenu should close. This is called after a menu item is selected or if the escape shortcut key is used. This will not fire if the menu item sets `shouldClose` to false.
      */
     onClose?: () => void;
     /**
@@ -28,24 +36,40 @@ export interface MenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLULis
      */
     initialSelectedItem?: number;
     /**
-     * The unique id of the Menu used for ARIA and HTML `id` attributes.
+     * The unique id of the DeprecatedMenu used for ARIA and HTML `id` attributes.
      */
     id?: string;
     /**
-     * The HTML `id` of the element that labels the Menu. Often used with menu buttons.
+     * The HTML `id` of the element that labels the DeprecatedMenu. Often used with menu buttons.
      */
     'aria-labelledby'?: string;
 }
-export interface MenuState {
+/**
+ * ### Deprecated Menu State
+ *
+ * As of Canvas Kit v8, Menu is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+export interface DeprecatedMenuState {
     selectedItemIndex: number;
 }
-export default class Menu extends React.Component<MenuProps, MenuState> {
+/**
+ * ### Deprecated Menu
+ *
+ * As of Canvas Kit v8, this component is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+export declare class DeprecatedMenu extends React.Component<DeprecatedMenuProps, DeprecatedMenuState> {
     private id;
     private animateId;
     private menuRef;
     private firstCharacters;
-    constructor(props: MenuProps);
-    componentDidUpdate(prevProps: MenuProps): void;
+    constructor(props: DeprecatedMenuProps);
+    componentDidUpdate(prevProps: DeprecatedMenuProps): void;
     componentDidMount(): void;
     componentWillUnmount(): void;
     render(): JSX.Element;

package/dist/commonjs/menu/lib/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC;AAGzC,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG,MAAM,WAAW,SAAU,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACvF;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACnF;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,SAAS;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IACrE,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,SAAS;IAe5B,kBAAkB,CAAC,SAAS,EAAE,SAAS;IAevC,iBAAiB;IAKjB,oBAAoB;IAIb,MAAM;IAmDN,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,MAAM,CAQjE;IAEK,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,IAAI,CAE/D;IAEF,OAAO,CAAC,uBAAuB,CA4E7B;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,kBAAkB,CA+BxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,uBAAuB,EAAC,MAAM,YAAY,CAAC;AAGnD,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG;;;;;;;GAOG;AACH,MAAM,WAAW,mBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EACL,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,GAC3C,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,EAAE,CAAC;IAClD;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD;;;;;;;GAOG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,SAAS,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAC3F,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,mBAAmB;IAetC,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAejD,iBAAiB;IAYjB,oBAAoB;IAIb,MAAM;IAyDN,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,MAAM,CAQjE;IAEK,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,IAAI,CAE/D;IAEF,OAAO,CAAC,uBAAuB,CA+E7B;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,kBAAkB,CAkCxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}

package/dist/commonjs/menu/lib/Menu.js

@@ -57,6 +57,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeprecatedMenu = void 0;
 var React = __importStar(require("react"));
 var styled_1 = __importDefault(require("@emotion/styled"));
 var card_1 = require("@workday/canvas-kit-react/card");
@@ -65,9 +66,17 @@ var common_1 = require("@workday/canvas-kit-react/common");
 var List = styled_1.default('ul')(__assign({ background: tokens_1.commonColors.background, borderRadius: tokens_1.borderRadius.m, padding: 0, margin: tokens_1.space.xxs + " 0", '&:focus': {
         outline: 'none',
     } }, common_1.hideMouseFocus));
-var Menu = /** @class */ (function (_super) {
-    __extends(Menu, _super);
-    function Menu(props) {
+/**
+ * ### Deprecated Menu
+ *
+ * As of Canvas Kit v8, this component is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+var DeprecatedMenu = /** @class */ (function (_super) {
+    __extends(DeprecatedMenu, _super);
+    function DeprecatedMenu(props) {
         var _this = _super.call(this, props) || this;
         _this.id = common_1.generateUniqueId();
         _this.getNormalizedItemIndex = function (index) {
@@ -89,9 +98,13 @@ var Menu = /** @class */ (function (_super) {
             var children = React.Children.toArray(_this.props.children);
             var nextSelectedIndex = 0;
             var isShortcut = false;
-            var itemCount = children.length;
-            var firstItem = 0;
-            var lastItem = itemCount - 1;
+            var interactiveItems = children.filter(function (child) {
+                var _a, _b;
+                return !((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isHeader);
+            });
+            var interactiveItemCount = interactiveItems.length;
+            var firstIndex = 0;
+            var lastIndex = interactiveItemCount - 1;
             if (event.key.length === 1 && event.key.match(/\S/)) {
                 var start = _this.state.selectedItemIndex + 1;
                 var searchIndex = void 0;
@@ -111,17 +124,15 @@ var Menu = /** @class */ (function (_super) {
                 switch (event.key) {
                     case 'ArrowUp':
                     case 'ArrowDown':
-                    case 'Down': // IE/Edge specific value
-                    case 'Up': // IE/Edge specific value
                         var direction = event.key === 'ArrowUp' ? -1 : 1;
                         isShortcut = true;
                         var nextIndex = _this.state.selectedItemIndex + direction;
                         nextSelectedIndex =
-                            nextIndex < 0 ? lastItem : nextIndex >= itemCount ? firstItem : nextIndex;
+                            nextIndex < 0 ? lastIndex : nextIndex >= interactiveItemCount ? firstIndex : nextIndex;
                         break;
                     case 'Home':
                     case 'End':
-                        var skipTo = event.key === 'Home' ? firstItem : lastItem;
+                        var skipTo = event.key === 'Home' ? firstIndex : lastIndex;
                         isShortcut = true;
                         nextSelectedIndex = skipTo;
                         break;
@@ -141,7 +152,7 @@ var Menu = /** @class */ (function (_super) {
                     case ' ':
                     case 'Enter':
                         nextSelectedIndex = _this.state.selectedItemIndex;
-                        var child = children[_this.state.selectedItemIndex];
+                        var child = interactiveItems[_this.state.selectedItemIndex];
                         _this.handleClick(event, child.props);
                         isShortcut = true;
                         break;
@@ -157,7 +168,7 @@ var Menu = /** @class */ (function (_super) {
         _this.handleClick = function (event, menuItemProps) {
             /* istanbul ignore next line for coverage */
             if (menuItemProps.isDisabled) {
-                // You should only hit this point if you are using a custom MenuItem implementation.
+                // You should only hit this point if you are using a custom DeprecatedMenuItem implementation.
                 return;
             }
             if (menuItemProps.onClick) {
@@ -184,7 +195,7 @@ var Menu = /** @class */ (function (_super) {
         _this.setFirstCharacters = function () {
             var getFirstCharacter = function (child) {
                 var character = '';
-                if (!child || typeof child === 'boolean' || child === {}) {
+                if (!child || typeof child === 'boolean') {
                     character = '';
                 }
                 else if (typeof child === 'string' || typeof child === 'number') {
@@ -210,6 +221,10 @@ var Menu = /** @class */ (function (_super) {
                 return character;
             };
             var firstCharacters = React.Children.map(_this.props.children, function (child) {
+                var _a, _b;
+                if ((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isHeader) {
+                    return;
+                }
                 return getFirstCharacter(child);
             });
             _this.firstCharacters = firstCharacters;
@@ -240,7 +255,7 @@ var Menu = /** @class */ (function (_super) {
         };
         return _this;
     }
-    Menu.prototype.componentDidUpdate = function (prevProps) {
+    DeprecatedMenu.prototype.componentDidUpdate = function (prevProps) {
         var _this = this;
         if (this.props.children !== prevProps.children) {
             this.setFirstCharacters();
@@ -255,33 +270,39 @@ var Menu = /** @class */ (function (_super) {
             }
         });
     };
-    Menu.prototype.componentDidMount = function () {
+    DeprecatedMenu.prototype.componentDidMount = function () {
+        console.warn("This component is being deprecated and will be removed in Canvas Kit V9.\n\n      For more information, please see the V8 upgrade guide:\n\n      https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page\n      ");
         this.setFirstCharacters();
         this.setInitialSelectedItem();
     };
-    Menu.prototype.componentWillUnmount = function () {
+    DeprecatedMenu.prototype.componentWillUnmount = function () {
         cancelAnimationFrame(this.animateId);
     };
-    Menu.prototype.render = function () {
+    DeprecatedMenu.prototype.render = function () {
         var _this = this;
         // TODO: Standardize on prop spread location (see #150)
         var _a = this.props, _b = _a.id, id = _b === void 0 ? this.id : _b, _c = _a.isOpen, isOpen = _c === void 0 ? true : _c, children = _a.children, ariaLabelledby = _a["aria-labelledby"], grow = _a.grow, width = _a.width, onSelect = _a.onSelect, onClose = _a.onClose, initialSelectedItem = _a.initialSelectedItem, elemProps = __rest(_a, ["id", "isOpen", "children", 'aria-labelledby', "grow", "width", "onSelect", "onClose", "initialSelectedItem"]);
         var selectedItemIndex = this.state.selectedItemIndex;
         var cardWidth = grow ? '100%' : width;
+        var interactiveItemIndex = null;
         return (React.createElement(card_1.Card, { display: "inline-block", padding: tokens_1.space.zero, width: cardWidth, depth: 3 },
             React.createElement(card_1.Card.Body, null,
-                React.createElement(List, __assign({ role: "menu", tabIndex: 0, id: id, "aria-labelledby": ariaLabelledby, "aria-activedescendant": id + "-" + selectedItemIndex, onKeyDown: this.handleKeyboardShortcuts, ref: this.menuRef }, elemProps), React.Children.map(children, function (menuItem, index) {
+                React.createElement(List, __assign({ role: "menu", tabIndex: 0, id: id, "aria-labelledby": ariaLabelledby, "aria-activedescendant": id + "-" + selectedItemIndex, onKeyDown: this.handleKeyboardShortcuts, ref: this.menuRef }, elemProps), React.Children.map(children, function (menuItem) {
                     if (!React.isValidElement(menuItem)) {
                         return;
                     }
-                    var itemId = id + "-" + index;
+                    var itemId;
+                    if (!menuItem.props.isHeader) {
+                        interactiveItemIndex = (interactiveItemIndex !== null && interactiveItemIndex !== void 0 ? interactiveItemIndex : -1) + 1;
+                        itemId = id + "-" + interactiveItemIndex;
+                    }
                     return (React.createElement(React.Fragment, { key: itemId }, React.cloneElement(menuItem, {
                         onClick: function (event) { return _this.handleClick(event, menuItem.props); },
                         id: itemId,
-                        isFocused: selectedItemIndex === index,
+                        isFocused: selectedItemIndex === interactiveItemIndex && !menuItem.props.isHeader,
                     })));
                 })))));
     };
-    return Menu;
+    return DeprecatedMenu;
 }(React.Component));
-exports.default = Menu;
+exports.DeprecatedMenu = DeprecatedMenu;