@instructure/ui-avatar 11.7.3-snapshot-7 → 11.7.3-snapshot-26

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 (13) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/Avatar/v1/index.js +9 -13
  3. package/es/Avatar/v1/styles.js +10 -8
  4. package/es/Avatar/v1/theme.js +21 -20
  5. package/es/Avatar/v2/index.js +19 -28
  6. package/es/Avatar/v2/styles.js +10 -8
  7. package/lib/Avatar/v1/index.js +9 -13
  8. package/lib/Avatar/v1/styles.js +10 -8
  9. package/lib/Avatar/v1/theme.js +21 -20
  10. package/lib/Avatar/v2/index.js +19 -28
  11. package/lib/Avatar/v2/styles.js +10 -8
  12. package/package.json +11 -11
  13. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
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-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
6
+ ## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-avatar
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
9
12
 
10
13
 
11
14
 
package/es/Avatar/v1/index.js CHANGED
@@ -1,4 +1,3 @@
1
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
1
  /*
3
2
  * The MIT License (MIT)
4
3
  *
@@ -54,10 +53,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
54
53
  ...rest
55
54
  }, ref) => {
56
55
  const imgRef = useRef(null);
57
- const _useState = useState(false),
58
- _useState2 = _slicedToArray(_useState, 2),
59
- loaded = _useState2[0],
60
- setLoaded = _useState2[1];
56
+ const [loaded, setLoaded] = useState(false);
61
57
  const styles = useStyle({
62
58
  generateStyle,
63
59
  generateComponentTheme,
@@ -82,7 +78,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
82
78
  // Image already loaded (common in SSR)
83
79
  if (src && !loaded && imgRef.current && imgRef.current.complete) {
84
80
  setLoaded(true);
85
- onImageLoaded === null || onImageLoaded === void 0 ? void 0 : onImageLoaded();
81
+ onImageLoaded?.();
86
82
  }
87
83
  }, [loaded, src]);
88
84
  const makeInitialsFromName = () => {
@@ -102,11 +98,11 @@ const Avatar = /*#__PURE__*/forwardRef(({
102
98
  };
103
99
  const handleImageLoaded = event => {
104
100
  setLoaded(true);
105
- onImageLoaded === null || onImageLoaded === void 0 ? void 0 : onImageLoaded(event);
101
+ onImageLoaded?.(event);
106
102
  };
107
103
  const renderInitials = () => {
108
104
  return _jsx("span", {
109
- css: styles === null || styles === void 0 ? void 0 : styles.initials,
105
+ css: styles?.initials,
110
106
  "aria-hidden": "true",
111
107
  children: makeInitialsFromName()
112
108
  });
@@ -116,7 +112,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
116
112
  return renderInitials();
117
113
  }
118
114
  return _jsx("span", {
119
- css: styles === null || styles === void 0 ? void 0 : styles.iconSVG,
115
+ css: styles?.iconSVG,
120
116
  children: callRenderProp(renderIcon)
121
117
  });
122
118
  };
@@ -137,18 +133,18 @@ const Avatar = /*#__PURE__*/forwardRef(({
137
133
  ...rest
138
134
  }),
139
135
  ref: ref,
140
- "aria-label": alt ? alt : void 0,
141
- role: alt ? 'img' : void 0,
136
+ "aria-label": alt ? alt : undefined,
137
+ role: alt ? 'img' : undefined,
142
138
  as: as,
143
139
  elementRef: elementRef,
144
140
  margin: margin,
145
- css: styles === null || styles === void 0 ? void 0 : styles.avatar,
141
+ css: styles?.avatar,
146
142
  display: display,
147
143
  children: [_jsx("img", {
148
144
  // This is visually hidden and is here for loading purposes only
149
145
  src: src,
150
146
  ref: imgRef,
151
- css: styles === null || styles === void 0 ? void 0 : styles.loadImage,
147
+ css: styles?.loadImage,
152
148
  alt: alt,
153
149
  onLoad: handleImageLoaded,
154
150
  "aria-hidden": "true"
package/es/Avatar/v1/styles.js CHANGED
@@ -32,13 +32,15 @@
32
32
  * @return The final style object, which will be used in the component
33
33
  */
34
34
  const generateStyle = (componentTheme, params) => {
35
- const loaded = params.loaded,
36
- size = params.size,
37
- color = params.color,
38
- hasInverseColor = params.hasInverseColor,
39
- shape = params.shape,
40
- src = params.src,
41
- showBorder = params.showBorder;
35
+ const {
36
+ loaded,
37
+ size,
38
+ color,
39
+ hasInverseColor,
40
+ shape,
41
+ src,
42
+ showBorder
43
+ } = params;
42
44
 
43
45
  // TODO: this is a temporary solution and should be revised on component update
44
46
  // NOTE: this is needed due to design changes. The size of the component is calculated from "em" which means it is
@@ -191,7 +193,7 @@ const generateStyle = (componentTheme, params) => {
191
193
  }),
192
194
  boxShadow: `inset 0 0 ${componentTheme.boxShadowBlur} 0 ${componentTheme.boxShadowColor}`
193
195
  } : {
194
- backgroundImage: void 0,
196
+ backgroundImage: undefined,
195
197
  ...(hasInverseColor && {
196
198
  border: 0,
197
199
  padding: sizeStyles[size].borderWidth,
package/es/Avatar/v1/theme.js CHANGED
@@ -29,31 +29,32 @@ import { alpha } from '@instructure/ui-color-utils';
29
29
  * @return The final theme object with the overrides and component variables
30
30
  */
31
31
  const generateComponentTheme = theme => {
32
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts0, _colors$contrasts1, _colors$contrasts10;
33
- const colors = theme.colors,
34
- borders = theme.borders,
35
- typography = theme.typography;
32
+ const {
33
+ colors,
34
+ borders,
35
+ typography
36
+ } = theme;
36
37
  const componentVariables = {
37
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
38
- borderWidthSmall: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
39
- borderWidthMedium: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
40
- borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey3045,
38
+ background: colors?.contrasts?.white1010,
39
+ borderWidthSmall: borders?.widthSmall,
40
+ borderWidthMedium: borders?.widthMedium,
41
+ borderColor: colors?.contrasts?.grey3045,
41
42
  boxShadowColor: alpha('#2d3b45', 12),
42
43
  boxShadowBlur: '1rem',
43
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
44
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
44
+ fontFamily: typography?.fontFamily,
45
+ fontWeight: typography?.fontWeightBold,
45
46
  // these colors have sufficient contrast with the white background
46
47
  // in the normal and high contrast themes
47
- color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
48
- colorShamrock: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.green4570,
49
- colorBarney: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue4570,
50
- colorCrimson: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.red4570,
51
- colorFire: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.orange4570,
52
- colorLicorice: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey125125,
53
- colorAsh: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.grey4570,
54
- aiTopGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts0 = colors.contrasts) === null || _colors$contrasts0 === void 0 ? void 0 : _colors$contrasts0.violet4570,
55
- aiBottomGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts1 = colors.contrasts) === null || _colors$contrasts1 === void 0 ? void 0 : _colors$contrasts1.sea4570,
56
- aiFontColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.white1010
48
+ color: colors?.contrasts?.blue4570,
49
+ colorShamrock: colors?.contrasts?.green4570,
50
+ colorBarney: colors?.contrasts?.blue4570,
51
+ colorCrimson: colors?.contrasts?.red4570,
52
+ colorFire: colors?.contrasts?.orange4570,
53
+ colorLicorice: colors?.contrasts?.grey125125,
54
+ colorAsh: colors?.contrasts?.grey4570,
55
+ aiTopGradientColor: colors?.contrasts?.violet4570,
56
+ aiBottomGradientColor: colors?.contrasts?.sea4570,
57
+ aiFontColor: colors?.contrasts?.white1010
57
58
  };
58
59
  return {
59
60
  ...componentVariables
package/es/Avatar/v2/index.js CHANGED
@@ -1,4 +1,3 @@
1
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
1
  /*
3
2
  * The MIT License (MIT)
4
3
  *
@@ -46,30 +45,22 @@ category: components
46
45
  ---
47
46
  **/
48
47
  const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
49
- const _props$size = props.size,
50
- size = _props$size === void 0 ? 'medium' : _props$size,
51
- _props$color = props.color,
52
- color = _props$color === void 0 ? 'accent1' : _props$color,
53
- _props$hasInverseColo = props.hasInverseColor,
54
- hasInverseColor = _props$hasInverseColo === void 0 ? false : _props$hasInverseColo,
55
- _props$showBorder = props.showBorder,
56
- showBorder = _props$showBorder === void 0 ? 'auto' : _props$showBorder,
57
- _props$shape = props.shape,
58
- shape = _props$shape === void 0 ? 'circle' : _props$shape,
59
- _props$display = props.display,
60
- display = _props$display === void 0 ? 'inline' : _props$display,
61
- _props$onImageLoaded = props.onImageLoaded,
62
- onImageLoaded = _props$onImageLoaded === void 0 ? _event => {} : _props$onImageLoaded,
63
- src = props.src,
64
- name = props.name,
65
- renderIcon = props.renderIcon,
66
- alt = props.alt,
67
- themeOverride = props.themeOverride,
68
- margin = props.margin;
69
- const _useState = useState(false),
70
- _useState2 = _slicedToArray(_useState, 2),
71
- loaded = _useState2[0],
72
- setLoaded = _useState2[1];
48
+ const {
49
+ size = 'medium',
50
+ color = 'accent1',
51
+ hasInverseColor = false,
52
+ showBorder = 'auto',
53
+ shape = 'circle',
54
+ display = 'inline',
55
+ onImageLoaded = _event => {},
56
+ src,
57
+ name,
58
+ renderIcon,
59
+ alt,
60
+ themeOverride,
61
+ margin
62
+ } = props;
63
+ const [loaded, setLoaded] = useState(false);
73
64
  const styles = useStyle({
74
65
  generateStyle,
75
66
  themeOverride,
@@ -157,9 +148,9 @@ const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
157
148
  ...props
158
149
  }),
159
150
  ref: ref,
160
- "aria-label": alt ? alt : void 0,
161
- role: alt ? 'img' : void 0,
162
- css: styles === null || styles === void 0 ? void 0 : styles.avatar,
151
+ "aria-label": alt ? alt : undefined,
152
+ role: alt ? 'img' : undefined,
153
+ css: styles?.avatar,
163
154
  children: renderContent()
164
155
  });
165
156
  });
package/es/Avatar/v2/styles.js CHANGED
@@ -34,14 +34,16 @@ import { calcSpacingFromShorthand } from '@instructure/emotion';
34
34
  * @return The final style object, which will be used in the component
35
35
  */
36
36
  const generateStyle = (componentTheme, params, sharedTokens) => {
37
- const loaded = params.loaded,
38
- size = params.size,
39
- color = params.color,
40
- hasInverseColor = params.hasInverseColor,
41
- shape = params.shape,
42
- showBorder = params.showBorder,
43
- display = params.display,
44
- margin = params.margin;
37
+ const {
38
+ loaded,
39
+ size,
40
+ color,
41
+ hasInverseColor,
42
+ shape,
43
+ showBorder,
44
+ display,
45
+ margin
46
+ } = params;
45
47
  const sizeStyles = {
46
48
  'xx-small': {
47
49
  fontSize: componentTheme.fontSize2xs,
package/lib/Avatar/v1/index.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.Avatar = void 0;
8
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
8
  var _emotion = require("@instructure/emotion");
10
9
  var _react = require("react");
11
10
  var _v11_ = require("@instructure/ui-view/v11_6");
@@ -61,10 +60,7 @@ category: components
61
60
  ...rest
62
61
  }, ref) => {
63
62
  const imgRef = (0, _react.useRef)(null);
64
- const _useState = (0, _react.useState)(false),
65
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
66
- loaded = _useState2[0],
67
- setLoaded = _useState2[1];
63
+ const [loaded, setLoaded] = (0, _react.useState)(false);
68
64
  const styles = (0, _emotion.useStyleLegacy)({
69
65
  generateStyle: _styles.default,
70
66
  generateComponentTheme: _theme.default,
@@ -89,7 +85,7 @@ category: components
89
85
  // Image already loaded (common in SSR)
90
86
  if (src && !loaded && imgRef.current && imgRef.current.complete) {
91
87
  setLoaded(true);
92
- onImageLoaded === null || onImageLoaded === void 0 ? void 0 : onImageLoaded();
88
+ onImageLoaded?.();
93
89
  }
94
90
  }, [loaded, src]);
95
91
  const makeInitialsFromName = () => {
@@ -109,11 +105,11 @@ category: components
109
105
  };
110
106
  const handleImageLoaded = event => {
111
107
  setLoaded(true);
112
- onImageLoaded === null || onImageLoaded === void 0 ? void 0 : onImageLoaded(event);
108
+ onImageLoaded?.(event);
113
109
  };
114
110
  const renderInitials = () => {
115
111
  return (0, _jsxRuntime.jsx)("span", {
116
- css: styles === null || styles === void 0 ? void 0 : styles.initials,
112
+ css: styles?.initials,
117
113
  "aria-hidden": "true",
118
114
  children: makeInitialsFromName()
119
115
  });
@@ -123,7 +119,7 @@ category: components
123
119
  return renderInitials();
124
120
  }
125
121
  return (0, _jsxRuntime.jsx)("span", {
126
- css: styles === null || styles === void 0 ? void 0 : styles.iconSVG,
122
+ css: styles?.iconSVG,
127
123
  children: (0, _callRenderProp.callRenderProp)(renderIcon)
128
124
  });
129
125
  };
@@ -144,18 +140,18 @@ category: components
144
140
  ...rest
145
141
  }),
146
142
  ref: ref,
147
- "aria-label": alt ? alt : void 0,
148
- role: alt ? 'img' : void 0,
143
+ "aria-label": alt ? alt : undefined,
144
+ role: alt ? 'img' : undefined,
149
145
  as: as,
150
146
  elementRef: elementRef,
151
147
  margin: margin,
152
- css: styles === null || styles === void 0 ? void 0 : styles.avatar,
148
+ css: styles?.avatar,
153
149
  display: display,
154
150
  children: [(0, _jsxRuntime.jsx)("img", {
155
151
  // This is visually hidden and is here for loading purposes only
156
152
  src: src,
157
153
  ref: imgRef,
158
- css: styles === null || styles === void 0 ? void 0 : styles.loadImage,
154
+ css: styles?.loadImage,
159
155
  alt: alt,
160
156
  onLoad: handleImageLoaded,
161
157
  "aria-hidden": "true"
package/lib/Avatar/v1/styles.js CHANGED
@@ -38,13 +38,15 @@ exports.default = void 0;
38
38
  * @return The final style object, which will be used in the component
39
39
  */
40
40
  const generateStyle = (componentTheme, params) => {
41
- const loaded = params.loaded,
42
- size = params.size,
43
- color = params.color,
44
- hasInverseColor = params.hasInverseColor,
45
- shape = params.shape,
46
- src = params.src,
47
- showBorder = params.showBorder;
41
+ const {
42
+ loaded,
43
+ size,
44
+ color,
45
+ hasInverseColor,
46
+ shape,
47
+ src,
48
+ showBorder
49
+ } = params;
48
50
 
49
51
  // TODO: this is a temporary solution and should be revised on component update
50
52
  // NOTE: this is needed due to design changes. The size of the component is calculated from "em" which means it is
@@ -197,7 +199,7 @@ const generateStyle = (componentTheme, params) => {
197
199
  }),
198
200
  boxShadow: `inset 0 0 ${componentTheme.boxShadowBlur} 0 ${componentTheme.boxShadowColor}`
199
201
  } : {
200
- backgroundImage: void 0,
202
+ backgroundImage: undefined,
201
203
  ...(hasInverseColor && {
202
204
  border: 0,
203
205
  padding: sizeStyles[size].borderWidth,
package/lib/Avatar/v1/theme.js CHANGED
@@ -35,31 +35,32 @@ var _alpha = require("@instructure/ui-color-utils/lib/alpha.js");
35
35
  * @return The final theme object with the overrides and component variables
36
36
  */
37
37
  const generateComponentTheme = theme => {
38
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts0, _colors$contrasts1, _colors$contrasts10;
39
- const colors = theme.colors,
40
- borders = theme.borders,
41
- typography = theme.typography;
38
+ const {
39
+ colors,
40
+ borders,
41
+ typography
42
+ } = theme;
42
43
  const componentVariables = {
43
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
44
- borderWidthSmall: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
45
- borderWidthMedium: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
46
- borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey3045,
44
+ background: colors?.contrasts?.white1010,
45
+ borderWidthSmall: borders?.widthSmall,
46
+ borderWidthMedium: borders?.widthMedium,
47
+ borderColor: colors?.contrasts?.grey3045,
47
48
  boxShadowColor: (0, _alpha.alpha)('#2d3b45', 12),
48
49
  boxShadowBlur: '1rem',
49
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
50
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
50
+ fontFamily: typography?.fontFamily,
51
+ fontWeight: typography?.fontWeightBold,
51
52
  // these colors have sufficient contrast with the white background
52
53
  // in the normal and high contrast themes
53
- color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
54
- colorShamrock: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.green4570,
55
- colorBarney: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue4570,
56
- colorCrimson: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.red4570,
57
- colorFire: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.orange4570,
58
- colorLicorice: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey125125,
59
- colorAsh: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.grey4570,
60
- aiTopGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts0 = colors.contrasts) === null || _colors$contrasts0 === void 0 ? void 0 : _colors$contrasts0.violet4570,
61
- aiBottomGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts1 = colors.contrasts) === null || _colors$contrasts1 === void 0 ? void 0 : _colors$contrasts1.sea4570,
62
- aiFontColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.white1010
54
+ color: colors?.contrasts?.blue4570,
55
+ colorShamrock: colors?.contrasts?.green4570,
56
+ colorBarney: colors?.contrasts?.blue4570,
57
+ colorCrimson: colors?.contrasts?.red4570,
58
+ colorFire: colors?.contrasts?.orange4570,
59
+ colorLicorice: colors?.contrasts?.grey125125,
60
+ colorAsh: colors?.contrasts?.grey4570,
61
+ aiTopGradientColor: colors?.contrasts?.violet4570,
62
+ aiBottomGradientColor: colors?.contrasts?.sea4570,
63
+ aiFontColor: colors?.contrasts?.white1010
63
64
  };
64
65
  return {
65
66
  ...componentVariables
package/lib/Avatar/v2/index.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.Avatar = void 0;
8
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
8
  var _emotion = require("@instructure/emotion");
10
9
  var _react = require("react");
11
10
  var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
@@ -53,30 +52,22 @@ category: components
53
52
  ---
54
53
  **/
55
54
  const Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
56
- const _props$size = props.size,
57
- size = _props$size === void 0 ? 'medium' : _props$size,
58
- _props$color = props.color,
59
- color = _props$color === void 0 ? 'accent1' : _props$color,
60
- _props$hasInverseColo = props.hasInverseColor,
61
- hasInverseColor = _props$hasInverseColo === void 0 ? false : _props$hasInverseColo,
62
- _props$showBorder = props.showBorder,
63
- showBorder = _props$showBorder === void 0 ? 'auto' : _props$showBorder,
64
- _props$shape = props.shape,
65
- shape = _props$shape === void 0 ? 'circle' : _props$shape,
66
- _props$display = props.display,
67
- display = _props$display === void 0 ? 'inline' : _props$display,
68
- _props$onImageLoaded = props.onImageLoaded,
69
- onImageLoaded = _props$onImageLoaded === void 0 ? _event => {} : _props$onImageLoaded,
70
- src = props.src,
71
- name = props.name,
72
- renderIcon = props.renderIcon,
73
- alt = props.alt,
74
- themeOverride = props.themeOverride,
75
- margin = props.margin;
76
- const _useState = (0, _react.useState)(false),
77
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
78
- loaded = _useState2[0],
79
- setLoaded = _useState2[1];
55
+ const {
56
+ size = 'medium',
57
+ color = 'accent1',
58
+ hasInverseColor = false,
59
+ showBorder = 'auto',
60
+ shape = 'circle',
61
+ display = 'inline',
62
+ onImageLoaded = _event => {},
63
+ src,
64
+ name,
65
+ renderIcon,
66
+ alt,
67
+ themeOverride,
68
+ margin
69
+ } = props;
70
+ const [loaded, setLoaded] = (0, _react.useState)(false);
80
71
  const styles = (0, _emotion.useStyle)({
81
72
  generateStyle: _styles.default,
82
73
  themeOverride,
@@ -164,9 +155,9 @@ const Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
164
155
  ...props
165
156
  }),
166
157
  ref: ref,
167
- "aria-label": alt ? alt : void 0,
168
- role: alt ? 'img' : void 0,
169
- css: styles === null || styles === void 0 ? void 0 : styles.avatar,
158
+ "aria-label": alt ? alt : undefined,
159
+ role: alt ? 'img' : undefined,
160
+ css: styles?.avatar,
170
161
  children: renderContent()
171
162
  });
172
163
  });
package/lib/Avatar/v2/styles.js CHANGED
@@ -40,14 +40,16 @@ var _emotion = require("@instructure/emotion");
40
40
  * @return The final style object, which will be used in the component
41
41
  */
42
42
  const generateStyle = (componentTheme, params, sharedTokens) => {
43
- const loaded = params.loaded,
44
- size = params.size,
45
- color = params.color,
46
- hasInverseColor = params.hasInverseColor,
47
- shape = params.shape,
48
- showBorder = params.showBorder,
49
- display = params.display,
50
- margin = params.margin;
43
+ const {
44
+ loaded,
45
+ size,
46
+ color,
47
+ hasInverseColor,
48
+ shape,
49
+ showBorder,
50
+ display,
51
+ margin
52
+ } = params;
51
53
  const sizeStyles = {
52
54
  'xx-small': {
53
55
  fontSize: componentTheme.fontSize2xs,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-avatar",
3
- "version": "11.7.3-snapshot-7",
3
+ "version": "11.7.3-snapshot-26",
4
4
  "description": "An image or letters that represents a user.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -14,21 +14,21 @@
14
14
  "bugs": "https://github.com/instructure/instructure-ui/issues",
15
15
  "license": "MIT",
16
16
  "dependencies": {
17
- "@babel/runtime": "^7.27.6",
18
- "@instructure/emotion": "11.7.3-snapshot-7",
19
- "@instructure/ui-icons": "11.7.3-snapshot-7",
20
- "@instructure/ui-react-utils": "11.7.3-snapshot-7",
21
- "@instructure/ui-themes": "11.7.3-snapshot-7",
22
- "@instructure/shared-types": "11.7.3-snapshot-7",
23
- "@instructure/ui-view": "11.7.3-snapshot-7"
17
+ "@babel/runtime": "^7.29.2",
18
+ "@instructure/emotion": "11.7.3-snapshot-26",
19
+ "@instructure/shared-types": "11.7.3-snapshot-26",
20
+ "@instructure/ui-icons": "11.7.3-snapshot-26",
21
+ "@instructure/ui-react-utils": "11.7.3-snapshot-26",
22
+ "@instructure/ui-themes": "11.7.3-snapshot-26",
23
+ "@instructure/ui-view": "11.7.3-snapshot-26"
24
24
  },
25
25
  "devDependencies": {
26
26
  "@testing-library/jest-dom": "^6.6.3",
27
27
  "@testing-library/react": "15.0.7",
28
28
  "vitest": "^3.2.2",
29
- "@instructure/ui-axe-check": "11.7.3-snapshot-7",
30
- "@instructure/ui-babel-preset": "11.7.3-snapshot-7",
31
- "@instructure/ui-color-utils": "11.7.3-snapshot-7"
29
+ "@instructure/ui-babel-preset": "11.7.3-snapshot-26",
30
+ "@instructure/ui-color-utils": "11.7.3-snapshot-26",
31
+ "@instructure/ui-axe-check": "11.7.3-snapshot-26"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "react": ">=18 <=19"