@zendeskgarden/react-avatars 8.57.1 → 8.58.0

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 (3) hide show
  1. package/dist/index.cjs.js +145 -277
  2. package/dist/index.esm.js +145 -277
  3. package/package.json +3 -3
package/dist/index.cjs.js CHANGED
@@ -44,114 +44,17 @@ function _extends$4() {
44
44
  _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
45
45
  for (var i = 1; i < arguments.length; i++) {
46
46
  var source = arguments[i];
47
-
48
47
  for (var key in source) {
49
48
  if (Object.prototype.hasOwnProperty.call(source, key)) {
50
49
  target[key] = source[key];
51
50
  }
52
51
  }
53
52
  }
54
-
55
53
  return target;
56
54
  };
57
55
  return _extends$4.apply(this, arguments);
58
56
  }
59
57
 
60
- function _objectWithoutPropertiesLoose(source, excluded) {
61
- if (source == null) return {};
62
- var target = {};
63
- var sourceKeys = Object.keys(source);
64
- var key, i;
65
-
66
- for (i = 0; i < sourceKeys.length; i++) {
67
- key = sourceKeys[i];
68
- if (excluded.indexOf(key) >= 0) continue;
69
- target[key] = source[key];
70
- }
71
-
72
- return target;
73
- }
74
-
75
- function _objectWithoutProperties(source, excluded) {
76
- if (source == null) return {};
77
-
78
- var target = _objectWithoutPropertiesLoose(source, excluded);
79
-
80
- var key, i;
81
-
82
- if (Object.getOwnPropertySymbols) {
83
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
84
-
85
- for (i = 0; i < sourceSymbolKeys.length; i++) {
86
- key = sourceSymbolKeys[i];
87
- if (excluded.indexOf(key) >= 0) continue;
88
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
89
- target[key] = source[key];
90
- }
91
- }
92
-
93
- return target;
94
- }
95
-
96
- function _slicedToArray(arr, i) {
97
- return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
98
- }
99
-
100
- function _arrayWithHoles(arr) {
101
- if (Array.isArray(arr)) return arr;
102
- }
103
-
104
- function _iterableToArrayLimit(arr, i) {
105
- var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
106
-
107
- if (_i == null) return;
108
- var _arr = [];
109
- var _n = true;
110
- var _d = false;
111
-
112
- var _s, _e;
113
-
114
- try {
115
- for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
116
- _arr.push(_s.value);
117
-
118
- if (i && _arr.length === i) break;
119
- }
120
- } catch (err) {
121
- _d = true;
122
- _e = err;
123
- } finally {
124
- try {
125
- if (!_n && _i["return"] != null) _i["return"]();
126
- } finally {
127
- if (_d) throw _e;
128
- }
129
- }
130
-
131
- return _arr;
132
- }
133
-
134
- function _unsupportedIterableToArray(o, minLen) {
135
- if (!o) return;
136
- if (typeof o === "string") return _arrayLikeToArray(o, minLen);
137
- var n = Object.prototype.toString.call(o).slice(8, -1);
138
- if (n === "Object" && o.constructor) n = o.constructor.name;
139
- if (n === "Map" || n === "Set") return Array.from(o);
140
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
141
- }
142
-
143
- function _arrayLikeToArray(arr, len) {
144
- if (len == null || len > arr.length) len = arr.length;
145
-
146
- for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
147
-
148
- return arr2;
149
- }
150
-
151
- function _nonIterableRest() {
152
- throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
153
- }
154
-
155
58
  var _g$1;
156
59
 
157
60
  function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
@@ -163,7 +66,8 @@ var SvgClockStroke$1 = function SvgClockStroke(props) {
163
66
  height: 12,
164
67
  focusable: "false",
165
68
  viewBox: "0 0 12 12",
166
- "aria-hidden": "true"
69
+ "aria-hidden": "true",
70
+ role: "img"
167
71
  }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
168
72
  fill: "none",
169
73
  stroke: "currentColor"
@@ -189,7 +93,8 @@ var SvgClockStroke = function SvgClockStroke(props) {
189
93
  height: 16,
190
94
  focusable: "false",
191
95
  viewBox: "0 0 16 16",
192
- "aria-hidden": "true"
96
+ "aria-hidden": "true",
97
+ role: "img"
193
98
  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
194
99
  fill: "none",
195
100
  stroke: "currentColor"
@@ -215,7 +120,8 @@ var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
215
120
  height: 12,
216
121
  focusable: "false",
217
122
  viewBox: "0 0 12 12",
218
- "aria-hidden": "true"
123
+ "aria-hidden": "true",
124
+ role: "img"
219
125
  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
220
126
  fill: "currentColor",
221
127
  d: "M2.146 6.854a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L3.707 6H9.5a.5.5 0 0 1 0 1H3.707l1.147 1.146a.5.5 0 1 1-.708.708l-2-2Z"
@@ -233,37 +139,31 @@ var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
233
139
  height: 16,
234
140
  focusable: "false",
235
141
  viewBox: "0 0 16 16",
236
- "aria-hidden": "true"
142
+ "aria-hidden": "true",
143
+ role: "img"
237
144
  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
238
145
  fill: "currentColor",
239
146
  d: "M3.146 8.854a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L4.707 8H12.5a.5.5 0 0 1 0 1H4.707l2.147 2.146a.5.5 0 1 1-.708.707l-3-3Z"
240
147
  })));
241
148
  };
242
149
 
243
- var SIZE = ['extraextrasmall', 'extrasmall', 'small', 'medium', 'large'];
244
- var STATUS = ['available', 'away', 'transfers', 'offline'];
150
+ const SIZE = ['extraextrasmall', 'extrasmall', 'small', 'medium', 'large'];
151
+ const STATUS = ['available', 'away', 'transfers', 'offline'];
245
152
 
