@instructure/ui-text-area 11.6.0 → 11.6.1-snapshot-129

package/es/TextArea/v2/index.js

@@ -0,0 +1,350 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["size", "autoGrow", "resize", "inline", "messages", "disabled", "readOnly", "layout", "required", "placeholder", "value", "defaultValue", "width", "height", "maxHeight", "textareaRef", "margin", "label", "onChange", "id", "themeOverride"];
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { forwardRef, useRef, useEffect, useContext, useImperativeHandle, useCallback, useMemo } from 'react';
+import { FormField } from '@instructure/ui-form-field/latest';
+import { addEventListener, isActiveElement, requestAnimationFrame, getBoundingClientRect } from '@instructure/ui-dom-utils';
+import { debounce } from '@instructure/debounce';
+import { useStyle } from '@instructure/emotion';
+import { generateId, px } from '@instructure/ui-utils';
+import { passthroughProps, pickProps, DeterministicIdContext } from '@instructure/ui-react-utils';
+import generateStyle from "./styles.js";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+---
+category: components
+---
+**/
+const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
+  const _props$size = props.size,
+    size = _props$size === void 0 ? 'medium' : _props$size,
+    _props$autoGrow = props.autoGrow,
+    autoGrow = _props$autoGrow === void 0 ? true : _props$autoGrow,
+    _props$resize = props.resize,
+    resize = _props$resize === void 0 ? 'none' : _props$resize,
+    _props$inline = props.inline,
+    inline = _props$inline === void 0 ? false : _props$inline,
+    _props$messages = props.messages,
+    messages = _props$messages === void 0 ? [] : _props$messages,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$readOnly = props.readOnly,
+    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+    _props$layout = props.layout,
+    layout = _props$layout === void 0 ? 'stacked' : _props$layout,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    placeholder = props.placeholder,
+    value = props.value,
+    defaultValue = props.defaultValue,
+    width = props.width,
+    height = props.height,
+    maxHeight = props.maxHeight,
+    textareaRef = props.textareaRef,
+    margin = props.margin,
+    label = props.label,
+    onChange = props.onChange,
+    propId = props.id,
+    themeOverride = props.themeOverride,
+    rest = _objectWithoutProperties(props, _excluded);
+
+  // Use deterministic ID
+  const instanceCounterMap = useContext(DeterministicIdContext);
+  const defaultId = useMemo(() => generateId('TextArea', instanceCounterMap), [instanceCounterMap]);
+  const id = propId || defaultId;
+
+  // Use refs for mutable values
+  const _listener = useRef();
+  const _request = useRef();
+  const _textareaResizeListener = useRef();
+  const _debounced = useRef();
+  const _textarea = useRef(null);
+  const _container = useRef(null);
+  const _height = useRef();
+  const _manuallyResized = useRef(false);
+  const formFieldRef = useRef(null);
+
+  // Compute invalid state
+  const _useMemo = useMemo(() => {
+      const isInvalid = messages && messages.findIndex(message => message.type === 'error' || message.type === 'newError') >= 0;
+      const isSuccess = messages && messages.findIndex(message => message.type === 'success') >= 0;
+      return {
+        isInvalid,
+        isSuccess
+      };
+    }, [messages]),
+    isInvalid = _useMemo.isInvalid,
+    isSuccess = _useMemo.isSuccess;
+
+  // Use styles
+  const styles = useStyle({
+    generateStyle,
+    themeOverride,
+    params: {
+      size,
+      disabled,
+      readOnly,
+      success: isSuccess,
+      invalid: isInvalid
+    },
+    componentId: 'TextArea',
+    displayName: 'TextArea'
+  });
+
+  // Mock ResizeObserver for SSR
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      global.ResizeObserver = class ResizeObserver {
+        observe() {
+          // do nothing
+        }
+        unobserve() {
+          // do nothing
+        }
+        disconnect() {
+          // do nothing
+        }
+      };
+    }
+  }, []);
+
+  // Grow function
+  const grow = useCallback(() => {
+    if (!_textarea.current || _manuallyResized.current) {
+      return;
+    }
+    const offset = _textarea.current.offsetHeight - _textarea.current.clientHeight;
+    let heightValue = '';
+
+    // Notes:
+    // 1. height has to be reset to `auto` every time this method runs, or scrollHeight will not reset
+    // 2. `_textarea.current.scrollHeight` will not reset if assigned to a variable; it needs to be written out each time
+    _textarea.current.style.height = 'auto';
+    _textarea.current.style.overflowY = 'hidden'; // hide scrollbars for autoGrow textareas
+    heightValue = _textarea.current.scrollHeight + offset + 'px';
+    const maxHeightPx = maxHeight ? px(maxHeight, _container.current) : void 0;
+    if (maxHeight && maxHeightPx !== void 0 && _textarea.current.scrollHeight > maxHeightPx) {
+      _textarea.current.style.overflowY = 'auto'; // add scroll if scrollHeight exceeds maxHeight in pixels
+    } else if (height) {
+      if (_textarea.current.value === '') {
+        heightValue = height;
+      } else if (px(height, _container.current) > _textarea.current.scrollHeight) {
+        _textarea.current.style.overflowY = 'auto'; // add scroll if scrollHeight exceeds height in pixels
+        heightValue = height;
+      }
+    }
+
+    // preserve container height to prevent scroll jumping on long textareas,
+    // but make sure container doesn't exceed maxHeight prop
+    const heightExceedsMax = maxHeightPx !== void 0 && px(heightValue) > maxHeightPx;
+    if (!heightExceedsMax && _container.current) {
+      _container.current.style.minHeight = heightValue;
+    }
+    _height.current = heightValue;
+    _textarea.current.style.height = heightValue;
+  }, [height, maxHeight]);
+
+  // Textarea resize handler
+  const _textareaResize = useCallback(() => {
+    if (!_textarea.current) return;
+    const textareaHeight = _textarea.current.style.height;
+    if (textareaHeight !== '' && textareaHeight !== _height.current) {
+      _manuallyResized.current = true;
+      _textarea.current.style.overflowY = 'auto';
+
+      // update container minHeight to ensure focus ring always wraps input
+      if (_container.current) {
+        _container.current.style.minHeight = textareaHeight;
+      }
+    }
+  }, []);
+
+  // AutoGrow effect
+  useEffect(() => {
+    if (autoGrow) {
+      if (!_debounced.current) {
+        _debounced.current = debounce(grow, 200, {
+          leading: false,
+          trailing: true
+        });
+      }
+      if (!_listener.current) {
+        _listener.current = addEventListener(window, 'resize', _debounced.current);
+      }
+      if (_textarea.current && !_textareaResizeListener.current) {
+        const _getBoundingClientRec = getBoundingClientRect(_textarea.current),
+          origHeight = _getBoundingClientRec.height;
+        _textareaResizeListener.current = new ResizeObserver(entries => {
+          for (const entry of entries) {
+            const entryHeight = entry.contentRect.height;
+            if (origHeight !== entryHeight) {
+              _textareaResize();
+            }
+          }
+        });
+        _textareaResizeListener.current.observe(_textarea.current);
+      }
+      _request.current = requestAnimationFrame(grow);
+    }
+  }, [autoGrow, grow, _textareaResize]);
+
+  // Cleanup effect
+  useEffect(() => {
+    return () => {
+      if (_listener.current) {
+        _listener.current.remove();
+      }
+      if (_textareaResizeListener.current) {
+        _textareaResizeListener.current.disconnect();
+      }
+      if (_request.current) {
+        _request.current.cancel();
+      }
+      if (_debounced.current) {
+        _debounced.current.cancel();
+      }
+    };
+  }, []);
+
+  // Handle change
+  const handleChange = useCallback(event => {
+    if (disabled || readOnly) {
+      event.preventDefault();
+      return;
+    }
+    if (typeof value === 'undefined') {
+      // if uncontrolled
+      if (autoGrow) {
+        if (!_debounced.current) {
+          _debounced.current = debounce(grow, 200, {
+            leading: false,
+            trailing: true
+          });
+        }
+        if (!_listener.current) {
+          _listener.current = addEventListener(window, 'resize', _debounced.current);
+        }
+        if (_textarea.current && !_textareaResizeListener.current) {
+          const _getBoundingClientRec2 = getBoundingClientRect(_textarea.current),
+            origHeight = _getBoundingClientRec2.height;
+          _textareaResizeListener.current = new ResizeObserver(entries => {
+            for (const entry of entries) {
+              const entryHeight = entry.contentRect.height;
+              if (origHeight !== entryHeight) {
+                _textareaResize();
+              }
+            }
+          });
+          _textareaResizeListener.current.observe(_textarea.current);
+        }
+        _request.current = requestAnimationFrame(grow);
+      }
+    }
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
+  }, [disabled, readOnly, value, onChange, autoGrow, grow, _textareaResize]);
+
+  // Expose API through ref using useImperativeHandle
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      var _textarea$current;
+      (_textarea$current = _textarea.current) === null || _textarea$current === void 0 ? void 0 : _textarea$current.focus();
+    },
+    get value() {
+      var _textarea$current2;
+      return ((_textarea$current2 = _textarea.current) === null || _textarea$current2 === void 0 ? void 0 : _textarea$current2.value) || '';
+    },
+    get minHeight() {
+      var _textarea$current3;
+      return ((_textarea$current3 = _textarea.current) === null || _textarea$current3 === void 0 ? void 0 : _textarea$current3.style.minHeight) || '';
+    },
+    get focused() {
+      return isActiveElement(_textarea.current);
+    },
+    get invalid() {
+      return messages && messages.findIndex(message => message.type === 'error' || message.type === 'newError') >= 0;
+    },
+    get id() {
+      return id;
+    }
+  }), [id, messages]);
+  const style = {
+    width,
+    resize,
+    height: !autoGrow ? height : void 0,
+    maxHeight
+  };
+  const textarea = _jsx("textarea", {
+    ...passthroughProps(rest),
+    value: value,
+    defaultValue: defaultValue,
+    placeholder: placeholder,
+    ref: textarea => {
+      _textarea.current = textarea;
+      if (typeof textareaRef === 'function') {
+        textareaRef(textarea);
+      }
+    },
+    style: style,
+    id: id,
+    required: required,
+    "aria-required": required,
+    "aria-invalid": isInvalid ? 'true' : void 0,
+    disabled: disabled,
+    readOnly: readOnly,
+    css: styles === null || styles === void 0 ? void 0 : styles.textArea,
+    onChange: handleChange
+  });
+  return _jsx(FormField, {
+    ...pickProps(props, FormField.allowedProps),
+    label: label,
+    vAlign: "top",
+    id: id,
+    elementRef: el => {
+      formFieldRef.current = el;
+    },
+    margin: margin,
+    isRequired: required,
+    disabled: disabled,
+    readOnly: readOnly,
+    "data-cid": "TextArea",
+    children: _jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.textAreaLayout,
+      style: {
+        width,
+        maxHeight
+      },
+      ref: node => {
+        _container.current = node;
+      },
+      children: textarea
+    })
+  });
+});
+TextArea.displayName = 'TextArea';
+export default TextArea;
+export { TextArea };

