@sproutsocial/seeds-react-avatar 1.0.0 → 1.0.1

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ CLI Target: es2022
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     5.61 KB
-CJS dist/index.js.map 7.10 KB
-CJS ⚡️ Build success in 69ms
 ESM dist/esm/index.js     3.51 KB
 ESM dist/esm/index.js.map 7.00 KB
-ESM ⚡️ Build success in 75ms
+ESM ⚡️ Build success in 122ms
+CJS dist/index.js     5.62 KB
+CJS dist/index.js.map 7.10 KB
+CJS ⚡️ Build success in 122ms
 DTS Build start
-DTS ⚡️ Build success in 10367ms
+DTS ⚡️ Build success in 28176ms
 DTS dist/index.d.ts  1.53 KB
 DTS dist/index.d.mts 1.53 KB
-Done in 12.80s.
+Done in 35.15s.

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sproutsocial/seeds-react-avatar
 
+## 1.0.1
+
+### Patch Changes
+
+- 9fd8bac: Update dependencies to use semantic package version instead of wildcards
+- Updated dependencies [9fd8bac]
+  - @sproutsocial/seeds-react-system-props@3.0.2
+  - @sproutsocial/seeds-react-image@1.0.1
+  - @sproutsocial/seeds-react-theme@2.2.1
+  - @sproutsocial/seeds-react-text@1.3.1
+  - @sproutsocial/seeds-react-box@1.1.2
+
 ## 1.0.0
 
 ### Major Changes

package/dist/esm/index.js

