@workday/canvas-kit-preview-react 11.0.0-alpha.668-next.0 → 11.0.0-alpha.669-next.0

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

@@ -27,19 +27,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
         orientation: "horizontal" | "vertical";
         isRequired: boolean;
     };
-    events: {}; /**
-     * `FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.
-     * `FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.
-     *
-     * **Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**
-     *
-     * ```tsx
-     *  <FormField id='my-unique-id'>
-     *    <FormField.Label>My Label Text</FormField.Label>
-     *    <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />
-     *  <FormField>
-     * ```
-     */
+    events: {};
 }> & {
     /**
      * `FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.
@@ -61,19 +49,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
             orientation: "horizontal" | "vertical";
             isRequired: boolean;
         };
-        events: {}; /**
-         * `FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.
-         * `FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.
-         *
-         * **Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**
-         *
-         * ```tsx
-         *  <FormField id='my-unique-id'>
-         *    <FormField.Label>My Label Text</FormField.Label>
-         *    <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />
-         *  <FormField>
-         * ```
-         */
+        events: {};
     }>;
     /**
      * `FormField.Label` will render a `label` element that has a matching `id` to the `FormField.Input`.
@@ -92,19 +68,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
             orientation: "horizontal" | "vertical";
             isRequired: boolean;
         };
-        events: {}; /**
-         * `FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.
-         * `FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.
-         *
-         * **Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**
-         *
-         * ```tsx
-         *  <FormField id='my-unique-id'>
-         *    <FormField.Label>My Label Text</FormField.Label>
-         *    <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />
-         *  <FormField>
-         * ```
-         */
+        events: {};
     }>;
     /**
      * `FormField.Hint` will render any additional information you want to provide to the `FormField.Input`. If you
@@ -125,19 +89,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
             orientation: "horizontal" | "vertical";
             isRequired: boolean;
         };
-        events: {}; /**
-         * `FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.
-         * `FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.
-         *
-         * **Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**
-         *
-         * ```tsx
-         *  <FormField id='my-unique-id'>
-         *    <FormField.Label>My Label Text</FormField.Label>
-         *    <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />
-         *  <FormField>
-         * ```
-         */
+        events: {};
     }>;
     /**
      * `FormField.Container` allows you to properly center `FormField.Label` when the `orientation` is set to `horizontal` and there is hint text..
@@ -159,19 +111,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
             orientation: "horizontal" | "vertical";
             isRequired: boolean;
         };
-        events: {}; /**
-         * `FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.
-         * `FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.
-         *
-         * **Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**
-         *
-         * ```tsx
-         *  <FormField id='my-unique-id'>
-         *    <FormField.Label>My Label Text</FormField.Label>
-         *    <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />
-         *  <FormField>
-         * ```
-         */
+        events: {};
     }>;
 };
 //# sourceMappingURL=FormField.d.ts.map

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,cAAc,EAAC,MAAM,kCAAkC,CAAC;AACjF,OAAO,EAAO,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAU9E,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAmBD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;gBAIlB;;;;;;;;;;;;OAYG;;IAZH;;;;;;;;;;;;OAYG;;;;;;;;oBAZH;;;;;;;;;;;;WAYG;;IAEH;;;;;;;;;OASG;;;;;;;;oBAvBH;;;;;;;;;;;;WAYG;;IAaH;;;;;;;;;;;OAWG;;;;;;;;oBApCH;;;;;;;;;;;;WAYG;;IA0BH;;;;;;;;;;;;OAYG;;;;;;;;oBAlDH;;;;;;;;;;;;WAYG;;CAqDL,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,cAAc,EAAC,MAAM,kCAAkC,CAAC;AACjF,OAAO,EAAO,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAU9E,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAmBD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;IAIlB;;;;;;;;;;;;OAYG;;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;IAEH;;;;;;;;;;;;OAYG;;;;;;;;;;CAeL,CAAC"}

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

@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const hooks_1 = require("./hooks");
 const FormFieldInput_1 = require("./FormFieldInput");
 const FormFieldLabel_1 = require("./FormFieldLabel");
