@workday/canvas-kit-docs 14.0.0-alpha.1237-next.0 → 14.0.0-alpha.1238-next.0

package/dist/es6/lib/docs.js

@@ -44318,7 +44318,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             ]
           },
           "required": false,
-          "description": "Use this attribute when you have a `FormField` that is in an `Alert` | `Error` or `Required` state. This will add attach an `aria-describedby` to each radio input so that screen readers can read out the message attached to the form field.\nThe value of this attribute needs to match the value passed to `hintId` on the `FormField`.\n\n```tsx\n<FormField\n   error={FormField.ErrorType.Alert}\n   hintId=\"hint-alert\"\n   hintText=\"Deep dish is an extra $2.99\"\n   label=\"Choose Your Pizza Crust\"\n   useFieldset={true}\n >\n   <RadioGroup\n     name=\"crust\"\n     onChange={handleChange}\n     initialValue={value}\n     aria-describedby=\"hint-alert\"\n   >\n     <RadioGroup.RadioButton value=\"deep-dish\">Deep dish</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"thin\">Thin</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"gluten-free\">Gluten free</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"cauliflower\">Cauliflower</RadioGroup.RadioButton>\n   </RadioGroup>\n</FormField>\n```",
+          "description": "Use this attribute when you have a `FormField` that is in an `Alert` | `Error` or `Required` state. This will add attach an `aria-describedby` to each radio input so that screen readers can read out the message attached to the form field.\nThe value of this attribute needs to match the value passed to `hintId` on the `FormField`.\n\n```tsx\n<FormField\n   error=\"caution\"\n   hintId=\"hint-alert\"\n   hintText=\"Deep dish is an extra $2.99\"\n   label=\"Choose Your Pizza Crust\"\n   useFieldset={true}\n >\n   <RadioGroup\n     name=\"crust\"\n     onChange={handleChange}\n     initialValue={value}\n     aria-describedby=\"hint-alert\"\n   >\n     <RadioGroup.RadioButton value=\"deep-dish\">Deep dish</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"thin\">Thin</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"gluten-free\">Gluten free</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"cauliflower\">Cauliflower</RadioGroup.RadioButton>\n   </RadioGroup>\n</FormField>\n```",
           "declarations": [
             {
               "name": "aria-describedby",
@@ -44669,7 +44669,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             ]
           },
           "required": false,
-          "description": "Use this attribute when you have a `FormField` that is in an `Alert` | `Error` or `Required` state. This will add attach an `aria-describedby` to each radio input so that screen readers can read out the message attached to the form field.\nThe value of this attribute needs to match the value passed to `hintId` on the `FormField`.\n\n```tsx\n<FormField\n   error={FormField.ErrorType.Alert}\n   hintId=\"hint-alert\"\n   hintText=\"Deep dish is an extra $2.99\"\n   label=\"Choose Your Pizza Crust\"\n   useFieldset={true}\n >\n   <RadioGroup\n     name=\"crust\"\n     onChange={handleChange}\n     initialValue={value}\n     aria-describedby=\"hint-alert\"\n   >\n     <RadioGroup.RadioButton value=\"deep-dish\">Deep dish</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"thin\">Thin</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"gluten-free\">Gluten free</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"cauliflower\">Cauliflower</RadioGroup.RadioButton>\n   </RadioGroup>\n</FormField>\n```",
+          "description": "Use this attribute when you have a `FormField` that is in an `Alert` | `Error` or `Required` state. This will add attach an `aria-describedby` to each radio input so that screen readers can read out the message attached to the form field.\nThe value of this attribute needs to match the value passed to `hintId` on the `FormField`.\n\n```tsx\n<FormField\n   error=\"caution\"\n   hintId=\"hint-alert\"\n   hintText=\"Deep dish is an extra $2.99\"\n   label=\"Choose Your Pizza Crust\"\n   useFieldset={true}\n >\n   <RadioGroup\n     name=\"crust\"\n     onChange={handleChange}\n     initialValue={value}\n     aria-describedby=\"hint-alert\"\n   >\n     <RadioGroup.RadioButton value=\"deep-dish\">Deep dish</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"thin\">Thin</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"gluten-free\">Gluten free</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"cauliflower\">Cauliflower</RadioGroup.RadioButton>\n   </RadioGroup>\n</FormField>\n```",
           "declarations": [
             {
               "name": "aria-describedby",
@@ -195888,10 +195888,10 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         },
         {
           "kind": "property",
-          "name": "Alert",
+          "name": "Caution",
           "type": {
             "kind": "string",
-            "value": "alert"
+            "value": "caution"
           }
         }
       ],