@@ -22,8 +22,7 @@ var Container = styled(Box)`
   ${BORDER}
 `;
 var getInitials = (name, fallback = "?") => {
-  if (!name || typeof name !== "string")
-    return fallback;
+  if (!name || typeof name !== "string") return fallback;
   return name.replace(/\s+/, " ").split(" ").slice(0, 2).map((v) => v && v[0]?.toUpperCase()).join("");
 };
 var getAvatarColor = (name, type) => {
@@ -123,10 +122,10 @@ var AvatarColorOptions = {
 };
 
 // src/index.ts
-var src_default = Avatar_default;
+var index_default = Avatar_default;
 export {
   Avatar_default as Avatar,
   AvatarColorOptions,
-  src_default as default
+  index_default as default
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Avatar.tsx","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import { useState, useCallback, useMemo, memo, useEffect } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Image from \"@sproutsocial/seeds-react-image\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n  TypeAvatarProps,\n  TypeAvatarContainerProps,\n  TypeAvatarType,\n} from \"./AvatarTypes\";\n\nimport { BORDER } from \"@sproutsocial/seeds-react-system-props\";\n\nconst defaultType = \"neutral\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`\n  font-size: ${(props) => props.fontSize}px;\n  color: ${({ theme, type, color }) =>\n    color ? color : theme.colors.text.decorative[type]};\n`;\n\nconst Container = styled(Box)<TypeAvatarContainerProps>`\n  ${({ theme, $type, bg, borderColor, $displayFallback }) => css`\n    background: ${$displayFallback\n      ? bg\n        ? bg\n        : theme.colors.container.background.decorative[$type]\n      : \"none\"};\n    border: ${$displayFallback ? `1px solid` : \"none\"};\n    border-color: ${borderColor\n      ? borderColor\n      : theme.colors.container.border.decorative[$type]};\n    color: ${theme.colors.text.decorative[$type]};\n  `}\n\n  ${BORDER}\n`;\n\nconst getInitials = (name: string, fallback = \"?\"): string => {\n  if (!name || typeof name !== \"string\") return fallback;\n  return name\n    .replace(/\\s+/, \" \")\n    .split(\" \") // Repeated spaces results in empty strings\n    .slice(0, 2)\n    .map((v) => v && v[0]?.toUpperCase()) // Watch out for empty strings\n    .join(\"\");\n};\n\nexport const getAvatarColor = (\n  name: string,\n  type: TypeAvatarType\n): TypeAvatarType => {\n  if (type !== \"auto\") {\n    return type;\n  }\n\n  const colors: Array<TypeAvatarType> = [\n    \"purple\",\n    \"green\",\n    \"blue\",\n    \"yellow\",\n    \"red\",\n    \"orange\",\n  ];\n\n  // Condense the avatar name down into a number\n  const seed = name.split(\"\").reduce((seed, char) => {\n    return seed + char.charCodeAt(0);\n  }, 0);\n\n  // Use that seed modulo the number of available colors to generate\n  // a \"random\" color value which will always be consistent\n  // for a given string. As a failsafe, return neutral (this should never happen).\n  return colors[seed % colors.length] || \"neutral\";\n};\n\nexport const Avatar = ({\n  appearance = \"circle\",\n  name = \"\",\n  src,\n  type = defaultType,\n  size = \"40px\",\n  bg,\n  color,\n  initials,\n  ...rest\n}: TypeAvatarProps) => {\n  const colorType = getAvatarColor(name, type);\n  const [imageFailedLoading, setImageFailedLoading] = useState(false);\n\n  useEffect(() => {\n    // If the src changes, we need to invalidate the image failed to load flag\n    setImageFailedLoading(false);\n  }, [src]);\n\n  const displayInitials = useMemo(\n    () => initials || getInitials(name),\n    [initials, name]\n  );\n  const handleError = useCallback(() => {\n    setImageFailedLoading(true);\n  }, [setImageFailedLoading]);\n\n  // Font size for initials is half the size of the avatar, rounded down.\n  const fontSize = Math.floor(Number(size.replace(\"px\", \"\")) * 0.4);\n\n  return (\n    <Container\n      size={size}\n      overflow=\"hidden\"\n      borderRadius={appearance === \"leaf\" ? \"40% 0 40% 0\" : \"50%\"}\n      position=\"relative\"\n      display=\"flex\"\n      flexShrink={0}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      title={name}\n      bg={bg}\n      $type={colorType}\n      data-qa-user-avatar={name}\n      $displayFallback={!src || imageFailedLoading}\n      {...rest}\n    >\n      {!src || imageFailedLoading ? (\n        <AvatarText\n          lineHeight={size}\n          fontWeight=\"semibold\"\n          fontSize={fontSize}\n          type={colorType}\n          color={color}\n        >\n          {displayInitials}\n        </AvatarText>\n      ) : (\n        <Image\n          alt={name}\n          width=\"auto\"\n          height=\"100%\"\n          src={src}\n          onError={handleError}\n          m={0}\n        />\n      )}\n    </Container>\n  );\n};\nexport default memo(Avatar);\n","export const AvatarColorOptions = {\n  auto: \"auto\",\n  neutral: \"neutral\",\n  purple: \"purple\",\n  green: \"green\",\n  blue: \"blue\",\n  yellow: \"yellow\",\n  red: \"red\",\n  orange: \"orange\",\n} as const;\n","import Avatar from \"./Avatar\";\n\nexport default Avatar;\nexport { Avatar };\nexport * from \"./AvatarTypes\";\nexport { AvatarColorOptions } from \"./constants\";\n"],"mappings":"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","names":["seed"]}
+{"version":3,"sources":["../../src/Avatar.tsx","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import { useState, useCallback, useMemo, memo, useEffect } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Image from \"@sproutsocial/seeds-react-image\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n  TypeAvatarProps,\n  TypeAvatarContainerProps,\n  TypeAvatarType,\n} from \"./AvatarTypes\";\n\nimport { BORDER } from \"@sproutsocial/seeds-react-system-props\";\n\nconst defaultType = \"neutral\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`\n  font-size: ${(props) => props.fontSize}px;\n  color: ${({ theme, type, color }) =>\n    color ? color : theme.colors.text.decorative[type]};\n`;\n\nconst Container = styled(Box)<TypeAvatarContainerProps>`\n  ${({ theme, $type, bg, borderColor, $displayFallback }) => css`\n    background: ${$displayFallback\n      ? bg\n        ? bg\n        : theme.colors.container.background.decorative[$type]\n      : \"none\"};\n    border: ${$displayFallback ? `1px solid` : \"none\"};\n    border-color: ${borderColor\n      ? borderColor\n      : theme.colors.container.border.decorative[$type]};\n    color: ${theme.colors.text.decorative[$type]};\n  `}\n\n  ${BORDER}\n`;\n\nconst getInitials = (name: string, fallback = \"?\"): string => {\n  if (!name || typeof name !== \"string\") return fallback;\n  return name\n    .replace(/\\s+/, \" \")\n    .split(\" \") // Repeated spaces results in empty strings\n    .slice(0, 2)\n    .map((v) => v && v[0]?.toUpperCase()) // Watch out for empty strings\n    .join(\"\");\n};\n\nexport const getAvatarColor = (\n  name: string,\n  type: TypeAvatarType\n): TypeAvatarType => {\n  if (type !== \"auto\") {\n    return type;\n  }\n\n  const colors: Array<TypeAvatarType> = [\n    \"purple\",\n    \"green\",\n    \"blue\",\n    \"yellow\",\n    \"red\",\n    \"orange\",\n  ];\n\n  // Condense the avatar name down into a number\n  const seed = name.split(\"\").reduce((seed, char) => {\n    return seed + char.charCodeAt(0);\n  }, 0);\n\n  // Use that seed modulo the number of available colors to generate\n  // a \"random\" color value which will always be consistent\n  // for a given string. As a failsafe, return neutral (this should never happen).\n  return colors[seed % colors.length] || \"neutral\";\n};\n\nexport const Avatar = ({\n  appearance = \"circle\",\n  name = \"\",\n  src,\n  type = defaultType,\n  size = \"40px\",\n  bg,\n  color,\n  initials,\n  ...rest\n}: TypeAvatarProps) => {\n  const colorType = getAvatarColor(name, type);\n  const [imageFailedLoading, setImageFailedLoading] = useState(false);\n\n  useEffect(() => {\n    // If the src changes, we need to invalidate the image failed to load flag\n    setImageFailedLoading(false);\n  }, [src]);\n\n  const displayInitials = useMemo(\n    () => initials || getInitials(name),\n    [initials, name]\n  );\n  const handleError = useCallback(() => {\n    setImageFailedLoading(true);\n  }, [setImageFailedLoading]);\n\n  // Font size for initials is half the size of the avatar, rounded down.\n  const fontSize = Math.floor(Number(size.replace(\"px\", \"\")) * 0.4);\n\n  return (\n    <Container\n      size={size}\n      overflow=\"hidden\"\n      borderRadius={appearance === \"leaf\" ? \"40% 0 40% 0\" : \"50%\"}\n      position=\"relative\"\n      display=\"flex\"\n      flexShrink={0}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      title={name}\n      bg={bg}\n      $type={colorType}\n      data-qa-user-avatar={name}\n      $displayFallback={!src || imageFailedLoading}\n      {...rest}\n    >\n      {!src || imageFailedLoading ? (\n        <AvatarText\n          lineHeight={size}\n          fontWeight=\"semibold\"\n          fontSize={fontSize}\n          type={colorType}\n          color={color}\n        >\n          {displayInitials}\n        </AvatarText>\n      ) : (\n        <Image\n          alt={name}\n          width=\"auto\"\n          height=\"100%\"\n          src={src}\n          onError={handleError}\n          m={0}\n        />\n      )}\n    </Container>\n  );\n};\nexport default memo(Avatar);\n","export const AvatarColorOptions = {\n  auto: \"auto\",\n  neutral: \"neutral\",\n  purple: \"purple\",\n  green: \"green\",\n  blue: \"blue\",\n  yellow: \"yellow\",\n  red: \"red\",\n  orange: \"orange\",\n} as const;\n","import Avatar from \"./Avatar\";\n\nexport default Avatar;\nexport { Avatar };\nexport * from \"./AvatarTypes\";\nexport { AvatarColorOptions } from \"./constants\";\n"],"mappings":"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","names":["seed"]}