@@ -18,7 +18,7 @@ const formFieldStencil = canvas_kit_styling_1.createStencil({
     base: {
         border: 'none',
         padding: 0,
-        margin: `0 0 ${tokens_1.space.m}`,
+        margin: `0 0 ${canvas_tokens_web_1.system.space.x6}`,
     },
     modifiers: {
         grow: {

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":"AAOA,eAAO,MAAM,aAAa;;;;;;;;EAyBzB,CAAC"}
+{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAuBA,eAAO,MAAM,aAAa;;;;;;;;EAqBzB,CAAC"}

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

@@ -6,18 +6,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormFieldHint = void 0;
 const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const hooks_1 = require("./hooks");
 const text_1 = require("@workday/canvas-kit-react/text");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const formFieldHintStencil = canvas_kit_styling_1.createStencil({
+    base: {
+        margin: `${canvas_tokens_web_1.system.space.x2} 0 0`,
+    },
+    modifiers: {
+        error: {
+            error: {
+                color: canvas_tokens_web_1.brand.error.base,
+            },
+            alert: {},
+        },
+    },
+});
 exports.FormFieldHint = common_1.createSubcomponent('p')({
     displayName: 'FormField.Hint',
     modelHook: hooks_1.useFormFieldModel,
     elemPropsHook: hooks_1.useFormFieldHint,
 })(({ children, ...elemProps }, Element, model) => {
-    const theme = common_1.useTheme();
     if (!children) {
         // If there is no hint text just skip rendering
         return null;
     }
-    return (react_1.default.createElement(text_1.Subtext, Object.assign({ as: Element, size: "medium", color: model.state.error === 'error' ? theme.canvas.palette.error.main : undefined, marginY: tokens_1.space.xxs }, elemProps), children));
+    return (react_1.default.createElement(text_1.Subtext, Object.assign({ as: Element, size: "medium" }, layout_1.mergeStyles(elemProps, formFieldHintStencil({ error: model.state.error }))), children));
 });

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

@@ -27,19 +27,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
         orientation: "horizontal" | "vertical";
         isRequired: boolean;
     };
-    events: {}; /**
-     * `FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.
-     * `FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.
-     *
-     * **Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**
-     *
-     * ```tsx
-     *  <FormField id='my-unique-id'>
-     *    <FormField.Label>My Label Text</FormField.Label>
-     *    <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />
-     *  <FormField>
-     * ```
-     */
+    events: {};
 }> & {
     /**
      * `FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.
@@ -61,19 +49,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
             orientation: "horizontal" | "vertical";
             isRequired: boolean;
         };
-        events: {}; /**
-         * `FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.
-         * `FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.
-         *
-         * **Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**
-         *
-         * ```tsx
-         *  <FormField id='my-unique-id'>
-         *    <FormField.Label>My Label Text</FormField.Label>
-         *    <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />
-         *  <FormField>
-         * ```
-         */
+        events: {};
     }>;
     /**
      * `FormField.Label` will render a `label` element that has a matching `id` to the `FormField.Input`.
@@ -92,19 +68,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
             orientation: "horizontal" | "vertical";
             isRequired: boolean;
         };
-        events: {}; /**
-         * `FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.
-         * `FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.
-         *
-         * **Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**
-         *
-         * ```tsx
-         *  <FormField id='my-unique-id'>
-         *    <FormField.Label>My Label Text</FormField.Label>
-         *    <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />
-         *  <FormField>
-         * ```
-         */
+        events: {};
     }>;
     /**
      * `FormField.Hint` will render any additional information you want to provide to the `FormField.Input`. If you
@@ -125,19 +89,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
             orientation: "horizontal" | "vertical";
             isRequired: boolean;
         };
-        events: {}; /**
-         * `FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.
-         * `FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.
-         *
-         * **Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**
-         *
-         * ```tsx
-         *  <FormField id='my-unique-id'>
-         *    <FormField.Label>My Label Text</FormField.Label>
-         *    <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />
-         *  <FormField>
-         * ```
-         */
+        events: {};
     }>;
     /**
      * `FormField.Container` allows you to properly center `FormField.Label` when the `orientation` is set to `horizontal` and there is hint text..
@@ -159,19 +111,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
             orientation: "horizontal" | "vertical";
             isRequired: boolean;
         };
-        events: {}; /**
-         * `FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.
-         * `FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.
-         *
-         * **Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**
-         *
-         * ```tsx
-         *  <FormField id='my-unique-id'>
-         *    <FormField.Label>My Label Text</FormField.Label>
-         *    <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />
-         *  <FormField>
-         * ```
-         */
+        events: {};
     }>;
 };
 //# sourceMappingURL=FormField.d.ts.map

package/dist/es6/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,cAAc,EAAC,MAAM,kCAAkC,CAAC;AACjF,OAAO,EAAO,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAU9E,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAmBD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;gBAIlB;;;;;;;;;;;;OAYG;;IAZH;;;;;;;;;;;;OAYG;;;;;;;;oBAZH;;;;;;;;;;;;WAYG;;IAEH;;;;;;;;;OASG;;;;;;;;oBAvBH;;;;;;;;;;;;WAYG;;IAaH;;;;;;;;;;;OAWG;;;;;;;;oBApCH;;;;;;;;;;;;WAYG;;IA0BH;;;;;;;;;;;;OAYG;;;;;;;;oBAlDH;;;;;;;;;;;;WAYG;;CAqDL,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,cAAc,EAAC,MAAM,kCAAkC,CAAC;AACjF,OAAO,EAAO,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAU9E,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAmBD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;IAIlB;;;;;;;;;;;;OAYG;;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;IAEH;;;;;;;;;;;;OAYG;;;;;;;;;;CAeL,CAAC"}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { createContainer } from '@workday/canvas-kit-react/common';
 import { Flex, mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createStencil } from '@workday/canvas-kit-styling';