246
- var COMPONENT_ID$6 = 'avatars.text';
247
- var StyledText = styled__default["default"].span.attrs({
153
+ const COMPONENT_ID$6 = 'avatars.text';
154
+ const StyledText = styled__default["default"].span.attrs({
248
155
  'data-garden-id': COMPONENT_ID$6,
249
- 'data-garden-version': '8.57.1'
156
+ 'data-garden-version': '8.58.0'
250
157
  }).withConfig({
251
158
  displayName: "StyledText",
252
159
  componentId: "sc-1a6hivh-0"
253
- })(["overflow:hidden;text-align:center;white-space:nowrap;", ";"], function (props) {
254
- return reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props);
255
- });
160
+ })(["overflow:hidden;text-align:center;white-space:nowrap;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
256
161
  StyledText.defaultProps = {
257
162
  theme: reactTheming.DEFAULT_THEME
258
163
  };
259
164
 
260
- var _SIZE$1 = _slicedToArray(SIZE, 5),
261
- xxs$1 = _SIZE$1[0],
262
- xs$1 = _SIZE$1[1],
263
- s$1 = _SIZE$1[2],
264
- m$1 = _SIZE$1[3],
265
- l$1 = _SIZE$1[4];
266
- var TRANSITION_DURATION = 0.25;
165
+ const [xxs$1, xs$1, s$1, m$1, l$1] = SIZE;
166
+ const TRANSITION_DURATION = 0.25;
267
167
  function getStatusColor(type, theme) {
268
168
  switch (type) {
269
169
  case 'active':
@@ -281,20 +181,20 @@ function getStatusColor(type, theme) {
281
181
  }
282
182
  }
283
183
  function getStatusBorderOffset(props) {
284
- return props.size === xxs$1 ? polished.math("".concat(props.theme.shadowWidths.sm, " - 1")) : props.theme.shadowWidths.sm;
184
+ return props.size === xxs$1 ? polished.math(`${props.theme.shadowWidths.sm} - 1`) : props.theme.shadowWidths.sm;
285
185
  }
286
186
  function getStatusSize(props, offset) {
287
- var isActive = props.type === 'active';
187
+ const isActive = props.type === 'active';
288
188
  switch (props.size) {
289
189
  case xxs$1:
290
- return polished.math("".concat(props.theme.space.base, "px - ").concat(offset));
190
+ return polished.math(`${props.theme.space.base}px - ${offset}`);
291
191
  case xs$1:
292
- return polished.math("".concat(props.theme.space.base * 2, "px - (").concat(offset, " * 2)"));
192
+ return polished.math(`${props.theme.space.base * 2}px - (${offset} * 2)`);
293
193
  case s$1:
294
- return polished.math("".concat(props.theme.space.base * 3, "px ").concat(isActive ? '' : "- (".concat(offset, " * 2)")));
194
+ return polished.math(`${props.theme.space.base * 3}px ${isActive ? '' : `- (${offset} * 2)`}`);
295
195
  case m$1:
296
196
  case l$1:
297
- return polished.math("".concat(props.theme.space.base * 4, "px ").concat(isActive ? '' : "- (".concat(offset, " * 2)")));
197
+ return polished.math(`${props.theme.space.base * 4}px ${isActive ? '' : `- (${offset} * 2)`}`);
298
198
  default:
299
199
  return '0';
300
200
  }
@@ -303,253 +203,224 @@ function includes(array, element) {
303
203
  return array.includes(element);
304
204
  }
305
205
 
306
- var COMPONENT_ID$5 = 'avatars.status-indicator.base';
307
- var iconFadeIn = styled.keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
308
- var sizeStyles$3 = function sizeStyles(props) {
309
- var offset = getStatusBorderOffset(props);
310
- var size = getStatusSize(props, offset);
206
+ const COMPONENT_ID$5 = 'avatars.status-indicator.base';
207
+ const iconFadeIn = styled.keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
208
+ const sizeStyles$3 = props => {
209
+ const offset = getStatusBorderOffset(props);
210
+ const size = getStatusSize(props, offset);
311
211
  return styled.css(["border:", " ", ";border-radius:", ";width:", ";min-width:", ";height:", ";line-height:", ";& > svg{position:absolute;top:-", ";left:-", ";transform-origin:50% 50%;animation:", " ", "s;max-height:unset;&[data-icon-status='transfers']{transform:scale(", ",1);}&[data-icon-status='away'] circle{display:none;}}"], offset, props.theme.borderStyles.solid, size, size, size, size, size, offset, offset, iconFadeIn, TRANSITION_DURATION, props.theme.rtl ? -1 : 1);
312
212
  };
313
- var colorStyles$2 = function colorStyles(props) {
314
- var backgroundColor = getStatusColor(props.type, props.theme);
315
- var borderColor = backgroundColor;
213
+ const colorStyles$2 = props => {
214
+ let backgroundColor = getStatusColor(props.type, props.theme);
215
+ let borderColor = backgroundColor;
316
216
  if (props.type === 'offline') {
317
217
  borderColor = getStatusColor(props.type, props.theme);
318
218
  backgroundColor = props.theme.palette.white;
319
219
  }
320
220
  return styled.css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, props.theme.palette.white);
321
221
  };
322
- var StyledStatusIndicatorBase = styled__default["default"].div.attrs({
222
+ const StyledStatusIndicatorBase = styled__default["default"].div.attrs({
323
223
  'data-garden-id': COMPONENT_ID$5,
324
- 'data-garden-version': '8.57.1'
224
+ 'data-garden-version': '8.58.0'
325
225
  }).withConfig({
326
226
  displayName: "StyledStatusIndicatorBase",
327
227
  componentId: "sc-1rininy-0"
328
- })(["transition:inherit;", " ", " ", ";"], sizeStyles$3, colorStyles$2, function (props) {
329
- return reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props);
330
- });
228
+ })(["transition:inherit;", " ", " ", ";"], sizeStyles$3, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
331
229
  StyledStatusIndicatorBase.defaultProps = {
332
230
  theme: reactTheming.DEFAULT_THEME,
333
231
  size: 'small'
334
232
  };
335
233
 
336
- var COMPONENT_ID$4 = 'avatars.status_indicator';
337
- var _SIZE = _slicedToArray(SIZE, 5),
338
- xxs = _SIZE[0],
339
- xs = _SIZE[1],
340
- s = _SIZE[2],
341
- m = _SIZE[3],
342
- l = _SIZE[4];
343
- var sizeStyles$2 = function sizeStyles(props) {
344
- var isVisible = !includes([xxs, xs], props.size);
345
- var borderWidth = getStatusBorderOffset(props);
346
- var padding = '0';
234
+ const COMPONENT_ID$4 = 'avatars.status_indicator';
235
+ const [xxs, xs, s, m, l] = SIZE;
236
+ const sizeStyles$2 = props => {
237
+ const isVisible = !includes([xxs, xs], props.size);
238
+ const borderWidth = getStatusBorderOffset(props);
239
+ let padding = '0';
347
240
  if (props.size === s) {
348
- padding = polished.math("".concat(props.theme.space.base + 1, "px - (").concat(borderWidth, " * 2)"));
241
+ padding = polished.math(`${props.theme.space.base + 1}px - (${borderWidth} * 2)`);
349
242
  } else if (includes([m, l], props.size)) {
350
- padding = polished.math("".concat(props.theme.space.base + 3, "px - (").concat(borderWidth, " * 2)"));
243
+ padding = polished.math(`${props.theme.space.base + 3}px - (${borderWidth} * 2)`);
351
244
  }
352
245
  return styled.css(["max-width:calc(2em + (", " * 3));box-sizing:content-box;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:", ";font-weight:", ";& > span{display:", ";padding:0 ", ";max-width:2em;overflow:inherit;text-align:inherit;text-overflow:inherit;white-space:inherit;}& > svg{", "}"], borderWidth, props.theme.fontSizes.xs, props.theme.fontWeights.semibold, isVisible ? 'inline-block' : 'none', padding, !isVisible && 'display: none;');
353
246
  };
354
- var colorStyles$1 = function colorStyles(props) {
355
- var theme = props.theme,
356
- type = props.type,
357
- size = props.size,
358
- foregroundColor = props.foregroundColor,
359
- backgroundColor = props.backgroundColor,
360
- borderColor = props.borderColor,
361
- surfaceColor = props.surfaceColor;
362
- var boxShadow = theme.shadows.sm(surfaceColor || (type ? theme.colors.background : theme.palette.white));
247
+ const colorStyles$1 = props => {
248
+ const {
249
+ theme,
250
+ type,
251
+ size,
252
+ borderColor,
253
+ surfaceColor
254
+ } = props;
255
+ let boxShadow = theme.shadows.sm(surfaceColor || (type ? theme.colors.background : theme.palette.white));
363
256
  if (size === xxs) {
364
257
  boxShadow = boxShadow.replace(theme.shadowWidths.sm, '1px');
365
258
  }
366
- return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";"], borderColor, boxShadow, backgroundColor, foregroundColor);
259
+ return styled.css(["border-color:", ";box-shadow:", ";"], borderColor, boxShadow);
367
260
  };
368
- var StyledStatusIndicator = styled__default["default"](StyledStatusIndicatorBase).attrs({
261
+ const StyledStatusIndicator = styled__default["default"](StyledStatusIndicatorBase).attrs({
369
262
  'data-garden-id': COMPONENT_ID$4,
370
- 'data-garden-version': '8.57.1'
263
+ 'data-garden-version': '8.58.0'
371
264
  }).withConfig({
372
265
  displayName: "StyledStatusIndicator",
373
266
  componentId: "sc-16t9if3-0"
374
- })(["", " ", " ", ";"], sizeStyles$2, colorStyles$1, function (props) {
375
- return reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props);
376
- });
267
+ })(["", " ", " ", ";"], sizeStyles$2, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
377
268
  StyledStatusIndicator.defaultProps = {
378
269
  size: 'medium',
379
270
  theme: reactTheming.DEFAULT_THEME
380
271
  };
381
272
 
382
- var COMPONENT_ID$3 = 'avatars.avatar';
383
- var badgeStyles = function badgeStyles(props) {
384
- var _SIZE = _slicedToArray(SIZE, 5),
385
- xxs = _SIZE[0],
386
- xs = _SIZE[1],
387
- s = _SIZE[2],
388
- m = _SIZE[3],
389
- l = _SIZE[4];
390
- var position = "".concat(props.theme.space.base * -1, "px");
273
+ const COMPONENT_ID$3 = 'avatars.avatar';
274
+ const badgeStyles = props => {
275
+ const [xxs, xs, s, m, l] = SIZE;
276
+ let position = `${props.theme.space.base * -1}px`;
391
277
  switch (props.size) {
392
278
  case s:
393
279
  case m:
394
- position = polished.math("".concat(position, " + 2"));
280
+ position = polished.math(`${position} + 2`);
395
281
  break;
396
282
  case xxs:
397
283
  case xs:
398
284
  case l:
399
- position = polished.math("".concat(position, " + 3"));
285
+ position = polished.math(`${position} + 3`);
400
286
  break;
401
287
  }
402
- var animation = styled.keyframes(["0%{transform:scale(.1);}"]);
288
+ const animation = styled.keyframes(["0%{transform:scale(.1);}"]);
403
289
  return styled.css(["position:absolute;", ":", ";bottom:", ";transition:all ", "s ease-in-out;", ""], props.theme.rtl ? 'left' : 'right', position, position, TRANSITION_DURATION, props.status === 'active' && styled.css(["animation:", " ", "s ease-in-out;"], animation, TRANSITION_DURATION * 1.5));
404
290
  };
405
- var colorStyles = function colorStyles(props) {
406
- var statusColor = getStatusColor(props.status, props.theme);
407
- var backgroundColor = props.backgroundColor || 'transparent';
408
- var foregroundColor = props.foregroundColor || props.theme.palette.white;
409
- var surfaceColor = props.status ? props.surfaceColor || props.theme.colors.background : 'transparent';
291
+ const colorStyles = props => {
292
+ const statusColor = getStatusColor(props.status, props.theme);
293
+ const backgroundColor = props.backgroundColor || 'transparent';
294
+ const foregroundColor = props.foregroundColor || props.theme.palette.white;
295
+ const surfaceColor = props.status ? props.surfaceColor || props.theme.colors.background : 'transparent';
410
296
  return styled.css(["box-shadow:", ";background-color:", ";color:", ";& > svg,& ", "{color:", ";}"], props.theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
411
297
  };
412
- var sizeStyles$1 = function sizeStyles(props) {
413
- var boxShadow;
414
- var borderRadius;
415
- var size;
416
- var fontSize;
417
- var svgSize;
298
+ const sizeStyles$1 = props => {
299
+ let boxShadow;
300
+ let borderRadius;
301
+ let size;
302
+ let fontSize;
303
+ let svgSize;
418
304
  if (props.size === 'extraextrasmall') {
419
- boxShadow = "0 0 0 ".concat(polished.math("".concat(props.theme.shadowWidths.sm, " - 1")));
420
- borderRadius = props.isSystem ? polished.math("".concat(props.theme.borderRadii.md, " - 1")) : '50%';
421
- size = "".concat(props.theme.space.base * 4, "px");
305
+ boxShadow = `0 0 0 ${polished.math(`${props.theme.shadowWidths.sm} - 1`)}`;
306
+ borderRadius = props.isSystem ? polished.math(`${props.theme.borderRadii.md} - 1`) : '50%';
307
+ size = `${props.theme.space.base * 4}px`;
422
308
  fontSize = 0;
423
- svgSize = "".concat(props.theme.space.base * 3, "px");
309
+ svgSize = `${props.theme.space.base * 3}px`;
424
310
  } else if (props.size === 'extrasmall') {
425
- boxShadow = "inset 0 0 0 ".concat(props.theme.shadowWidths.sm);
426
- borderRadius = props.isSystem ? polished.math("".concat(props.theme.borderRadii.md, " - 1")) : '50%';
427
- size = "".concat(props.theme.space.base * 6, "px");
311
+ boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
312
+ borderRadius = props.isSystem ? polished.math(`${props.theme.borderRadii.md} - 1`) : '50%';
313
+ size = `${props.theme.space.base * 6}px`;
428
314
  fontSize = props.theme.fontSizes.sm;
429
- svgSize = "".concat(props.theme.space.base * 3, "px");
315
+ svgSize = `${props.theme.space.base * 3}px`;
430
316
  } else if (props.size === 'small') {
431
- boxShadow = "inset 0 0 0 ".concat(props.theme.shadowWidths.sm);
432
- borderRadius = props.isSystem ? polished.math("".concat(props.theme.borderRadii.md, " - 1")) : '50%';
433
- size = "".concat(props.theme.space.base * 8, "px");
317
+ boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
318
+ borderRadius = props.isSystem ? polished.math(`${props.theme.borderRadii.md} - 1`) : '50%';
319
+ size = `${props.theme.space.base * 8}px`;
434
320
  fontSize = props.theme.fontSizes.md;
435
- svgSize = "".concat(props.theme.space.base * 3, "px");
321
+ svgSize = `${props.theme.space.base * 3}px`;
436
322
  } else if (props.size === 'large') {
437
- boxShadow = "inset 0 0 0 ".concat(props.theme.shadowWidths.sm);
438
- borderRadius = props.isSystem ? polished.math("".concat(props.theme.borderRadii.md, " + 1")) : '50%';
439
- size = "".concat(props.theme.space.base * 12, "px");
323
+ boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
324
+ borderRadius = props.isSystem ? polished.math(`${props.theme.borderRadii.md} + 1`) : '50%';
325
+ size = `${props.theme.space.base * 12}px`;
440
326
  fontSize = props.theme.fontSizes.xl;
441
- svgSize = "".concat(props.theme.space.base * 6, "px");
327
+ svgSize = `${props.theme.space.base * 6}px`;
442
328
  } else {
443
- boxShadow = "inset 0 0 0 ".concat(props.theme.shadowWidths.sm);
329
+ boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
444
330
  borderRadius = props.isSystem ? props.theme.borderRadii.md : '50%';
445
- size = "".concat(props.theme.space.base * 10, "px");
331
+ size = `${props.theme.space.base * 10}px`;
446
332
  fontSize = props.theme.fontSizes.lg;
447
- svgSize = "".concat(props.theme.space.base * 4, "px");
333
+ svgSize = `${props.theme.space.base * 4}px`;
448
334
  }
449
335
  return styled.css(["border-radius:", ";width:", " !important;height:", " !important;::before{box-shadow:", ";}& > svg{font-size:", ";}& ", "{line-height:", ";font-size:", ";}"], borderRadius, size, size, boxShadow, svgSize, StyledText, size, fontSize);
450
336
  };
451
- var StyledAvatar = styled__default["default"].figure.attrs({
337
+ const StyledAvatar = styled__default["default"].figure.attrs({
452
338
  'data-garden-id': COMPONENT_ID$3,
453
- 'data-garden-version': '8.57.1'
339
+ 'data-garden-version': '8.58.0'
454
340
  }).withConfig({
455
341
  displayName: "StyledAvatar",
456
342
  componentId: "sc-608m04-0"
457
- })(["display:inline-flex;position:relative;align-items:center;justify-content:center;transition:box-shadow ", "s ease-in-out,color 0.1s ease-in-out;margin:0;vertical-align:middle;box-sizing:border-box;", ";", ";&::before{position:absolute;top:0;left:0;transition:box-shadow ", "s ease-in-out;content:'';}&::before,&& > img{border-radius:inherit;width:100%;height:100%;}&& > img{box-sizing:inherit;vertical-align:bottom;object-fit:cover;}&& > svg{width:1em;height:1em;}& > ", "{", ";}", ";"], TRANSITION_DURATION, function (props) {
458
- return sizeStyles$1(props);
459
- }, function (props) {
460
- return colorStyles(props);
461
- }, TRANSITION_DURATION, StyledStatusIndicator, badgeStyles, function (props) {
462
- return reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
463
- });
343
+ })(["display:inline-flex;position:relative;align-items:center;justify-content:center;transition:box-shadow ", "s ease-in-out,color 0.1s ease-in-out;margin:0;vertical-align:middle;box-sizing:border-box;", ";", ";&::before{position:absolute;top:0;left:0;transition:box-shadow ", "s ease-in-out;content:'';}&::before,&& > img{border-radius:inherit;width:100%;height:100%;}&& > img{box-sizing:inherit;vertical-align:bottom;object-fit:cover;}&& > svg{width:1em;height:1em;}& > ", "{", ";}", ";"], TRANSITION_DURATION, props => sizeStyles$1(props), props => colorStyles(props), TRANSITION_DURATION, StyledStatusIndicator, badgeStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
464
344
  StyledAvatar.defaultProps = {
465
345
  size: 'medium',
466
346
  theme: reactTheming.DEFAULT_THEME
467
347
  };
468
348
 
469
- var COMPONENT_ID$2 = 'avatars.status-indicator.status';
470
- var StyledStandaloneStatus = styled__default["default"].figure.attrs({
349
+ const COMPONENT_ID$2 = 'avatars.status-indicator.status';
350
+ const StyledStandaloneStatus = styled__default["default"].figure.attrs({
471
351
  'data-garden-id': COMPONENT_ID$2,
472
- 'data-garden-version': '8.57.1'
352
+ 'data-garden-version': '8.58.0'
473
353
  }).withConfig({
474
354
  displayName: "StyledStandaloneStatus",
475
355
  componentId: "sc-1ow4nfj-0"
476
- })(["display:inline-flex;flex-flow:row nowrap;transition:all ", "s ease-in-out;margin:0;box-sizing:content-box;", ";"], TRANSITION_DURATION, function (props) {
477
- return reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props);
478
- });
356
+ })(["display:inline-flex;flex-flow:row nowrap;transition:all ", "s ease-in-out;margin:0;box-sizing:content-box;", ";"], TRANSITION_DURATION, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
479
357
  StyledStandaloneStatus.defaultProps = {
480
358
  theme: reactTheming.DEFAULT_THEME
481
359
  };
482
360
 
483
- var COMPONENT_ID$1 = 'avatars.status-indicator.caption';
361
+ const COMPONENT_ID$1 = 'avatars.status-indicator.caption';
484
362
  function sizeStyles(props) {
485
- var marginRule = "margin-".concat(props.theme.rtl ? 'right' : 'left', ": ").concat(props.theme.space.base * 2, "px;");
363
+ const marginRule = `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 2}px;`;
486
364
  return styled.css(["", " line-height:", ";font-size:", ";"], marginRule, reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props.theme.fontSizes.md);
487
365
  }
488
- var StyledStandaloneStatusCaption = styled__default["default"].figcaption.attrs({
366
+ const StyledStandaloneStatusCaption = styled__default["default"].figcaption.attrs({
489
367
  'data-garden-id': COMPONENT_ID$1,
490
- 'data-garden-version': '8.57.1'
368
+ 'data-garden-version': '8.58.0'
491
369
  }).withConfig({
492
370
  displayName: "StyledStandaloneStatusCaption",
493
371
  componentId: "sc-aalyk1-0"
494
- })(["", " ", ";"], sizeStyles, function (props) {
495
- return reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
496
- });
372
+ })(["", " ", ";"], sizeStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
497
373
  StyledStandaloneStatusCaption.defaultProps = {
498
374
  theme: reactTheming.DEFAULT_THEME
499
375
  };
500
376
 
501
- var COMPONENT_ID = 'avatars.status-indicator.indicator';
502
- var StyledStandaloneStatusIndicator = styled__default["default"](StyledStatusIndicatorBase).attrs({
377
+ const COMPONENT_ID = 'avatars.status-indicator.indicator';
378
+ const StyledStandaloneStatusIndicator = styled__default["default"](StyledStatusIndicatorBase).attrs({
503
379
  'data-garden-id': COMPONENT_ID,
504
- 'data-garden-version': '8.57.1'
380
+ 'data-garden-version': '8.58.0'
505
381
  }).withConfig({
506
382
  displayName: "StyledStandaloneStatusIndicator",
507
383
  componentId: "sc-1xt1heq-0"
508
- })(["position:relative;margin-top:", ";", ";"], function (props) {
509
- return "calc((".concat(props.theme.lineHeights.md, " - ").concat(getStatusSize(props, '0'), ") / 2)");
510
- }, function (props) {
511
- return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
512
- });
384
+ })(["position:relative;margin-top:", ";", ";"], props => `calc((${props.theme.lineHeights.md} - ${getStatusSize(props, '0')}) / 2)`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
513
385
  StyledStandaloneStatusIndicator.defaultProps = {
514
386
  type: 'offline',
515
387
  theme: reactTheming.DEFAULT_THEME
516
388
  };
517
389
 
518
- var TextComponent = React.forwardRef(function (props, ref) {
519
- return React__default["default"].createElement(StyledText, _extends$4({
520
- ref: ref
521
- }, props));
522
- });
390
+ const TextComponent = React.forwardRef((props, ref) => React__default["default"].createElement(StyledText, _extends$4({
391
+ ref: ref
392
+ }, props)));
523
393
  TextComponent.displayName = 'Avatar.Text';
524
- var Text = TextComponent;
525
-
526
- var _excluded$1 = ["isSystem", "size", "status", "children", "badge", "surfaceColor", "backgroundColor", "foregroundColor"];
527
- var AvatarComponent = React.forwardRef(function (_ref, ref) {
528
- var isSystem = _ref.isSystem,
529
- size = _ref.size,
530
- status = _ref.status,
531
- children = _ref.children,
532
- badge = _ref.badge,
533
- surfaceColor = _ref.surfaceColor,
534
- backgroundColor = _ref.backgroundColor,
535
- foregroundColor = _ref.foregroundColor,
536
- props = _objectWithoutProperties(_ref, _excluded$1);
537
- var computedStatus = badge === undefined ? status : 'active';
538
- var ClockIcon = SvgClockStroke$1;
539
- var ArrowLeftIcon = SvgArrowLeftSmStroke$1;
394
+ const Text = TextComponent;
395
+
396
+ const AvatarComponent = React.forwardRef((_ref, ref) => {
397
+ let {
398
+ isSystem,
399
+ size,
400
+ status,
401
+ children,
402
+ badge,
403
+ surfaceColor,
404
+ backgroundColor,
405
+ foregroundColor,
406
+ ...props
407
+ } = _ref;
408
+ const computedStatus = badge === undefined ? status : 'active';
409
+ let ClockIcon = SvgClockStroke$1;
410
+ let ArrowLeftIcon = SvgArrowLeftSmStroke$1;
540
411
  if (['large', 'medium'].includes(size)) {
541
412
  ClockIcon = SvgClockStroke;
542
413
  ArrowLeftIcon = SvgArrowLeftSmStroke;
543
414
  }
544
- var defaultStatusLabel = React.useMemo(function () {
545
- var statusMessage = computedStatus;
415
+ const defaultStatusLabel = React.useMemo(() => {
416
+ let statusMessage = computedStatus;
546
417
  if (computedStatus === 'active') {
547
- var count = typeof badge === 'string' ? parseInt(badge, 10) : badge;
548
- statusMessage = "active. ".concat(count > 0 ? "".concat(count, " notification").concat(count > 1 ? 's' : '') : 'no notifications');
418
+ const count = typeof badge === 'string' ? parseInt(badge, 10) : badge;
419
+ statusMessage = `active. ${count > 0 ? `${count} notification${count > 1 ? 's' : ''}` : 'no notifications'}`;
549
420
  }
550
421
  return ['status'].concat(statusMessage || []).join(': ');
551
422
  }, [computedStatus, badge]);
552
- var statusLabel = reactTheming.useText(AvatarComponent, props, 'statusLabel', defaultStatusLabel);
423
+ const statusLabel = reactTheming.useText(AvatarComponent, props, 'statusLabel', defaultStatusLabel);
553
424
  return React__default["default"].createElement(StyledAvatar, _extends$4({
554
425
  ref: ref,
555
426
  isSystem: isSystem,
@@ -563,8 +434,6 @@ var AvatarComponent = React.forwardRef(function (_ref, ref) {
563
434
  }, props), React.Children.only(children), computedStatus && React__default["default"].createElement(StyledStatusIndicator, {
564
435
  size: size,
565
436
  type: computedStatus,
566
- backgroundColor: backgroundColor,
567
- foregroundColor: foregroundColor,
568
437
  surfaceColor: surfaceColor,
569
438
  "aria-label": statusLabel,
570
439
  role: "img"
@@ -590,26 +459,25 @@ AvatarComponent.propTypes = {
590
459
  AvatarComponent.defaultProps = {
591
460
  size: 'medium'
592
461
  };
593
- var Avatar = AvatarComponent;
462
+ const Avatar = AvatarComponent;
594
463
  Avatar.Text = Text;
595
464
 
596
- var _excluded = ["children", "type", "isCompact", "aria-label"];
597
- var StatusIndicator = React.forwardRef(function (_ref, ref) {
598
- var children = _ref.children,
599
- type = _ref.type,
600
- isCompact = _ref.isCompact,
601
- label = _ref['aria-label'],
602
- props = _objectWithoutProperties(_ref, _excluded);
603
- var ClockIcon = SvgClockStroke;
604
- var ArrowLeftIcon = SvgArrowLeftSmStroke;
465
+ const StatusIndicator = React.forwardRef((_ref, ref) => {
466
+ let {
467
+ children,
468
+ type,
469
+ isCompact,
470
+ 'aria-label': label,
471
+ ...props
472
+ } = _ref;
473
+ let ClockIcon = SvgClockStroke;
474
+ let ArrowLeftIcon = SvgArrowLeftSmStroke;
605
475
  if (isCompact) {
606
476
  ClockIcon = SvgClockStroke$1;
607
477
  ArrowLeftIcon = SvgArrowLeftSmStroke$1;
608
478
  }
609
- var defaultLabel = React.useMemo(function () {
610
- return ['status'].concat(type || []).join(': ');
611
- }, [type]);
612
- var ariaLabel = reactTheming.useText(StatusIndicator, {
479
+ const defaultLabel = React.useMemo(() => ['status'].concat(type || []).join(': '), [type]);
480
+ const ariaLabel = reactTheming.useText(StatusIndicator, {
613
481
  'aria-label': label
614
482
  }, 'aria-label', defaultLabel);
615
483
  return React__default["default"].createElement(StyledStandaloneStatus, _extends$4({
package/dist/index.esm.js CHANGED
@@ -16,114 +16,17 @@ function _extends$4() {
16
16
  _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
17
17
  for (var i = 1; i < arguments.length; i++) {
18
18
  var source = arguments[i];
19
-
20
19
  for (var key in source) {
21
20
  if (Object.prototype.hasOwnProperty.call(source, key)) {
22
21
  target[key] = source[key];
23
22
  }
24
23
  }
25
24
  }
26
-
27
25
  return target;
28
26
  };
29
27
  return _extends$4.apply(this, arguments);
30
28
  }
31
29
 
32
- function _objectWithoutPropertiesLoose(source, excluded) {
33
- if (source == null) return {};
34
- var target = {};
35
- var sourceKeys = Object.keys(source);
36
- var key, i;
37
-
38
- for (i = 0; i < sourceKeys.length; i++) {
39
- key = sourceKeys[i];
40
- if (excluded.indexOf(key) >= 0) continue;
41
- target[key] = source[key];
42
- }
43
-
44
- return target;
45
- }
46
-
47
- function _objectWithoutProperties(source, excluded) {
48
- if (source == null) return {};
49
-
50
- var target = _objectWithoutPropertiesLoose(source, excluded);
51
-
52
- var key, i;
53
-
54
- if (Object.getOwnPropertySymbols) {
55
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
56
-
57
- for (i = 0; i < sourceSymbolKeys.length; i++) {
58
- key = sourceSymbolKeys[i];
59
- if (excluded.indexOf(key) >= 0) continue;
60
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
61
- target[key] = source[key];
62
- }
63
- }
64
-
65
- return target;
66
- }
67
-
68
- function _slicedToArray(arr, i) {
69
- return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
70
- }
71
-
72
- function _arrayWithHoles(arr) {
73
- if (Array.isArray(arr)) return arr;
74
- }
75
-
76
- function _iterableToArrayLimit(arr, i) {
77
- var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
78
-
79
- if (_i == null) return;
80
- var _arr = [];
81
- var _n = true;
82
- var _d = false;
83
-
84
- var _s, _e;
85
-
86
- try {
87
- for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
88
- _arr.push(_s.value);
89
-
90
- if (i && _arr.length === i) break;
91
- }
92
- } catch (err) {
93
- _d = true;
94
- _e = err;
95
- } finally {
96
- try {
97
- if (!_n && _i["return"] != null) _i["return"]();
98
- } finally {
99
- if (_d) throw _e;
100
- }
101
- }
102
-
103
- return _arr;
104
- }
105
-
106
- function _unsupportedIterableToArray(o, minLen) {
107
- if (!o) return;
108
- if (typeof o === "string") return _arrayLikeToArray(o, minLen);
109
- var n = Object.prototype.toString.call(o).slice(8, -1);
110
- if (n === "Object" && o.constructor) n = o.constructor.name;
111
- if (n === "Map" || n === "Set") return Array.from(o);
112
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
113
- }
114
-
115
- function _arrayLikeToArray(arr, len) {
116
- if (len == null || len > arr.length) len = arr.length;
117
-
118
- for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
119
-
120
- return arr2;
121
- }
122
-
123
- function _nonIterableRest() {
124
- throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
125
- }
126
-
127
30
  var _g$1;
128
31
 
129
32
  function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
@@ -135,7 +38,8 @@ var SvgClockStroke$1 = function SvgClockStroke(props) {
135
38
  height: 12,
136
39
  focusable: "false",
137
40
  viewBox: "0 0 12 12",
138
- "aria-hidden": "true"
41
+ "aria-hidden": "true",
42
+ role: "img"
139
43
  }, props), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
140
44
  fill: "none",
141
45
  stroke: "currentColor"
@@ -161,7 +65,8 @@ var SvgClockStroke = function SvgClockStroke(props) {
161
65
  height: 16,
162
66
  focusable: "false",
163
67
  viewBox: "0 0 16 16",
164
- "aria-hidden": "true"
68
+ "aria-hidden": "true",
69
+ role: "img"
165
70
  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
166
71
  fill: "none",
167
72
  stroke: "currentColor"
@@ -187,7 +92,8 @@ var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
187
92
  height: 12,
188
93
  focusable: "false",
189
94
  viewBox: "0 0 12 12",
190
- "aria-hidden": "true"
95
+ "aria-hidden": "true",
96
+ role: "img"
191
97
  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
192
98
  fill: "currentColor",
193
99
  d: "M2.146 6.854a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L3.707 6H9.5a.5.5 0 0 1 0 1H3.707l1.147 1.146a.5.5 0 1 1-.708.708l-2-2Z"
@@ -205,37 +111,31 @@ var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
205
111
  height: 16,
206
112
  focusable: "false",
207
113
  viewBox: "0 0 16 16",
208
- "aria-hidden": "true"
114
+ "aria-hidden": "true",
115
+ role: "img"
209
116
  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
210
117
  fill: "currentColor",
211
118
  d: "M3.146 8.854a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L4.707 8H12.5a.5.5 0 0 1 0 1H4.707l2.147 2.146a.5.5 0 1 1-.708.707l-3-3Z"
212
119
  })));
213
120
  };
214
121
 
215
- var SIZE = ['extraextrasmall', 'extrasmall', 'small', 'medium', 'large'];
216
- var STATUS = ['available', 'away', 'transfers', 'offline'];
122
+ const SIZE = ['extraextrasmall', 'extrasmall', 'small', 'medium', 'large'];
123
+ const STATUS = ['available', 'away', 'transfers', 'offline'];
217
124
 
218
- var COMPONENT_ID$6 = 'avatars.text';
219
- var StyledText = styled.span.attrs({
125
+ const COMPONENT_ID$6 = 'avatars.text';
126
+ const StyledText = styled.span.attrs({
220
127
  'data-garden-id': COMPONENT_ID$6,
221
- 'data-garden-version': '8.57.1'
128
+ 'data-garden-version': '8.58.0'
222
129
  }).withConfig({
223
130
  displayName: "StyledText",
224
131
  componentId: "sc-1a6hivh-0"
225
- })(["overflow:hidden;text-align:center;white-space:nowrap;", ";"], function (props) {
226
- return retrieveComponentStyles(COMPONENT_ID$6, props);
227
- });
132
+ })(["overflow:hidden;text-align:center;white-space:nowrap;", ";"], props => retrieveComponentStyles(COMPONENT_ID$6, props));
228
133
  StyledText.defaultProps = {
229
134
  theme: DEFAULT_THEME
230
135
  };
231
136
 
232
- var _SIZE$1 = _slicedToArray(SIZE, 5),
233
- xxs$1 = _SIZE$1[0],
234
- xs$1 = _SIZE$1[1],
235
- s$1 = _SIZE$1[2],
236
- m$1 = _SIZE$1[3],
237
- l$1 = _SIZE$1[4];
238
- var TRANSITION_DURATION = 0.25;
137
+ const [xxs$1, xs$1, s$1, m$1, l$1] = SIZE;
138
+ const TRANSITION_DURATION = 0.25;
239
139
  function getStatusColor(type, theme) {
240
140
  switch (type) {
241
141
  case 'active':
@@ -253,20 +153,20 @@ function getStatusColor(type, theme) {
253
153
  }
254
154
  }
255
155
  function getStatusBorderOffset(props) {
256
- return props.size === xxs$1 ? math("".concat(props.theme.shadowWidths.sm, " - 1")) : props.theme.shadowWidths.sm;
156
+ return props.size === xxs$1 ? math(`${props.theme.shadowWidths.sm} - 1`) : props.theme.shadowWidths.sm;
257
157
  }
258
158
  function getStatusSize(props, offset) {
259
- var isActive = props.type === 'active';
159
+ const isActive = props.type === 'active';
260
160
  switch (props.size) {
261
161
  case xxs$1:
262
- return math("".concat(props.theme.space.base, "px - ").concat(offset));
162
+ return math(`${props.theme.space.base}px - ${offset}`);
263
163
  case xs$1:
264
- return math("".concat(props.theme.space.base * 2, "px - (").concat(offset, " * 2)"));
164
+ return math(`${props.theme.space.base * 2}px - (${offset} * 2)`);
265
165
  case s$1:
266
- return math("".concat(props.theme.space.base * 3, "px ").concat(isActive ? '' : "- (".concat(offset, " * 2)")));
166
+ return math(`${props.theme.space.base * 3}px ${isActive ? '' : `- (${offset} * 2)`}`);
267
167
  case m$1:
268
168
  case l$1:
269
- return math("".concat(props.theme.space.base * 4, "px ").concat(isActive ? '' : "- (".concat(offset, " * 2)")));
169
+ return math(`${props.theme.space.base * 4}px ${isActive ? '' : `- (${offset} * 2)`}`);
270
170
  default:
271
171
  return '0';
272
172
  }
@@ -275,253 +175,224 @@ function includes(array, element) {
275
175
  return array.includes(element);
276
176
  }
277
177
 
278
- var COMPONENT_ID$5 = 'avatars.status-indicator.base';
279
- var iconFadeIn = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
280
- var sizeStyles$3 = function sizeStyles(props) {
281
- var offset = getStatusBorderOffset(props);
282
- var size = getStatusSize(props, offset);
178
+ const COMPONENT_ID$5 = 'avatars.status-indicator.base';
179
+ const iconFadeIn = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
180
+ const sizeStyles$3 = props => {
181
+ const offset = getStatusBorderOffset(props);
182
+ const size = getStatusSize(props, offset);
283
183
  return css(["border:", " ", ";border-radius:", ";width:", ";min-width:", ";height:", ";line-height:", ";& > svg{position:absolute;top:-", ";left:-", ";transform-origin:50% 50%;animation:", " ", "s;max-height:unset;&[data-icon-status='transfers']{transform:scale(", ",1);}&[data-icon-status='away'] circle{display:none;}}"], offset, props.theme.borderStyles.solid, size, size, size, size, size, offset, offset, iconFadeIn, TRANSITION_DURATION, props.theme.rtl ? -1 : 1);
284
184
  };
285
- var colorStyles$2 = function colorStyles(props) {
286
- var backgroundColor = getStatusColor(props.type, props.theme);
287
- var borderColor = backgroundColor;
185
+ const colorStyles$2 = props => {
186
+ let backgroundColor = getStatusColor(props.type, props.theme);
187
+ let borderColor = backgroundColor;
288
188
  if (props.type === 'offline') {
289
189
  borderColor = getStatusColor(props.type, props.theme);
290
190
  backgroundColor = props.theme.palette.white;
291
191
  }
292
192
  return css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, props.theme.palette.white);
293
193
  };
294
- var StyledStatusIndicatorBase = styled.div.attrs({
194
+ const StyledStatusIndicatorBase = styled.div.attrs({
295
195
  'data-garden-id': COMPONENT_ID$5,
296
- 'data-garden-version': '8.57.1'
196
+ 'data-garden-version': '8.58.0'
297
197
  }).withConfig({
298
198
  displayName: "StyledStatusIndicatorBase",
299
199
  componentId: "sc-1rininy-0"
300
- })(["transition:inherit;", " ", " ", ";"], sizeStyles$3, colorStyles$2, function (props) {
301
- return retrieveComponentStyles(COMPONENT_ID$5, props);
302
- });
200
+ })(["transition:inherit;", " ", " ", ";"], sizeStyles$3, colorStyles$2, props => retrieveComponentStyles(COMPONENT_ID$5, props));
303
201
  StyledStatusIndicatorBase.defaultProps = {
304
202
  theme: DEFAULT_THEME,
305
203
  size: 'small'
306
204
  };
307
205
 
308
- var COMPONENT_ID$4 = 'avatars.status_indicator';
309
- var _SIZE = _slicedToArray(SIZE, 5),
310
- xxs = _SIZE[0],
311
- xs = _SIZE[1],
312
- s = _SIZE[2],
313
- m = _SIZE[3],
314
- l = _SIZE[4];
315
- var sizeStyles$2 = function sizeStyles(props) {
316
- var isVisible = !includes([xxs, xs], props.size);
317
- var borderWidth = getStatusBorderOffset(props);
318
- var padding = '0';
206
+ const COMPONENT_ID$4 = 'avatars.status_indicator';
207
+ const [xxs, xs, s, m, l] = SIZE;
208
+ const sizeStyles$2 = props => {
209
+ const isVisible = !includes([xxs, xs], props.size);
210
+ const borderWidth = getStatusBorderOffset(props);
211
+ let padding = '0';
319
212
  if (props.size === s) {
320
- padding = math("".concat(props.theme.space.base + 1, "px - (").concat(borderWidth, " * 2)"));
213
+ padding = math(`${props.theme.space.base + 1}px - (${borderWidth} * 2)`);
321
214
  } else if (includes([m, l], props.size)) {
322
- padding = math("".concat(props.theme.space.base + 3, "px - (").concat(borderWidth, " * 2)"));
215
+ padding = math(`${props.theme.space.base + 3}px - (${borderWidth} * 2)`);
323
216
  }
324
217
  return css(["max-width:calc(2em + (", " * 3));box-sizing:content-box;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:", ";font-weight:", ";& > span{display:", ";padding:0 ", ";max-width:2em;overflow:inherit;text-align:inherit;text-overflow:inherit;white-space:inherit;}& > svg{", "}"], borderWidth, props.theme.fontSizes.xs, props.theme.fontWeights.semibold, isVisible ? 'inline-block' : 'none', padding, !isVisible && 'display: none;');
325
218
  };
326
- var colorStyles$1 = function colorStyles(props) {
327
- var theme = props.theme,
328
- type = props.type,
329
- size = props.size,
330
- foregroundColor = props.foregroundColor,
331
- backgroundColor = props.backgroundColor,
332
- borderColor = props.borderColor,
333
- surfaceColor = props.surfaceColor;
334
- var boxShadow = theme.shadows.sm(surfaceColor || (type ? theme.colors.background : theme.palette.white));
219
+ const colorStyles$1 = props => {
220
+ const {
221
+ theme,
222
+ type,
223
+ size,
224
+ borderColor,
225
+ surfaceColor
226
+ } = props;
227
+ let boxShadow = theme.shadows.sm(surfaceColor || (type ? theme.colors.background : theme.palette.white));
335
228
  if (size === xxs) {
336
229
  boxShadow = boxShadow.replace(theme.shadowWidths.sm, '1px');
337
230
  }
338
- return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";"], borderColor, boxShadow, backgroundColor, foregroundColor);
231
+ return css(["border-color:", ";box-shadow:", ";"], borderColor, boxShadow);
339
232
  };
340
- var StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
233
+ const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
341
234
  'data-garden-id': COMPONENT_ID$4,
342
- 'data-garden-version': '8.57.1'
235
+ 'data-garden-version': '8.58.0'
343
236
  }).withConfig({
344
237
  displayName: "StyledStatusIndicator",
345
238
  componentId: "sc-16t9if3-0"
346
- })(["", " ", " ", ";"], sizeStyles$2, colorStyles$1, function (props) {
347
- return retrieveComponentStyles(COMPONENT_ID$4, props);
348
- });
239
+ })(["", " ", " ", ";"], sizeStyles$2, colorStyles$1, props => retrieveComponentStyles(COMPONENT_ID$4, props));
349
240
  StyledStatusIndicator.defaultProps = {
350
241
  size: 'medium',
351
242
  theme: DEFAULT_THEME
352
243
  };
353
244
 
354
- var COMPONENT_ID$3 = 'avatars.avatar';
355
- var badgeStyles = function badgeStyles(props) {
356
- var _SIZE = _slicedToArray(SIZE, 5),
357
- xxs = _SIZE[0],
358
- xs = _SIZE[1],
359
- s = _SIZE[2],
360
- m = _SIZE[3],
361
- l = _SIZE[4];
362
- var position = "".concat(props.theme.space.base * -1, "px");
245
+ const COMPONENT_ID$3 = 'avatars.avatar';
246
+ const badgeStyles = props => {
247
+ const [xxs, xs, s, m, l] = SIZE;
248
+ let position = `${props.theme.space.base * -1}px`;
363
249
  switch (props.size) {
364
250
  case s:
365
251
  case m:
366
- position = math("".concat(position, " + 2"));
252
+ position = math(`${position} + 2`);
367
253
  break;
368
254
  case xxs:
369
255
  case xs:
370
256
  case l:
371
- position = math("".concat(position, " + 3"));
257
+ position = math(`${position} + 3`);
372
258
  break;
373
259
  }
374
- var animation = keyframes(["0%{transform:scale(.1);}"]);
260
+ const animation = keyframes(["0%{transform:scale(.1);}"]);
375
261
  return css(["position:absolute;", ":", ";bottom:", ";transition:all ", "s ease-in-out;", ""], props.theme.rtl ? 'left' : 'right', position, position, TRANSITION_DURATION, props.status === 'active' && css(["animation:", " ", "s ease-in-out;"], animation, TRANSITION_DURATION * 1.5));
376
262
  };
377
- var colorStyles = function colorStyles(props) {
378
- var statusColor = getStatusColor(props.status, props.theme);
379
- var backgroundColor = props.backgroundColor || 'transparent';
380
- var foregroundColor = props.foregroundColor || props.theme.palette.white;
381
- var surfaceColor = props.status ? props.surfaceColor || props.theme.colors.background : 'transparent';
263
+ const colorStyles = props => {
264
+ const statusColor = getStatusColor(props.status, props.theme);
265
+ const backgroundColor = props.backgroundColor || 'transparent';
266
+ const foregroundColor = props.foregroundColor || props.theme.palette.white;
267
+ const surfaceColor = props.status ? props.surfaceColor || props.theme.colors.background : 'transparent';
382
268
  return css(["box-shadow:", ";background-color:", ";color:", ";& > svg,& ", "{color:", ";}"], props.theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
383
269
  };
384
- var sizeStyles$1 = function sizeStyles(props) {
385
- var boxShadow;
386
- var borderRadius;
387
- var size;
388
- var fontSize;
389
- var svgSize;
270
+ const sizeStyles$1 = props => {
271
+ let boxShadow;
272
+ let borderRadius;
273
+ let size;
274
+ let fontSize;
275
+ let svgSize;
390
276
  if (props.size === 'extraextrasmall') {
391
- boxShadow = "0 0 0 ".concat(math("".concat(props.theme.shadowWidths.sm, " - 1")));
392
- borderRadius = props.isSystem ? math("".concat(props.theme.borderRadii.md, " - 1")) : '50%';
393
- size = "".concat(props.theme.space.base * 4, "px");
277
+ boxShadow = `0 0 0 ${math(`${props.theme.shadowWidths.sm} - 1`)}`;
278
+ borderRadius = props.isSystem ? math(`${props.theme.borderRadii.md} - 1`) : '50%';
279
+ size = `${props.theme.space.base * 4}px`;
394
280
  fontSize = 0;
395
- svgSize = "".concat(props.theme.space.base * 3, "px");
281
+ svgSize = `${props.theme.space.base * 3}px`;
396
282
  } else if (props.size === 'extrasmall') {
397
- boxShadow = "inset 0 0 0 ".concat(props.theme.shadowWidths.sm);
398
- borderRadius = props.isSystem ? math("".concat(props.theme.borderRadii.md, " - 1")) : '50%';
399
- size = "".concat(props.theme.space.base * 6, "px");
283
+ boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
284
+ borderRadius = props.isSystem ? math(`${props.theme.borderRadii.md} - 1`) : '50%';
285
+ size = `${props.theme.space.base * 6}px`;
400
286
  fontSize = props.theme.fontSizes.sm;
401
- svgSize = "".concat(props.theme.space.base * 3, "px");
287
+ svgSize = `${props.theme.space.base * 3}px`;
402
288
  } else if (props.size === 'small') {
403
- boxShadow = "inset 0 0 0 ".concat(props.theme.shadowWidths.sm);
404
- borderRadius = props.isSystem ? math("".concat(props.theme.borderRadii.md, " - 1")) : '50%';
405
- size = "".concat(props.theme.space.base * 8, "px");
289
+ boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
290
+ borderRadius = props.isSystem ? math(`${props.theme.borderRadii.md} - 1`) : '50%';
291
+ size = `${props.theme.space.base * 8}px`;
406
292
  fontSize = props.theme.fontSizes.md;
407
- svgSize = "".concat(props.theme.space.base * 3, "px");
293
+ svgSize = `${props.theme.space.base * 3}px`;
408
294
  } else if (props.size === 'large') {
409
- boxShadow = "inset 0 0 0 ".concat(props.theme.shadowWidths.sm);
410
- borderRadius = props.isSystem ? math("".concat(props.theme.borderRadii.md, " + 1")) : '50%';
411
- size = "".concat(props.theme.space.base * 12, "px");
295
+ boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
296
+ borderRadius = props.isSystem ? math(`${props.theme.borderRadii.md} + 1`) : '50%';
297
+ size = `${props.theme.space.base * 12}px`;
412
298
  fontSize = props.theme.fontSizes.xl;
413
- svgSize = "".concat(props.theme.space.base * 6, "px");
299
+ svgSize = `${props.theme.space.base * 6}px`;
414
300
  } else {
415
- boxShadow = "inset 0 0 0 ".concat(props.theme.shadowWidths.sm);
301
+ boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
416
302
  borderRadius = props.isSystem ? props.theme.borderRadii.md : '50%';
417
- size = "".concat(props.theme.space.base * 10, "px");
303
+ size = `${props.theme.space.base * 10}px`;
418
304
  fontSize = props.theme.fontSizes.lg;
419
- svgSize = "".concat(props.theme.space.base * 4, "px");
305
+ svgSize = `${props.theme.space.base * 4}px`;
420
306
  }
421
307
  return css(["border-radius:", ";width:", " !important;height:", " !important;::before{box-shadow:", ";}& > svg{font-size:", ";}& ", "{line-height:", ";font-size:", ";}"], borderRadius, size, size, boxShadow, svgSize, StyledText, size, fontSize);
422
308
  };
423
- var StyledAvatar = styled.figure.attrs({
309
+ const StyledAvatar = styled.figure.attrs({
424
310
  'data-garden-id': COMPONENT_ID$3,
425
- 'data-garden-version': '8.57.1'
311
+ 'data-garden-version': '8.58.0'
426
312
  }).withConfig({
427
313
  displayName: "StyledAvatar",
428
314
  componentId: "sc-608m04-0"
429
- })(["display:inline-flex;position:relative;align-items:center;justify-content:center;transition:box-shadow ", "s ease-in-out,color 0.1s ease-in-out;margin:0;vertical-align:middle;box-sizing:border-box;", ";", ";&::before{position:absolute;top:0;left:0;transition:box-shadow ", "s ease-in-out;content:'';}&::before,&& > img{border-radius:inherit;width:100%;height:100%;}&& > img{box-sizing:inherit;vertical-align:bottom;object-fit:cover;}&& > svg{width:1em;height:1em;}& > ", "{", ";}", ";"], TRANSITION_DURATION, function (props) {
430
- return sizeStyles$1(props);
431
- }, function (props) {
432
- return colorStyles(props);
433
- }, TRANSITION_DURATION, StyledStatusIndicator, badgeStyles, function (props) {
434
- return retrieveComponentStyles(COMPONENT_ID$3, props);
435
- });
315
+ })(["display:inline-flex;position:relative;align-items:center;justify-content:center;transition:box-shadow ", "s ease-in-out,color 0.1s ease-in-out;margin:0;vertical-align:middle;box-sizing:border-box;", ";", ";&::before{position:absolute;top:0;left:0;transition:box-shadow ", "s ease-in-out;content:'';}&::before,&& > img{border-radius:inherit;width:100%;height:100%;}&& > img{box-sizing:inherit;vertical-align:bottom;object-fit:cover;}&& > svg{width:1em;height:1em;}& > ", "{", ";}", ";"], TRANSITION_DURATION, props => sizeStyles$1(props), props => colorStyles(props), TRANSITION_DURATION, StyledStatusIndicator, badgeStyles, props => retrieveComponentStyles(COMPONENT_ID$3, props));
436
316
  StyledAvatar.defaultProps = {
437
317
  size: 'medium',
438
318
  theme: DEFAULT_THEME
439
319
  };
440
320
 
441
- var COMPONENT_ID$2 = 'avatars.status-indicator.status';
442
- var StyledStandaloneStatus = styled.figure.attrs({
321
+ const COMPONENT_ID$2 = 'avatars.status-indicator.status';
322
+ const StyledStandaloneStatus = styled.figure.attrs({
443
323
  'data-garden-id': COMPONENT_ID$2,
444
- 'data-garden-version': '8.57.1'
324
+ 'data-garden-version': '8.58.0'
445
325
  }).withConfig({
446
326
  displayName: "StyledStandaloneStatus",
447
327
  componentId: "sc-1ow4nfj-0"
448
- })(["display:inline-flex;flex-flow:row nowrap;transition:all ", "s ease-in-out;margin:0;box-sizing:content-box;", ";"], TRANSITION_DURATION, function (props) {
449
- return retrieveComponentStyles(COMPONENT_ID$2, props);
450
- });
328
+ })(["display:inline-flex;flex-flow:row nowrap;transition:all ", "s ease-in-out;margin:0;box-sizing:content-box;", ";"], TRANSITION_DURATION, props => retrieveComponentStyles(COMPONENT_ID$2, props));
451
329
  StyledStandaloneStatus.defaultProps = {
452
330
  theme: DEFAULT_THEME
453
331
  };
454
332
 
455
- var COMPONENT_ID$1 = 'avatars.status-indicator.caption';
333
+ const COMPONENT_ID$1 = 'avatars.status-indicator.caption';
456
334
  function sizeStyles(props) {
457
- var marginRule = "margin-".concat(props.theme.rtl ? 'right' : 'left', ": ").concat(props.theme.space.base * 2, "px;");
335
+ const marginRule = `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 2}px;`;
458
336
  return css(["", " line-height:", ";font-size:", ";"], marginRule, getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props.theme.fontSizes.md);
459
337
  }
460
- var StyledStandaloneStatusCaption = styled.figcaption.attrs({
338
+ const StyledStandaloneStatusCaption = styled.figcaption.attrs({
461
339
  'data-garden-id': COMPONENT_ID$1,
462
- 'data-garden-version': '8.57.1'
340
+ 'data-garden-version': '8.58.0'
463
341
  }).withConfig({
464
342
  displayName: "StyledStandaloneStatusCaption",
465
343
  componentId: "sc-aalyk1-0"
466
- })(["", " ", ";"], sizeStyles, function (props) {
467
- return retrieveComponentStyles(COMPONENT_ID$1, props);
468
- });
344
+ })(["", " ", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID$1, props));
469
345
  StyledStandaloneStatusCaption.defaultProps = {
470
346
  theme: DEFAULT_THEME
471
347
  };
472
348
 
473
- var COMPONENT_ID = 'avatars.status-indicator.indicator';
474
- var StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
349
+ const COMPONENT_ID = 'avatars.status-indicator.indicator';
350
+ const StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
475
351
  'data-garden-id': COMPONENT_ID,
476
- 'data-garden-version': '8.57.1'
352
+ 'data-garden-version': '8.58.0'
477
353
  }).withConfig({
478
354
  displayName: "StyledStandaloneStatusIndicator",
479
355
  componentId: "sc-1xt1heq-0"
480
- })(["position:relative;margin-top:", ";", ";"], function (props) {
481
- return "calc((".concat(props.theme.lineHeights.md, " - ").concat(getStatusSize(props, '0'), ") / 2)");
482
- }, function (props) {
483
- return retrieveComponentStyles(COMPONENT_ID, props);
484
- });
356
+ })(["position:relative;margin-top:", ";", ";"], props => `calc((${props.theme.lineHeights.md} - ${getStatusSize(props, '0')}) / 2)`, props => retrieveComponentStyles(COMPONENT_ID, props));
485
357
  StyledStandaloneStatusIndicator.defaultProps = {
486
358
  type: 'offline',
487
359
  theme: DEFAULT_THEME
488
360
  };
489
361
 
490
- var TextComponent = forwardRef(function (props, ref) {
491
- return React__default.createElement(StyledText, _extends$4({
492
- ref: ref
493
- }, props));
494
- });
362
+ const TextComponent = forwardRef((props, ref) => React__default.createElement(StyledText, _extends$4({
363
+ ref: ref
364
+ }, props)));
495
365
  TextComponent.displayName = 'Avatar.Text';
496
- var Text = TextComponent;
497
-
498
- var _excluded$1 = ["isSystem", "size", "status", "children", "badge", "surfaceColor", "backgroundColor", "foregroundColor"];
499
- var AvatarComponent = forwardRef(function (_ref, ref) {
500
- var isSystem = _ref.isSystem,
501
- size = _ref.size,
502
- status = _ref.status,
503
- children = _ref.children,
504
- badge = _ref.badge,
505
- surfaceColor = _ref.surfaceColor,
506
- backgroundColor = _ref.backgroundColor,
507
- foregroundColor = _ref.foregroundColor,
508
- props = _objectWithoutProperties(_ref, _excluded$1);
509
- var computedStatus = badge === undefined ? status : 'active';
510
- var ClockIcon = SvgClockStroke$1;
511
- var ArrowLeftIcon = SvgArrowLeftSmStroke$1;
366
+ const Text = TextComponent;
367
+
368
+ const AvatarComponent = forwardRef((_ref, ref) => {
369
+ let {
370
+ isSystem,
371
+ size,
372
+ status,
373
+ children,
374
+ badge,
375
+ surfaceColor,
376
+ backgroundColor,
377
+ foregroundColor,
378
+ ...props
379
+ } = _ref;
380
+ const computedStatus = badge === undefined ? status : 'active';
381
+ let ClockIcon = SvgClockStroke$1;
382
+ let ArrowLeftIcon = SvgArrowLeftSmStroke$1;
512
383
  if (['large', 'medium'].includes(size)) {
513
384
  ClockIcon = SvgClockStroke;
514
385
  ArrowLeftIcon = SvgArrowLeftSmStroke;
515
386
  }
516
- var defaultStatusLabel = useMemo(function () {
517
- var statusMessage = computedStatus;
387
+ const defaultStatusLabel = useMemo(() => {
388
+ let statusMessage = computedStatus;
518
389
  if (computedStatus === 'active') {
519
- var count = typeof badge === 'string' ? parseInt(badge, 10) : badge;
520
- statusMessage = "active. ".concat(count > 0 ? "".concat(count, " notification").concat(count > 1 ? 's' : '') : 'no notifications');
390
+ const count = typeof badge === 'string' ? parseInt(badge, 10) : badge;
391
+ statusMessage = `active. ${count > 0 ? `${count} notification${count > 1 ? 's' : ''}` : 'no notifications'}`;
521
392
  }
522
393
  return ['status'].concat(statusMessage || []).join(': ');
523
394
  }, [computedStatus, badge]);
524
- var statusLabel = useText(AvatarComponent, props, 'statusLabel', defaultStatusLabel);
395
+ const statusLabel = useText(AvatarComponent, props, 'statusLabel', defaultStatusLabel);
525
396
  return React__default.createElement(StyledAvatar, _extends$4({
526
397
  ref: ref,
527
398
  isSystem: isSystem,
@@ -535,8 +406,6 @@ var AvatarComponent = forwardRef(function (_ref, ref) {
535
406
  }, props), Children.only(children), computedStatus && React__default.createElement(StyledStatusIndicator, {
536
407
  size: size,
537
408
  type: computedStatus,
538
- backgroundColor: backgroundColor,
539
- foregroundColor: foregroundColor,
540
409
  surfaceColor: surfaceColor,
541
410
  "aria-label": statusLabel,
542
411
  role: "img"
@@ -562,26 +431,25 @@ AvatarComponent.propTypes = {
562
431
  AvatarComponent.defaultProps = {
563
432
  size: 'medium'
564
433
  };
565
- var Avatar = AvatarComponent;
434
+ const Avatar = AvatarComponent;
566
435
  Avatar.Text = Text;
567
436
 
568
- var _excluded = ["children", "type", "isCompact", "aria-label"];
569
- var StatusIndicator = forwardRef(function (_ref, ref) {
570
- var children = _ref.children,
571
- type = _ref.type,
572
- isCompact = _ref.isCompact,
573
- label = _ref['aria-label'],
574
- props = _objectWithoutProperties(_ref, _excluded);
575
- var ClockIcon = SvgClockStroke;
576
- var ArrowLeftIcon = SvgArrowLeftSmStroke;
437
+ const StatusIndicator = forwardRef((_ref, ref) => {
438
+ let {
439
+ children,
440
+ type,
441
+ isCompact,
442
+ 'aria-label': label,
443
+ ...props
444
+ } = _ref;
445
+ let ClockIcon = SvgClockStroke;
446
+ let ArrowLeftIcon = SvgArrowLeftSmStroke;
577
447
  if (isCompact) {
578
448
  ClockIcon = SvgClockStroke$1;
579
449
  ArrowLeftIcon = SvgArrowLeftSmStroke$1;
580
450
  }
581
- var defaultLabel = useMemo(function () {
582
- return ['status'].concat(type || []).join(': ');
583
- }, [type]);
584
- var ariaLabel = useText(StatusIndicator, {
451
+ const defaultLabel = useMemo(() => ['status'].concat(type || []).join(': '), [type]);
452
+ const ariaLabel = useText(StatusIndicator, {
585
453
  'aria-label': label
586
454
  }, 'aria-label', defaultLabel);
587
455
  return React__default.createElement(StyledStandaloneStatus, _extends$4({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-avatars",
3
- "version": "8.57.1",
3
+ "version": "8.58.0",
4
4
  "description": "Components relating to avatars in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -31,7 +31,7 @@
31
31
  "styled-components": "^4.2.0 || ^5.0.0"
32
32
  },
33
33
  "devDependencies": {
34
- "@zendeskgarden/react-theming": "^8.57.1",
34
+ "@zendeskgarden/react-theming": "^8.58.0",
35
35
  "@zendeskgarden/svg-icons": "6.33.0"
36
36
  },
37
37
  "keywords": [
@@ -44,5 +44,5 @@
44
44
  "access": "public"
45
45
  },
46
46
  "zendeskgarden:src": "src/index.ts",
47
- "gitHead": "3e903f3c7013221ef01d3f81a50489505490be7b"
47
+ "gitHead": "07760a92573b619860e1252f6931467b9123f1b6"
48
48
  }