@instructure/ui-form-field 11.7.3-snapshot-32 → 11.7.3-snapshot-37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/CHANGELOG.md +6 -1
  2. package/es/FormFieldGroup/v1/index.js +1 -1
  3. package/es/FormFieldGroup/v2/index.js +2 -2
  4. package/es/FormFieldLabel/v1/index.js +1 -1
  5. package/es/FormFieldLabel/v2/index.js +1 -1
  6. package/es/FormFieldLayout/v1/index.js +1 -1
  7. package/es/FormFieldLayout/v2/index.js +2 -2
  8. package/es/FormFieldMessage/v1/index.js +1 -1
  9. package/es/FormFieldMessage/v2/index.js +2 -2
  10. package/es/FormFieldMessages/v1/index.js +1 -1
  11. package/es/FormFieldMessages/v2/index.js +2 -2
  12. package/lib/FormFieldGroup/v1/index.js +1 -1
  13. package/lib/FormFieldGroup/v2/index.js +1 -1
  14. package/lib/FormFieldLabel/v1/index.js +1 -1
  15. package/lib/FormFieldLabel/v2/index.js +1 -1
  16. package/lib/FormFieldLayout/v1/index.js +1 -1
  17. package/lib/FormFieldLayout/v2/index.js +1 -1
  18. package/lib/FormFieldMessage/v1/index.js +1 -1
  19. package/lib/FormFieldMessage/v2/index.js +1 -1
  20. package/lib/FormFieldMessages/v1/index.js +1 -1
  21. package/lib/FormFieldMessages/v2/index.js +1 -1
  22. package/package.json +14 -14
  23. package/src/FormFieldGroup/v1/index.tsx +1 -1
  24. package/src/FormFieldGroup/v2/index.tsx +2 -2
  25. package/src/FormFieldLabel/v1/index.tsx +1 -1
  26. package/src/FormFieldLabel/v2/index.tsx +1 -1
  27. package/src/FormFieldLayout/v1/index.tsx +1 -1
  28. package/src/FormFieldLayout/v2/index.tsx +2 -2
  29. package/src/FormFieldMessage/v1/index.tsx +1 -1
  30. package/src/FormFieldMessage/v2/index.tsx +2 -2
  31. package/src/FormFieldMessages/v1/index.tsx +1 -1
  32. package/src/FormFieldMessages/v2/index.tsx +2 -2
  33. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [11.7.3-snapshot-32](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-32) (2026-05-07)
6
+ ## [11.7.3-snapshot-37](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-37) (2026-05-07)
7
7
 
8
8
 
9
9
  ### Bug Fixes
@@ -11,6 +11,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
11
11
  * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
12
12
 
13
13
 
14
+ ### Features
15
+
16
+ * **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))
17
+
18
+
14
19
 
15
20
 
16
21
 
@@ -27,7 +27,7 @@ import "core-js/modules/es.array.includes.js";
27
27
  import { Component, Children } from 'react';
28
28
  import { Grid } from '@instructure/ui-grid/v11_6';
29
29
  import { pickProps, omitProps } from '@instructure/ui-react-utils';
30
- import { withStyleLegacy as withStyle } from '@instructure/emotion';
30
+ import { withStyle } from '@instructure/emotion';
31
31
  import { allowedProps as FormFieldLayoutAllowedProps } from "../../FormFieldLayout/v1/props.js";
32
32
  import { FormFieldLayout } from "../../FormFieldLayout/v1/index.js";
33
33
  import generateStyle from "./styles.js";
@@ -27,7 +27,7 @@ import "core-js/modules/es.array.includes.js";
27
27
  import { Component, Children } from 'react';
28
28
  import { Grid } from '@instructure/ui-grid/latest';
29
29
  import { pickProps, omitProps } from '@instructure/ui-react-utils';
30
- import { withStyle } from '@instructure/emotion';
30
+ import { withStyleNew } from '@instructure/emotion';
31
31
  import { allowedProps as formFieldLayoutAllowedProps } from "../../FormFieldLayout/v2/props.js";