-import { space } from '@workday/canvas-kit-react/tokens';
+import { system } from '@workday/canvas-tokens-web';
 import { useFormFieldModel, useFormFieldOrientation } from './hooks';
 import { FormFieldInput } from './FormFieldInput';
 import { FormFieldLabel } from './FormFieldLabel';
@@ -12,7 +12,7 @@ const formFieldStencil = createStencil({
     base: {
         border: 'none',
         padding: 0,
-        margin: `0 0 ${space.m}`,
+        margin: `0 0 ${system.space.x6}`,
     },
     modifiers: {
         grow: {

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

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

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

@@ -1,17 +1,31 @@
 import React from 'react';
-import { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
-import { space } from '@workday/canvas-kit-react/tokens';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { system, brand } from '@workday/canvas-tokens-web';
+import { createStencil } from '@workday/canvas-kit-styling';
 import { useFormFieldHint, useFormFieldModel } from './hooks';
 import { Subtext } from '@workday/canvas-kit-react/text';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+const formFieldHintStencil = createStencil({
+    base: {
+        margin: `${system.space.x2} 0 0`,
+    },
+    modifiers: {
+        error: {
+            error: {
+                color: brand.error.base,
+            },
+            alert: {},
+        },
+    },
+});
 export const FormFieldHint = createSubcomponent('p')({
     displayName: 'FormField.Hint',
     modelHook: useFormFieldModel,
     elemPropsHook: useFormFieldHint,
 })(({ children, ...elemProps }, Element, model) => {
-    const theme = useTheme();
     if (!children) {
         // If there is no hint text just skip rendering
         return null;
     }
-    return (React.createElement(Subtext, Object.assign({ as: Element, size: "medium", color: model.state.error === 'error' ? theme.canvas.palette.error.main : undefined, marginY: space.xxs }, elemProps), children));
+    return (React.createElement(Subtext, Object.assign({ as: Element, size: "medium" }, mergeStyles(elemProps, formFieldHintStencil({ error: model.state.error }))), children));
 });

package/form-field/lib/FormField.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {createContainer, GrowthBehavior} from '@workday/canvas-kit-react/common';
 import {Flex, FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createStencil} from '@workday/canvas-kit-styling';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {system} from '@workday/canvas-tokens-web';
 
 import {useFormFieldModel, useFormFieldOrientation} from './hooks';
 import {FormFieldInput} from './FormFieldInput';
@@ -19,7 +19,7 @@ const formFieldStencil = createStencil({
   base: {
     border: 'none',
     padding: 0,
-    margin: `0 0 ${space.m}`,
+    margin: `0 0 ${system.space.x6}`,
   },
   modifiers: {
     grow: {

package/form-field/lib/FormFieldHint.tsx

@@ -1,9 +1,25 @@
 import React from 'react';
-import {createSubcomponent, ExtractProps, useTheme} from '@workday/canvas-kit-react/common';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {system, brand} from '@workday/canvas-tokens-web';
+import {createStencil} from '@workday/canvas-kit-styling';
 
 import {useFormFieldHint, useFormFieldModel} from './hooks';
 import {Subtext} from '@workday/canvas-kit-react/text';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+
+const formFieldHintStencil = createStencil({
+  base: {
+    margin: `${system.space.x2} 0 0`,
+  },
+  modifiers: {
+    error: {
+      error: {
+        color: brand.error.base,
+      },
+      alert: {},
+    },
+  },
+});
 
 export const FormFieldHint = createSubcomponent('p')({
   displayName: 'FormField.Hint',
@@ -11,8 +27,6 @@ export const FormFieldHint = createSubcomponent('p')({
   elemPropsHook: useFormFieldHint,
 })<Omit<ExtractProps<typeof Subtext, never>, 'size'>>(
   ({children, ...elemProps}, Element, model) => {
-    const theme = useTheme();
-
     if (!children) {
       // If there is no hint text just skip rendering
       return null;
@@ -22,9 +36,7 @@ export const FormFieldHint = createSubcomponent('p')({
       <Subtext
         as={Element}
         size="medium"
-        color={model.state.error === 'error' ? theme.canvas.palette.error.main : undefined}
-        marginY={space.xxs}
-        {...elemProps}
+        {...mergeStyles(elemProps, formFieldHintStencil({error: model.state.error}))}
       >
         {children}
       </Subtext>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "11.0.0-alpha.668-next.0",
+  "version": "11.0.0-alpha.669-next.0",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -47,7 +47,7 @@
     "@emotion/css": "^11.7.1",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^11.0.0-alpha.668-next.0",
+    "@workday/canvas-kit-react": "^11.0.0-alpha.669-next.0",
     "@workday/canvas-kit-styling": "^10.3.1",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.0.2",
@@ -59,5 +59,5 @@
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "0e652be802901414f4bfa9fc04c8b2abb2220f1e"
+  "gitHead": "61dca4fd454434a6e3d7d6d691a700c704b14c51"
 }