@workday/canvas-kit-preview-react 7.0.0-alpha.0-next.5 → 7.0.0-alpha.100-next.25

package/dist/es6/text-area/lib/hooks/useTextAreaModel.d.ts

@@ -1,8 +1,28 @@
-import { FormFieldModel } from '@workday/canvas-kit-preview-react/form-field';
-export declare const useTextAreaModel: (config?: import("../../../form-field").FormFieldModelConfig) => import("@workday/canvas-kit-react/common").Model<{
-    hasError?: boolean | undefined;
-    id?: string | undefined;
-    isRequired?: boolean | undefined;
-}, {}>;
-export declare type TextAreaModel = FormFieldModel;
+export declare const useTextAreaModel: (<TT_Special_Generic>(config?: (Partial<{
+    hasError: boolean;
+    id: string;
+    isRequired: boolean;
+}> & {} & {}) | undefined) => {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
+    hasError: boolean;
+    id: string;
+    isRequired: boolean;
+}, {}, {
+    id: string;
+    hasError: boolean;
+    isRequired: boolean;
+}, {}, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}>;
 //# sourceMappingURL=useTextAreaModel.d.ts.map

package/dist/es6/text-area/lib/hooks/useTextAreaModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextAreaModel.d.ts","sourceRoot":"","sources":["../../../../../text-area/lib/hooks/useTextAreaModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,cAAc,EAAC,MAAM,8CAA8C,CAAC;AAE/F,eAAO,MAAM,gBAAgB;;;;MAAoB,CAAC;AAElD,oBAAY,aAAa,GAAG,cAAc,CAAC"}
+{"version":3,"file":"useTextAreaModel.d.ts","sourceRoot":"","sources":["../../../../../text-area/lib/hooks/useTextAreaModel.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;EAAoB,CAAC"}

package/dist/es6/text-input/lib/TextInput.d.ts

@@ -1,22 +1,70 @@
 import React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { FormField } from '@workday/canvas-kit-preview-react/form-field';
-import { TextInputModel } from './hooks';
-export declare const TextInputModelContext: React.Context<import("@workday/canvas-kit-react/common").Model<{
-    hasError?: boolean | undefined;
-    id?: string | undefined;
-    isRequired?: boolean | undefined;
-}, {}>>;
 export interface TextInputProps extends ExtractProps<typeof FormField, never> {
-    model?: TextInputModel;
     /**
      * Children of the Text Input. Should contain a `<TextInput.Field>`, a `<TextInput.Label>` and an optional `<TextInput.Hint>`
      */
     children: React.ReactNode;
 }
-export declare const TextInput: import("@workday/canvas-kit-react/common").Component<TextInputProps> & {
-    Field: import("@workday/canvas-kit-react/common").ElementComponent<"input", import("./TextInputField").TextInputFieldProps>;
-    Label: import("@workday/canvas-kit-react/common").ElementComponent<"label", import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps>;
-    Hint: import("@workday/canvas-kit-react/common").ElementComponent<"p", import("../../form-field/lib/FormFieldHint").FormFieldHintProps>;
+export declare const TextInput: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../form-field").FormFieldProps & Partial<{
+    hasError: boolean;
+    id: string;
+    isRequired: boolean;
+}> & {} & {} & import("@workday/canvas-kit-react/common").PropsWithModel<{
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}>, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}> & {
+    Context: React.Context<{
+        state: {
+            id: string;
+            hasError: boolean;
+            isRequired: boolean;
+        };
+        events: {};
+    }>;
+} & {
+    Field: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
+        state: {
+            id: string;
+            hasError: boolean;
+            isRequired: boolean;
+        };
+        events: {};
+    }>, {
+        state: {
+            id: string;
+            hasError: boolean;
+            isRequired: boolean;
+        };
+        events: {};
+    }>;
+    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps, {
+        state: {
+            id: string;
+            hasError: boolean;
+            isRequired: boolean;
+        };
+        events: {};
+    }>;
+    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps, {
+        state: {
+            id: string;
+            hasError: boolean;
+            isRequired: boolean;
+        };
+        events: {};
+    }>;
 };
 //# sourceMappingURL=TextInput.d.ts.map

