@sproutsocial/racine 13.7.1 → 14.0.0

package/__flow__/types/theme.flow.js

@@ -1,21 +1,309 @@
 // @flow strict-local
-import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/light/theme";
-import type { TypeFontFamilyString } from "../themes/light/theme";
-import { datePicker, navigation, analytics, listening, growth, cardControl } from "../themes/extendedThemes/sproutTheme/light/theme";
-import type { TypeColors } from "./theme.colors.flow.js";
+import type { TypeFontFamilyString } from "../themes/light/theme.flow";
+import type { TypeColors } from "./theme.colors.flow";
+export type TypeNavigationTheme = {|
+  main: {
+    background: {
+      base: string,
+      overflowGradient: string,
+      ...
+    },
+    border: {
+      base: string,
+      ...
+    },
+    ...
+  },
+  secondary: {
+    background: {
+      base: string,
+      ...
+    },
+    widget: {
+      background: {
+        base: string,
+        ...
+      },
+      ...
+    },
+    accordion: {
+      background: {
+        base: string,
+        ...
+      },
+      ...
+    },
+    ...
+  },
+  settings: {
+    listItem: {
+      background: {
+        base: string,
+        hover: string,
+        selected: string,
+        ...
+      },
+      ...
+    },
+    ...
+  },
+  text: {
+    base: string,
+    hover: string,
+    ...
+  },
+  icon: {
+    base: string,
+    hover: string,
+    ...
+  },
+  listItem: {
+    background: {
+      base: string,
+      hover: string,
+      selected: string,
+      ...
+    },
+    ...
+  },
+|};
+export type TypeDatePickerTheme = {|
+  comparison: {
+    background: {
+      base: string,
+      ...
+    },
+    text: {
+      base: string,
+      ...
+    },
+    ...
+  }
+|};
+export type TypeAnalyticsTheme = {|
+  trend: {
+    positive: string,
+    neutral: string,
+    negative: string,
+    ...
+  },
+  overlay: {
+    background: {
+      base: string,
+      ...
+    },
+    ...
+  },
+|};
+export type TypeListeningTheme = {|
+  topicTypes: {
+    customTopic: string,
+    brandHealth: string,
+    industryInsights: string,
+    competitiveAnalysis: string,
+    campaignAnalysis: string,
+    eventMonitoring: string,
+    featuredTopic: string,
+    ...
+  },
+  worldMap: {
+    empty: string,
+    q0: string,
+    q1: string,
+    q2: string,
+    q3: string,
+    q4: string,
+    q5: string,
+    q6: string,
+    q7: string,
+    ...
+  },
+|};
+export type TypeGrowthTheme = {|
+  education: {
+    decorative: {
+      aqua: string,
+      teal: string,
+      ...
+    },
+    ...
+  },
+  opportunity: {
+    background: {
+      base: string,
+      secondary: string,
+      hover: string,
+      ...
+    },
+    button: {
+      primary: {
+        base: string,
+        hover: string,
+        ...
+      },
+      ...
+    },
+    badge: {
+      background: {
+        base: string,
+        active: string,
+        ...
+      },
+      icon: {
+        base: string,
+        active: string,
+        ...
+      },
+      text: {
+        base: string,
+        ...
+      },
+      ...
+    },
+    decorative: {
+      // confetti
+      green: string,
+      lightAqua: string,
+      darkAqua: string,
+      purple: string,
+      ...
+    },
+    ...
+  },
+  featuredDemo: {
+    background: {
+      primary: {
+        base: string,
+        hover: string,
+        ...
+      },
+      secondary: {
+        base: string,
+        hover: string,
+        ...
+      },
+      ...
+    },
+    ...
+  },
+  darkModal: {
+    background: {
+      base: string,
+      ...
+    },
+    text: {
+      base: string,
+      ...
+    },
+    cards: {
+      background: {
+        base: string,
+        hover: string,
+        ...
+      },
+      text: {
+        base: string,
+        hover: string,
+        ...
+      },
+      border: {
+        base: string,
+        hover: string,
+        ...
+      },
+      ...
+    },
+    ...
+  },
+  user: {
+    status: {
+      online: string,
+      ...
+    },
+    ...
+  },
+|};
+export type TypeCardControlTheme = {|
+  background: {
+    base: string,
+    selected: string,
+    hover: string,
+    ...
+  },
+  text: {
+    selected: string,
+    ...
+  },
+|};
 export type TypeThemeMode = 'light' | 'dark';
