@instructure/ui-text 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
+
+
+
+
+
 # [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

package/{lib/Text/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 = ['as', 'children', 'color', 'elementRef', 'fontStyle', 'letterSpacing', 'lineHeight', 'size', 'transform', 'variant', 'weight', 'wrap'];
+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",
-  "version": "11.6.0",
+  "version": "11.6.1-pr-snapshot-1779894247159",
+  "type": "module",
   "description": "A component for styling textual content",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
-  "main": "./lib/index.js",
   "types": "./types/index.d.ts",
   "repository": {
     "type": "git",
@@ -15,18 +15,18 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0"
+    "@instructure/console": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/shared-types": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/emotion": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-color-utils": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-react-utils": "11.6.1-pr-snapshot-1779894247159"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
-    "@instructure/ui-axe-check": "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-themes": "11.6.1-pr-snapshot-1779894247159"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -39,10 +39,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",
@@ -52,7 +50,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/Text/index.js

@@ -1,97 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Text = void 0;
-var _react = require("react");
-var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
-var _emotion = require("@instructure/emotion");
-var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
-var _props = require("./props");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _Text;
-/*
- * 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
----
-**/
-let Text = exports.Text = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_Text = class Text extends _react.Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      this.ref = el;
-      const elementRef = this.props.elementRef;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-  }
-  checkProps() {
-    const _this$props = this.props,
-      variant = _this$props.variant,
-      lineHeight = _this$props.lineHeight,
-      weight = _this$props.weight,
-      fontStyle = _this$props.fontStyle;
-    if (variant) {
-      if (lineHeight) {}
-      if (weight) {}
-      if (fontStyle) {}
-    }
-  }
-  componentDidMount() {
-    var _this$props$makeStyle, _this$props2;
-    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
-    this.checkProps();
-  }
-  componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props3;
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
-    this.checkProps();
-  }
-  render() {
-    var _this$props$styles;
-    const children = this.props.children;
-    const ElementType = (0, _getElementType.getElementType)(Text, this.props);
-    return (0, _jsxRuntime.jsx)(ElementType, {
-      ...(0, _passthroughProps.passthroughProps)(this.props),
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.text,
-      ref: this.handleRef,
-      children: children
-    });
-  }
-}, _Text.displayName = "Text", _Text.componentId = 'Text', _Text.allowedProps = _props.allowedProps, _Text.defaultProps = {
-  as: 'span',
-  wrap: 'normal',
-  size: 'medium',
-  letterSpacing: 'normal',
-  children: null
-}, _Text)) || _class);
-var _default = exports.default = Text;

package/lib/Text/styles.js