package/es/TextArea/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['label', 'id', 'size', 'layout', 'autoGrow', 'resize', 'width', 'height', 'maxHeight', 'messages', 'inline', 'placeholder', 'disabled', 'readOnly', 'required', 'textareaRef', 'defaultValue', 'value', 'onChange', 'margin'];
+export { allowedProps };

package/es/TextArea/v2/styles.js

@@ -0,0 +1,129 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { calcFocusOutlineStyles } from '@instructure/emotion';
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} params Additional parameters to customize the style.
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, params, sharedTokens) => {
+  const disabled = params.disabled,
+    size = params.size,
+    success = params.success,
+    invalid = params.invalid,
+    readOnly = params.readOnly;
+  const fontSizeVariants = {
+    small: {
+      fontSize: componentTheme.fontSizeSm
+    },
+    medium: {
+      fontSize: componentTheme.fontSizeMd
+    },
+    large: {
+      fontSize: componentTheme.fontSizeLg
+    }
+  };
+  const focusColor = disabled || readOnly ? 'info' : invalid ? 'danger' : success ? 'success' : 'info';
+  return {
+    textArea: {
+      label: 'textArea',
+      all: 'initial',
+      WebkitFontSmoothing: 'antialiased',
+      MozOsxFontSmoothing: 'grayscale',
+      appearance: 'none',
+      height: 'auto',
+      margin: 0,
+      width: '100%',
+      display: 'block',
+      boxSizing: 'border-box',
+      padding: componentTheme.padding,
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      borderWidth: componentTheme.borderWidth,
+      borderStyle: 'solid',
+      borderColor: componentTheme.borderColor,
+      borderRadius: componentTheme.borderRadius,
+      color: componentTheme.textColor,
+      background: componentTheme.backgroundColor,
+      whiteSpace: 'pre-wrap',
+      wordWrap: 'break-word',
+      textAlign: 'start',
+      ...(!disabled && !readOnly && {
+        '&:hover': {
+          background: componentTheme.backgroundHoverColor,
+          borderColor: componentTheme.borderHoverColor,
+          '&::placeholder': {
+            color: componentTheme.placeholderHoverColor
+          }
+        }
+      }),
+      ...(readOnly && {
+        color: componentTheme.textReadonlyColor,
+        background: componentTheme.backgroundReadonlyColor,
+        borderColor: componentTheme.borderReadonlyColor
+      }),
+      ...(disabled && {
+        color: componentTheme.textDisabledColor,
+        background: componentTheme.backgroundDisabledColor,
+        borderColor: componentTheme.borderDisabledColor,
+        cursor: 'not-allowed',
+        pointerEvents: 'none',
+        opacity: 0.5
+      }),
+      ...(!disabled && !readOnly && success && {
+        borderColor: componentTheme.successBorderColor
+      }),
+      ...fontSizeVariants[size],
+      ...calcFocusOutlineStyles(sharedTokens.focusOutline, {
+        focusColor
+      }),
+      ...(!disabled && !readOnly && {
+        '&[aria-invalid], &[aria-invalid]:focus': {
+          borderColor: componentTheme.errorBorderColor
+        }
+      }),
+      '&::placeholder': {
+        color: componentTheme.placeholderColor
+      },
+      '&::-webkit-resizer': {
+        backgroundImage: `url("data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9" fill="none"><path d="M8.35352 0.353516L0.353516 8.35352M8.35352 4.35352L4.35352 8.35352" stroke="#8D959F"/></svg>')}")`,
+        backgroundColor: 'transparent',
+        backgroundPosition: 'bottom 2px right 2px',
+        // Position away from edges
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '10px 10px'
+      }
+    },
+    textAreaLayout: {
+      label: 'textArea__layout',
+      position: 'relative'
+    }
+  };
+};
+export default generateStyle;