-export type TypeBreakpoint = typeof breakpoints;
-export type TypeTypography = typeof typography;
-export type TypeFontWeight = typeof fontWeights;
+export type TypeBreakpoint = string[];
+type TypeTypographyValue = {|
+  fontSize: string | number,
+  lineHeight: string | number,
+|};
+export type TypeTypography = {|
+  '100': TypeTypographyValue,
+  '200': TypeTypographyValue,
+  '300': TypeTypographyValue,
+  '400': TypeTypographyValue,
+  '500': TypeTypographyValue,
+  '600': TypeTypographyValue,
+  '700': TypeTypographyValue,
+  '800': TypeTypographyValue,
+  '900': TypeTypographyValue,
+  '1000': TypeTypographyValue,
+  '1100': TypeTypographyValue,
+  '1200': TypeTypographyValue,
+|};
+export type TypeFontWeight = {|
+  normal: string,
+  semibold: string,
+  bold: string,
+  extrabold: string,
+|};
 export type TypeFontFamily = TypeFontFamilyString;
-export type TypeSpace = typeof space;
+export type TypeSpace = {|
+  '0': string,
+  '100': string,
+  '200': string,
+  '300': string,
+  '350': string,
+  '400': string,
+  '450': string,
+  '500': string,
+  '600': string,
+|};
 export type TypeColor = TypeColors;
