@workday/canvas-kit-labs-react 5.3.0-next.3 → 5.3.0-next.32

package/combobox/lib/AutocompleteList.tsx

@@ -1,14 +1,16 @@
 import React, {Fragment, useState} from 'react';
 import styled from '@emotion/styled';
 import {space} from '@workday/canvas-kit-react/tokens';
-import {accessibleHide} from '@workday/canvas-kit-react/common';
+import {accessibleHide, generateUniqueId} from '@workday/canvas-kit-react/common';
 import {MenuItemProps} from '@workday/canvas-kit-preview-react/menu';
 import {ComboBoxMenuItemGroup, getOptionId, listBoxIdPart, getTextFromElement} from './Combobox';
-import uuid from 'uuid/v4';
 
 const Autocomplete = styled('ul')({
-  padding: 0,
-  margin: `${space.xxs} 0`,
+  margin: 0,
+  maxHeight: 200,
+  boxSizing: 'border-box',
+  overflowY: 'auto',
+  padding: `${space.xxs} 0`,
 });
 
 const AccessibleHide = styled('span')(accessibleHide);
@@ -52,7 +54,7 @@ const AutocompleteList = ({
   labelId,
   showGroupText,
 }: AutocompleteListProps) => {
-  const [randomComponentId] = useState(() => uuid()); // https://codesandbox.io/s/p2ndq
+  const [randomComponentId] = useState(generateUniqueId); // https://codesandbox.io/s/p2ndq
 
   const componentId = comboboxId || randomComponentId;
 

package/combobox/lib/Combobox.tsx

@@ -1,13 +1,18 @@
 import React, {useEffect, useLayoutEffect, useRef, useState, useCallback} from 'react';
 import {CSSObject, jsx, keyframes} from '@emotion/core';
-import {GrowthBehavior, useForkRef, styled, useIsRTL} from '@workday/canvas-kit-react/common';
+import {
+  GrowthBehavior,
+  useForkRef,
+  styled,
+  useIsRTL,
+  useUniqueId,
+} from '@workday/canvas-kit-react/common';
 import {space, commonColors, borderRadius} from '@workday/canvas-kit-react/tokens';
 import {MenuItemProps} from '@workday/canvas-kit-preview-react/menu';
 import {Card} from '@workday/canvas-kit-react/card';
 import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
 import {xSmallIcon} from '@workday/canvas-system-icons-web';
 import {TextInputProps} from '@workday/canvas-kit-react/text-input';
-import uuid from 'uuid/v4';
 import flatten from 'lodash.flatten';
 import AutocompleteList from './AutocompleteList';
 import Status from './Status';
@@ -106,7 +111,6 @@ const MenuContainer = styled(Card)({
   minWidth: 0,
   animation: `${fadeInKeyframes} 200ms ease-out`,
   maxHeight: 200,
-  overflowY: 'auto',
 });
 
 const ResetButton = styled(IconButton)<{shouldShow: boolean}>(
@@ -201,8 +205,8 @@ const Combobox = ({
 
   const comboboxRef: React.RefObject<HTMLDivElement> = useRef(null);
 
-  const [randomComponentId] = React.useState(() => uuid()); // https://codesandbox.io/s/p2ndq
-  const [randomLabelId] = React.useState(() => uuid());
+  const randomComponentId = useUniqueId();
+  const randomLabelId = useUniqueId();
 
   const componentId = id || randomComponentId;
   const formLabelId = labelId || randomLabelId;

package/common/README.md

@@ -64,3 +64,35 @@ export const HelloWorld = ({backgroundImagePath}) => {
   );
 };
 ```
+
+## useThemedRing
+
+This is a way to automatically add themed colors to your inputs. This is helpful when showing alerts to users. It supports `error`, `alert`, and `success` states. It will try and use the corresponding `main` colors from your `CanvasThemePalette` unless they do not meet accessibility contrast, in which case the outer ring will use the `darkest` color. This hook will also show a `focusOutline` ring when the input is focused.
+Note: You should not rely on these colors alone to differentiate alerts, but use them in combination with icons or hint text.
+
+### Usage
+
+```tsx
+/** @jsx jsx */
+import {jsx} from '@emotion/core';
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
+
+
+export const MyInput = ({handleChange}) => {
+  const [value, setValue] = React.useState('invalid@email');
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const alertStyles = useThemedRing('alert');
+
+  return (
+    <TextInput>
+      <TextInput.Label>Email</TextInput.Label>
+      <TextInput.Field css={alertStyles} onChange={handleChange} value={value} />
+      <TextInput.Hint>Please enter a valid email.</TextInput.Hint>
+    </TextInput>
+  );
+}

package/common/lib/theming/index.ts

@@ -1 +1,2 @@
 export * from './useThemeRTL';
+export * from './useThemedRing';

package/common/lib/theming/useThemedRing.ts

@@ -0,0 +1,78 @@
+import {useThemeRTL} from './useThemeRTL';
+import {CanvasThemePalette, EmotionCanvasTheme} from '@workday/canvas-kit-react/common';
+import {colors, CSSProperties, inputColors, statusColors} from '@workday/canvas-kit-react/tokens';
+import chroma from 'chroma-js';
+
+type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
+interface ContrastColors {
+  outer?: string;
+  inner?: string;
+}
+
+const isAccessible = (foreground: string, background: string = colors.frenchVanilla100) => {
+  return chroma.contrast(foreground, background) >= 3;
+};
+
+const getPaletteColorsFromTheme = (
+  palette: CanvasThemePalette,
+  fallbackColors?: ContrastColors,
+): ContrastColors => {
+  return {
+    outer: isAccessible(palette.main) ? palette.main : isAccessible(palette.darkest) ? palette.darkest : fallbackColors?.outer,
+    inner: fallbackColors?.inner ? fallbackColors.inner : palette.main,
+  }
+};
+
+export function getPaletteColors(
+  type: paletteSelection,
+  theme: EmotionCanvasTheme
+): ContrastColors {
+  const palette = theme.canvas.palette[type];
+
+  switch (type) {
+    case 'error': {
+      return getPaletteColorsFromTheme(palette, { outer: inputColors.error.border });
+    }
+    case 'alert': {
+      return getPaletteColorsFromTheme(palette, { outer: colors.cantaloupe600 });
+    }
+    case 'success': {
+      return getPaletteColorsFromTheme(palette, {
+        outer: colors.greenApple600,
+        // The theme default for success.main is set to the darkest GreenApple
+        // For our default ring, we need to override it so the inner ring is a bit lighter
+        inner: palette.main === colors.greenApple600 ? statusColors.success : palette.main,
+      });
+    }
+    default: {
+      return getPaletteColorsFromTheme(palette);
+    }
+  }
+}
+
+export const useThemedRing = (type: paletteSelection): CSSProperties => {
+  const {themeRTL, theme} = useThemeRTL();
+
+  const paletteColors = getPaletteColors(type, theme);
+  if (!(paletteColors?.outer || paletteColors?.inner)) {
+    return {};
+  }
+  const errorBoxShadow = `inset 0 0 0 ${paletteColors.outer === paletteColors.inner ? 1 : 2}px ${
+    paletteColors.inner
+  }`;
+
+  return themeRTL({
+    borderColor: paletteColors.outer,
+    transition: '100ms box-shadow',
+    boxShadow: errorBoxShadow,
+    '&:hover, &:disabled': {
+      borderColor: paletteColors.outer,
+    },
+    '&:focus:not([disabled])': {
+      borderColor: paletteColors.outer,
+      boxShadow: `${errorBoxShadow},
+        0 0 0 2px ${colors.frenchVanilla100},
+        0 0 0 4px ${theme ? theme.canvas.palette.common.focusOutline : inputColors.focusBorder}`,
+    },
+  });
+};

package/dist/commonjs/combobox/lib/AutocompleteList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;AAUjG,UAAU,qBAAqB;IAC7B;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACjF;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,uBAAuB,EAAE,CACvB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAC3C,aAAa,EAAE,aAAa,KACzB,IAAI,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,gBAAgB,mJAwFrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;AAYjG,UAAU,qBAAqB;IAC7B;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACjF;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,uBAAuB,EAAE,CACvB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAC3C,aAAa,EAAE,aAAa,KACzB,IAAI,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,gBAAgB,mJAwFrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/commonjs/combobox/lib/AutocompleteList.js

@@ -33,15 +33,17 @@ var styled_1 = __importDefault(require("@emotion/styled"));
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var common_1 = require("@workday/canvas-kit-react/common");
 var Combobox_1 = require("./Combobox");
-var v4_1 = __importDefault(require("uuid/v4"));
 var Autocomplete = styled_1.default('ul')({
-    padding: 0,
-    margin: tokens_1.space.xxs + " 0",
+    margin: 0,
+    maxHeight: 200,
+    boxSizing: 'border-box',
+    overflowY: 'auto',
+    padding: tokens_1.space.xxs + " 0",
 });
 var AccessibleHide = styled_1.default('span')(common_1.accessibleHide);
 var AutocompleteList = function (_a) {
     var autocompleteItems = _a.autocompleteItems, comboboxId = _a.comboboxId, selectedIndex = _a.selectedIndex, handleAutocompleteClick = _a.handleAutocompleteClick, labelId = _a.labelId, showGroupText = _a.showGroupText;
-    var randomComponentId = react_1.useState(function () { return v4_1.default(); })[0]; // https://codesandbox.io/s/p2ndq
+    var randomComponentId = react_1.useState(common_1.generateUniqueId)[0]; // https://codesandbox.io/s/p2ndq
     var componentId = comboboxId || randomComponentId;
     var listBoxProps = {
         role: 'listbox',

package/dist/commonjs/combobox/lib/Combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EAAC,cAAc,EAA+B,MAAM,kCAAkC,CAAC;AAE9F,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAMpE,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAE1C,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAChD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA8DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,qEACc,CAAC;AAEvC,eAAO,MAAM,kBAAkB,wCAc9B,CAAC;AAYF,QAAA,MAAM,QAAQ,qNAuUb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAKf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAE1C,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAChD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA6DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,qEACc,CAAC;AAEvC,eAAO,MAAM,kBAAkB,wCAc9B,CAAC;AAYF,QAAA,MAAM,QAAQ,qNAuUb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/commonjs/combobox/lib/Combobox.js

@@ -39,7 +39,6 @@ var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var card_1 = require("@workday/canvas-kit-react/card");
 var button_1 = require("@workday/canvas-kit-react/button");
 var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var v4_1 = __importDefault(require("uuid/v4"));
 var lodash_flatten_1 = __importDefault(require("lodash.flatten"));
 var AutocompleteList_1 = __importDefault(require("./AutocompleteList"));
 var Status_1 = __importDefault(require("./Status"));
@@ -77,7 +76,6 @@ var MenuContainer = common_1.styled(card_1.Card)({
     minWidth: 0,
     animation: fadeInKeyframes + " 200ms ease-out",
     maxHeight: 200,
-    overflowY: 'auto',
 });
 var ResetButton = common_1.styled(button_1.IconButton)({
     width: tokens_1.space.l,
@@ -146,8 +144,8 @@ var Combobox = function (_a) {
     // to satisfy TS.
     var elementRef = common_1.useForkRef(children.ref, inputRef);
     var comboboxRef = react_1.useRef(null);
-    var randomComponentId = react_1.default.useState(function () { return v4_1.default(); })[0]; // https://codesandbox.io/s/p2ndq
-    var randomLabelId = react_1.default.useState(function () { return v4_1.default(); })[0];
+    var randomComponentId = common_1.useUniqueId();
+    var randomLabelId = common_1.useUniqueId();
     var componentId = id || randomComponentId;
     var formLabelId = labelId || randomLabelId;
     var _l = react_1.useState(false), showGroupText = _l[0], setShowGroupText = _l[1];

package/dist/commonjs/common/lib/theming/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useThemeRTL';
+export * from './useThemedRing';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/common/lib/theming/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}

package/dist/commonjs/common/lib/theming/index.js

@@ -4,3 +4,4 @@ function __export(m) {
 }
 Object.defineProperty(exports, "__esModule", { value: true });
 __export(require("./useThemeRTL"));
+__export(require("./useThemedRing"));

package/dist/commonjs/common/lib/theming/useThemedRing.d.ts

@@ -0,0 +1,11 @@
+import { EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
+import { CSSProperties } from '@workday/canvas-kit-react/tokens';
+declare type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
+interface ContrastColors {
+    outer?: string;
+    inner?: string;
+}
+export declare function getPaletteColors(type: paletteSelection, theme: EmotionCanvasTheme): ContrastColors;
+export declare const useThemedRing: (type: "alert" | "error" | "primary" | "success" | "neutral") => CSSProperties;
+export {};
+//# sourceMappingURL=useThemedRing.d.ts.map

package/dist/commonjs/common/lib/theming/useThemedRing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemedRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemedRing.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAS,aAAa,EAA4B,MAAM,kCAAkC,CAAC;AAGlG,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AACzF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgBD,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,kBAAkB,GACxB,cAAc,CAsBhB;AAED,eAAO,MAAM,aAAa,gFAyBzB,CAAC"}

package/dist/commonjs/common/lib/theming/useThemedRing.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var useThemeRTL_1 = require("./useThemeRTL");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var chroma_js_1 = __importDefault(require("chroma-js"));
+var isAccessible = function (foreground, background) {
+    if (background === void 0) { background = tokens_1.colors.frenchVanilla100; }
+    return chroma_js_1.default.contrast(foreground, background) >= 3;
+};
+var getPaletteColorsFromTheme = function (palette, fallbackColors) {
+    return {
+        outer: isAccessible(palette.main) ? palette.main : isAccessible(palette.darkest) ? palette.darkest : fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.outer,
+        inner: (fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.inner) ? fallbackColors.inner : palette.main,
+    };
+};
+function getPaletteColors(type, theme) {
+    var palette = theme.canvas.palette[type];
+    switch (type) {
+        case 'error': {
+            return getPaletteColorsFromTheme(palette, { outer: tokens_1.inputColors.error.border });
+        }
+        case 'alert': {
+            return getPaletteColorsFromTheme(palette, { outer: tokens_1.colors.cantaloupe600 });
+        }
+        case 'success': {
+            return getPaletteColorsFromTheme(palette, {
+                outer: tokens_1.colors.greenApple600,
+                // The theme default for success.main is set to the darkest GreenApple
+                // For our default ring, we need to override it so the inner ring is a bit lighter
+                inner: palette.main === tokens_1.colors.greenApple600 ? tokens_1.statusColors.success : palette.main,
+            });
+        }
+        default: {
+            return getPaletteColorsFromTheme(palette);
+        }
+    }
+}
+exports.getPaletteColors = getPaletteColors;
+exports.useThemedRing = function (type) {
+    var _a = useThemeRTL_1.useThemeRTL(), themeRTL = _a.themeRTL, theme = _a.theme;
+    var paletteColors = getPaletteColors(type, theme);
+    if (!((paletteColors === null || paletteColors === void 0 ? void 0 : paletteColors.outer) || (paletteColors === null || paletteColors === void 0 ? void 0 : paletteColors.inner))) {
+        return {};
+    }
+    var errorBoxShadow = "inset 0 0 0 " + (paletteColors.outer === paletteColors.inner ? 1 : 2) + "px " + paletteColors.inner;
+    return themeRTL({
+        borderColor: paletteColors.outer,
+        transition: '100ms box-shadow',
+        boxShadow: errorBoxShadow,
+        '&:hover, &:disabled': {
+            borderColor: paletteColors.outer,
+        },
+        '&:focus:not([disabled])': {
+            borderColor: paletteColors.outer,
+            boxShadow: errorBoxShadow + ",\n        0 0 0 2px " + tokens_1.colors.frenchVanilla100 + ",\n        0 0 0 4px " + (theme ? theme.canvas.palette.common.focusOutline : tokens_1.inputColors.focusBorder),
+        },
+    });
+};

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

@@ -1,8 +1,8 @@
-import Header from './lib/Header';
-import GlobalHeader from './lib/GlobalHeader';
-export default Header;
-export { Header };
-export { GlobalHeader };
+import DeprecatedHeader from './lib/Header';
+import DeprecatedGlobalHeader from './lib/GlobalHeader';
+export default DeprecatedHeader;
+export { DeprecatedHeader };
+export { DeprecatedGlobalHeader };
 export * from './lib/parts';
 export * from './lib/shared/themes';
 export * from './lib/shared/types';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../header/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAE9C,eAAe,MAAM,CAAC;AACtB,OAAO,EAAC,MAAM,EAAC,CAAC;AAChB,OAAO,EAAC,YAAY,EAAC,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../header/index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,cAAc,CAAC;AAC5C,OAAO,sBAAsB,MAAM,oBAAoB,CAAC;AAExD,eAAe,gBAAgB,CAAC;AAChC,OAAO,EAAC,gBAAgB,EAAC,CAAC;AAC1B,OAAO,EAAC,sBAAsB,EAAC,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}

package/dist/commonjs/header/index.js

@@ -7,9 +7,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var Header_1 = __importDefault(require("./lib/Header"));
-exports.Header = Header_1.default;
+exports.DeprecatedHeader = Header_1.default;
 var GlobalHeader_1 = __importDefault(require("./lib/GlobalHeader"));
-exports.GlobalHeader = GlobalHeader_1.default;
+exports.DeprecatedGlobalHeader = GlobalHeader_1.default;
 exports.default = Header_1.default;
 __export(require("./lib/parts"));
 __export(require("./lib/shared/themes"));

package/dist/commonjs/header/lib/GlobalHeader.d.ts

@@ -19,11 +19,20 @@ export interface GlobalHeaderProps {
      */
     isCollapsed?: boolean;
     /**
-     * The React element to render in the left slot of the GlobalHeader. This is typically a SearchBar component.
+     * The React element to render in the left slot of the GlobalHeader. This is typically a SearchForm component.
      */
     leftSlot?: React.ReactElement;
 }
-export default class GlobalHeader extends React.Component<GlobalHeaderProps> {
+/**
+ * ### Deprecated Global Header
+ *
+ * As of Canvas Kit v6, this component is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v7. Please see the
+ * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
+ * for more information.
+ */
+export default class DeprecatedGlobalHeader extends React.Component<GlobalHeaderProps> {
+    componentDidMount(): void;
     render(): JSX.Element;
 }
 //# sourceMappingURL=GlobalHeader.d.ts.map

package/dist/commonjs/header/lib/GlobalHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalHeader.d.ts","sourceRoot":"","sources":["../../../../header/lib/GlobalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC/B;AAED,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;IACnE,MAAM;CAwBd"}
+{"version":3,"file":"GlobalHeader.d.ts","sourceRoot":"","sources":["../../../../header/lib/GlobalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC/B;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;IACpF,iBAAiB;IASV,MAAM;CAwBd"}

package/dist/commonjs/header/lib/GlobalHeader.js

@@ -49,15 +49,26 @@ var React = __importStar(require("react"));
 var Header_1 = __importDefault(require("./Header"));
 var types_1 = require("./shared/types");
 var parts_1 = require("./parts");
-var GlobalHeader = /** @class */ (function (_super) {
-    __extends(GlobalHeader, _super);
-    function GlobalHeader() {
+/**
+ * ### Deprecated Global Header
+ *
+ * As of Canvas Kit v6, this component is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v7. Please see the
+ * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
+ * for more information.
+ */
+var DeprecatedGlobalHeader = /** @class */ (function (_super) {
+    __extends(DeprecatedGlobalHeader, _super);
+    function DeprecatedGlobalHeader() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    GlobalHeader.prototype.render = function () {
-        var _a = this.props, _b = _a.brand, brand = _b === void 0 ? React.createElement(parts_1.DubLogoTitle, null) : _b, menuToggle = _a.menuToggle, onMenuClick = _a.onMenuClick, isCollapsed = _a.isCollapsed, leftSlot = _a.leftSlot, children = _a.children, elemProps = __rest(_a, ["brand", "menuToggle", "onMenuClick", "isCollapsed", "leftSlot", "children"]);
-        return (React.createElement(Header_1.default, __assign({ brand: brand, menuToggle: menuToggle, leftSlot: leftSlot, onMenuClick: onMenuClick, variant: types_1.HeaderVariant.Global, isCollapsed: isCollapsed }, elemProps), children));
+    DeprecatedGlobalHeader.prototype.componentDidMount = function () {
+        console.warn("GlobalHeader is being deprecated and will be removed in Canvas Kit V7.\n\n      For more information, please see the V6 migration guide:\n\n      https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page\n      ");
     };
-    return GlobalHeader;
+    DeprecatedGlobalHeader.prototype.render = function () {
+        var _a = this.props, _b = _a.brand, brand = _b === void 0 ? React.createElement(parts_1.DeprecatedDubLogoTitle, null) : _b, menuToggle = _a.menuToggle, onMenuClick = _a.onMenuClick, isCollapsed = _a.isCollapsed, leftSlot = _a.leftSlot, children = _a.children, elemProps = __rest(_a, ["brand", "menuToggle", "onMenuClick", "isCollapsed", "leftSlot", "children"]);
+        return (React.createElement(Header_1.default, __assign({ brand: brand, menuToggle: menuToggle, leftSlot: leftSlot, onMenuClick: onMenuClick, variant: types_1.DeprecatedHeaderVariant.Global, isCollapsed: isCollapsed }, elemProps), children));
+    };
+    return DeprecatedGlobalHeader;
 }(React.Component));
-exports.default = GlobalHeader;
+exports.default = DeprecatedGlobalHeader;

package/dist/commonjs/header/lib/Header.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HeaderTheme, HeaderVariant } from './shared/types';
+import { DeprecatedHeaderTheme, DeprecatedHeaderVariant } from './shared/types';
 export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * The custom menu toggle node of the Header. This React node replaces the default menu toggle.
@@ -7,14 +7,14 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     menuToggle?: React.ReactNode;
     /**
      * The theme of the Header. Accepts `White`, `Blue`, or `Transparent`.
-     * @default HeaderTheme.White
+     * @default DeprecatedHeaderTheme.White
      */
-    themeColor?: HeaderTheme;
+    themeColor?: DeprecatedHeaderTheme;
     /**
      * The variant of the Header. Accepts `Dub` (small) or `Full` (large).
-     * @default HeaderVariant.Dub
+     * @default DeprecatedHeaderVariant.Dub
      */
-    variant?: HeaderVariant;
+    variant?: DeprecatedHeaderVariant;
     /**
      * The text of the Header title. Not used if `brand` is provided.
      */
@@ -37,7 +37,7 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     onMenuClick?: (e: React.MouseEvent) => void;
     /**
-     * The React element to render in the left slot of the Header. This is typically a SearchBar component.
+     * The React element to render in the left slot of the Header. This is typically a SearchForm component.
      */
     leftSlot?: React.ReactElement;
     /**
@@ -46,9 +46,18 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     isCollapsed?: boolean;
 }
+/**
+ * ### Deprecated Header
+ *
+ * As of Canvas Kit v6, this component is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v7. Please see the
+ * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
+ * for more information.
+ */
 export default class Header extends React.Component<HeaderProps, {}> {
-    static Theme: typeof HeaderTheme;
-    static Variant: typeof HeaderVariant;
+    static Theme: typeof DeprecatedHeaderTheme;
+    static Variant: typeof DeprecatedHeaderVariant;
+    componentDidMount(): void;
     /**
      * Helper that recursively maps ReactNodes to their theme-based equivalent.
      * Any children that are included in a Header may need to undergo transformation

package/dist/commonjs/header/lib/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../header/lib/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAe,WAAW,EAAE,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAMxE,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAkND,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,CAAC;IAClE,MAAM,CAAC,KAAK,qBAAe;IAC3B,MAAM,CAAC,OAAO,uBAAiB;IAE/B;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,cAAc;IAuDtB,MAAM;CA0DP"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../header/lib/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAEL,qBAAqB,EACrB,uBAAuB,EACxB,MAAM,gBAAgB,CAAC;AAMxB,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA4ND;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,CAAC;IAClE,MAAM,CAAC,KAAK,+BAAyB;IACrC,MAAM,CAAC,OAAO,iCAA2B;IAEzC,iBAAiB;IASjB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,cAAc;IAwDtB,MAAM;CA0DP"}

package/dist/commonjs/header/lib/Header.js

@@ -60,7 +60,9 @@ var HeaderShell = styled_1.default('div')(__assign(__assign({ display: 'flex', a
     var variant = _a.variant, themeColor = _a.themeColor;
     return (__assign(__assign({ 
         // Only the variant Full has a large header, all the other one (Dub, Global) have a small header height
-        height: variant === types_1.HeaderVariant.Full ? types_1.HeaderHeight.Large : types_1.HeaderHeight.Small, background: themes_1.themes[themeColor].background }, themes_1.themes[themeColor].depth), { color: themes_1.themes[themeColor].color }));
+        height: variant === types_1.DeprecatedHeaderVariant.Full
+            ? types_1.DeprecatedHeaderHeight.Large
+            : types_1.DeprecatedHeaderHeight.Small, background: themes_1.deprecatedHeaderThemes[themeColor].background }, themes_1.deprecatedHeaderThemes[themeColor].depth), { color: themes_1.deprecatedHeaderThemes[themeColor].color }));
 });
 var BrandSlot = styled_1.default('div')({
     height: '100%',
@@ -77,7 +79,7 @@ var BrandLink = styled_1.default(button_1.Hyperlink)({
 });
 var navStyle = function (_a) {
     var themeColor = _a.themeColor;
-    var theme = themes_1.themes[themeColor];
+    var theme = themes_1.deprecatedHeaderThemes[themeColor];
     return core_1.css({
         nav: {
             display: 'flex',
@@ -185,17 +187,17 @@ var Brand = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     Brand.prototype.render = function () {
-        var _a = this.props, _b = _a.variant, variant = _b === void 0 ? types_1.HeaderVariant.Dub : _b, brand = _a.brand, _c = _a.themeColor, themeColor = _c === void 0 ? types_1.HeaderTheme.White : _c, title = _a.title;
+        var _a = this.props, _b = _a.variant, variant = _b === void 0 ? types_1.DeprecatedHeaderVariant.Dub : _b, brand = _a.brand, _c = _a.themeColor, themeColor = _c === void 0 ? types_1.DeprecatedHeaderTheme.White : _c, title = _a.title;
         switch (variant) {
-            case types_1.HeaderVariant.Global: {
+            case types_1.DeprecatedHeaderVariant.Global: {
                 return React.createElement("span", null, brand);
             }
-            case types_1.HeaderVariant.Full: {
-                return (React.createElement("span", null, brand || React.createElement(parts_1.WorkdayLogoTitle, { title: title ? title : '', themeColor: themeColor })));
+            case types_1.DeprecatedHeaderVariant.Full: {
+                return (React.createElement("span", null, brand || (React.createElement(parts_1.DeprecatedWorkdayLogoTitle, { title: title ? title : '', themeColor: themeColor }))));
             }
-            // HeaderVariant.Dub is default
+            // DeprecatedHeaderVariant.Dub is default
             default: {
-                return (React.createElement("span", null, brand || React.createElement(parts_1.DubLogoTitle, { title: title ? title : '', themeColor: themeColor })));
+                return (React.createElement("span", null, brand || React.createElement(parts_1.DeprecatedDubLogoTitle, { title: title ? title : '', themeColor: themeColor })));
             }
         }
     };
@@ -207,7 +209,7 @@ var MenuIconButton = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     MenuIconButton.prototype.render = function () {
-        var _a = this.props, _b = _a.themeColor, themeColor = _b === void 0 ? types_1.HeaderTheme.White : _b, menuToggle = _a.menuToggle, onMenuClick = _a.onMenuClick;
+        var _a = this.props, _b = _a.themeColor, themeColor = _b === void 0 ? types_1.DeprecatedHeaderTheme.White : _b, menuToggle = _a.menuToggle, onMenuClick = _a.onMenuClick;
         if (menuToggle) {
             var menuToggleElement = menuToggle;
             var onClick = menuToggleElement.props.onClick
@@ -218,15 +220,26 @@ var MenuIconButton = /** @class */ (function (_super) {
                 className: 'canvas-header--menu-icon',
             });
         }
-        return (React.createElement(button_1.IconButton, { variant: themeColor === types_1.HeaderTheme.White ? 'circle' : 'inverse', icon: canvas_system_icons_web_1.justifyIcon, className: 'canvas-header--menu-icon', "aria-label": "Open Menu", onClick: onMenuClick }));
+        return (React.createElement(button_1.IconButton, { variant: themeColor === types_1.DeprecatedHeaderTheme.White ? 'circle' : 'inverse', icon: canvas_system_icons_web_1.justifyIcon, className: 'canvas-header--menu-icon', "aria-label": "Open Menu", onClick: onMenuClick }));
     };
     return MenuIconButton;
 }(React.Component));
+/**
+ * ### Deprecated Header
+ *
+ * As of Canvas Kit v6, this component is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v7. Please see the
+ * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
+ * for more information.
+ */
 var Header = /** @class */ (function (_super) {
     __extends(Header, _super);
     function Header() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    Header.prototype.componentDidMount = function () {
+        console.warn("Header is being deprecated and will be removed in Canvas Kit V7.\n\n      For more information, please see the V6 migration guide:\n\n      https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page\n      ");
+    };
     /**
      * Helper that recursively maps ReactNodes to their theme-based equivalent.
      * Any children that are included in a Header may need to undergo transformation
@@ -247,7 +260,7 @@ var Header = /** @class */ (function (_super) {
             }
             var propsChildren = child.props.children;
             var singleChild = React.Children.count(propsChildren) === 1 && propsChildren;
-            var iconButtonVariant = _this.props.themeColor === types_1.HeaderTheme.White ? 'circle' : 'inverse';
+            var iconButtonVariant = _this.props.themeColor === types_1.DeprecatedHeaderTheme.White ? 'circle' : 'inverse';
             // Convert old method of SystemIcon into IconButton. If SystemIcon is within a link, make sure it's passed through
             if (child.type === 'a' && singleChild && singleChild.type === icon_1.SystemIcon) {
                 var href_1 = child.props.href;
@@ -283,7 +296,7 @@ var Header = /** @class */ (function (_super) {
         });
     };
     Header.prototype.render = function () {
-        var _a = this.props, menuToggle = _a.menuToggle, _b = _a.themeColor, themeColor = _b === void 0 ? types_1.HeaderTheme.White : _b, _c = _a.variant, variant = _c === void 0 ? types_1.HeaderVariant.Dub : _c, centeredNav = _a.centeredNav, title = _a.title, brand = _a.brand, brandUrl = _a.brandUrl, onMenuClick = _a.onMenuClick, leftSlot = _a.leftSlot, isCollapsed = _a.isCollapsed, children = _a.children, elemProps = __rest(_a, ["menuToggle", "themeColor", "variant", "centeredNav", "title", "brand", "brandUrl", "onMenuClick", "leftSlot", "isCollapsed", "children"]);
+        var _a = this.props, menuToggle = _a.menuToggle, _b = _a.themeColor, themeColor = _b === void 0 ? types_1.DeprecatedHeaderTheme.White : _b, _c = _a.variant, variant = _c === void 0 ? types_1.DeprecatedHeaderVariant.Dub : _c, centeredNav = _a.centeredNav, title = _a.title, brand = _a.brand, brandUrl = _a.brandUrl, onMenuClick = _a.onMenuClick, leftSlot = _a.leftSlot, isCollapsed = _a.isCollapsed, children = _a.children, elemProps = __rest(_a, ["menuToggle", "themeColor", "variant", "centeredNav", "title", "brand", "brandUrl", "onMenuClick", "leftSlot", "isCollapsed", "children"]);
         /* Push everything to the right if:
            - on tablet and mobile screens
            - Search isn't enabled and the nav shouldn't be centered
@@ -301,8 +314,8 @@ var Header = /** @class */ (function (_super) {
             // TODO: This needs to get changed to IconButton when we get it restyled for headers
             React.createElement(MenuIconButton, { themeColor: themeColor, menuToggle: menuToggle, onMenuClick: onMenuClick })) : (this.renderChildren(children)))));
     };
-    Header.Theme = types_1.HeaderTheme;
-    Header.Variant = types_1.HeaderVariant;
+    Header.Theme = types_1.DeprecatedHeaderTheme;
+    Header.Variant = types_1.DeprecatedHeaderVariant;
     return Header;
 }(React.Component));
 exports.default = Header;