package/es/TextArea/v2/theme.js

@@ -0,0 +1,76 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = theme => {
+  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts0, _colors$contrasts1;
+  const colors = theme.colors,
+    typography = theme.typography,
+    borders = theme.borders,
+    spacing = theme.spacing,
+    forms = theme.forms,
+    themeName = theme.key;
+  const themeSpecificStyle = {
+    canvas: {
+      color: theme['ic-brand-font-color-dark'],
+      focusOutlineColor: theme['ic-brand-primary']
+    }
+  };
+  const componentVariables = {
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
+    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
+    requiredInvalidColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.red5782,
+    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
+    borderTopColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey3045,
+    borderRightColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey3045,
+    borderBottomColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey3045,
+    borderLeftColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey3045,
+    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
+    padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue4570,
+    focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
+    errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.red4570,
+    errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts0 = colors.contrasts) === null || _colors$contrasts0 === void 0 ? void 0 : _colors$contrasts0.red4570,
+    placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts1 = colors.contrasts) === null || _colors$contrasts1 === void 0 ? void 0 : _colors$contrasts1.grey4570,
+    smallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
+    smallHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
+    mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
+    largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
+    largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
+  };
+  return {
+    ...componentVariables,
+    ...themeSpecificStyle[themeName]
+  };
+};
+export default generateComponentTheme;

