@instructure/ui-text-input 11.6.0 → 11.6.1-pr-snapshot-1779894247159

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.6.1-pr-snapshot-1779894247159](https://github.com/instructure/instructure-ui/compare/v11.6.0...v11.6.1-pr-snapshot-1779894247159) (2026-05-27)
+
+**Note:** Version bump only for package @instructure/ui-text-input
+
+
+
+
+
 # [11.6.0](https://github.com/instructure/instructure-ui/compare/v11.5.0...v11.6.0) (2026-02-18)
 
 **Note:** Version bump only for package @instructure/ui-text-input

package/{lib/TextInput/props.js → babel.config.cjs}

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +22,16 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['renderLabel', 'type', 'id', 'value', 'defaultValue', 'interaction', 'messages', 'size', 'textAlign', 'width', 'htmlSize', 'display', 'shouldNotWrap', 'placeholder', 'isRequired', 'elementRef', 'inputRef', 'inputContainerRef', 'renderBeforeInput', 'renderAfterInput', 'onChange', 'onBlur', 'onFocus', 'margin'];
+module.exports = {
+  presets: [
+    [
+      require('@instructure/ui-babel-preset'),
+      {
+        coverage: Boolean(process.env.COVERAGE),
+        esModules: Boolean(process.env.ES_MODULES),
+        removeConsole: process.env.NODE_ENV === 'production',
+        transformImports: Boolean(process.env.TRANSFORM_IMPORTS)
+      }
+    ]
+  ]
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@instructure/ui-text-input",
-  "version": "11.6.0",
+  "version": "11.6.1-pr-snapshot-1779894247159",
+  "type": "module",
   "description": "A styled HTML text input component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
-  "main": "./lib/index.js",
   "types": "./types/index.d.ts",
   "repository": {
     "type": "git",
@@ -15,25 +15,25 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-a11y-utils": "11.6.0",
-    "@instructure/ui-dom-utils": "11.6.0",
-    "@instructure/ui-form-field": "11.6.0",
-    "@instructure/ui-icons": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-tag": "11.6.0"
+    "@instructure/shared-types": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/emotion": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-a11y-utils": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-dom-utils": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-form-field": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-icons": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-react-utils": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-tag": "11.6.1-pr-snapshot-1779894247159"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-badge": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-axe-check": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-babel-preset": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-badge": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-color-utils": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-themes": "11.6.1-pr-snapshot-1779894247159"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -46,10 +46,8 @@
     ".": {
       "types": "./types/index.d.ts",
       "import": "./es/index.js",
-      "require": "./lib/index.js",
       "default": "./es/index.js"
     },
-    "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
@@ -59,7 +57,7 @@
     "lint": "ui-scripts lint",
     "lint:fix": "ui-scripts lint --fix",
     "clean": "ui-scripts clean",
-    "build": "ui-scripts build --modules es,cjs",
+    "build": "ui-scripts build",
     "build:watch": "pnpm run ts:check -- --watch & ui-scripts build --watch",
     "build:types": "tsc -p tsconfig.build.json",
     "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"

package/lib/TextInput/index.js

@@ -1,322 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TextInput = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
-var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
-var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
-var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
-var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
-var _getCSSStyleDeclaration = require("@instructure/ui-dom-utils/lib/getCSSStyleDeclaration.js");
-var _FormField = require("@instructure/ui-form-field/lib/FormField");
-var _emotion = require("@instructure/emotion");
-var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
-var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
-var _props = require("./props");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-const _excluded = ["type", "size", "htmlSize", "display", "textAlign", "placeholder", "value", "defaultValue", "isRequired", "onFocus"];
-var _dec, _dec2, _class, _TextInput;
-/*
- * 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.
- */
-/**
----
-category: components
-tags: form, field
----
-**/
-let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_TextInput = class TextInput extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.ref = null;
-    this._input = null;
-    this._afterElement = null;
-    this._defaultId = void 0;
-    this._messagesId = void 0;
-    this._focusListener = null;
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-    this.makeStyleProps = () => {
-      const interaction = this.interaction;
-      const _this$state = this.state,
-        hasFocus = _this$state.hasFocus,
-        afterElementHasWidth = _this$state.afterElementHasWidth;
-      const beforeElement = this.props.renderBeforeInput ? (0, _callRenderProp.callRenderProp)(this.props.renderBeforeInput) : null;
-      return {
-        disabled: interaction === 'disabled',
-        invalid: this.invalid,
-        focused: hasFocus,
-        afterElementHasWidth: afterElementHasWidth,
-        beforeElementExists: !!beforeElement
-      };
-    };
-    this.handleInputRef = node => {
-      this._input = node;
-      if (typeof this.props.inputRef === 'function') {
-        this.props.inputRef(node);
-      }
-    };
-    this.handleChange = event => {
-      if (typeof this.props.onChange === 'function') {
-        this.props.onChange(event, event.target.value);
-      }
-    };
-    this.handleBlur = event => {
-      if (typeof this.props.onBlur === 'function') {
-        this.props.onBlur(event);
-      }
-      this.setState({
-        hasFocus: false
-      });
-    };
-    this.handleFocus = event => {
-      if (typeof this.props.onFocus === 'function') {
-        this.props.onFocus(event);
-      }
-      this.setState({
-        hasFocus: true
-      });
-    };
-    this.state = {
-      hasFocus: false,
-      afterElementHasWidth: void 0
-    };
-    this._defaultId = props.deterministicId();
-    this._messagesId = props.deterministicId('TextInput-messages');
-  }
-  componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    if (this._input) {
-      this._focusListener = (0, _addEventListener.addEventListener)(this._input, 'focus', this.handleFocus);
-      this.setState({
-        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
-      });
-    }
-    this.adjustAfterElementHeight();
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
-  }
-  componentWillUnmount() {
-    if (this._focusListener) {
-      this._focusListener.remove();
-    }
-  }
-  componentDidUpdate(prevProps) {
-    var _this$props$makeStyle2, _this$props2;
-    if (prevProps.renderAfterInput !== this.props.renderAfterInput) {
-      this.setState({
-        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
-      });
-    }
-    if ((0, _getInteraction.getInteraction)({
-      props: prevProps
-    }) !== 'disabled' && (0, _getInteraction.getInteraction)({
-      props: this.props
-    }) === 'disabled') {
-      this.setState({
-        hasFocus: false
-      });
-    }
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
-  }
-  adjustAfterElementHeight() {
-    var _this$_afterElement, _afterElementChild$fi;
-    const afterElementChild = (_this$_afterElement = this._afterElement) === null || _this$_afterElement === void 0 ? void 0 : _this$_afterElement.firstElementChild;
-
-    // Check if the child is a button, then get the button's first child (the content span)
-    const buttonContentSpan = (afterElementChild === null || afterElementChild === void 0 ? void 0 : afterElementChild.tagName) === 'BUTTON' ? afterElementChild.firstElementChild : null;
-
-    // This is a necessary workaround for DateInput2 because it uses a Popover, which has a nested Button as an afterElement
-    // Check if the child is a Popover's inner span containing a button, then get the button's first child (the content span)
-    const popoverContentSpan = (afterElementChild === null || afterElementChild === void 0 ? void 0 : afterElementChild.tagName) === 'SPAN' && ((_afterElementChild$fi = afterElementChild.firstElementChild) === null || _afterElementChild$fi === void 0 ? void 0 : _afterElementChild$fi.tagName) === 'BUTTON' ? afterElementChild.firstElementChild.firstElementChild : null;
-    const targetSpan = buttonContentSpan !== null && buttonContentSpan !== void 0 ? buttonContentSpan : popoverContentSpan;
-    if (targetSpan) {
-      // Set the height to 36px (the height of a medium TextInput) to avoid layout shift when the afterElement content changes
-      // this temporary workaround is necessary because otherwise the layout breaks, later on IconButton's default height will be adjusted to the TextInput size
-      // so this workaround will not be needed anymore
-      targetSpan.style.height = '36px';
-    }
-  }
-  focus() {
-    var _this$_input;
-    (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
-  }
-  get interaction() {
-    return (0, _getInteraction.getInteraction)({
-      props: this.props
-    });
-  }
-  get hasMessages() {
-    return !!this.props.messages && this.props.messages.length > 0;
-  }
-  get invalid() {
-    return !!this.props.messages && this.props.messages.findIndex(message => {
-      return message.type === 'error' || message.type === 'newError';
-    }) >= 0;
-  }
-  get focused() {
-    return (0, _isActiveElement.isActiveElement)(this._input);
-  }
-  get value() {
-    var _this$_input2;
-    return (_this$_input2 = this._input) === null || _this$_input2 === void 0 ? void 0 : _this$_input2.value;
-  }
-  get id() {
-    return this.props.id || this._defaultId;
-  }
-  renderInput() {
-    var _this$props$styles;
-    const _this$props3 = this.props,
-      type = _this$props3.type,
-      size = _this$props3.size,
-      htmlSize = _this$props3.htmlSize,
-      display = _this$props3.display,
-      textAlign = _this$props3.textAlign,
-      placeholder = _this$props3.placeholder,
-      value = _this$props3.value,
-      defaultValue = _this$props3.defaultValue,
-      isRequired = _this$props3.isRequired,
-      onFocus = _this$props3.onFocus,
-      rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-    const props = (0, _passthroughProps.passthroughProps)(rest);
-    const interaction = this.interaction;
-    let descriptionIds = '';
-    if (props['aria-describedby']) {
-      descriptionIds = `${props['aria-describedby']}`;
-    }
-    return (0, _jsxRuntime.jsx)("input", {
-      ...props,
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.textInput,
-      defaultValue: defaultValue,
-      value: value,
-      placeholder: placeholder,
-      ref: this.handleInputRef,
-      type: type,
-      id: this.id,
-      required: isRequired,
-      "aria-invalid": this.invalid ? 'true' : void 0,
-      disabled: interaction === 'disabled',
-      readOnly: interaction === 'readonly',
-      "aria-describedby": descriptionIds !== '' ? descriptionIds : void 0,
-      size: htmlSize,
-      onChange: this.handleChange,
-      onBlur: this.handleBlur
-    });
-  }
-  getElementHasWidth(element) {
-    if (!element) {
-      return void 0;
-    }
-    const computedStyle = (0, _getCSSStyleDeclaration.getCSSStyleDeclaration)(element);
-    if (!computedStyle) {
-      return void 0;
-    }
-    const width = computedStyle.width,
-      paddingInlineStart = computedStyle.paddingInlineStart,
-      paddingInlineEnd = computedStyle.paddingInlineEnd;
-    if (width === 'auto' || width === '') {
-      // This is a workaround for an edge-case, when the TextInput's parent
-      // is hidden on load, so the element is not visible either.
-      // In this case the computed width is going to be either 'auto' or '',
-      // so we assume it has width so that the padding won't be removed.
-      return true;
-    }
-    const elementWidth = parseFloat(width) - parseFloat(paddingInlineStart) - parseFloat(paddingInlineEnd);
-    return elementWidth > 0;
-  }
-  render() {
-    const _this$props4 = this.props,
-      width = _this$props4.width,
-      display = _this$props4.display,
-      renderLabel = _this$props4.renderLabel,
-      renderBeforeInput = _this$props4.renderBeforeInput,
-      renderAfterInput = _this$props4.renderAfterInput,
-      messages = _this$props4.messages,
-      inputContainerRef = _this$props4.inputContainerRef,
-      isRequired = _this$props4.isRequired,
-      styles = _this$props4.styles;
-    const beforeElement = renderBeforeInput ? (0, _callRenderProp.callRenderProp)(renderBeforeInput) : null;
-    const afterElement = renderAfterInput ? (0, _callRenderProp.callRenderProp)(renderAfterInput) : null;
-    const renderBeforeOrAfter = !!beforeElement || !!afterElement || renderBeforeInput !== void 0 || renderAfterInput !== void 0;
-    const rawLabel = (0, _callRenderProp.callRenderProp)(renderLabel);
-    const label = (0, _hasVisibleChildren.hasVisibleChildren)(rawLabel) ? (0, _jsxRuntime.jsxs)(_react.Fragment, {
-      children: [rawLabel, isRequired && (0, _jsxRuntime.jsxs)("span", {
-        css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},
-        "aria-hidden": true,
-        children: [' ', "*"]
-      })]
-    }) : rawLabel;
-    return (0, _jsxRuntime.jsx)(_FormField.FormField, {
-      id: this.id,
-      label: label,
-      messagesId: this._messagesId,
-      messages: messages,
-      inline: display === 'inline-block',
-      width: width,
-      inputContainerRef: inputContainerRef,
-      layout: this.props.layout,
-      elementRef: this.handleRef,
-      margin: this.props.margin,
-      "data-cid": "TextInput",
-      children: (0, _jsxRuntime.jsx)("span", {
-        css: styles === null || styles === void 0 ? void 0 : styles.facade,
-        children: renderBeforeOrAfter ? (0, _jsxRuntime.jsxs)("span", {
-          css: styles === null || styles === void 0 ? void 0 : styles.layout,
-          children: [beforeElement, (0, _jsxRuntime.jsxs)("span", {
-            css: styles === null || styles === void 0 ? void 0 : styles.inputLayout,
-            children: [this.renderInput(), afterElement && (0, _jsxRuntime.jsx)("span", {
-              css: styles === null || styles === void 0 ? void 0 : styles.afterElement,
-              ref: e => {
-                this._afterElement = e;
-              },
-              children: afterElement
-            })]
-          })]
-        }) : (/* If no prepended or appended content, don't render Flex layout */
-        this.renderInput())
-      })
-    });
-  }
-}, _TextInput.displayName = "TextInput", _TextInput.componentId = 'TextInput', _TextInput.allowedProps = _props.allowedProps, _TextInput.defaultProps = {
-  type: 'text',
-  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-  interaction: void 0,
-  isRequired: false,
-  display: 'block',
-  shouldNotWrap: false,
-  size: 'medium',
-  textAlign: 'start',
-  messages: []
-}, _TextInput)) || _class) || _class);
-var _default = exports.default = TextInput;

