@instructure/emotion 10.26.1-snapshot-2 → 10.26.1

package/CHANGELOG.md

@@ -3,30 +3,9 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.26.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.26.0...v10.26.1-snapshot-2) (2025-10-06)
+## [10.26.1](https://github.com/instructure/instructure-ui/compare/v10.26.0...v10.26.1) (2025-10-06)
 
-
-### Features
-
-* **many:** instUI v11 release ([36f5438](https://github.com/instructure/instructure-ui/commit/36f54382669186227ba24798bbf7201ef2f5cd4c))
-
-
-### BREAKING CHANGES
-
-* **many:** InstUI v11 contains the following breaking changes:
-- React 16 and 17 are no longer supported
-- remove `PropTypes` from all packages
-- remove `CodeEditor` component
-- remove `@instui/theme-registry` package
-- remove `@testable`, `@experimental`, `@hack` decorators
-- InstUISettingsProvider's `as` prop is removed
-- `canvas.use()`, `canvasHighContrast.use()` functions are removed
-- `canvasThemeLocal`, `canvasHighContrastThemeLocal` are removed
-- `variables` field on theme objects are removed
-- remove deprecated props from Table: Row's `isStacked`, Body's
-  `isStacked`, `hover`, and `headers`
-- `Table`'s `caption` prop is now required
-- `ui-dom-utils`'s `getComputedStyle` can now return `undefined`
+**Note:** Version bump only for package @instructure/emotion
 
 
 

package/es/InstUISettingsProvider/index.js

@@ -23,6 +23,7 @@
  */
 
 import { useContext } from 'react';
+import PropTypes from 'prop-types';
 import { ThemeProvider } from '@emotion/react';
 import { TextDirectionContext } from '@instructure/ui-i18n';
 import { DeterministicIdContextProvider } from '@instructure/ui-react-utils';
@@ -38,7 +39,8 @@ function InstUISettingsProvider({
   children,
   theme = {},
   dir,
-  instanceCounterMap
+  instanceCounterMap,
+  as
 }) {
   const finalDir = dir || useContext(TextDirectionContext);
   if (process.env.NODE_ENV !== 'production' && finalDir === 'auto') {}
@@ -53,12 +55,22 @@ function InstUISettingsProvider({
     })
   });
   if (dir) {
-    providers = _jsx("span", {
+    const Element = as || 'span';
+    providers = _jsx(Element, {
       dir: finalDir,
       children: providers
     });
-  }
+  } else if (as && process.env.NODE_ENV !== 'production') {}
   return providers;
 }
+InstUISettingsProvider.propTypes = {
+  /* eslint-disable react/require-default-props */
+  children: PropTypes.node,
+  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  dir: PropTypes.oneOf(['ltr', 'rtl']),
+  instanceCounterMap: PropTypes.instanceOf(Map),
+  as: PropTypes.string
+  /* eslint-enable react/require-default-props */
+};
 export default InstUISettingsProvider;
 export { InstUISettingsProvider };

package/es/getTheme.js

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 import canvas from '@instructure/ui-themes';
+import { ThemeRegistry } from '@instructure/theme-registry';
 import { isBaseTheme, mergeDeep } from '@instructure/ui-utils';
 /**
  * ---
@@ -44,8 +45,9 @@ const getTheme = themeOrOverride => (ancestorTheme = {}) => {
   // we need to clone the ancestor theme not to override it
   let currentTheme;
   if (Object.keys(ancestorTheme).length === 0) {
-    if (process.env.NODE_ENV !== 'production') {}
-    currentTheme = canvas;
+    const globalTheme = ThemeRegistry.getCurrentTheme();
+    if (process.env.NODE_ENV !== 'production' && !globalTheme) {}
+    currentTheme = globalTheme || canvas;
   } else {
     currentTheme = ancestorTheme;
   }

package/es/index.js

@@ -26,5 +26,5 @@
 export * from '@emotion/react';
 export { InstUISettingsProvider } from './InstUISettingsProvider';
 export { withStyle } from './withStyle';
-export { ThemeablePropValues, makeThemeVars, getShorthandPropValue, mirrorShorthandCorners, mirrorShorthandEdges, mapSpacingToShorthand } from './styleUtils';
+export { ThemeablePropValues, ThemeablePropTypes, makeThemeVars, getShorthandPropValue, mirrorShorthandCorners, mirrorShorthandEdges, mapSpacingToShorthand } from './styleUtils';
 export { useStyle } from './useStyle';

package/es/styleUtils/ThemeablePropTypes.js

@@ -0,0 +1,74 @@
+/*
+ * 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 PropTypes from 'prop-types';
+import { ThemeablePropValues } from './ThemeablePropValues';
+const SHADOW_TYPES = ThemeablePropValues.SHADOW_TYPES,
+  STACKING_TYPES = ThemeablePropValues.STACKING_TYPES,
+  BORDER_WIDTHS = ThemeablePropValues.BORDER_WIDTHS,
+  BORDER_RADII = ThemeablePropValues.BORDER_RADII,
+  BACKGROUNDS = ThemeablePropValues.BACKGROUNDS,
+  SIZES = ThemeablePropValues.SIZES;
+
+/**
+ * ---
+ * category: utilities/themes
+ * ---
+ * Custom prop types for themeable React components.
+ * @module ThemeablePropTypes
+ */
+const ThemeablePropTypes = {
+  shadow: PropTypes.oneOf(Object.values(SHADOW_TYPES)),
+  stacking: PropTypes.oneOf(Object.values(STACKING_TYPES)),
+  borderWidth: shorthandPropType(Object.values(BORDER_WIDTHS)),
+  borderRadius: shorthandPropType(Object.values(BORDER_RADII)),
+  background: PropTypes.oneOf(Object.values(BACKGROUNDS)),
+  size: PropTypes.oneOf(Object.values(SIZES))
+};
+function shorthandPropType(validValues) {
+  return function (props, propName, componentName, location) {
+    const propValue = props[propName];
+    if (typeof propValue === 'undefined') {
+      return null;
+    }
+    if (typeof propValue !== 'string') {
+      return new Error(`Invalid ${location} \`${propName}\` of type \`${typeof propValue}\` supplied to \`${componentName}\`, expected ` + `a string.`);
+    }
+    const propValues = propValue.split(' ');
+    const valuesLength = propValues.length;
+    if (valuesLength > 0 && valuesLength < 5) {
+      for (let i = 0; i < valuesLength; i++) {
+        const valueIndex = validValues.indexOf(propValues[i]);
+        if (valueIndex === -1) {
+          return new Error(`Invalid ${location} \`${propName}\` \`${propValues[i]}\` supplied to \`${componentName}\`, expected ` + `a one of \`${validValues.join(', ')}\`.`);
+        }
+      }
+    } else {
+      return new Error(`Invalid ${location} \`${propName}\` \`${propValue}\` supplied to \`${componentName}\`, expected ` + `between one and four of the following valid values: \`${validValues.join(', ')}\`.`);
+    }
+    return null;
+  };
+}
+export default ThemeablePropTypes;
+export { ThemeablePropTypes, shorthandPropType };

package/es/styleUtils/index.js

@@ -23,6 +23,7 @@
  */
 
 export { ThemeablePropValues } from './ThemeablePropValues';
+export { ThemeablePropTypes } from './ThemeablePropTypes';
 export { makeThemeVars } from './makeThemeVars';
 export { getShorthandPropValue } from './getShorthandPropValue';
 export { mirrorShorthandCorners } from './mirrorShorthandCorners';

package/es/useTheme.js

@@ -25,18 +25,24 @@
 import { useTheme as useEmotionTheme } from '@emotion/react';
 import canvas from '@instructure/ui-themes';
 import { isEmpty } from '@instructure/ui-utils';
+import { ThemeRegistry } from '@instructure/theme-registry';
 /**
  * ---
  * private: true
  * ---
  * A hook that will return the currently applied theme object from the nearest Context.
- * If there is no theme provided to the Context, it will return the default `canvas` theme.
+ * If there is no Context, then it tries to get the current theme from the global ThemeRegistry.
+ * If there is no theme provided to the Context and ThemeRegistry it will return the default `canvas` theme.
  * @returns The theme object
  */
 const useTheme = () => {
   // This reads the theme from Emotion's ThemeContext
   let theme = useEmotionTheme();
   if (isEmpty(theme)) {
+    const globalTheme = ThemeRegistry.getCurrentTheme();
+    if (globalTheme) {
+      return globalTheme;
+    }
     if (process.env.NODE_ENV !== 'production') {}
     theme = canvas;
   }

package/es/withStyle.js

@@ -69,7 +69,7 @@ const defaultValues = {
  * [InstUISettingsProvider](#InstUISettingsProvider) component, and/or set
  * explicitly via its `themeOverride` prop.
  *
- * InstUISettingsProvider provides a theme object (e.g. the [canvas theme](/#canvas)).
+ * InstUISettingsProvider provides a theme object with global theme variables (e.g. the [canvas theme](/#canvas)).
  * These variables are mapped to the component's own variables in `theme.js` (see [theming](#theming-basics) for more info).
  *
  * With the `themeOverride` prop you can directly set/override the component theme variables declared in theme.js. It accepts an object or a function. The function has the component's theme and the currently active main theme as its parameter.
@@ -164,7 +164,13 @@ const withStyle = decorator((ComposedComponent, generateStyle, generateComponent
   // added so it can be tested with ReactTestUtils
   // more info: https://github.com/facebook/react/issues/13455
   WithStyle.originalType = ComposedComponent.originalType || ComposedComponent;
+
+  // we have to pass these on, because sometimes users
+  // access propTypes of the component in other components
+  // eslint-disable-next-line react/forbid-foreign-prop-types
+  WithStyle.propTypes = ComposedComponent.propTypes;
   WithStyle.defaultProps = ComposedComponent.defaultProps;
+
   // These static fields exist on InstUI components
   WithStyle.allowedProps = ComposedComponent.allowedProps;
 

package/lib/InstUISettingsProvider/index.js

@@ -1,11 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InstUISettingsProvider = InstUISettingsProvider;
 exports.default = void 0;
 var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react2 = require("@emotion/react");
 var _TextDirectionContext = require("@instructure/ui-i18n/lib/TextDirectionContext.js");
 var _DeterministicIdContextProvider = require("@instructure/ui-react-utils/lib/DeterministicIdContext/DeterministicIdContextProvider.js");
@@ -45,7 +47,8 @@ function InstUISettingsProvider({
   children,
   theme = {},
   dir,
-  instanceCounterMap
+  instanceCounterMap,
+  as
 }) {
   const finalDir = dir || (0, _react.useContext)(_TextDirectionContext.TextDirectionContext);
   if (process.env.NODE_ENV !== 'production' && finalDir === 'auto') {}
@@ -60,11 +63,21 @@ function InstUISettingsProvider({
     })
   });
   if (dir) {
-    providers = (0, _jsxRuntime.jsx)("span", {
+    const Element = as || 'span';
+    providers = (0, _jsxRuntime.jsx)(Element, {
       dir: finalDir,
       children: providers
     });
-  }
+  } else if (as && process.env.NODE_ENV !== 'production') {}
   return providers;
 }
+InstUISettingsProvider.propTypes = {
+  /* eslint-disable react/require-default-props */
+  children: _propTypes.default.node,
+  theme: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]),
+  dir: _propTypes.default.oneOf(['ltr', 'rtl']),
+  instanceCounterMap: _propTypes.default.instanceOf(Map),
+  as: _propTypes.default.string
+  /* eslint-enable react/require-default-props */
+};
 var _default = exports.default = InstUISettingsProvider;

package/lib/getTheme.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getTheme = exports.default = void 0;
 var _uiThemes = _interopRequireDefault(require("@instructure/ui-themes"));
+var _themeRegistry = require("@instructure/theme-registry");
 var _isBaseTheme = require("@instructure/ui-utils/lib/isBaseTheme.js");
 var _mergeDeep = require("@instructure/ui-utils/lib/mergeDeep.js");
 /*
@@ -53,8 +54,9 @@ const getTheme = themeOrOverride => (ancestorTheme = {}) => {
   // we need to clone the ancestor theme not to override it
   let currentTheme;
   if (Object.keys(ancestorTheme).length === 0) {
-    if (process.env.NODE_ENV !== 'production') {}
-    currentTheme = _uiThemes.default;
+    const globalTheme = _themeRegistry.ThemeRegistry.getCurrentTheme();
+    if (process.env.NODE_ENV !== 'production' && !globalTheme) {}
+    currentTheme = globalTheme || _uiThemes.default;
   } else {
     currentTheme = ancestorTheme;
   }

package/lib/index.js

@@ -7,6 +7,7 @@ var _exportNames = {
   InstUISettingsProvider: true,
   withStyle: true,
   ThemeablePropValues: true,
+  ThemeablePropTypes: true,
   makeThemeVars: true,
   getShorthandPropValue: true,
   mirrorShorthandCorners: true,
@@ -20,6 +21,12 @@ Object.defineProperty(exports, "InstUISettingsProvider", {
     return _InstUISettingsProvider.InstUISettingsProvider;
   }
 });
+Object.defineProperty(exports, "ThemeablePropTypes", {
+  enumerable: true,
+  get: function () {
+    return _styleUtils.ThemeablePropTypes;
+  }
+});
 Object.defineProperty(exports, "ThemeablePropValues", {
   enumerable: true,
   get: function () {

package/lib/styleUtils/ThemeablePropTypes.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ThemeablePropTypes = void 0;
+exports.shorthandPropType = shorthandPropType;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ThemeablePropValues = require("./ThemeablePropValues");
+/*
+ * 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 SHADOW_TYPES = _ThemeablePropValues.ThemeablePropValues.SHADOW_TYPES,
+  STACKING_TYPES = _ThemeablePropValues.ThemeablePropValues.STACKING_TYPES,
+  BORDER_WIDTHS = _ThemeablePropValues.ThemeablePropValues.BORDER_WIDTHS,
+  BORDER_RADII = _ThemeablePropValues.ThemeablePropValues.BORDER_RADII,
+  BACKGROUNDS = _ThemeablePropValues.ThemeablePropValues.BACKGROUNDS,
+  SIZES = _ThemeablePropValues.ThemeablePropValues.SIZES;
+
+/**
+ * ---
+ * category: utilities/themes
+ * ---
+ * Custom prop types for themeable React components.
+ * @module ThemeablePropTypes
+ */
+const ThemeablePropTypes = exports.ThemeablePropTypes = {
+  shadow: _propTypes.default.oneOf(Object.values(SHADOW_TYPES)),
+  stacking: _propTypes.default.oneOf(Object.values(STACKING_TYPES)),
+  borderWidth: shorthandPropType(Object.values(BORDER_WIDTHS)),
+  borderRadius: shorthandPropType(Object.values(BORDER_RADII)),
+  background: _propTypes.default.oneOf(Object.values(BACKGROUNDS)),
+  size: _propTypes.default.oneOf(Object.values(SIZES))
+};
+function shorthandPropType(validValues) {
+  return function (props, propName, componentName, location) {
+    const propValue = props[propName];
+    if (typeof propValue === 'undefined') {
+      return null;
+    }
+    if (typeof propValue !== 'string') {
+      return new Error(`Invalid ${location} \`${propName}\` of type \`${typeof propValue}\` supplied to \`${componentName}\`, expected ` + `a string.`);
+    }
+    const propValues = propValue.split(' ');
+    const valuesLength = propValues.length;
+    if (valuesLength > 0 && valuesLength < 5) {
+      for (let i = 0; i < valuesLength; i++) {
+        const valueIndex = validValues.indexOf(propValues[i]);
+        if (valueIndex === -1) {
+          return new Error(`Invalid ${location} \`${propName}\` \`${propValues[i]}\` supplied to \`${componentName}\`, expected ` + `a one of \`${validValues.join(', ')}\`.`);
+        }
+      }
+    } else {
+      return new Error(`Invalid ${location} \`${propName}\` \`${propValue}\` supplied to \`${componentName}\`, expected ` + `between one and four of the following valid values: \`${validValues.join(', ')}\`.`);
+    }
+    return null;
+  };
+}
+var _default = exports.default = ThemeablePropTypes;

package/lib/styleUtils/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ThemeablePropTypes", {
+  enumerable: true,
+  get: function () {
+    return _ThemeablePropTypes.ThemeablePropTypes;
+  }
+});
 Object.defineProperty(exports, "ThemeablePropValues", {
   enumerable: true,
   get: function () {
@@ -40,6 +46,7 @@ Object.defineProperty(exports, "mirrorShorthandEdges", {
   }
 });
 var _ThemeablePropValues = require("./ThemeablePropValues");
+var _ThemeablePropTypes = require("./ThemeablePropTypes");
 var _makeThemeVars = require("./makeThemeVars");
 var _getShorthandPropValue = require("./getShorthandPropValue");
 var _mirrorShorthandCorners = require("./mirrorShorthandCorners");

package/lib/useTheme.js

@@ -8,6 +8,7 @@ exports.useTheme = exports.default = void 0;
 var _react = require("@emotion/react");
 var _uiThemes = _interopRequireDefault(require("@instructure/ui-themes"));
 var _isEmpty = require("@instructure/ui-utils/lib/isEmpty.js");
+var _themeRegistry = require("@instructure/theme-registry");
 /*
  * The MIT License (MIT)
  *
@@ -37,13 +38,18 @@ var _isEmpty = require("@instructure/ui-utils/lib/isEmpty.js");
  * private: true
  * ---
  * A hook that will return the currently applied theme object from the nearest Context.
- * If there is no theme provided to the Context, it will return the default `canvas` theme.
+ * If there is no Context, then it tries to get the current theme from the global ThemeRegistry.
+ * If there is no theme provided to the Context and ThemeRegistry it will return the default `canvas` theme.
  * @returns The theme object
  */
 const useTheme = () => {
   // This reads the theme from Emotion's ThemeContext
   let theme = (0, _react.useTheme)();
   if ((0, _isEmpty.isEmpty)(theme)) {
+    const globalTheme = _themeRegistry.ThemeRegistry.getCurrentTheme();
+    if (globalTheme) {
+      return globalTheme;
+    }
     if (process.env.NODE_ENV !== 'production') {}
     theme = _uiThemes.default;
   }

package/lib/withStyle.js

@@ -76,7 +76,7 @@ const defaultValues = {
  * [InstUISettingsProvider](#InstUISettingsProvider) component, and/or set
  * explicitly via its `themeOverride` prop.
  *
- * InstUISettingsProvider provides a theme object (e.g. the [canvas theme](/#canvas)).
+ * InstUISettingsProvider provides a theme object with global theme variables (e.g. the [canvas theme](/#canvas)).
  * These variables are mapped to the component's own variables in `theme.js` (see [theming](#theming-basics) for more info).
  *
  * With the `themeOverride` prop you can directly set/override the component theme variables declared in theme.js. It accepts an object or a function. The function has the component's theme and the currently active main theme as its parameter.
@@ -171,7 +171,13 @@ const withStyle = exports.withStyle = (0, _decorator.decorator)((ComposedCompone
   // added so it can be tested with ReactTestUtils
   // more info: https://github.com/facebook/react/issues/13455
   WithStyle.originalType = ComposedComponent.originalType || ComposedComponent;
+
+  // we have to pass these on, because sometimes users
+  // access propTypes of the component in other components
+  // eslint-disable-next-line react/forbid-foreign-prop-types
+  WithStyle.propTypes = ComposedComponent.propTypes;
   WithStyle.defaultProps = ComposedComponent.defaultProps;
+
   // These static fields exist on InstUI components
   WithStyle.allowedProps = ComposedComponent.allowedProps;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/emotion",
-  "version": "10.26.1-snapshot-2",
+  "version": "10.26.1",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -25,25 +25,27 @@
   "dependencies": {
     "@babel/runtime": "^7.27.6",
     "@emotion/react": "^11",
-    "@instructure/console": "10.26.1-snapshot-2",
-    "@instructure/shared-types": "10.26.1-snapshot-2",
-    "@instructure/ui-decorator": "10.26.1-snapshot-2",
-    "@instructure/ui-i18n": "10.26.1-snapshot-2",
-    "@instructure/ui-react-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-themes": "10.26.1-snapshot-2",
-    "@instructure/ui-utils": "10.26.1-snapshot-2",
-    "hoist-non-react-statics": "^3.3.2"
+    "@instructure/console": "10.26.1",
+    "@instructure/shared-types": "10.26.1",
+    "@instructure/theme-registry": "10.26.1",
+    "@instructure/ui-decorator": "10.26.1",
+    "@instructure/ui-i18n": "10.26.1",
+    "@instructure/ui-react-utils": "10.26.1",
+    "@instructure/ui-themes": "10.26.1",
+    "@instructure/ui-utils": "10.26.1",
+    "hoist-non-react-statics": "^3.3.2",
+    "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.26.1-snapshot-2",
+    "@instructure/ui-babel-preset": "10.26.1",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "15.0.7",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",
-    "react-dom": "18.3.1",
+    "react-dom": "^18.3.1",
     "vitest": "^3.2.2"
   },
   "peerDependencies": {
-    "react": ">=18 <=19"
+    "react": ">=16.14 <=18"
   },
   "publishConfig": {
     "access": "public"

package/src/InstUISettingsProvider/index.tsx

@@ -23,6 +23,7 @@
  */
 
 import { useContext } from 'react'
+import PropTypes from 'prop-types'
 import { ThemeProvider } from '@emotion/react'
 
 import { TextDirectionContext } from '@instructure/ui-i18n'
@@ -32,6 +33,7 @@ import { getTheme } from '../getTheme'
 
 import type { ThemeOrOverride } from '../EmotionTypes'
 import type { DeterministicIdProviderValue } from '@instructure/ui-react-utils'
+import type { AsElementType } from '@instructure/shared-types'
 
 type InstUIProviderProps = {
   children?: React.ReactNode
@@ -49,15 +51,32 @@ type InstUIProviderProps = {
    * specific InstUI components. (generally this is used for deterministic id generation for [SSR](/#server-side-rendering))
    */
   instanceCounterMap?: DeterministicIdProviderValue
-
-  /**
-   * The text direction to use in the descendants. If not provided, it uses the following in this priority order:
-   *   - The value given in a parent `TextDirectionContext`
-   *   - The `dir` prop of `document.documentElement` or its `direction` CSS prop
-   *   - The default `ltr`
-   */
-  dir?: 'ltr' | 'rtl'
-}
+} & (
+  | {
+      /**
+       * The text direction to use in the descendants. If not provided, it uses the following in this priority order:
+       *   - The value given in a parent `TextDirectionContext`
+       *   - The `dir` prop of `document.documentElement` or its `direction` CSS prop
+       *   - The default `ltr`
+       */
+      dir: 'ltr' | 'rtl'
+      /**
+       *  @deprecated This prop will be removed in InstUI v11
+       *
+       *  The element type to render as
+       */
+      as?: AsElementType
+    }
+  | {
+      dir?: never
+      /**
+       *  @deprecated This prop will be removed in InstUI v11
+       *
+       *  The element type to render as
+       */
+      as?: never
+    }
+)
 
 /**
  * ---
@@ -69,7 +88,8 @@ function InstUISettingsProvider({
   children,
   theme = {},
   dir,
-  instanceCounterMap
+  instanceCounterMap,
+  as
 }: InstUIProviderProps) {
   const finalDir = dir || useContext(TextDirectionContext)
 
@@ -90,11 +110,26 @@ function InstUISettingsProvider({
   )
 
   if (dir) {
-    providers = <span dir={finalDir}>{providers}</span>
+    const Element = as || 'span'
+    providers = <Element dir={finalDir}>{providers}</Element>
+  } else if (as && process.env.NODE_ENV !== 'production') {
+    console.warn(
+      "The 'as' property should be used in conjunction with the 'dir' property!"
+    )
   }
 
   return providers
 }
 
+InstUISettingsProvider.propTypes = {
+  /* eslint-disable react/require-default-props */
+  children: PropTypes.node,
+  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  dir: PropTypes.oneOf(['ltr', 'rtl']),
+  instanceCounterMap: PropTypes.instanceOf(Map),
+  as: PropTypes.string
+  /* eslint-enable react/require-default-props */
+}
+
 export default InstUISettingsProvider
 export { InstUISettingsProvider }

package/src/getTheme.ts

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 import canvas from '@instructure/ui-themes'
+import { ThemeRegistry } from '@instructure/theme-registry'
 import { isBaseTheme, mergeDeep } from '@instructure/ui-utils'
 
 import type { BaseTheme } from '@instructure/shared-types'
@@ -54,12 +55,14 @@ const getTheme =
     // we need to clone the ancestor theme not to override it
     let currentTheme
     if (Object.keys(ancestorTheme).length === 0) {
-      if (process.env.NODE_ENV !== 'production') {
+      const globalTheme = ThemeRegistry.getCurrentTheme()
+
+      if (process.env.NODE_ENV !== 'production' && !globalTheme) {
         console.warn(
           'No theme provided for [InstUISettingsProvider], using default `canvas` theme.'
         )
       }
-      currentTheme = canvas
+      currentTheme = globalTheme || canvas
     } else {
       currentTheme = ancestorTheme
     }

package/src/index.ts

@@ -29,6 +29,7 @@ export { InstUISettingsProvider } from './InstUISettingsProvider'
 export { withStyle } from './withStyle'
 export {
   ThemeablePropValues,
+  ThemeablePropTypes,
   makeThemeVars,
   getShorthandPropValue,
   mirrorShorthandCorners,