@workday/canvas-kit-react/dist/es6/form-field/lib/FormFieldHint.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { createSubcomponent } from '@workday/canvas-kit-react/common';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { textStencil } from '@workday/canvas-kit-react/text';
import { createStencil } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { useFormFieldHint, useFormFieldModel } from './hooks';
export const formFieldHintStencil = createStencil({
    extends: textStencil,
    base: { name: "3pyl3q", styles: "box-sizing:border-box;margin:0;" },
    modifiers: {
        error: {
            error: { name: "3m0n3m", styles: "color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));" },
            caution: { name: "3hu5vv", styles: "color:var(--cnvs-sys-color-fg-default);" }
        }
    },
    defaultModifiers: {
        typeLevel: 'subtext.medium',
    }
}, "form-field-hint-4a6eb6");
export const FormFieldHint = createSubcomponent('p')({
    displayName: 'FormField.Hint',
    modelHook: useFormFieldModel,
    elemPropsHook: useFormFieldHint,
})(({ children, typeLevel, variant, ...elemProps }, Element, model) => {
    if (!children) {
        // If there is no hint text just skip rendering
        return null;
    }
    return (_jsx(Element, { ...mergeStyles(elemProps, formFieldHintStencil({ typeLevel, variant, error: model.state.error })), children: children }));
});