@vimeo/iris/components/inputs/TextArea/TextArea.esm.js

Vimeo Design System

import { b as __rest, c as __assign } from '../../../tslib.es6-7f0e734f.js';
import React__default from 'react';
import { TextAreaStyled, InfoIcon } from './TextArea.style.esm.js';
import { Wrapper } from '../Wrapper/Wrapper.esm.js';
import { withIris } from '../../../utils/HOCs/withIris.esm.js';
import { Focus } from '../../../utils/css.esm.js';
import 'styled-components';
import 'polished';
import '../Shared.esm.js';
import '../../../color/colors.esm.js';
import '../../../icons/ui/CircleInfoSmall.esm.js';
import '../../../typography/Text/Text.esm.js';
import '../../../typography/Text/Text.style.esm.js';
import '../../../typography/typography.esm.js';
import '../../../tokens/core.esm.js';
import '../../../tokens/color/index.esm.js';
import '../../../tokens/color/background/background.esm.js';
import '../../../tokens/util/readToken.esm.js';
import '../../../tokens/util/clamp.esm.js';
import '../../../tokens/color/format/format.esm.js';
import '../../../tokens/color/format/primary.esm.js';
import '../../../tokens/color/format/secondary.esm.js';
import '../../../tokens/color/format/tertiary.esm.js';
import '../../../tokens/color/rainbow/rainbow.esm.js';
import '../../../tokens/color/rainbow/conic/index.esm.js';
import '../../../tokens/color/rainbow/conic/sm.esm.js';
import '../../../tokens/color/rainbow/conic/xl.esm.js';
import '../../../tokens/color/rainbow/linear/index.esm.js';
import '../../../tokens/color/rainbow/linear/sm.esm.js';
import '../../../tokens/color/rainbow/linear/xl.esm.js';
import '../../../tokens/color/livestream/livestream.esm.js';
import '../../../tokens/color/status/status.esm.js';
import '../../../tokens/color/status/caution.esm.js';
import '../../../tokens/color/status/negative.esm.js';
import '../../../tokens/color/status/positive.esm.js';
import '../../../tokens/color/stroke/stroke.esm.js';
import '../../../tokens/color/surface/surface.esm.js';
import '../../../tokens/color/text/text.esm.js';
import '../../../tokens/util/round.esm.js';
import '../../../tokens/color/upsell/upsell.esm.js';
import '../../../tokens/color/upsell/sm.esm.js';
import '../../../tokens/color/upsell/xl.esm.js';
import '../../../tokens/color/upsell/new.esm.js';
import '../../../tokens/edge/edge.esm.js';
import '../../../tokens/space/space.esm.js';
import '../../../tokens/typography/index.esm.js';
import '../../../tokens/typography/size/size.esm.js';
import '../../../typography/Text/EditableText.esm.js';
import '../../../utils/hooks/useLayoutStyles.esm.js';
import '../../../utils/DOM/geometry.esm.js';
import '../../../typography/Paragraph/Paragraph.esm.js';
import '../../../typography/Paragraph/Paragraph.style.esm.js';

var TextArea = withIris(TextAreaComponent);
function TextAreaComponent(_a) {
    // const { irisError } = useIrisError(
    //   props,
    //   TextArea,
    //   `\`value="${props.value}"\` was specified. Did you mean to use \`defaultValue="${props.value}"\``,
    //   !props.value,
    // );
    var disabled = _a.disabled; _a.errorMsg; var forwardRef = _a.forwardRef, format = _a.format, messages = _a.messages; _a.helperMsg; var id = _a.id, label = _a.label; _a.preMessage; var props = __rest(_a, ["disabled", "errorMsg", "forwardRef", "format", "messages", "helperMsg", "id", "label", "preMessage"]);
    return (React__default.createElement(Wrapper, { disabled: disabled, label: label, messages: messages, status: format },
        React__default.createElement("div", { style: { position: 'relative' } },
            React__default.createElement(TextAreaStyled, __assign({ id: id, "aria-label": label, "aria-invalid": format === 'negative', disabled: disabled, hasIcon: format === 'negative', format: format, ref: forwardRef }, props)),
            format === 'negative' ? React__default.createElement(InfoIcon, null) : null,
            React__default.createElement(Focus, { parent: TextAreaStyled, distance: 1 }))));
}

export { TextArea };