package/dist/es6/text-input/lib/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EACL,SAAS,EAGV,MAAM,8CAA8C,CAAC;AAGtD,OAAO,EAAoB,cAAc,EAAC,MAAM,SAAS,CAAC;AAK1D,eAAO,MAAM,qBAAqB;;;;OAAwB,CAAC;AAE3D,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC3E,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS;;;;CAqBpB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,SAAS,EAA0B,MAAM,8CAA8C,CAAC;AAMhG,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC3E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBpB,CAAC"}

package/dist/es6/text-input/lib/TextInput.js

@@ -21,27 +21,21 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { createComponent, useDefaultModel } from '@workday/canvas-kit-react/common';
-import { FormFieldModelContext, useFormFieldOrientation, } from '@workday/canvas-kit-preview-react/form-field';
-import { Stack } from '@workday/canvas-kit-labs-react/layout';
+import { createContainer } from '@workday/canvas-kit-react/common';
+import { FormField, useFormFieldOrientation } from '@workday/canvas-kit-preview-react/form-field';
+import { Stack } from '@workday/canvas-kit-react/layout';
 import { useTextInputModel } from './hooks';
 import { TextInputField } from './TextInputField';
-import { TextInputLabel } from './TextInputLabel';
-import { TextInputHint } from './TextInputHint';
-export var TextInputModelContext = FormFieldModelContext;
-export var TextInput = createComponent()({
+export var TextInput = createContainer('div')({
     displayName: 'TextInput',
-    Component: function (_a, ref) {
-        var children = _a.children, model = _a.model, orientation = _a.orientation, props = __rest(_a, ["children", "model", "orientation"]);
-        var hasError = props.hasError, id = props.id, isRequired = props.isRequired, elemProps = __rest(props, ["hasError", "id", "isRequired"]);
-        var value = useDefaultModel(model, { hasError: hasError, id: id, isRequired: isRequired }, useTextInputModel);
-        var layoutProps = useFormFieldOrientation(orientation);
-        return (React.createElement(TextInputModelContext.Provider, { value: value },
-            React.createElement(Stack, __assign({ ref: ref }, layoutProps, elemProps), children)));
-    },
+    modelHook: useTextInputModel,
     subComponents: {
         Field: TextInputField,
-        Label: TextInputLabel,
-        Hint: TextInputHint,
+        Label: FormField.Label,
+        Hint: FormField.Hint,
     },
+})(function (_a, Element) {
+    var children = _a.children, orientation = _a.orientation, elemProps = __rest(_a, ["children", "orientation"]);
+    var layoutProps = useFormFieldOrientation(orientation);
+    return (React.createElement(Stack, __assign({ as: Element }, layoutProps, elemProps), children));
 });

package/dist/es6/text-input/lib/TextInputField.d.ts

@@ -1,8 +1,16 @@
-import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { FormField } from '@workday/canvas-kit-preview-react/form-field';
-import { TextInputModel } from './hooks';
-export interface TextInputFieldProps extends ExtractProps<typeof FormField.Input, never> {
-    model?: TextInputModel;
-}
-export declare const TextInputField: import("@workday/canvas-kit-react/common").ElementComponent<"input", TextInputFieldProps>;
+export declare const TextInputField: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}>, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}>;
 //# sourceMappingURL=TextInputField.d.ts.map