package/dist/index.js

@@ -28,13 +28,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Avatar: () => Avatar_default,
   AvatarColorOptions: () => AvatarColorOptions,
-  default: () => src_default
+  default: () => index_default
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/Avatar.tsx
 var import_react = require("react");
@@ -60,8 +60,7 @@ var Container = (0, import_styled_components.default)(import_seeds_react_box.def
   ${import_seeds_react_system_props.BORDER}
 `;
 var getInitials = (name, fallback = "?") => {
-  if (!name || typeof name !== "string")
-    return fallback;
+  if (!name || typeof name !== "string") return fallback;
   return name.replace(/\s+/, " ").split(" ").slice(0, 2).map((v) => v && v[0]?.toUpperCase()).join("");
 };
 var getAvatarColor = (name, type) => {
@@ -161,7 +160,7 @@ var AvatarColorOptions = {
 };
 
 // src/index.ts
-var src_default = Avatar_default;
+var index_default = Avatar_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Avatar.tsx","../src/constants.ts"],"sourcesContent":["import Avatar from \"./Avatar\";\n\nexport default Avatar;\nexport { Avatar };\nexport * from \"./AvatarTypes\";\nexport { AvatarColorOptions } from \"./constants\";\n","import { useState, useCallback, useMemo, memo, useEffect } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Image from \"@sproutsocial/seeds-react-image\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n  TypeAvatarProps,\n  TypeAvatarContainerProps,\n  TypeAvatarType,\n} from \"./AvatarTypes\";\n\nimport { BORDER } from \"@sproutsocial/seeds-react-system-props\";\n\nconst defaultType = \"neutral\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`\n  font-size: ${(props) => props.fontSize}px;\n  color: ${({ theme, type, color }) =>\n    color ? color : theme.colors.text.decorative[type]};\n`;\n\nconst Container = styled(Box)<TypeAvatarContainerProps>`\n  ${({ theme, $type, bg, borderColor, $displayFallback }) => css`\n    background: ${$displayFallback\n      ? bg\n        ? bg\n        : theme.colors.container.background.decorative[$type]\n      : \"none\"};\n    border: ${$displayFallback ? `1px solid` : \"none\"};\n    border-color: ${borderColor\n      ? borderColor\n      : theme.colors.container.border.decorative[$type]};\n    color: ${theme.colors.text.decorative[$type]};\n  `}\n\n  ${BORDER}\n`;\n\nconst getInitials = (name: string, fallback = \"?\"): string => {\n  if (!name || typeof name !== \"string\") return fallback;\n  return name\n    .replace(/\\s+/, \" \")\n    .split(\" \") // Repeated spaces results in empty strings\n    .slice(0, 2)\n    .map((v) => v && v[0]?.toUpperCase()) // Watch out for empty strings\n    .join(\"\");\n};\n\nexport const getAvatarColor = (\n  name: string,\n  type: TypeAvatarType\n): TypeAvatarType => {\n  if (type !== \"auto\") {\n    return type;\n  }\n\n  const colors: Array<TypeAvatarType> = [\n    \"purple\",\n    \"green\",\n    \"blue\",\n    \"yellow\",\n    \"red\",\n    \"orange\",\n  ];\n\n  // Condense the avatar name down into a number\n  const seed = name.split(\"\").reduce((seed, char) => {\n    return seed + char.charCodeAt(0);\n  }, 0);\n\n  // Use that seed modulo the number of available colors to generate\n  // a \"random\" color value which will always be consistent\n  // for a given string. As a failsafe, return neutral (this should never happen).\n  return colors[seed % colors.length] || \"neutral\";\n};\n\nexport const Avatar = ({\n  appearance = \"circle\",\n  name = \"\",\n  src,\n  type = defaultType,\n  size = \"40px\",\n  bg,\n  color,\n  initials,\n  ...rest\n}: TypeAvatarProps) => {\n  const colorType = getAvatarColor(name, type);\n  const [imageFailedLoading, setImageFailedLoading] = useState(false);\n\n  useEffect(() => {\n    // If the src changes, we need to invalidate the image failed to load flag\n    setImageFailedLoading(false);\n  }, [src]);\n\n  const displayInitials = useMemo(\n    () => initials || getInitials(name),\n    [initials, name]\n  );\n  const handleError = useCallback(() => {\n    setImageFailedLoading(true);\n  }, [setImageFailedLoading]);\n\n  // Font size for initials is half the size of the avatar, rounded down.\n  const fontSize = Math.floor(Number(size.replace(\"px\", \"\")) * 0.4);\n\n  return (\n    <Container\n      size={size}\n      overflow=\"hidden\"\n      borderRadius={appearance === \"leaf\" ? \"40% 0 40% 0\" : \"50%\"}\n      position=\"relative\"\n      display=\"flex\"\n      flexShrink={0}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      title={name}\n      bg={bg}\n      $type={colorType}\n      data-qa-user-avatar={name}\n      $displayFallback={!src || imageFailedLoading}\n      {...rest}\n    >\n      {!src || imageFailedLoading ? (\n        <AvatarText\n          lineHeight={size}\n          fontWeight=\"semibold\"\n          fontSize={fontSize}\n          type={colorType}\n          color={color}\n        >\n          {displayInitials}\n        </AvatarText>\n      ) : (\n        <Image\n          alt={name}\n          width=\"auto\"\n          height=\"100%\"\n          src={src}\n          onError={handleError}\n          m={0}\n        />\n      )}\n    </Container>\n  );\n};\nexport default memo(Avatar);\n","export const AvatarColorOptions = {\n  auto: \"auto\",\n  neutral: \"neutral\",\n  purple: \"purple\",\n  green: \"green\",\n  blue: \"blue\",\n  yellow: \"yellow\",\n  red: \"red\",\n  orange: \"orange\",\n} as const;\n"],"mappings":"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","names":["styled","Text","Box","seed","Image"]}
+{"version":3,"sources":["../src/index.ts","../src/Avatar.tsx","../src/constants.ts"],"sourcesContent":["import Avatar from \"./Avatar\";\n\nexport default Avatar;\nexport { Avatar };\nexport * from \"./AvatarTypes\";\nexport { AvatarColorOptions } from \"./constants\";\n","import { useState, useCallback, useMemo, memo, useEffect } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Image from \"@sproutsocial/seeds-react-image\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n  TypeAvatarProps,\n  TypeAvatarContainerProps,\n  TypeAvatarType,\n} from \"./AvatarTypes\";\n\nimport { BORDER } from \"@sproutsocial/seeds-react-system-props\";\n\nconst defaultType = \"neutral\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`\n  font-size: ${(props) => props.fontSize}px;\n  color: ${({ theme, type, color }) =>\n    color ? color : theme.colors.text.decorative[type]};\n`;\n\nconst Container = styled(Box)<TypeAvatarContainerProps>`\n  ${({ theme, $type, bg, borderColor, $displayFallback }) => css`\n    background: ${$displayFallback\n      ? bg\n        ? bg\n        : theme.colors.container.background.decorative[$type]\n      : \"none\"};\n    border: ${$displayFallback ? `1px solid` : \"none\"};\n    border-color: ${borderColor\n      ? borderColor\n      : theme.colors.container.border.decorative[$type]};\n    color: ${theme.colors.text.decorative[$type]};\n  `}\n\n  ${BORDER}\n`;\n\nconst getInitials = (name: string, fallback = \"?\"): string => {\n  if (!name || typeof name !== \"string\") return fallback;\n  return name\n    .replace(/\\s+/, \" \")\n    .split(\" \") // Repeated spaces results in empty strings\n    .slice(0, 2)\n    .map((v) => v && v[0]?.toUpperCase()) // Watch out for empty strings\n    .join(\"\");\n};\n\nexport const getAvatarColor = (\n  name: string,\n  type: TypeAvatarType\n): TypeAvatarType => {\n  if (type !== \"auto\") {\n    return type;\n  }\n\n  const colors: Array<TypeAvatarType> = [\n    \"purple\",\n    \"green\",\n    \"blue\",\n    \"yellow\",\n    \"red\",\n    \"orange\",\n  ];\n\n  // Condense the avatar name down into a number\n  const seed = name.split(\"\").reduce((seed, char) => {\n    return seed + char.charCodeAt(0);\n  }, 0);\n\n  // Use that seed modulo the number of available colors to generate\n  // a \"random\" color value which will always be consistent\n  // for a given string. As a failsafe, return neutral (this should never happen).\n  return colors[seed % colors.length] || \"neutral\";\n};\n\nexport const Avatar = ({\n  appearance = \"circle\",\n  name = \"\",\n  src,\n  type = defaultType,\n  size = \"40px\",\n  bg,\n  color,\n  initials,\n  ...rest\n}: TypeAvatarProps) => {\n  const colorType = getAvatarColor(name, type);\n  const [imageFailedLoading, setImageFailedLoading] = useState(false);\n\n  useEffect(() => {\n    // If the src changes, we need to invalidate the image failed to load flag\n    setImageFailedLoading(false);\n  }, [src]);\n\n  const displayInitials = useMemo(\n    () => initials || getInitials(name),\n    [initials, name]\n  );\n  const handleError = useCallback(() => {\n    setImageFailedLoading(true);\n  }, [setImageFailedLoading]);\n\n  // Font size for initials is half the size of the avatar, rounded down.\n  const fontSize = Math.floor(Number(size.replace(\"px\", \"\")) * 0.4);\n\n  return (\n    <Container\n      size={size}\n      overflow=\"hidden\"\n      borderRadius={appearance === \"leaf\" ? \"40% 0 40% 0\" : \"50%\"}\n      position=\"relative\"\n      display=\"flex\"\n      flexShrink={0}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      title={name}\n      bg={bg}\n      $type={colorType}\n      data-qa-user-avatar={name}\n      $displayFallback={!src || imageFailedLoading}\n      {...rest}\n    >\n      {!src || imageFailedLoading ? (\n        <AvatarText\n          lineHeight={size}\n          fontWeight=\"semibold\"\n          fontSize={fontSize}\n          type={colorType}\n          color={color}\n        >\n          {displayInitials}\n        </AvatarText>\n      ) : (\n        <Image\n          alt={name}\n          width=\"auto\"\n          height=\"100%\"\n          src={src}\n          onError={handleError}\n          m={0}\n        />\n      )}\n    </Container>\n  );\n};\nexport default memo(Avatar);\n","export const AvatarColorOptions = {\n  auto: \"auto\",\n  neutral: \"neutral\",\n  purple: \"purple\",\n  green: \"green\",\n  blue: \"blue\",\n  yellow: \"yellow\",\n  red: \"red\",\n  orange: \"orange\",\n} as const;\n"],"mappings":"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","names":["styled","Text","Box","seed","Image"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-avatar",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Seeds React Avatar",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,11 +18,11 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^*",
-    "@sproutsocial/seeds-react-system-props": "^*",
-    "@sproutsocial/seeds-react-box": "*",
-    "@sproutsocial/seeds-react-image": "*",
-    "@sproutsocial/seeds-react-text": "*"
+    "@sproutsocial/seeds-react-theme": "^2.2.0",
+    "@sproutsocial/seeds-react-system-props": "^3.0.1",
+    "@sproutsocial/seeds-react-box": "^1.1.1",
+    "@sproutsocial/seeds-react-image": "^1.0.0",
+    "@sproutsocial/seeds-react-text": "^1.3.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",