@instructure/ui-icons 11.7.3-snapshot-33 → 11.7.3-snapshot-38

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-33](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-33) (2026-05-07)
+## [11.7.3-snapshot-38](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-38) (2026-05-07)
 
 
 ### Bug Fixes
@@ -11,6 +11,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
 
 
+### Features
+
+* **many:** add a way for consumers to pass their own component theme definition so they can build their own components with InstUI ([ce01c3e](https://github.com/instructure/instructure-ui/commit/ce01c3eedc46aa2588f4c8309a6eabf4461aaec7))
+
+
 
 
 

package/README.md

@@ -159,7 +159,7 @@ Both scripts are **not** part of the normal build — run them manually when:
 export const SearchInstUIIcon = wrapLucideIcon(Lucide.Search)
 ```
 
-At render time `wrapLucideIcon` calls `useStyle()` to resolve semantic tokens, then delegates to
+At render time `wrapLucideIcon` calls `useStyleNew()` to resolve semantic tokens, then delegates to
 the Lucide component via `size`, `color`, `strokeWidth`, and `absoluteStrokeWidth` props.
 
 **Custom icons** — the generated index embeds a flat `iconNode` array parsed from the SVG:
@@ -172,7 +172,7 @@ export const AiInfoInstUIIcon = wrapCustomIcon(
 )
 ```
 
-At render time `wrapCustomIcon` calls `useStyle()` then builds the SVG manually with
+At render time `wrapCustomIcon` calls `useStyleNew()` then builds the SVG manually with
 `React.createElement`. Stroke width is converted from CSS units to SVG user units:
 `strokeWidth = numericStrokeWidth / (numericSize / viewBoxWidth)`.
 

package/es/custom/wrapCustomIcon.js

@@ -23,7 +23,7 @@
  */
 
 import React, { useId, useContext } from 'react';
-import { useStyle } from '@instructure/emotion';
+import { useStyleNew } from '@instructure/emotion';
 import { passthroughProps } from '@instructure/ui-react-utils';
 import { IconPropsContext } from "../IconPropsProvider/index.js";
 import generateStyle from "../styles.js";
@@ -64,7 +64,7 @@ export function wrapCustomIcon(PathsComponent, iconName, viewBox = '0 0 24 24')
     const handleElementRef = el => {
       if (typeof elementRef === 'function') elementRef(el);
     };
-    const styles = useStyle({
+    const styles = useStyleNew({
       componentId: 'Icon',
       generateStyle,
       themeOverride,

package/es/lucide/wrapLucideIcon.js

@@ -23,7 +23,7 @@
  */
 
 import React, { useId, useContext } from 'react';
-import { useStyle } from '@instructure/emotion';
+import { useStyleNew } from '@instructure/emotion';
 import { passthroughProps } from '@instructure/ui-react-utils';
 import { IconPropsContext } from "../IconPropsProvider/index.js";
 import generateStyle from "../styles.js";
@@ -54,7 +54,7 @@ export function wrapLucideIcon(Icon) {
     const handleElementRef = el => {
       if (typeof elementRef === 'function') elementRef(el);
     };
-    const styles = useStyle({
+    const styles = useStyleNew({
       componentId: 'Icon',
       generateStyle,
       themeOverride,

package/lib/custom/wrapCustomIcon.js

@@ -72,7 +72,7 @@ function wrapCustomIcon(PathsComponent, iconName, viewBox = '0 0 24 24') {
     const handleElementRef = el => {
       if (typeof elementRef === 'function') elementRef(el);
     };
-    const styles = (0, _emotion.useStyle)({
+    const styles = (0, _emotion.useStyleNew)({
       componentId: 'Icon',
       generateStyle: _styles.default,
       themeOverride,

package/lib/lucide/wrapLucideIcon.js

@@ -62,7 +62,7 @@ function wrapLucideIcon(Icon) {
     const handleElementRef = el => {
       if (typeof elementRef === 'function') elementRef(el);
     };
-    const styles = (0, _emotion.useStyle)({
+    const styles = (0, _emotion.useStyleNew)({
       componentId: 'Icon',
       generateStyle: _styles.default,
       themeOverride,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-icons",
-  "version": "11.7.3-snapshot-33",
+  "version": "11.7.3-snapshot-38",
   "description": "Icon set for Instructure, Inc. products",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -19,17 +19,17 @@
   "license": "MIT",
   "devDependencies": {
     "@types/node": "^22.5.4",
-    "@instructure/ui-babel-preset": "11.7.3-snapshot-33"
+    "@instructure/ui-babel-preset": "11.7.3-snapshot-38"
   },
   "dependencies": {
     "@babel/runtime": "^7.29.2",
     "lucide-react": "1.7.0",
-    "@instructure/shared-types": "11.7.3-snapshot-33",
-    "@instructure/emotion": "11.7.3-snapshot-33",
-    "@instructure/ui-react-utils": "11.7.3-snapshot-33",
-    "@instructure/ui-svg-images": "11.7.3-snapshot-33",
-    "@instructure/ui-themes": "11.7.3-snapshot-33",
-    "@instructure/ui-utils": "11.7.3-snapshot-33"
+    "@instructure/emotion": "11.7.3-snapshot-38",
+    "@instructure/shared-types": "11.7.3-snapshot-38",
+    "@instructure/ui-react-utils": "11.7.3-snapshot-38",
+    "@instructure/ui-themes": "11.7.3-snapshot-38",
+    "@instructure/ui-svg-images": "11.7.3-snapshot-38",
+    "@instructure/ui-utils": "11.7.3-snapshot-38"
   },
   "peerDependencies": {
     "react": ">=18 <=19"