package/dist/es6/text-input/lib/TextInputField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AAWA,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAGvE,OAAO,EAAoB,cAAc,EAAC,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACtF,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AA2BD,eAAO,MAAM,cAAc,2FAkCzB,CAAC"}
+{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AA0CA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;EAgCzB,CAAC"}

package/dist/es6/text-input/lib/TextInputField.js

@@ -9,26 +9,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { borderRadius, inputColors, space, type, } from '@workday/canvas-kit-react/tokens';
-import { createComponent, useModelContext, useTheme, } from '@workday/canvas-kit-react/common';
+import { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
 import { useThemedRing } from '@workday/canvas-kit-labs-react/common';
 import { FormField } from '@workday/canvas-kit-preview-react/form-field';
-import { TextInputModelContext } from './TextInput';
-import { useTextInputField } from './hooks';
+import { useTextInputField, useTextInputModel } from './hooks';
 var baseStyles = __assign(__assign({}, type.levels.subtext.large), { transition: '0.2s box-shadow, 0.2s border-color', '&::placeholder': {
         color: inputColors.placeholder,
     }, '&:hover': {
@@ -45,22 +33,20 @@ var baseStyles = __assign(__assign({}, type.levels.subtext.large), { transition:
     }, '::-ms-clear': {
         display: 'none',
     } });
-export var TextInputField = createComponent('input')({
+export var TextInputField = createSubcomponent('input')({
     displayName: 'TextInput.Field',
-    Component: function (_a, ref) {
-        var model = _a.model, elemProps = __rest(_a, ["model"]);
-        var localModel = useModelContext(TextInputModelContext, model);
-        var props = useTextInputField(localModel, elemProps, ref);
-        var theme = useTheme();
-        var errorRing = useThemedRing('error');
-        var focusStyles = localModel.state.hasError
-            ? errorRing
-            : {
-                '&:focus:not([disabled])': {
-                    borderColor: theme.canvas.palette.common.focusOutline,
-                    boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
-                },
-            };
-        return (jsx(FormField.Input, __assign({ as: "input", css: [baseStyles, focusStyles], padding: space.xxs, margin: 0, display: "block", height: "40px", minWidth: "280px", border: "1px solid " + inputColors.border, backgroundColor: inputColors.background, borderRadius: borderRadius.m }, props)));
-    },
+    modelHook: useTextInputModel,
+    elemPropsHook: useTextInputField,
+})(function (elemProps, Element, model) {
+    var theme = useTheme();
+    var errorRing = useThemedRing('error');
+    var focusStyles = model.state.hasError
+        ? errorRing
+        : {
+            '&:focus:not([disabled])': {
+                borderColor: theme.canvas.palette.common.focusOutline,
+                boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
+            },
+        };
+    return (jsx(FormField.Input, __assign({ as: "input", css: [baseStyles, focusStyles], padding: space.xxs, margin: 0, display: "block", height: "40px", minWidth: "280px", border: "1px solid " + inputColors.border, backgroundColor: inputColors.background, borderRadius: borderRadius.m }, elemProps)));
 });

package/dist/es6/text-input/lib/hooks/useTextInputField.d.ts

@@ -1,7 +1,14 @@
 /**
  * Adds the necessary props to a `Field` component. Used by the TextInput.Field subcomponent.
  */
-export declare const useTextInputField: <P extends {}, R>(model: import("@workday/canvas-kit-react/common").Model<any, any>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+export declare const useTextInputField: <P extends {}, R>(model: {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
     type: string;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: import("react").Ref<R>;

package/dist/es6/text-input/lib/hooks/useTextInputField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextInputField.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputField.tsx"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;OAI5B,CAAC"}
+{"version":3,"file":"useTextInputField.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputField.tsx"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;OAI5B,CAAC"}

package/dist/es6/text-input/lib/hooks/useTextInputField.js

@@ -1,8 +1,9 @@
-import { createHook } from '@workday/canvas-kit-react/common';
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { useTextInputModel } from './useTextInputModel';
 /**
  * Adds the necessary props to a `Field` component. Used by the TextInput.Field subcomponent.
  */
-export var useTextInputField = createHook(function () {
+export var useTextInputField = createElemPropsHook(useTextInputModel)(function () {
     return {
         type: 'text',
     };

package/dist/es6/text-input/lib/hooks/useTextInputModel.d.ts

@@ -1,8 +1,28 @@
-import { FormFieldModel } from '@workday/canvas-kit-preview-react/form-field';
-export declare const useTextInputModel: (config?: import("../../../form-field").FormFieldModelConfig) => import("@workday/canvas-kit-react/common").Model<{
-    hasError?: boolean | undefined;
-    id?: string | undefined;
-    isRequired?: boolean | undefined;
-}, {}>;
-export declare type TextInputModel = FormFieldModel;
+export declare const useTextInputModel: (<TT_Special_Generic>(config?: (Partial<{
+    hasError: boolean;
+    id: string;
+    isRequired: boolean;
+}> & {} & {}) | undefined) => {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
+    hasError: boolean;
+    id: string;
+    isRequired: boolean;
+}, {}, {
+    id: string;
+    hasError: boolean;
+    isRequired: boolean;
+}, {}, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}>;
 //# sourceMappingURL=useTextInputModel.d.ts.map

package/dist/es6/text-input/lib/hooks/useTextInputModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextInputModel.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,cAAc,EAAC,MAAM,8CAA8C,CAAC;AAE/F,eAAO,MAAM,iBAAiB;;;;MAAoB,CAAC;AAEnD,oBAAY,cAAc,GAAG,cAAc,CAAC"}
+{"version":3,"file":"useTextInputModel.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputModel.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;EAAoB,CAAC"}

package/form-field/lib/FormField.tsx

@@ -1,24 +1,14 @@
 import React from 'react';
 
-import {createComponent, ExtractProps, useDefaultModel} from '@workday/canvas-kit-react/common';
-import {Stack, StackSpacing} from '@workday/canvas-kit-labs-react/layout';
+import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Stack, StackSpacing} from '@workday/canvas-kit-react/layout';
 
-import {
-  useFormFieldModel,
-  FormFieldModel,
-  FormFieldModelConfig,
-  useFormFieldOrientation,
-} from './hooks';
+import {useFormFieldModel, useFormFieldOrientation} from './hooks';
 import {FormFieldInput} from './FormFieldInput';
 import {FormFieldLabel} from './FormFieldLabel';
 import {FormFieldHint} from './FormFieldHint';
 
-export const FormFieldModelContext = React.createContext<FormFieldModel>({} as any);
-
-export interface FormFieldProps
-  extends FormFieldModelConfig,
-    Omit<ExtractProps<typeof Stack, never>, 'spacing'> {
-  model?: FormFieldModel;
+export interface FormFieldProps extends Omit<ExtractProps<typeof Stack, never>, 'spacing'> {
   /**
    * Children of the Text Input. Should contain a `<FormField.Input>`, a `<FormField.Label>` and an optional `<FormField.Hint>`
    */
@@ -34,25 +24,20 @@ export interface FormFieldProps
   spacing?: StackSpacing;
 }
 
-export const FormField = createComponent()({
+export const FormField = createContainer('div')({
   displayName: 'FormField',
-  Component: ({children, model, spacing, orientation, ...props}: FormFieldProps, ref) => {
-    const {hasError, id, isRequired, ...elemProps} = props;
-    const value = useDefaultModel(model, {hasError, id, isRequired}, useFormFieldModel);
-
-    const layoutProps = useFormFieldOrientation(orientation);
-
-    return (
-      <FormFieldModelContext.Provider value={value}>
-        <Stack ref={ref} {...layoutProps} {...elemProps}>
-          {children}
-        </Stack>
-      </FormFieldModelContext.Provider>
-    );
-  },
+  modelHook: useFormFieldModel,
   subComponents: {
     Input: FormFieldInput,
     Label: FormFieldLabel,
     Hint: FormFieldHint,
   },
+})<FormFieldProps>(({children, orientation, ...elemProps}, Element) => {
+  const layoutProps = useFormFieldOrientation(orientation);
+
+  return (
+    <Stack as={Element} {...layoutProps} {...elemProps}>
+      {children}
+    </Stack>
+  );
 });

package/form-field/lib/FormFieldHint.tsx

@@ -1,51 +1,40 @@
 import React from 'react';
 import {
-  createComponent,
+  createSubcomponent,
   ExtractProps,
-  useModelContext,
   useTheme,
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
 import {space, type} from '@workday/canvas-kit-react/tokens';
-import {Box, BoxProps} from '@workday/canvas-kit-labs-react/common';
+import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 
-import {FormFieldModelContext} from './FormField';
-import {FormFieldModel, useFormFieldHint} from './hooks';
-
-export interface FormFieldHintProps extends ExtractProps<typeof Box, never> {
-  model?: FormFieldModel;
-  /**
-   * Hint text to show to the user regarding the Error/Alert
-   */
-  children?: React.ReactNode;
-}
+import {useFormFieldHint, useFormFieldModel} from './hooks';
 
 const StyledHint = styled(Box)<StyledType & BoxProps>({
   ...type.levels.subtext.medium,
 });
 
-export const FormFieldHint = createComponent('p')({
+export const FormFieldHint = createSubcomponent('p')({
   displayName: 'FormField.Hint',
-  Component: ({model, children, ...elemProps}: FormFieldHintProps, ref, Element) => {
-    const localModel = useModelContext(FormFieldModelContext, model);
-    const props = useFormFieldHint(localModel, elemProps, ref);
-    const theme = useTheme();
+  modelHook: useFormFieldModel,
+  elemPropsHook: useFormFieldHint,
+})<ExtractProps<typeof Box, never>>(({children, ...elemProps}, Element, model) => {
+  const theme = useTheme();
 
-    if (!children) {
-      // If there is no hint text just skip rendering
-      return null;
-    }
+  if (!children) {
+    // If there is no hint text just skip rendering
+    return null;
+  }
 
-    return (
-      <StyledHint
-        as={Element}
-        color={localModel.state.hasError ? theme.canvas.palette.error.main : undefined}
-        marginY={space.xxs}
-        {...props}
-      >
-        {children}
-      </StyledHint>
-    );
-  },
+  return (
+    <StyledHint
+      as={Element}
+      color={model.state.hasError ? theme.canvas.palette.error.main : undefined}
+      marginY={space.xxs}
+      {...elemProps}
+    >
+      {children}
+    </StyledHint>
+  );
 });

package/form-field/lib/FormFieldInput.tsx

@@ -1,21 +1,14 @@
 import React from 'react';
 
-import {createComponent, ExtractProps, useModelContext} from '@workday/canvas-kit-react/common';
-import {Box} from '@workday/canvas-kit-labs-react/common';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Box} from '@workday/canvas-kit-react/layout';
 
-import {FormFieldModelContext} from './FormField';
-import {FormFieldModel, useFormFieldInput} from './hooks';
+import {useFormFieldInput, useFormFieldModel} from './hooks';
 
-export interface FormFieldInputProps extends ExtractProps<typeof Box, never> {
-  model?: FormFieldModel;
-}
-
-export const FormFieldInput = createComponent('input')({
+export const FormFieldInput = createSubcomponent('input')({
   displayName: 'FormField.Input',
-  Component: ({model, ...elemProps}: FormFieldInputProps, ref, Element) => {
-    const localModel = useModelContext(FormFieldModelContext, model);
-    const props = useFormFieldInput(localModel, elemProps, ref);
-
-    return <Box as={Element} {...props} />;
-  },
+  modelHook: useFormFieldModel,
+  elemPropsHook: useFormFieldInput,
+})<ExtractProps<typeof Box, never>>((elemProps, Element) => {
+  return <Box as={Element} {...elemProps} />;
 });

package/form-field/lib/FormFieldLabel.tsx

@@ -1,22 +1,18 @@
 import React from 'react';
 
 import {
-  createComponent,
+  createSubcomponent,
   ExtractProps,
-  useModelContext,
   useTheme,
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
-import {Box} from '@workday/canvas-kit-labs-react/common';
+import {Box, HStack, StackSpacing} from '@workday/canvas-kit-react/layout';
 import {type} from '@workday/canvas-kit-react/tokens';
-import {HStack, StackSpacing} from '@workday/canvas-kit-labs-react/layout';
 
-import {FormFieldModelContext} from './FormField';
-import {FormFieldModel, useFormFieldLabel} from './hooks';
+import {useFormFieldLabel, useFormFieldModel} from './hooks';
 
 export interface FormFieldLabelProps extends Omit<ExtractProps<typeof HStack, never>, 'spacing'> {
-  model?: FormFieldModel;
   /**
    * The text of the label.
    */
@@ -39,22 +35,21 @@ const StyledAsterisk = styled(Box)<StyledType>({
   textDecoration: 'unset',
 });
 
-export const FormFieldLabel = createComponent('label')({
+export const FormFieldLabel = createSubcomponent('label')({
   displayName: 'FormField.Label',
-  Component: ({spacing = 'xxxs', model, children, ...elemProps}: FormFieldLabelProps, ref) => {
-    const localModel = useModelContext(FormFieldModelContext, model);
-    const props = useFormFieldLabel(localModel, elemProps, ref);
-    const theme = useTheme();
+  modelHook: useFormFieldModel,
+  elemPropsHook: useFormFieldLabel,
+})<FormFieldLabelProps>(({spacing = 'xxxs', children, ...elemProps}, Element, model) => {
+  const theme = useTheme();
 
-    return (
-      <HStack as="label" spacing={spacing} minWidth="180px" {...props}>
-        <StyledFormFieldLabel>{children}</StyledFormFieldLabel>
-        {localModel.state.isRequired && (
-          <StyledAsterisk as="span" color={theme.canvas.palette.error.main} aria-hidden="true">
-            *
-          </StyledAsterisk>
-        )}
-      </HStack>
-    );
-  },
+  return (
+    <HStack as={Element} spacing={spacing} minWidth="180px" {...elemProps}>
+      <StyledFormFieldLabel>{children}</StyledFormFieldLabel>
+      {model.state.isRequired && (
+        <StyledAsterisk as="span" color={theme.canvas.palette.error.main} aria-hidden="true">
+          *
+        </StyledAsterisk>
+      )}
+    </HStack>
+  );
 });

package/form-field/lib/hooks/useFormFieldHint.tsx

@@ -1,11 +1,11 @@
-import {createHook} from '@workday/canvas-kit-react/common';
-import {FormFieldModel} from './useFormFieldModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useFormFieldModel} from './useFormFieldModel';
 
 /**
  * Adds the necessary props to a `Hint` component.
  * Used by the FormField.Hint subcomponent and other input type components
  */
-export const useFormFieldHint = createHook(({state}: FormFieldModel) => {
+export const useFormFieldHint = createElemPropsHook(useFormFieldModel)(({state}) => {
   return {
     id: `hint-${state.id}`,
   };

package/form-field/lib/hooks/useFormFieldInput.tsx

@@ -1,11 +1,11 @@
-import {createHook} from '@workday/canvas-kit-react/common';
-import {FormFieldModel} from './useFormFieldModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useFormFieldModel} from './useFormFieldModel';
 
 /**
  * Adds the necessary props to an `Input` component.
  * Used by the FormField.Input subcomponent and other input type components
  */
-export const useFormFieldInput = createHook(({state}: FormFieldModel) => {
+export const useFormFieldInput = createElemPropsHook(useFormFieldModel)(({state}) => {
   return {
     required: state.isRequired ? true : undefined,
     'aria-invalid': state.hasError ? true : undefined,

package/form-field/lib/hooks/useFormFieldLabel.tsx

@@ -1,11 +1,11 @@
-import {createHook} from '@workday/canvas-kit-react/common';
-import {FormFieldModel} from './useFormFieldModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useFormFieldModel} from './useFormFieldModel';
 
 /**
  * Adds the necessary props to a `Label` component.
  * Used by the FormField.Label subcomponent and other input type components
  */
-export const useFormFieldLabel = createHook(({state}: FormFieldModel) => {
+export const useFormFieldLabel = createElemPropsHook(useFormFieldModel)(({state}) => {
   return {
     htmlFor: `input-${state.id}`,
   };