@@ -221388,11 +221388,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               "value": [
                 {
                   "kind": "string",
-                  "value": "error"
+                  "value": "caution"
                 },
                 {
                   "kind": "string",
-                  "value": "alert"
+                  "value": "error"
                 },
                 {
                   "kind": "primitive",
@@ -221522,11 +221522,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": [
               {
                 "kind": "string",
-                "value": "error"
+                "value": "caution"
               },
               {
                 "kind": "string",
-                "value": "alert"
+                "value": "error"
               },
               {
                 "kind": "primitive",
@@ -221535,7 +221535,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             ]
           },
           "required": false,
-          "description": "Optional flag to denote if this field has an error or warning to display.\nIf value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.\nIf value is `alert`: A visual orange warning ring is added to the `FormField.Input`.",
+          "description": "Optional flag to denote if this field has an error or warning to display.\nIf value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.\nIf value is `cautiion`: A visual orange warning ring is added to the `FormField.Input`.",
           "declarations": [
             {
               "name": "error",
@@ -221664,11 +221664,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": [
               {
                 "kind": "string",
-                "value": "error"
+                "value": "caution"
               },
               {
                 "kind": "string",
-                "value": "alert"
+                "value": "error"
               },
               {
                 "kind": "primitive",
@@ -221677,7 +221677,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             ]
           },
           "required": false,
-          "description": "Optional flag to denote if this field has an error or warning to display.\nIf value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.\nIf value is `alert`: A visual orange warning ring is added to the `FormField.Input`.",
+          "description": "Optional flag to denote if this field has an error or warning to display.\nIf value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.\nIf value is `cautiion`: A visual orange warning ring is added to the `FormField.Input`.",
           "declarations": [
             {
               "name": "error",
@@ -221764,11 +221764,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": [
               {
                 "kind": "string",
-                "value": "error"
+                "value": "caution"
               },
               {
                 "kind": "string",
-                "value": "alert"
+                "value": "error"
               },
               {
                 "kind": "primitive",
@@ -221777,7 +221777,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             ]
           },
           "required": false,
-          "description": "Optional flag to denote if this field has an error or warning to display.\nIf value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.\nIf value is `alert`: A visual orange warning ring is added to the `FormField.Input`.",
+          "description": "Optional flag to denote if this field has an error or warning to display.\nIf value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.\nIf value is `cautiion`: A visual orange warning ring is added to the `FormField.Input`.",
           "declarations": [
             {
               "name": "error",
@@ -221901,11 +221901,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": [
               {
                 "kind": "string",
-                "value": "error"
+                "value": "caution"
               },
               {
                 "kind": "string",
-                "value": "alert"
+                "value": "error"
               },
               {
                 "kind": "primitive",
@@ -221914,7 +221914,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             ]
           },
           "required": false,
-          "description": "Optional flag to denote if this field has an error or warning to display.\nIf value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.\nIf value is `alert`: A visual orange warning ring is added to the `FormField.Input`.",
+          "description": "Optional flag to denote if this field has an error or warning to display.\nIf value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.\nIf value is `cautiion`: A visual orange warning ring is added to the `FormField.Input`.",
           "declarations": [
             {
               "name": "error",

package/dist/mdx/14.0-UPGRADE-GUIDE.mdx

@@ -8,6 +8,7 @@ any questions.
 
 - [Codemod](#codemod)
   - [Instructions](#instructions)
+- [Caution Naming](#caution-naming)
 - [Theming](#theming)
   - [Canvas Provider](#canvas-provider-)
 - [Component Updates](#component-updates)
@@ -104,6 +105,74 @@ yarn remove @workday/canvas-kit-codemod
 > after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
 > your project conventions.
 
+## Caution Naming
+
+**PR:** [#3462](https://github.com/Workday/canvas-kit/pull/3462)
+
+To better align with the brand refresh, Alert and Warning states are being renamed to Caution for better semantics.
+
+This change mostly affects how you pass an error state to our input components. In most cases, our inputs components should be used with our `FormField` component to
+ensure correct accessiblity.
+
+**Before in v13**
+
+```tsx
+<FormField error="alert">
+	<FormField.Label>First Name</FormField.Label>
+	<FormField.Field>
+		<FormField.Input as={TextInput} value={value} onChange={handleChange} />
+		<FormField.Hint>Cannot contain numbers</FormField.Hint>
+	</FormField.Field>
+</FormField>
+```
+
+**After in v14**
+
+```tsx
+<FormField error="caution">
+	<FormField.Label>First Name</FormField.Label>
+	<FormField.Field>
+		<FormField.Input as={TextInput} value={value} onChange={handleChange} />
+		<FormField.Hint>Cannot contain numbers</FormField.Hint>
+	</FormField.Field>
+</FormField>
+```
+
+If you are using the error type either from our `Common` package or the one exposed from the component, the naming as also changed.
+
+**Before in v13**
+
+```tsx
+import {ErrorType} from '@workday/canvas-kit-react/common';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Switch} from '@workday/canvas-kit-react/switch';
+import {TextArea} from '@workday/canvas-kit-react/text-area';
+
+someFunction(ErrorType.Alert);
+
+<TextInput error={TextInput.ErrorType.Alert} />
+<Switch error={Switch.ErrorType.Alert} />
+<TextArea error={TextArea.ErrorType.Alert} />
+```
+
+**After in v14**
+
+```tsx
+import {ErrorType} from '@workday/canvas-kit-react/common';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Switch} from '@workday/canvas-kit-react/switch';
+import {TextArea} from '@workday/canvas-kit-react/text-area';
+
+
+someFunction(ErrorType.Caution);
+
+<TextInput error={TextInput.ErrorType.Caution} />
+<Switch error={Switch.ErrorType.Caution} />
+<TextArea error={TextArea.ErrorType.Caution} />
+```
+
+> 🤖 The codemod will handle the change of `ErrorType.Alert` to `ErrorType.Caution` and `error="alert"` to `error="caution"`.
+
 ## Theming
 
 ### Canvas Provider 🚨
@@ -209,6 +278,28 @@ matches our brand refresh.
   - `extraSmall`
   - `extraExtraSmall`
 
+**Avatar in Main**
+
+```tsx
+import { Avatar } from '@workday/canvas-kit-react/avatar';
+
+<Avatar altText="John Doe" size="extraExtraLarge" variant="light" as="div" url={yourImageUrl} />
+
+// For Avatars that where buttons
+<Avatar altText="John Doe" size="extraExtraLarge" variant="dark" url={yourImageUrl} />
+```
+
+**Avatar in Preview**
+
+```tsx
+import { Avatar } from '@workday/canvas-kit-preview-react/avatar';
+
+<Avatar name="John Doe" size="extraExtraLarge" variant="blue" />
+
+// Preferred Initials
+<Avatar name="Julian Doe Smith" size="extraExtraLarge" variant="blue" preferredInitials="JS" />
+```
+
 ### Branding Changes 💅
 
 Several components have been refactored to reflect our new brand direction. Most of these changes
@@ -240,6 +331,8 @@ The `TertiaryButton` component no longer supports the `isThemable` prop. To cust
 of `TertiaryButton`, use the `cs` prop for custom styles or the `colors` prop for palette-based
 color overrides.
 
+
+
 The shape of `TertiaryButton` has changed to have rounded corners, aligning with other buttons and
 our new brand direction.
 

package/dist/mdx/7.0-UPGRADE-GUIDE.mdx

@@ -541,7 +541,7 @@ module; it supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.ht
 The `variant` prop (which previously accepted `Banner.Variant.Full` or `Banner.Variant.Sticky`) has
 been converted to the boolean `isSticky` prop on the container `Banner` component.
 
-Similarly, the `error` prop (which previously accepted `Banner.ErrorType.Alert` or
+Similarly, the `error` prop (which previously accepted `Banner.ErrorType.Caution` or
 `Banner.ErrorType.Error`) has been converted to the boolean `hasError` prop on `Banner`. `Banner`
 now uses the `useThemedPalette` hook which allows you to override its colors using the Canvas theme.
 

package/dist/mdx/preview-react/multi-select/examples/Error.tsx

@@ -19,7 +19,7 @@ export default () => {
             model.state.selectedIds.length < 1
               ? 'error'
               : model.state.selectedIds.length > 3
-              ? 'alert'
+              ? 'caution'
               : undefined
           }
         >

package/dist/mdx/preview-react/radio/Radio.mdx

@@ -1,7 +1,7 @@
 import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
-import Alert from './examples/Alert';
+import Caution from './examples/Caution';
 import Error from './examples/Error';
 import Inverse from './examples/Inverse';
 import LabelPosition from './examples/LabelPosition';
@@ -110,18 +110,18 @@ some behavior handled for you.
 
 ### Error States
 
-Set the error prop of the wrapping `FormField` to `FormField.ErrorType.Alert` or
-`FormField.ErrorType.Error` to set the `RadioGroup` to the alert or error state, respectively. You
+Set the `error` prop of the wrapping `FormField` to `"caution"` or
+`"error"` to set the `RadioGroup` to the alert or error state, respectively. You
 will also need to set the `hintId` and `hintText` props on the `FormField` to meet accessibility
 standards. You must set an `aria-describedby` attribute on the `RadioGroup` element that matches the
 value of `hintId` set on the `FormField` element. These attributes ensure that the alert message is
 associated to the `RadioGroup` and read out by voiceover.
 
-#### Alert
+#### Caution
 
 Use the alert state when a selection is valid but there is additional information.
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 #### Error
 

package/dist/mdx/preview-react/radio/examples/{Alert.tsx → Caution.tsx}

@@ -13,7 +13,7 @@ export default () => {
   };
 
   return (
-    <FormFieldGroup error="alert" id="hint-alert">
+    <FormFieldGroup error="caution" id="hint-alert">
       <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>
       <FormFieldGroup.Field>
         <FormFieldGroup.List

package/dist/mdx/preview-react/select/Select.mdx

@@ -10,7 +10,7 @@ import DefaultWithCustomOptions from './examples/Top Label/DefaultWithCustomOpti
 import DefaultWithSimpleOptions from './examples/Top Label/DefaultWithSimpleOptions';
 import Scrollable from './examples/Top Label/Scrollable';
 import Disabled from './examples/Top Label/Disabled';
-import Alert from './examples/Top Label/Alert';
+import Caution from './examples/Top Label/Caution';
 import Error from './examples/Top Label/Error';
 import Grow from './examples/Top Label/Grow';
 import DefaultLeft from './examples/Left Label/DefaultLeft';
@@ -62,7 +62,7 @@ import GrowLeft from './examples/Left Label/GrowLeft';
 
 ### Alert
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 ### Error
 
@@ -96,7 +96,7 @@ import GrowLeft from './examples/Left Label/GrowLeft';
 
 ### Alert
 
-<ExampleCodeBlock code={AlertLeft} />
+<ExampleCodeBlock code={CautionLeft} />
 
 ### Error
 

package/dist/mdx/preview-react/select/examples/Left Label/AlertLeft.tsx

@@ -7,7 +7,7 @@ import {controlComponent} from '../../../../../../utils/storybook';
 
 export default () => {
   return (
-    <FormField orientation="horizontalStart" id="select-alert" error="alert">
+    <FormField orientation="horizontalStart" id="select-alert" error="caution">
       <FormField.Label>Label</FormField.Label>
       <FormField.Field>
         {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}

package/dist/mdx/preview-react/select/examples/Top Label/{Alert.tsx → Caution.tsx }

@@ -5,7 +5,7 @@ import {controlComponent} from '../../../../../../utils/storybook';
 
 export default () => {
   return (
-    <FormField id="select-alert" error="alert">
+    <FormField id="select-alert" error="caution">
       <FormField.Label>Label</FormField.Label>
       <FormField.Field>
         {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}

package/dist/mdx/preview-react/select/examples/Top Label/index.ts

@@ -3,6 +3,6 @@ export {DefaultWithCustomOptions} from './DefaultWithCustomOptions';
 export {DefaultWithSimpleOptions} from './DefaultWithSimpleOptions';
 export {Scrollable} from './Scrollable';
 export {Disabled} from './Disabled';
-export {Alert} from './Alert';
+export {Caution} from './Caution';
 export {Error} from './Error';
 export {Grow} from './Grow';

package/dist/mdx/react/checkbox/Checkbox.mdx

@@ -4,7 +4,7 @@ import {
   Specifications,
   InformationHighlight,
 } from '@workday/canvas-kit-docs';
-import Alert from './examples/Alert';
+import Caution from './examples/Caution';
 import Basic from './examples/Basic';
 import Inverse from './examples/Inverse';
 import Disabled from './examples/Disabled';
@@ -84,18 +84,18 @@ Labels for required fields are suffixed by a red asterisk.
 
 ### Error States
 
-Set the `error` prop of the wrapping Form Field to `FormField.ErrorType.Alert` or
-`FormField.ErrorType.Error` to set the Checkbox to the Alert or Error state, respectively. You will
+Set the `error` prop of the wrapping Form Field to `"caution"` or
+`"error"` to set the Checkbox to the Alert or Error state, respectively. You will
 also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility
 standards. You may wish to omit the `label` prop on the Form Field given that Checkbox already
 includes a label.
 
-The `error` prop may be applied directly to the Checkbox with a value of `Checkbox.ErrorType.Alert`
-or `Checkbox.ErrorType.Error` if Form Field is not being used.
+The `error` prop may be applied directly to the Checkbox with a value of `"caution"`
+or `"error"` if Form Field is not being used.
 
-#### Alert
+#### Caution
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 #### Error
 

package/dist/mdx/react/checkbox/examples/{Alert.tsx → Caution.tsx}

@@ -10,7 +10,7 @@ export default () => {
   };
 
   return (
-    <FormField error="alert">
+    <FormField error="caution">
       <FormField.Label>Confirm</FormField.Label>
       <FormField.Field>
         <FormField.Input

package/dist/mdx/react/color-picker/color-input/ColorInput.mdx

@@ -4,7 +4,7 @@ import {
   SymbolDoc,
   Specifications,
 } from '@workday/canvas-kit-docs';
-import Alert from './examples/Alert';
+import Caution from './examples/Caution';
 import Basic from './examples/Basic';
 import Checked from './examples/Checked';
 import Disabled from './examples/Disabled';
@@ -90,14 +90,14 @@ Labels for required fields are suffixed by a red asterisk.
 
 ### Error States
 
-Set the `error` prop of the wrapping Form Field to `FormField.ErrorType.Alert` or
-`FormField.ErrorType.Error` to set the Color Input to the Alert or Error state, respectively. You
+Set the `error` prop of the wrapping Form Field to `"caution"` or
+`"error"` to set the Color Input to the Caution or Error state, respectively. You
 will also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility
 standards.
 
-#### Alert
+#### Caution
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 #### Error
 

package/dist/mdx/react/color-picker/color-input/examples/{Alert.tsx → Caution.tsx}

@@ -10,7 +10,7 @@ export default () => {
   };
 
   return (
-    <FormField error="alert">
+    <FormField error="caution">
       <FormField.Label>Background Color</FormField.Label>
       <FormField.Field>
         <FormField.Input as={ColorInput} onChange={handleChange} value={value} />

package/dist/mdx/react/form-field/FormField.mdx

@@ -1,6 +1,6 @@
 import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
-import Alert from './examples/Alert';
+import Caution from './examples/Caution';
 import Error from './examples/Error';
 import Disabled from './examples/Disabled';
 import HiddenLabel from './examples/HiddenLabel';
@@ -79,13 +79,13 @@ accessibility standards. The orientation of the label by default is `vertical`.
 Set the `error` prop of the Form Field or define it in the model to indicate it has an error.
 `error` accepts the following values:
 
-`"error" | "alert" | undefined`
+`"error" | "caution" | undefined`
 
-### Alert
+### Caution
 
-Use the alert state when a value is valid but there is additional information.
+Use the caution state when a value is valid but there is additional information.
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 ### Error
 
@@ -155,7 +155,7 @@ accessibility of grouped inputs.
 
 `FormFieldGroup` supports the same props of `FormField`:
 
-- `error`: `"alert" | "error"` Defines the error around the whole group of inputs.
+- `error`: `"caution" | "error"` Defines the error around the whole group of inputs.
 - `orientation`: `"horizontal" | "vertical"` Defines the legend placement.
 - `isRequired`: `true` Defines if a group like RadioGroup is required.
 

package/dist/mdx/react/form-field/examples/AllFields.tsx

@@ -27,7 +27,7 @@ export default () => {
         </FormField.Field>
       </FormField>
 
-      <FormField isRequired={true} error="alert" grow>
+      <FormField isRequired={true} error="caution" grow>
         <FormField.Label>Email</FormField.Label>
         <FormField.Field>
           <FormField.Input as={TextInput} />

package/dist/mdx/react/form-field/examples/{Alert.tsx → Caution.tsx}

@@ -12,7 +12,7 @@ export default () => {
 
   return (
     <Flex>
-      <FormField error="alert">
+      <FormField error="caution">
         <FormField.Label>First Name</FormField.Label>
         <FormField.Field>
           <FormField.Input as={TextInput} value={value} onChange={handleChange} />

package/dist/mdx/react/radio/Radio.mdx

@@ -7,7 +7,7 @@ import {
 
 import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 
-import Alert from './examples/Alert';
+import Caution from './examples/Caution';
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
 import Inverse from './examples/Inverse';
@@ -96,14 +96,14 @@ Labels for required fields are suffixed by a red asterisk.
 
 ### Error States
 
-Set the `error` prop of the wrapping Form Field to `FormField.ErrorType.Alert` or
-`FormField.ErrorType.Error` to set the Radio Group to the Alert or Error state, respectively. You
+Set the `error` prop of the wrapping Form Field to `"caution"` or
+`"error"` to set the Radio Group to the Caution or Error state, respectively. You
 will also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility
 standards.
 
-#### Alert
+#### Caution
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 #### Error
 

package/dist/mdx/react/radio/examples/{Alert.tsx → Caution.tsx}

@@ -11,7 +11,7 @@ export default () => {
   };
 
   return (
-    <FormField error="alert" as="fieldset">
+    <FormField error="caution" as="fieldset">
       <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
       <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />

package/dist/mdx/react/select/Select.mdx

@@ -4,7 +4,7 @@ import {
   SymbolDoc,
   Specifications,
 } from '@workday/canvas-kit-docs';
-import Alert from './examples/Alert';
+import Caution from './examples/Caution';
 import Basic from './examples/Basic';
 import Complex from './examples/Complex';
 import Controlled from './examples/Controlled';
@@ -166,11 +166,11 @@ forward `ref` to its underlying `<input type="text" role="combobox">` element.
 
 ### Error States
 
-Set the `error` prop of the wrapping `FormField` to `FormField.ErrorType.Alert` or
-`FormField.ErrorType.Error` to set the `Select` to the alert or error state, respectively. You will
+Set the `error` prop of the wrapping `FormField` to `"caution"` or
+`"error"` to set the `Select` to the caution or error state, respectively. You will
 also need to set the `hintId` and `hintText` props on the `FormField` to meet accessibility
 standards. You must set an `id` attribute on the `Select.Input` element that matches the value of
-`inputId` set on the `FormField` element. These attributes ensure that the alert message is
+`inputId` set on the `FormField` element. These attributes ensure that the caution message is
 associated to the `Select` and read out by voiceover.
 
 **Note: The Select container component, `Select`, must wrap `FormField` to ensure `Select.Input` is
@@ -185,11 +185,11 @@ styled correctly.**
 </Select>
 ```
 
-#### Alert
+#### Caution
 
 Use the alert state when a selection is valid but there is additional information.
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 #### Error
 

package/dist/mdx/react/select/examples/{Alert.tsx → Caution.tsx}

@@ -25,7 +25,7 @@ export default () => {
   };
   return (
     <Flex cs={parentContainerStyles}>
-      <FormField error="alert">
+      <FormField error="caution">
         <FormField.Label>Contact</FormField.Label>
         <FormField.Field>
           <Select items={options}>

package/dist/mdx/react/switch/Switch.mdx

@@ -4,7 +4,7 @@ import {
   Specifications,
   InformationHighlight,
 } from '@workday/canvas-kit-docs';
-import Alert from './examples/Alert';
+import Caution from './examples/Caution';
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
 import Error from './examples/Error';
@@ -54,17 +54,17 @@ input component. By default, the orientation will be set to `vertical`.
 
 ### Error States
 
-Set the `error` prop of the wrapping Form Field to `FormField.ErrorType.Alert` or
-`FormField.ErrorType.Error` to set the Switch to the Alert or Error state, respectively. You will
+Set the `error` prop of the wrapping Form Field to `"caution"` or
+`"error"` to set the Switch to the Caution or Error state, respectively. You will
 also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility
 standards.
 
-The `error` prop may be applied directly to the Switch with a value of `Switch.ErrorType.Alert` or
+The `error` prop may be applied directly to the Switch with a value of `Switch.ErrorType.Caution` or
 `Switch.ErrorType.Error` if Form Field is not being used.
 
-#### Alert
+#### Caution
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 #### Error
 

package/dist/mdx/react/switch/examples/{Alert.tsx → Caution.tsx}

@@ -10,7 +10,7 @@ export default () => {
   };
 
   return (
-    <FormField error="alert">
+    <FormField error="caution">
       <FormField.Label>Dark Mode</FormField.Label>
       <FormField.Field>
         <FormField.Input as={Switch} checked={checked} onChange={handleChange} />

package/dist/mdx/react/text-area/TextArea.mdx

@@ -4,7 +4,7 @@ import {
   Specifications,
   InformationHighlight,
 } from '@workday/canvas-kit-docs';
-import Alert from './examples/Alert';
+import Caution from './examples/Caution';
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
 import Error from './examples/Error';
@@ -91,17 +91,17 @@ Labels for required fields are suffixed by a red asterisk.
 
 ### Error States
 
-Set the `error` prop of the wrapping Form Field to `FormField.ErrorType.Alert` or
-`FormField.ErrorType.Error` to set the Text Area to the Alert or Error state, respectively. You will
+Set the `error` prop of the wrapping Form Field to `"caution"` or
+`"error"` to set the Text Area to the Caution or Error state, respectively. You will
 also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility
 standards.
 
-The `error` prop may be applied directly to the Text Area with a value of `TextArea.ErrorType.Alert`
+The `error` prop may be applied directly to the Text Area with a value of `"TextArea.ErrorType.Caution"`
 or `TextArea.ErrorType.Error` if Form Field is not being used.
 
-#### Alert
+#### Caution
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 #### Error
 

package/dist/mdx/react/text-area/examples/{Alert.tsx → Caution.tsx}

@@ -10,7 +10,7 @@ export default () => {
   };
 
   return (
-    <FormField error="alert">
+    <FormField error="caution">
       <FormField.Label>Please enter your review.</FormField.Label>
       <FormField.Field>
         <FormField.Input as={TextArea} onChange={handleChange} value={value} />

package/dist/mdx/react/text-input/TextInput.mdx

@@ -4,7 +4,7 @@ import {
   SymbolDoc,
   Specifications,
 } from '@workday/canvas-kit-docs';
-import Alert from './examples/Alert';
+import Caution from './examples/Caution';
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
 import Error from './examples/Error';
@@ -99,17 +99,17 @@ method to change width. The `width` prop is used to correctly position other inn
 
 ### Error States
 
-Set the `error` prop of the wrapping Form Field to `FormField.ErrorType.Alert` or
-`FormField.ErrorType.Error` to set the Text Input to the Alert or Error state, respectively. You
+Set the `error` prop of the wrapping Form Field to `"caution"` or
+`"error"` to set the Text Input to the Caution or Error state, respectively. You
 will also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility
 standards.
 
 The `error` prop may be applied directly to the Text Input with a value of
-`TextInput.ErrorType.Alert` or `TextInput.ErrorType.Error` if Form Field is not being used.
+`TextInput.ErrorType.Caution` or `TextInput.ErrorType.Error` if Form Field is not being used.
 
-#### Alert
+#### Caution
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 #### Error
 

package/dist/mdx/react/text-input/examples/{Alert.tsx → Caution.tsx}

@@ -10,7 +10,7 @@ export default () => {
   };
 
   return (
-    <FormField error="alert">
+    <FormField error="caution">
       <FormField.Label>Email</FormField.Label>
       <FormField.Field>
         <FormField.Input as={TextInput} onChange={handleChange} value={value} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0-alpha.1237-next.0",
+  "version": "14.0.0-alpha.1238-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1237-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1237-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1237-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1237-next.0",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1238-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1238-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1238-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1238-next.0",
     "@workday/canvas-system-icons-web": "^3.0.35",
     "@workday/canvas-tokens-web": "3.0.0-alpha.12",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "8a03bc6fdf11ecb2672ad937247aaf18b7cee0ec"
+  "gitHead": "ddfa0ae8c1be2e17cd6133b84fa8a76825267f5b"
 }