@workday/canvas-kit-react/dist/es6/text-input/lib/TextInput.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { createComponent, ErrorType } from '@workday/canvas-kit-react/common';
import { createStencil, cssVar, px2rem, calc } from '@workday/canvas-kit-styling';
import { brand, system } from '@workday/canvas-tokens-web';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
export const textInputStencil = createStencil({
    vars: {
        width: '',
    },
    base: { name: "vf165", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1-half);height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-space-x2);margin:0rem;width:var(--width-text-input-696c53);min-width:var(--width-text-input-696c53, calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10)));color:var(--cnvs-sys-color-text-default);text-overflow:ellipsis;::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-text-hint);}&:is(:hover, .hover){border-color:var(--cnvs-sys-color-border-input-strong);}&:is(:focus-visible, .focus):where(:not([disabled])){border-color:var(--cnvs-brand-common-focus-outline);box-shadow:inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);outline:0.125rem solid transparent;}&:is(:disabled, .disabled){background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);color:var(--cnvs-sys-color-fg-disabled);&::placeholder{color:var(--cnvs-sys-color-fg-disabled);}}" },
    modifiers: {
        grow: {
            true: { name: "1jaocm", styles: "width:100%;resize:vertical;" },
            false: { name: "1fx5g6", styles: "width:initial;" }
        },
        error: {
            error: { name: "jz8z3", styles: "border-color:var(--cnvs-brand-common-error-inner);border-width:0.125rem;background-color:var(--cnvs-brand-error-lightest);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-common-error-inner);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);outline-offset:0.125rem;}" },
            caution: { name: "4cd1k8", styles: "border-color:var(--cnvs-brand-common-alert-outer);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner);background-color:var(--cnvs-brand-alert-lightest);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-common-alert-outer);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner),\n        0 0 0 2px var(--cnvs-sys-color-border-inverse),\n        0 0 0 4px var(--cnvs-brand-common-focus-outline);}outline-offset:0.125rem;" }
        }
    },
    defaultModifiers: {
        grow: 'false',
    }
}, "text-input-696c53");
export const TextInput = createComponent('input')({
    displayName: 'TextInput',
    Component: ({ grow, error, width, ...elemProps }, ref, Element) => {
        return (_jsx(Element, { type: "text", ref: ref, ...mergeStyles(elemProps, textInputStencil({ width: typeof width === 'number' ? px2rem(width) : width, grow, error })) }));
    },
    subComponents: {
        ErrorType,
    },
});