package/lib/TextInput/styles.js

@@ -1,220 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-/*
- * 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.
- */
-
-/**
- * ---
- * private: true
- * ---
- * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
- * @return {Object} The final style object, which will be used in the component
- */
-const generateStyle = (componentTheme, props, state) => {
-  const size = props.size,
-    textAlign = props.textAlign,
-    shouldNotWrap = props.shouldNotWrap;
-  const disabled = state.disabled,
-    invalid = state.invalid,
-    focused = state.focused,
-    afterElementHasWidth = state.afterElementHasWidth,
-    beforeElementExists = state.beforeElementExists;
-  const sizeVariants = {
-    small: {
-      fontSize: componentTheme.smallFontSize,
-      height: `calc(${componentTheme.smallHeight} - (2 * ${componentTheme.borderWidth}))`,
-      lineHeight: `calc(${componentTheme.smallHeight} - (2 * ${componentTheme.borderWidth}))`
-    },
-    medium: {
-      fontSize: componentTheme.mediumFontSize,
-      height: `calc(${componentTheme.mediumHeight} - (2 * ${componentTheme.borderWidth}))`,
-      lineHeight: `calc(${componentTheme.mediumHeight} - (2 * ${componentTheme.borderWidth}))`
-    },
-    large: {
-      fontSize: componentTheme.largeFontSize,
-      height: `calc(${componentTheme.largeHeight} - (2 * ${componentTheme.borderWidth}))`,
-      lineHeight: `calc(${componentTheme.largeHeight} - (2 * ${componentTheme.borderWidth}))`
-    }
-  };
-  const disabledStyle = disabled ? {
-    cursor: 'not-allowed',
-    pointerEvents: 'none',
-    opacity: '0.5'
-  } : {};
-  const focusedStyle = focused ? {
-    opacity: 1,
-    transform: 'scale(1)'
-  } : {
-    opacity: 0,
-    transform: 'scale(0.95)'
-  };
-  const invalidStyle = invalid ? {
-    borderColor: componentTheme.errorBorderColor
-  } : {};
-  const invalidAndFocusedStyle = invalid && focused ? {
-    borderColor: componentTheme.errorBorderColor
-  } : {};
-  const inputStyle = {
-    all: 'initial',
-    '&::-ms-clear': {
-      display: 'none'
-    },
-    width: '100%',
-    WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale',
-    appearance: 'none',
-    margin: 0,
-    display: 'block',
-    boxSizing: 'border-box',
-    outline: 'none',
-    fontFamily: componentTheme.fontFamily,
-    fontWeight: componentTheme.fontWeight,
-    color: componentTheme.color,
-    padding: `0 ${componentTheme.padding}`,
-    background: 'transparent',
-    border: 'none',
-    verticalAlign: 'baseline',
-    '&[autocomplete="off"]::-webkit-contacts-auto-fill-button': {
-      display: 'none !important'
-    },
-    '&:focus': {
-      boxShadow: 'initial'
-    },
-    '&::placeholder': {
-      color: componentTheme.placeholderColor
-    },
-    ...sizeVariants[size],
-    textAlign: textAlign
-  };
-  const viewBase = {
-    boxSizing: 'border-box',
-    fontFamily: componentTheme.fontFamily,
-    maxWidth: '100%',
-    overflow: 'visible',
-    unicodeBidi: 'isolate'
-  };
-  const flexBase = {
-    ...viewBase,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    flexDirection: 'row'
-  };
-  return {
-    requiredInvalid: {
-      color: componentTheme.requiredInvalidColor
-    },
-    textInput: {
-      label: 'textInput',
-      ...inputStyle,
-      '&:is(input)[type]': inputStyle,
-      '&:-webkit-any(input)[type]': inputStyle
-    },
-    facade: {
-      label: 'textInput__facade',
-      position: 'relative',
-      display: 'block',
-      boxSizing: 'border-box',
-      border: `${componentTheme.borderWidth} ${componentTheme.borderStyle} ${componentTheme.borderColor}`,
-      borderRadius: componentTheme.borderRadius,
-      background: componentTheme.background,
-      color: componentTheme.color,
-      '&::before': {
-        content: '""',
-        pointerEvents: 'none',
-        position: 'absolute',
-        display: 'block',
-        boxSizing: 'border-box',
-        top: '-0.25rem',
-        bottom: '-0.25rem',
-        left: '-0.25rem',
-        right: '-0.25rem',
-        border: `${componentTheme.focusOutlineWidth} ${componentTheme.focusOutlineStyle} ${componentTheme.focusOutlineColor}`,
-        borderRadius: `calc(${componentTheme.borderRadius} * 1.5)`,
-        transition: 'all 0.2s',
-        ...focusedStyle,
-        // properties to transition on :focus
-        ...invalidAndFocusedStyle
-      },
-      ...disabledStyle,
-      ...invalidStyle
-    },
-    layout: {
-      label: 'textInput__layout',
-      ...viewBase,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-      flexDirection: 'row',
-      ...(!shouldNotWrap && {
-        flexWrap: 'wrap'
-      }),
-      ...(beforeElementExists && {
-        paddingInlineStart: componentTheme.padding
-      })
-    },
-    inputLayout: {
-      label: 'textInput__inputLayout',
-      flexGrow: 1,
-      ...flexBase
-    },
-    afterElement: {
-      // the next couple lines (until the `label`) is needed so the IconButton looks OK inside the TextInput
-      // explanation: if the content inside is not a button or a popover (which could contain a button) it should have some padding on the right
-      // lineHeight is only needed if it is not popover or button
-      '& > :not(button):not([data-position^="Popover"])': {
-        marginRight: componentTheme.padding,
-        ...(sizeVariants[size] && {
-          lineHeight: sizeVariants[size].lineHeight
-        })
-      },
-      display: 'flex',
-      alignItems: 'center',
-      // Spread all sizeVariants except lineHeight (handled above)
-      ...(sizeVariants[size] ?
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      (({
-        lineHeight,
-        ...rest
-      }) => rest)(sizeVariants[size]) : {}),
-      label: 'textInput__afterElement',
-      ...viewBase,
-      borderRadius: componentTheme.borderRadius,
-      flexShrink: 0,
-      // we only override the padding once the width is calculated,
-      // it needs the padding on render
-      ...(afterElementHasWidth === false && {
-        paddingInlineEnd: 0
-      })
-    }
-  };
-};
-var _default = exports.default = generateStyle;

package/lib/TextInput/theme.js

@@ -1,79 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-/*
- * 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;
-  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,
-    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
-    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
-    borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey3045,
-    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
-    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
-    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
-    requiredInvalidColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.red5782,
-    padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
-    focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
-    focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
-    focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue4570,
-    errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.red4570,
-    errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.red4570,
-    placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.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]
-  };
-};
-var _default = exports.default = generateComponentTheme;

package/lib/index.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "TextInput", {
-  enumerable: true,
-  get: function () {
-    return _TextInput.TextInput;
-  }
-});
-var _TextInput = require("./TextInput");

package/lib/package.json

@@ -1 +0,0 @@
-{"type":"commonjs"}