32
32
  import { FormFieldLayout } from "../../FormFieldLayout/v2/index.js";
33
33
  import generateStyle from "./styles.js";
@@ -38,7 +38,7 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
38
38
  category: components
39
39
  ---
40
40
  **/
41
- let FormFieldGroup = (_dec = withStyle(generateStyle), _dec(_class = class FormFieldGroup extends Component {
41
+ let FormFieldGroup = (_dec = withStyleNew(generateStyle), _dec(_class = class FormFieldGroup extends Component {
42
42
  static displayName = "FormFieldGroup";
43
43
  static componentId = 'FormFieldGroup';
44
44
  static allowedProps = allowedProps;
@@ -25,7 +25,7 @@ var _dec, _class;
25
25
 
26
26
  import { Component } from 'react';
27
27
  import { omitProps, getElementType } from '@instructure/ui-react-utils';
28
- import { withStyleLegacy as withStyle } from '@instructure/emotion';
28
+ import { withStyle } from '@instructure/emotion';
29
29
  import generateStyle from "./styles.js";
30
30
  import generateComponentTheme from "./theme.js";
31
31
  import { allowedProps } from "./props.js";
@@ -25,7 +25,7 @@ var _dec, _class;
25
25
 
26
26
  import { Component } from 'react';
27
27
  import { omitProps, getElementType } from '@instructure/ui-react-utils';
28
- import { withStyleLegacy as withStyle } from '@instructure/emotion';
28
+ import { withStyle } from '@instructure/emotion';
29
29
  import generateStyle from "./styles.js";
30
30
  import generateComponentTheme from "./theme.js";
31
31
  import { allowedProps } from "./props.js";
@@ -26,7 +26,7 @@ var _dec, _dec2, _class;
26
26
  import { Component } from 'react';
27
27
  import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
28
28
  import { omitProps, getElementType, withDeterministicId } from '@instructure/ui-react-utils';
29
- import { withStyleLegacy as withStyle } from '@instructure/emotion';
29
+ import { withStyle } from '@instructure/emotion';
30
30
  import { FormFieldMessages } from "../../FormFieldMessages/v1/index.js";
31
31
  import generateStyle from "./styles.js";
32
32
  import { allowedProps } from "./props.js";
@@ -25,7 +25,7 @@
25
25
  import { forwardRef, useEffect, useState, useCallback } from 'react';
26
26
  import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
27
27
  import { omitProps, useDeterministicId } from '@instructure/ui-react-utils';
28
- import { useStyle } from '@instructure/emotion';
28
+ import { useStyleNew } from '@instructure/emotion';
29
29
  import { FormFieldMessages } from "../../FormFieldMessages/v2/index.js";
30
30
  import generateStyle from "./styles.js";
31
31
  import { allowedProps } from "./props.js";
@@ -85,7 +85,7 @@ const FormFieldLayout = /*#__PURE__*/forwardRef((props, ref) => {
85
85
  const invalid = !!filteredMessages?.find(m => m.type === 'error' || m.type === 'newError');
86
86
 
87
87
  // Styles
88
- const styles = useStyle({
88
+ const styles = useStyleNew({
89
89
  generateStyle,
90
90
  themeOverride,
91
91
  params: {
@@ -26,7 +26,7 @@ var _dec, _class;
26
26
  import { Component } from 'react';
27
27
  import { ScreenReaderContent } from '@instructure/ui-a11y-content';
28
28
  import { IconWarningSolid } from '@instructure/ui-icons';
29
- import { withStyleLegacy as withStyle } from '@instructure/emotion';
29
+ import { withStyle } from '@instructure/emotion';
30
30
  import generateStyle from "./styles.js";
31
31
  import generateComponentTheme from "./theme.js";
32
32
  import { allowedProps } from "./props.js";
@@ -25,7 +25,7 @@
25
25
  import { forwardRef } from 'react';
26
26
  import { ScreenReaderContent } from '@instructure/ui-a11y-content';
27
27
  import { AlertCircleInstUIIcon, CheckCircle2InstUIIcon } from '@instructure/ui-icons';
28
- import { useStyle } from '@instructure/emotion';
28
+ import { useStyleNew } from '@instructure/emotion';
29
29
  import generateStyle from "./styles.js";
30
30
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
31
31
  /**
@@ -48,7 +48,7 @@ const FormFieldMessage = /*#__PURE__*/forwardRef(({
48
48
  children,
49
49
  themeOverride
50
50
  }, ref) => {
51
- const styles = useStyle({
51
+ const styles = useStyleNew({
52
52
  generateStyle,
53
53
  themeOverride,
54
54
  params: {
@@ -25,7 +25,7 @@ var _dec, _class;
25
25
 
26
26
  import { Component } from 'react';
27
27
  import { omitProps } from '@instructure/ui-react-utils';
28
- import { withStyleLegacy as withStyle } from '@instructure/emotion';
28
+ import { withStyle } from '@instructure/emotion';
29
29
  import { FormFieldMessage } from "../../FormFieldMessage/v1/index.js";
30
30
  import generateStyle from "./styles.js";
31
31
  import generateComponentTheme from "./theme.js";
@@ -25,7 +25,7 @@ var _dec, _class;
25
25
 
26
26
  import { Component } from 'react';
27
27
  import { omitProps } from '@instructure/ui-react-utils';
28
- import { withStyle } from '@instructure/emotion';
28
+ import { withStyleNew } from '@instructure/emotion';
29
29
  import { FormFieldMessage } from "../../FormFieldMessage/v2/index.js";
30
30
  import generateStyle from "./styles.js";
31
31
  import { allowedProps } from "./props.js";
@@ -48,7 +48,7 @@ type: example
48
48
  ]} />
49
49
  ```
50
50
  **/
51
- let FormFieldMessages = (_dec = withStyle(generateStyle), _dec(_class = class FormFieldMessages extends Component {
51
+ let FormFieldMessages = (_dec = withStyleNew(generateStyle), _dec(_class = class FormFieldMessages extends Component {
52
52
  static displayName = "FormFieldMessages";
53
53
  static componentId = 'FormFieldMessages';
54
54
  static allowedProps = allowedProps;
@@ -46,7 +46,7 @@ var _dec, _class;
46
46
  category: components
47
47
  ---
48
48
  **/
49
- let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class FormFieldGroup extends _react.Component {
49
+ let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class FormFieldGroup extends _react.Component {
50
50
  static displayName = "FormFieldGroup";
51
51
  static componentId = 'FormFieldGroup';
52
52
  static allowedProps = _props2.allowedProps;
@@ -45,7 +45,7 @@ var _dec, _class;
45
45
  category: components
46
46
  ---
47
47
  **/
48
- let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = class FormFieldGroup extends _react.Component {
48
+ let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = class FormFieldGroup extends _react.Component {
49
49
  static displayName = "FormFieldGroup";
50
50
  static componentId = 'FormFieldGroup';
51
51
  static allowedProps = _props2.allowedProps;
@@ -55,7 +55,7 @@ type: example
55
55
  @deprecated since version 10. This is an internal component that will be
56
56
  removed in the future
57
57
  **/
58
- let FormFieldLabel = exports.FormFieldLabel = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class FormFieldLabel extends _react.Component {
58
+ let FormFieldLabel = exports.FormFieldLabel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class FormFieldLabel extends _react.Component {
59
59
  static displayName = "FormFieldLabel";
60
60
  static componentId = 'FormFieldLabel';
61
61
  static allowedProps = _props.allowedProps;
@@ -55,7 +55,7 @@ type: example
55
55
  @deprecated since version 10. This is an internal component that will be
56
56
  removed in the future
57
57
  **/
58
- let FormFieldLabel = exports.FormFieldLabel = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class FormFieldLabel extends _react.Component {
58
+ let FormFieldLabel = exports.FormFieldLabel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class FormFieldLabel extends _react.Component {
59
59
  static displayName = "FormFieldLabel";
60
60
  static componentId = 'FormFieldLabel';
61
61
  static allowedProps = _props.allowedProps;
@@ -45,7 +45,7 @@ var _dec, _dec2, _class;
45
45
  parent: FormField
46
46
  ---
47
47
  **/
48
- let FormFieldLayout = exports.FormFieldLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class FormFieldLayout extends _react.Component {
48
+ let FormFieldLayout = exports.FormFieldLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class FormFieldLayout extends _react.Component {
49
49
  static displayName = "FormFieldLayout";
50
50
  static componentId = 'FormFieldLayout';
51
51
  static allowedProps = _props.allowedProps;
@@ -100,7 +100,7 @@ const FormFieldLayout = exports.FormFieldLayout = /*#__PURE__*/(0, _react.forwar
100
100
  const invalid = !!filteredMessages?.find(m => m.type === 'error' || m.type === 'newError');
101
101
 
102
102
  // Styles
103
- const styles = (0, _emotion.useStyle)({
103
+ const styles = (0, _emotion.useStyleNew)({
104
104
  generateStyle: _styles.default,
105
105
  themeOverride,
106
106
  params: {
@@ -52,7 +52,7 @@ type: example
52
52
  <FormFieldMessage variant="error">Invalid value</FormFieldMessage>
53
53
  ```
54
54
  **/
55
- let FormFieldMessage = exports.FormFieldMessage = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class FormFieldMessage extends _react.Component {
55
+ let FormFieldMessage = exports.FormFieldMessage = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class FormFieldMessage extends _react.Component {
56
56
  static displayName = "FormFieldMessage";
57
57
  static componentId = 'FormFieldMessage';
58
58
  static allowedProps = _props.allowedProps;
@@ -55,7 +55,7 @@ const FormFieldMessage = exports.FormFieldMessage = /*#__PURE__*/(0, _react.forw
55
55
  children,
56
56
  themeOverride
57
57
  }, ref) => {
58
- const styles = (0, _emotion.useStyle)({
58
+ const styles = (0, _emotion.useStyleNew)({
59
59
  generateStyle: _styles.default,
60
60
  themeOverride,
61
61
  params: {
@@ -55,7 +55,7 @@ type: example
55
55
  ]} />
56
56
  ```
57
57
  **/
58
- let FormFieldMessages = exports.FormFieldMessages = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class FormFieldMessages extends _react.Component {
58
+ let FormFieldMessages = exports.FormFieldMessages = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class FormFieldMessages extends _react.Component {
59
59
  static displayName = "FormFieldMessages";
60
60
  static componentId = 'FormFieldMessages';
61
61
  static allowedProps = _props.allowedProps;
@@ -54,7 +54,7 @@ type: example
54
54
  ]} />
55
55
  ```
56
56
  **/
57
- let FormFieldMessages = exports.FormFieldMessages = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = class FormFieldMessages extends _react.Component {
57
+ let FormFieldMessages = exports.FormFieldMessages = (_dec = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = class FormFieldMessages extends _react.Component {
58
58
  static displayName = "FormFieldMessages";
59
59
  static componentId = 'FormFieldMessages';
60
60
  static allowedProps = _props.allowedProps;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-form-field",
3
- "version": "11.7.3-snapshot-32",
3
+ "version": "11.7.3-snapshot-37",
4
4
  "description": "Form layout components.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -15,24 +15,24 @@
15
15
  "license": "MIT",
16
16
  "dependencies": {
17
17
  "@babel/runtime": "^7.29.2",
18
- "@instructure/console": "11.7.3-snapshot-32",
19
- "@instructure/shared-types": "11.7.3-snapshot-32",
20
- "@instructure/ui-a11y-content": "11.7.3-snapshot-32",
21
- "@instructure/emotion": "11.7.3-snapshot-32",
22
- "@instructure/ui-a11y-utils": "11.7.3-snapshot-32",
23
- "@instructure/ui-grid": "11.7.3-snapshot-32",
24
- "@instructure/ui-icons": "11.7.3-snapshot-32",
25
- "@instructure/ui-react-utils": "11.7.3-snapshot-32",
26
- "@instructure/ui-themes": "11.7.3-snapshot-32",
27
- "@instructure/ui-utils": "11.7.3-snapshot-32",
28
- "@instructure/uid": "11.7.3-snapshot-32"
18
+ "@instructure/emotion": "11.7.3-snapshot-37",
19
+ "@instructure/console": "11.7.3-snapshot-37",
20
+ "@instructure/shared-types": "11.7.3-snapshot-37",
21
+ "@instructure/ui-a11y-content": "11.7.3-snapshot-37",
22
+ "@instructure/ui-a11y-utils": "11.7.3-snapshot-37",
23
+ "@instructure/ui-grid": "11.7.3-snapshot-37",
24
+ "@instructure/ui-icons": "11.7.3-snapshot-37",
25
+ "@instructure/ui-react-utils": "11.7.3-snapshot-37",
26
+ "@instructure/ui-utils": "11.7.3-snapshot-37",
27
+ "@instructure/ui-themes": "11.7.3-snapshot-37",
28
+ "@instructure/uid": "11.7.3-snapshot-37"
29
29
  },
30
30
  "devDependencies": {
31
31
  "@testing-library/jest-dom": "^6.6.3",
32
32
  "@testing-library/react": "15.0.7",
33
33
  "vitest": "^3.2.2",
34
- "@instructure/ui-babel-preset": "11.7.3-snapshot-32",
35
- "@instructure/ui-axe-check": "11.7.3-snapshot-32"
34
+ "@instructure/ui-axe-check": "11.7.3-snapshot-37",
35
+ "@instructure/ui-babel-preset": "11.7.3-snapshot-37"
36
36
  },
37
37
  "peerDependencies": {
38
38
  "react": ">=18 <=19"
@@ -26,7 +26,7 @@ import { Component, Children, ReactElement, AriaAttributes } from 'react'
26
26
 
27
27
  import { Grid } from '@instructure/ui-grid/v11_6'
28
28
  import { pickProps, omitProps } from '@instructure/ui-react-utils'
29
- import { withStyleLegacy as withStyle } from '@instructure/emotion'
29
+ import { withStyle } from '@instructure/emotion'
30
30
 
31
31
  import { allowedProps as FormFieldLayoutAllowedProps } from '../../FormFieldLayout/v1/props'
32
32
 
@@ -26,7 +26,7 @@ import { Component, Children, ReactElement, AriaAttributes } from 'react'
26
26
 
27
27
  import { Grid } from '@instructure/ui-grid/latest'
28
28
  import { pickProps, omitProps } from '@instructure/ui-react-utils'
29
- import { withStyle } from '@instructure/emotion'
29
+ import { withStyleNew } from '@instructure/emotion'
30
30
 
31
31
  import { allowedProps as formFieldLayoutAllowedProps } from '../../FormFieldLayout/v2/props'
32
32
 
@@ -42,7 +42,7 @@ import type { FormFieldGroupProps } from './props'
42
42
  category: components
43
43
  ---
44
44
  **/
45
- @withStyle(generateStyle)
45
+ @withStyleNew(generateStyle)
46
46
  class FormFieldGroup extends Component<FormFieldGroupProps> {
47
47
  static readonly componentId = 'FormFieldGroup'
48
48
 
@@ -25,7 +25,7 @@
25
25
  import { Component } from 'react'
26
26
 
27
27
  import { omitProps, getElementType } from '@instructure/ui-react-utils'
28
- import { withStyleLegacy as withStyle } from '@instructure/emotion'
28
+ import { withStyle } from '@instructure/emotion'
29
29
 
30
30
  import generateStyle from './styles'
31
31
  import generateComponentTheme from './theme'
@@ -25,7 +25,7 @@
25
25
  import { Component } from 'react'
26
26
 
27
27
  import { omitProps, getElementType } from '@instructure/ui-react-utils'
28
- import { withStyleLegacy as withStyle } from '@instructure/emotion'
28
+ import { withStyle } from '@instructure/emotion'
29
29
 
30
30
  import generateStyle from './styles'
31
31
  import generateComponentTheme from './theme'
@@ -30,7 +30,7 @@ import {
30
30
  withDeterministicId
31
31
  } from '@instructure/ui-react-utils'
32
32
 
33
- import { withStyleLegacy as withStyle } from '@instructure/emotion'
33
+ import { withStyle } from '@instructure/emotion'
34
34
  import { FormFieldMessages } from '../../FormFieldMessages/v1'
35
35
  import generateStyle from './styles'
36
36
  import { allowedProps, FormFieldStyleProps } from './props'
@@ -26,7 +26,7 @@ import { forwardRef, useEffect, useState, useCallback } from 'react'
26
26
  import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
27
27
  import { omitProps, useDeterministicId } from '@instructure/ui-react-utils'
28
28
 
29
- import { useStyle } from '@instructure/emotion'
29
+ import { useStyleNew } from '@instructure/emotion'
30
30
  import { FormFieldMessages } from '../../FormFieldMessages/v2'
31
31
  import generateStyle from './styles'
32
32
  import { allowedProps } from './props'
@@ -108,7 +108,7 @@ const FormFieldLayout = forwardRef<Element, FormFieldLayoutProps>(
108
108
  )
109
109
 
110
110
  // Styles
111
- const styles = useStyle({
111
+ const styles = useStyleNew({
112
112
  generateStyle,
113
113
  themeOverride,
114
114
  params: {
@@ -28,7 +28,7 @@ import { ScreenReaderContent } from '@instructure/ui-a11y-content'
28
28
 
29
29
  import { IconWarningSolid } from '@instructure/ui-icons'
30
30
 
31
- import { withStyleLegacy as withStyle } from '@instructure/emotion'
31
+ import { withStyle } from '@instructure/emotion'
32
32
 
33
33
  import generateStyle from './styles'
34
34
  import generateComponentTheme from './theme'
@@ -31,7 +31,7 @@ import {
31
31
  CheckCircle2InstUIIcon
32
32
  } from '@instructure/ui-icons'
33
33
 
34
- import { useStyle } from '@instructure/emotion'
34
+ import { useStyleNew } from '@instructure/emotion'
35
35
  import generateStyle from './styles'
36
36
 
37
37
  import type { FormFieldMessageProps } from './props'
@@ -53,7 +53,7 @@ type: example
53
53
  **/
54
54
  const FormFieldMessage = forwardRef<HTMLSpanElement, FormFieldMessageProps>(
55
55
  ({ variant = 'hint', children, themeOverride }, ref) => {
56
- const styles = useStyle({
56
+ const styles = useStyleNew({
57
57
  generateStyle,
58
58
  themeOverride,
59
59
  params: {
@@ -26,7 +26,7 @@ import { Component } from 'react'
26
26
 
27
27
  import { omitProps } from '@instructure/ui-react-utils'
28
28
 
29
- import { withStyleLegacy as withStyle } from '@instructure/emotion'
29
+ import { withStyle } from '@instructure/emotion'
30
30
 
31
31
  import { FormFieldMessage } from '../../FormFieldMessage/v1'
32
32
 
@@ -26,7 +26,7 @@ import { Component } from 'react'
26
26
 
27
27
  import { omitProps } from '@instructure/ui-react-utils'
28
28
 
29
- import { withStyle } from '@instructure/emotion'
29
+ import { withStyleNew } from '@instructure/emotion'
30
30
 
31
31
  import { FormFieldMessage } from '../../FormFieldMessage/v2'
32
32
 
@@ -53,7 +53,7 @@ type: example
53
53
  ]} />
54
54
  ```
55
55
  **/
56
- @withStyle(generateStyle)
56
+ @withStyleNew(generateStyle)
57
57
  class FormFieldMessages extends Component<FormFieldMessagesProps> {
58
58
  static readonly componentId = 'FormFieldMessages'
59
59