package/es/{index.js → exports/a.js}

@@ -21,4 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { TextArea } from "./TextArea/index.js";
+export { TextArea } from "../TextArea/v1/index.js";

package/{src/index.ts → es/exports/b.js}

@@ -21,5 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { TextArea } from './TextArea'
-export type { TextAreaProps } from './TextArea/props'
+export { TextArea } from "../TextArea/v2/index.js";

package/lib/TextArea/{index.js → v1/index.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.TextArea = void 0;
 var _react = require("react");
-var _FormField = require("@instructure/ui-form-field/lib/FormField");
+var _v11_ = require("@instructure/ui-form-field/v11_6");
 var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
 var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
 var _requestAnimationFrame = require("@instructure/ui-dom-utils/lib/requestAnimationFrame.js");
@@ -51,7 +51,7 @@ var _dec, _dec2, _class, _TextArea;
 category: components
 ---
 **/
-let TextArea = exports.TextArea = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_TextArea = class TextArea extends _react.Component {
+let TextArea = exports.TextArea = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_TextArea = class TextArea extends _react.Component {
   constructor(props) {
     super(props);
     this._listener = void 0;
@@ -294,8 +294,8 @@ let TextArea = exports.TextArea = (_dec = (0, _withDeterministicId.withDetermini
         children: [' ', "*"]
       })]
     }) : this.props.label;
-    return (0, _jsxRuntime.jsx)(_FormField.FormField, {
-      ...(0, _pickProps.pickProps)(this.props, _FormField.FormField.allowedProps),
+    return (0, _jsxRuntime.jsx)(_v11_.FormField, {
+      ...(0, _pickProps.pickProps)(this.props, _v11_.FormField.allowedProps),
       label: label,
       vAlign: "top",
       id: this.id,