-export type TypeRadii = typeof radii;
-export type TypeBorder = typeof borders;
-export type TypeBorderWidth = typeof borderWidths;
-export type TypeShadow = typeof shadows;
-export type TypeEasing = typeof easing;
-export type TypeDuration = typeof duration;
+export type TypeRadii = {|
+  '400': string,
+  '500': string,
+  '600': string,
+  '1000': string,
+  inner: string,
+  outer: string,
+  pill: string,
+|};
+export type TypeBorder = {|
+  '500': string
+|};
+export type TypeBorderWidth = {|
+  '500': string
+|};
+export type TypeShadow = {|
+  high: string,
+  low: string,
+  medium: string,
+|};
+export type TypeEasing = {|
+  ease_in: string,
+  ease_inout: string,
+  ease_out: string,
+|};
+export type TypeDuration = {|
+  fast: string,
+  medium: string,
+  slow: string,
+|};
 export type TypeTheme = {
   mode: TypeThemeMode,
   breakpoints: TypeBreakpoint,
@@ -38,12 +326,12 @@ export type TypeSproutTheme = {
   ...$Exact<TypeTheme>,
   colors: {|
     ...$Exact<TypeColor>,
-    navigation: typeof navigation,
-    datePicker: typeof datePicker,
-    analytics: typeof analytics,
-    listening: typeof listening,
-    growth: typeof growth,
-    cardControl: typeof cardControl,
+    navigation: TypeNavigationTheme,
+    datePicker: TypeDatePickerTheme,
+    analytics: TypeAnalyticsTheme,
+    listening: TypeListeningTheme,
+    growth: TypeGrowthTheme,
+    cardControl: TypeCardControlTheme,
   |},
   ...
 };

package/__flow__/utils/a11yTest.flow.js

@@ -0,0 +1,5 @@
+// @flow
+/* eslint-env jest, node */
+
+// use runA11yCheck from react-test-library utils file if using react-testing-library
+declare export var a11yCheck: (html: string | Element) => void;

package/__flow__/utils/chartColors.flow.js

@@ -0,0 +1,11 @@
+// @flow
+
+type TypeColorTheme = string[];
+declare export var COMPARE_THEME: TypeColorTheme;
+declare export var CONTRAST_THEME: TypeColorTheme;
+declare export var EXTENDED_THEME: TypeColorTheme;
+declare export var THEME_MAP: {|
+  COMPARE: TypeColorTheme,
+  CONTRAST: TypeColorTheme,
+  EXTENDED: TypeColorTheme,
+|};

package/__flow__/utils/constants.flow.js

@@ -0,0 +1,3 @@
+// @flow
+
+declare export var EM_DASH: string;

package/__flow__/utils/dataQaLabelQueries.flow.js

@@ -0,0 +1,20 @@
+// @flow
+
+export type TypeQaObject = {
+  [string]: string,
+  ...
+};
+declare var getKeyValuePair: (object: any) => any[];
+declare var getDataQaKey: (key: any) => string;
+declare var getTestIdAttribute: (qaObject: any) => string;
+declare var queryAllByDataQaLabel: (container: HTMLElement, qaObject: TypeQaObject, options: {...}) => HTMLElement[];
+declare var getMultipleError: (c: any, qaObject: any) => string;
+declare var getMissingError: (c: any, qaObject: any) => string;
+declare export var dataQaLabelQueries: {|
+  findAllByDataQaLabel: any,
+  findByDataQaLabel: any,
+  getAllByDataQaLabel: any,
+  getByDataQaLabel: any,
+  queryAllByDataQaLabel: (container: HTMLElement, qaObject: TypeQaObject, options: {...}) => any,
+  queryByDataQaLabel: any,
+|};

package/__flow__/utils/hooks.flow.js

@@ -0,0 +1,66 @@
+// @flow
+import { useState, useCallback } from 'react';
+
+// https://stackoverflow.com/questions/44700904/how-to-get-a-functions-return-type-in-flow
+// eslint-disable-next-line flowtype/type-id-match
+type ReturnType<F> = $PropertyType<$ObjMap<{
+  x: F,
+  ...
+}, <R>(f: (...any) => R) => R>, 'x'>;
+const useTextContentClone = (initial: string) => {
+  const [textContent, setTextContent] = useState(initial);
+  const ref = useCallback((node: Node) => {
+    if (node !== null) {
+      setTextContent(node.textContent);
+    }
+  }, []);
+  ref.current = textContent;
+  return ref;
+};
+
+// Couldn't find a way to achieve this with flow type syntax - open to suggestions
+// Tried https://github.com/facebook/flow/issues/2840#issuecomment-452934068 but it didn't work
+declare export function useTextContent(initial: string): ReturnType<typeof useTextContentClone>;
+type TypeMutationObserverInitRequired = {|
+  childList: true
+|} | {|
+  attributes: true
+|} | {|
+  characterData: true
+|};
+type TypeMutationObserverInit = {
+  ...TypeMutationObserverInitRequired,
+  subtree?: boolean,
+  attributeOldValue?: boolean,
+  characterDataOldValue?: boolean,
+  attributeFilter?: Array<string>,
+  ...
+};
+type TypeMutationObserverCallback = (mutationList?: MutationRecord[], observer?: MutationObserver) => any;
+declare var defaultCallback: TypeMutationObserverCallback;
+declare export function useMutationObserver(targetNode: ?Node, config: TypeMutationObserverInit, callback?: TypeMutationObserverCallback): void | any;
+declare export function useMutationObserverOnce(targetNode: ?Node, config: TypeMutationObserverInit, callback: TypeMutationObserverCallback): void | any;
+type TypeSingleSelectProps<T: string> = {|
+  initialValue?: T | '',
+  onChange?: (value: string | T) => any,
+|};
+type TypeMultiSelectProps<T: string> = {|
+  initialValue?: T[],
+  onChange?: (value: Array<string | T>) => any,
+|};
+declare export var useSelect: <T: string>(props?: TypeSingleSelectProps<T>) => {|
+  onChange: (newValue: string) => void,
+  value: T | string,
+|};
+declare var valueReducer: (state: Set<string>, action: {|
+  type: string
+|} | {|
+  type: string,
+  value: string,
+|}) => Set<string>;
+declare export var useMultiselect: <T: string>(props?: TypeMultiSelectProps<T>) => {|
+  onChange: (newValue: string) => void,
+  onClear: () => void,
+  value: Array<string | T>,
+|};
+declare export function useWhyDidYouUpdate(name: string, props: any): void;

package/__flow__/utils/index.flow.js

@@ -0,0 +1,11 @@
+// @flow
+
+import { type ElementRef } from 'react';
+declare export var canUseDOM: () => boolean;
+type TypeRef = {|
+  current: null | HTMLInputElement
+|} | ((ElementRef<any> | HTMLElement) => void);
+
+// Allows a component to pass its own ref *and* a ref prop to the same element.
+// Via https://www.davedrinks.coffee/how-do-i-use-two-react-refs/
+declare export var mergeRefs: (refs: Array<?TypeRef>) => null | TypeRef | ((inst: any) => void);

package/__flow__/utils/innerText.flow.js

@@ -0,0 +1,4 @@
+// @flow
+import * as React from 'react';
+declare var innerText: (node: React.Node) => string;
+declare export default typeof innerText;

package/__flow__/utils/mixins.flow.js

@@ -0,0 +1,7 @@
+// @flow
+import type { CSSRules } from 'styled-components';
+declare export var svgToDataURL: (svgStr: string) => string;
+declare export var visuallyHidden: CSSRules;
+declare export var focusRing: CSSRules;
+declare export var pill: CSSRules;
+declare export var disabled: CSSRules;

package/__flow__/utils/react-testing-library.flow.js

@@ -0,0 +1,14 @@
+// @flow
+import * as React from 'react';
+import { act as defaultAct, cleanup as defaultCleanup, createEvent as defaultCreateEvent, fireEvent as defaultFireEvent, waitFor as defaultWaitFor, waitForElementToBeRemoved as defaultWaitForElementToBeRemoved } from '@testing-library/react';
+import defaultUserEvent from '@testing-library/user-event';
+declare export var act: typeof defaultAct;
+declare export var cleanup: typeof defaultCleanup;
+declare export var createEvent: typeof defaultCreateEvent;
+declare export var render: (node: React.Node, options: any) => any;
+declare export var within: (element: HTMLElement) => any;
+declare export var fireEvent: typeof defaultFireEvent;
+declare export var screen: any;
+declare export var userEvent: typeof defaultUserEvent;
+declare export var waitFor: typeof defaultWaitFor;
+declare export var waitForElementToBeRemoved: typeof defaultWaitForElementToBeRemoved;

package/__flow__/utils/responsiveProps/index.flow.js

@@ -0,0 +1,3 @@
+// @flow
+import type { TypeResponsive } from "../../types/system-props.flow";
+declare export var normalizeResponsiveProp: (value: TypeResponsive<any>) => TypeResponsive<any>;

package/__flow__/utils/responsiveProps/index.test.flow.js

@@ -0,0 +1,22 @@
+// @flow strict-local
+import { normalizeResponsiveProp } from "./index.flow";
+describe('normalizeResponsiveProp', () => {
+  it('should handle single, literal values', () => {
+    expect(normalizeResponsiveProp(0)).toMatchObject([0, 0, 0, 0, 0]);
+  });
+  it('should handle arrays with 1 value', () => {
+    expect(normalizeResponsiveProp([0])).toMatchObject([0, 0, 0, 0, 0]);
+  });
+  it('should handle arrays with 2 values', () => {
+    expect(normalizeResponsiveProp([0, 1])).toMatchObject([0, 1, 1, 1, 1]);
+  });
+  it('should handle arrays with 3 values', () => {
+    expect(normalizeResponsiveProp([0, 1, 2])).toMatchObject([0, 1, 2, 2, 2]);
+  });
+  it('should handle arrays with 4 values', () => {
+    expect(normalizeResponsiveProp([0, 1, 2, 3])).toMatchObject([0, 1, 2, 3, 3]);
+  });
+  it('should handle arrays with 5 values', () => {
+    expect(normalizeResponsiveProp([0, 1, 2, 3, 4])).toMatchObject([0, 1, 2, 3, 4]);
+  });
+});

package/__flow__/utils/system-props.flow.js

@@ -0,0 +1,9 @@
+// @flow
+
+declare export var COMMON: any;
+declare export var BORDER: any;
+declare export var TYPOGRAPHY: any;
+declare export var LAYOUT: any;
+declare export var POSITION: any;
+declare export var FLEXBOX: any;
+declare export var GRID: any;

package/__flow__/utils/useInteractiveColor.flow.js

@@ -0,0 +1,3 @@
+//@flow strict-local
+
+declare export var useInteractiveColor: (themeColor: string) => string;

package/commonjs/Avatar/Avatar.flow.js

@@ -0,0 +1,6 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/commonjs/Avatar/Avatar.js

@@ -0,0 +1,121 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Avatar = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Box = _interopRequireDefault(require("../Box"));
+var _Image = _interopRequireDefault(require("../Image"));
+var _Text = _interopRequireDefault(require("../Text"));
+var _excluded = ["fontSize"],
+  _excluded2 = ["appearance", "name", "src", "variant", "type", "size", "bg", "color"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = 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.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var defaultType = 'neutral';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+var AvatarText = (0, _styledComponents.default)(function (_ref) {
+  var fontSize = _ref.fontSize,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(_Text.default, rest);
+}).withConfig({
+  displayName: "Avatar__AvatarText",
+  componentId: "sc-1ffu253-0"
+})(["font-size:", "px;color:", "px;"], function (props) {
+  return props.fontSize;
+}, function (props) {
+  return props.color;
+});
+var Container = (0, _styledComponents.default)(_Box.default).withConfig({
+  displayName: "Avatar__Container",
+  componentId: "sc-1ffu253-1"
+})(["", ""], function (_ref2) {
+  var theme = _ref2.theme,
+    type = _ref2.type,
+    variant = _ref2.variant,
+    bg = _ref2.bg;
+  return (0, _styledComponents.css)(["color:", ";background:", ";"], theme.colors[type][variant === 'dark' ? '200' : '900'], bg ? bg : theme.colors[type][variant === 'dark' ? '900' : '200']);
+});
+var getInitials = function getInitials(name) {
+  var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '?';
+  if (!name || typeof name !== 'string') return fallback;
+  return name.replace(/\s+/, ' ').split(' ') // Repeated spaces results in empty strings
+  .slice(0, 2).map(function (v) {
+    return v && v[0].toUpperCase();
+  }) // Watch out for empty strings
+  .join('');
+};
+var Avatar = function Avatar(_ref3) {
+  var _ref3$appearance = _ref3.appearance,
+    appearance = _ref3$appearance === void 0 ? 'circle' : _ref3$appearance,
+    _ref3$name = _ref3.name,
+    name = _ref3$name === void 0 ? '' : _ref3$name,
+    src = _ref3.src,
+    _ref3$variant = _ref3.variant,
+    variant = _ref3$variant === void 0 ? 'light' : _ref3$variant,
+    _ref3$type = _ref3.type,
+    type = _ref3$type === void 0 ? defaultType : _ref3$type,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? '40px' : _ref3$size,
+    bg = _ref3.bg,
+    color = _ref3.color,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
+  var _useState = (0, React.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    imageFailedLoading = _useState2[0],
+    setImageFailedLoading = _useState2[1];
+  var initials = (0, React.useMemo)(function () {
+    return getInitials(name);
+  }, [name]);
+  var handleError = (0, React.useCallback)(function () {
+    setImageFailedLoading(true);
+  }, [setImageFailedLoading]);
+
+  // Font size for initials is half the size of the avatar, rounded down.
+  var fontSize = Math.floor(Number(size.replace('px', '')) * 0.4);
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    className: (0, _classnames.default)(variant),
+    size: size,
+    overflow: "hidden",
+    borderRadius: appearance === 'leaf' ? '40% 0 40% 0' : '50%',
+    position: "relative",
+    display: "flex",
+    flexShrink: 0,
+    justifyContent: "center",
+    alignItems: "center",
+    title: name,
+    bg: bg,
+    variant: variant,
+    type: type,
+    "data-qa-user-avatar": name
+  }, rest), !src || imageFailedLoading ? /*#__PURE__*/React.createElement(AvatarText, {
+    lineHeight: size,
+    fontWeight: "semibold",
+    fontSize: fontSize,
+    color: color
+  }, initials) : /*#__PURE__*/React.createElement(_Image.default, {
+    alt: name,
+    width: "auto",
+    height: "100%",
+    src: src,
+    onError: handleError,
+    m: 0
+  }));
+};
+exports.Avatar = Avatar;
+var _default = /*#__PURE__*/(0, React.memo)(Avatar);
+exports.default = _default;

package/commonjs/Avatar/AvatarTypes.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});