@@ -1,272 +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) => {
-  const size = props.size,
-    wrap = props.wrap,
-    weight = props.weight,
-    fontStyle = props.fontStyle,
-    transform = props.transform,
-    lineHeight = props.lineHeight,
-    letterSpacing = props.letterSpacing,
-    color = props.color,
-    variant = props.variant;
-  const variants = {
-    descriptionPage: {
-      fontStyle: 'normal',
-      fontWeight: componentTheme.weightRegular,
-      fontSize: componentTheme.descriptionPage,
-      lineHeight: componentTheme.lineHeight150
-    },
-    descriptionSection: {
-      fontStyle: 'normal',
-      fontWeight: componentTheme.weightRegular,
-      fontSize: componentTheme.descriptionSection,
-      lineHeight: componentTheme.lineHeight150
-    },
-    content: {
-      fontStyle: 'normal',
-      fontWeight: componentTheme.weightRegular,
-      fontSize: componentTheme.content,
-      lineHeight: componentTheme.lineHeight150
-    },
-    contentImportant: {
-      fontStyle: 'normal',
-      fontWeight: componentTheme.weightImportant,
-      fontSize: componentTheme.content,
-      lineHeight: componentTheme.lineHeight150
-    },
-    contentQuote: {
-      fontStyle: 'italic',
-      fontWeight: componentTheme.weightRegular,
-      fontSize: componentTheme.content,
-      lineHeight: componentTheme.lineHeight150
-    },
-    contentSmall: {
-      fontStyle: 'normal',
-      fontWeight: componentTheme.weightRegular,
-      fontSize: componentTheme.contentSmall,
-      lineHeight: componentTheme.lineHeight150
-    },
-    legend: {
-      fontStyle: 'normal',
-      fontWeight: componentTheme.weightRegular,
-      fontSize: componentTheme.legend,
-      lineHeight: componentTheme.lineHeight150
-    }
-  };
-  const colorVariants = {
-    primary: {
-      color: componentTheme.primaryColor
-    },
-    secondary: {
-      color: componentTheme.secondaryColor
-    },
-    'primary-inverse': {
-      color: componentTheme.primaryInverseColor
-    },
-    'secondary-inverse': {
-      color: componentTheme.secondaryInverseColor
-    },
-    success: {
-      color: componentTheme.successColor
-    },
-    brand: {
-      color: componentTheme.brandColor
-    },
-    danger: {
-      color: componentTheme.dangerColor
-    },
-    alert: {
-      color: componentTheme.alertColor
-    },
-    warning: {
-      color: componentTheme.warningColor
-    },
-    'ai-highlight': {
-      color: componentTheme.aiColor,
-      background: componentTheme.aiBackgroundColor
-    }
-  };
-  const wrapStyle = {
-    overflowWrap: 'break-word',
-    wordBreak: 'break-word',
-    hyphens: 'auto'
-  };
-  const weightStyle = {
-    normal: {
-      fontWeight: componentTheme.fontWeightNormal
-    },
-    light: {
-      fontWeight: componentTheme.fontWeightLight
-    },
-    bold: {
-      fontWeight: componentTheme.fontWeightBold
-    },
-    weightRegular: {
-      fontWeight: componentTheme.weightRegular
-    },
-    weightImportant: {
-      fontWeight: componentTheme.weightImportant
-    }
-  };
-  const fontSizeVariants = {
-    'x-small': componentTheme.fontSizeXSmall,
-    small: componentTheme.fontSizeSmall,
-    medium: componentTheme.fontSizeMedium,
-    large: componentTheme.fontSizeLarge,
-    'x-large': componentTheme.fontSizeXLarge,
-    'xx-large': componentTheme.fontSizeXXLarge,
-    descriptionPage: componentTheme.descriptionPage,
-    descriptionSection: componentTheme.descriptionSection,
-    content: componentTheme.content,
-    contentSmall: componentTheme.contentSmall,
-    legend: componentTheme.legend
-  };
-  const lineHeightVariants = {
-    default: {
-      lineHeight: componentTheme.lineHeight
-    },
-    fit: {
-      lineHeight: componentTheme.lineHeightFit
-    },
-    condensed: {
-      lineHeight: componentTheme.lineHeightCondensed
-    },
-    double: {
-      lineHeight: componentTheme.lineHeightDouble
-    },
-    lineHeight100: {
-      lineHeight: componentTheme.lineHeight100
-    },
-    lineHeight125: {
-      lineHeight: componentTheme.lineHeight125
-    },
-    lineHeight150: {
-      lineHeight: componentTheme.lineHeight150
-    }
-  };
-  const letterSpacingVariants = {
-    normal: componentTheme.letterSpacingNormal,
-    condensed: componentTheme.letterSpacingCondensed,
-    expanded: componentTheme.letterSpacingExpanded
-  };
-  const calcTextStyles = () => {
-    if (variant) {
-      return variants[variant];
-    }
-    return {
-      ...(weight ? weightStyle[weight] : {}),
-      ...(fontStyle ? {
-        fontStyle: fontStyle
-      } : {}),
-      fontSize: fontSizeVariants[size],
-      ...(lineHeight ? lineHeightVariants[lineHeight] : {})
-    };
-  };
-  const baseStyles = {
-    '&:focus': {
-      outline: 'none'
-    },
-    ...(color ? colorVariants[color] : {}),
-    ...(wrap === 'break-word' ? wrapStyle : {}),
-    letterSpacing: letterSpacingVariants[letterSpacing],
-    ...(transform ? {
-      textTransform: transform
-    } : {}),
-    ...calcTextStyles()
-  };
-  const inputStyles = {
-    ...baseStyles,
-    outline: 0,
-    appearance: 'none',
-    boxSizing: 'border-box',
-    background: 'none',
-    border: 'none',
-    borderRadius: 0,
-    padding: 0,
-    margin: 0,
-    color: 'inherit',
-    height: 'auto',
-    width: '100%',
-    lineHeight: 'inherit',
-    textAlign: 'start',
-    boxShadow: 'none',
-    display: 'block'
-  };
-  return {
-    text: {
-      label: 'text',
-      fontFamily: componentTheme.fontFamily,
-      ...baseStyles,
-      // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
-      '&:is(input)[type]': inputStyles,
-      '&:-webkit-any(input)[type]': inputStyles,
-      'sub, sup': {
-        fontSize: '75%',
-        lineHeight: 0,
-        position: 'relative',
-        verticalAlign: 'baseline'
-      },
-      sup: {
-        top: '-0.4em'
-      },
-      sub: {
-        bottom: '-0.4em'
-      },
-      'pre, code': {
-        all: 'initial',
-        fontFamily: componentTheme.fontFamilyMonospace
-      },
-      'i, em': {
-        fontStyle: 'italic'
-      },
-      'b, strong': {
-        fontWeight: componentTheme.fontWeightBold
-      },
-      p: {
-        display: 'block',
-        padding: 0,
-        margin: componentTheme.paragraphMargin
-      }
-    }
-  };
-};
-var _default = exports.default = generateStyle;

package/lib/Text/theme.js

@@ -1,68 +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, _colors$contrasts9, _colors$contrasts0, _colors$contrasts1;
-  const colors = theme.colors,
-    typography = theme.typography,
-    spacing = theme.spacing,
-    themeName = theme.key;
-  const themeSpecificStyle = {
-    canvas: {
-      primaryColor: theme['ic-brand-font-color-dark'],
-      brandColor: theme['ic-brand-primary']
-    }
-  };
-  const componentVariables = {
-    ...typography,
-    primaryInverseColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
-    primaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
-    secondaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey5782,
-    secondaryInverseColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1111,
-    brandColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue5782,
-    dangerColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.red5782,
-    successColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.green5782,
-    alertColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue5782,
-    warningColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.orange5782,
-    aiColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts0 = colors.contrasts) === null || _colors$contrasts0 === void 0 ? void 0 : _colors$contrasts0.violet5790,
-    aiBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts1 = colors.contrasts) === null || _colors$contrasts1 === void 0 ? void 0 : _colors$contrasts1.violet1212,
-    paragraphMargin: `${spacing.medium} 0`
-  };
-  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, "Text", {
-  enumerable: true,
-  get: function () {
-    return _Text.Text;
-  }
-});
-var _Text = require("./Text");

package/lib/package.json

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